본문 바로가기

스터디/[모던 자바스크립트 deep dive] JS

#8. 제어문

1. 블록문

블록문은 0개 이상의 문을 중괄호로 묶은 것으로, 코드 블록 또는 블록이라고 부른다.
  • 자바스크립트는 블록문을 하나의 실행단위로 취급한다.
  • 제어문이나 함수를 정의할 때 사용하기도 하고, 단독으로 사용하기도 한다.
  • 블록문은 자체 종결성을 갖기 때문에 끝에 세미콜론을 붙이지 않는다.

2. 조건문

조건식의 평가 결과에 따라 블록문의 실행을 결정한다.
  • 자바스크립트는 if...else 문과 switch문 두 가지 조건문을 제공한다.
  • if else문은 논리적 참, 거짓으로 실행할 코드 블록을 결정한다.
  • switch문은 논리적 참, 거짓보다는 다양한 상황에 따라 실행할 코드 블록을 결정할 때 사용한다.
    • fall through : case문으로 실행 흐름이 이동하여 문을 실행했지만, 문을 실행한 후 switch 문을 탈출하지 않고 switch 문이 끝날 때까지 이후의 모든 case 문과 default 문을 실행하는 것 (break문을 사용하지 않았을 경우)

3. 반복문

반복문은 조건식의 평가 결과가 참인 경우 코드 블록을 실행하고 그 후 조건식을 다시 평가하여 여전히 참인 경우 코드 블록을 다시 실행한다.
  • 자바스크립트는 세 가지 반복문인 for문, while문, do..while문을 제공한다.
  • 자바스크립트는 반복문을 대체할 수 있는 forEach메서드, for...in문, for...of문과 같은 기능을 제공하기도 한다.
  • for문은 반복 횟수가 명확할 때 주로 사용하고, while은 반복 횟수가 불명확할 때 주로 사용한다.
  • for문의 변수 선언문, 조건식, 증감식은 모두 옵션이므로 반드시 사용할 필요는 없지만, 셋 다 선언하지 않으면 무한루프가 된다.

4. break 문

break문은 레이블 문, 반복문 또는 switch문의 코드 블록을 탈출한다.
  • 레이블 문 : 식별자가 붙은 문.
    • switch문의 case 문과 default 문도 레이블 문이다.
    • 레이블 문을 탈출하려면 break문에 레이블 식별자를 지정한다.
    • 중첩된 for문에서 내부 for문이 아닌 외부 for문을 탈출하려면 레이블 문을 사용한다.
    • 중첩된 for문 외부로 탈출할 때 유용하지만 그 밖의 경우에는 일반적으로 권장하지 않는다.
//foo라는 레이블 식별자가 붙은 레이블 문
foo: {
console.log('foo');
break foo; // foo 레이블 블록문을 탈출한다.
console.log(2);
}

console.log('Done!');
// outer리는 식별자가 붙은 레이블 for 문
outer: for (var i = 0; i < 3; i++) {
for (var j = 0; j < 3; j++) {
// i + j === 3이면 outer라는 식별자가 붙은 레이블 for 문을 탈출한다.
if (j + i === 3) break outer;
console.log( 'inner [${i}, ${j}] ');
}
console.log( 'Done! ');

5. continue 문

continue문은 반복문의 코드 블록 실행을 현 지점에서 중단하고 반복문의 증감식으로 실행 흐름을 이동시킨다.
var string = 'Hello Wor1d' ;
var search = '1' ;
var count = 0; 

// continue 문을 시용하지 않으면 if 문 내에 코드를 작성해야 한다.
for (var i = 0; i < string.length; i++) {
// ' l ' 이면 카운트를 증가시킨다.
	if (string[i] === search){
		count++;
}

// continue 문을 사용하면 if 문 밖에 코드를 작성할 수 있다.
for (var i = 0; i < string.length; i++) {
// 'l'이 아니면 카운트를 증가시키지 않는다.
	if (string[i] !== search) continue;
	
    count++;
}

'스터디 > [모던 자바스크립트 deep dive] JS' 카테고리의 다른 글

#10. 객체 리터럴  (0) 2024.03.30
#9. 타입 변환과 단축 평가  (0) 2024.03.30
#7. 연산자  (1) 2024.03.23
#6. 데이터 타입  (1) 2024.03.16
#5. 표현식과 문  (0) 2024.03.16