해당 게시물은 "모던자바스크립트 Deep Dive(위키북스)" 저서를 참고 및 인용 하였음을 알려드립니다.

 🔎    제어문

🔖  1.   블록문

• 0개 이상의 문을 중괄호{ }로 묶은 것으로, 코드 블록 또는 블록이라고 부른다.
• 단독으로 사용가능하나 일반적을 제어문이나 함수를 정의할 때 사용된다.
• 블록문은 언제나 🚫 자체 종결성을 갖기 때문에 끝에 세미콜론을 붙이지 않는다.

// 블록문
{
  var foo = 10;
}

// 제어문
var x = 1;
if (x < 10) {
  x++;
}

// 함수 선언문
function sum(a, b) {
  return a + b;
}

---

🔖  2.   조건문

• 주어진 조건식의 평가 결과에 따라 코드 블록의 실행을 결정
• 조건문은 불리언 값으로 평가될 수 있는 표현식이다.

📍  2.1    if ... else 문

• 조건식의 평가 결과에 따라

•   true일 경우 if 문의 코드 블록이 실행되고,
•   false일 경우 else 문의 코드 블록이 실행된다.

if (조건문) {
  	// 조건식이 참이면 이 코드 블록이 실행된다.
} else {
	// 조건식이 거짓이면 이 코드 블록이 실행된다.
}

• 조건식을 추가하고 싶을 때는 else if 문을 사용한다.

if (조건문) {
  	// 조건식1이 참이면 이 코드 블록이 실행된다.
} else if {
	// 조건식2이 참이면 이 코드 블록이 실행된다.
} else {
	// 조건식이 거짓이면 이 코드 블록이 실행된다.
}

📝  대부분의 if ... else 문은 삼항 조건 연산자로 바꿔 쓸 수 있다.

// x가 짝수이면 result 변수에 문자열 '짝수'를 할당하고, 홀수이면 문자열 '홀수'를 할당한다.
var x = 2;
var result;

if( x % 2) { // 2 % 2는 0이다. 이때 0은 false로 암묵적 강제 변환된다.
  result = '홀수';
} else {
  result = '짝수';
}

console.log(result); // 짝수

📝  위 예제를 삼항 조건 연산자로 바꿔 쓰면

var x = 2;

// 0은 false로 취급한다.
var result = x % 2 ? '홀수' : '짝수';
console.log(result); // 짝수

📝  경우의 수가 3가지인 경우

var x = 2;

// 0은 false로 취급한다.
var kind = num ? (num > 0 ? '양수' : '음수') : '영';

console.log(result); // 양수

📍  2.2    switch 문

• 주어진 표현식을 평가하여 그 값과 일치하는 표현식을 갖는 case 문으로 실행 흐름을 옮긴다.
• 표현식과 일치하는 case 문이 없다면 default 문으로 이동한다. default 문은 선택사항이다.

• if ... else 문      : 참 , 거짓으로 실행할 코드 결정
• swith 문            : 문자열, 숫자 등 다양한 상황에 따라 실행할 코드 결정

switch (표현식) {
  case 표현식1:
    switch 문의 표현식과 표현식1이 일치하면 실행될 문;
    break;
  case 표현식2:
    switch 문의 표현식과 표현식2이 일치하면 실행될 문;
    break;
  default:
    switch 문이 표현식과 일치하는 case 문이 없을 때 실행될 문;
}

📝 break가 없으면❓

• 표현식과 일치하는 case로 실행 흐름이 이동하여도 switch 문을 탈출하지 못하므로 default문이 실행된다. 이러한 현상을 ⛷ fall through라 한다.

---

🔖  3.   반복문

• 조건식의 평가 결과가 참인 경우 코드 블록을 실행, 그 후 조건식을 다시 평가하여 여전히 참인 경우 코드 블록을 다시 실행한다. 이는 조건식이 거짓일 때까지 반복된다.

📍  3.1    for 문

for (변수 선언문 또는 할당문; 조건식; 증감식) {
  조건식이 참인 경우 반복 실행될 문;
}

• for 문의 변수 선언문, 조건식, 증감식은 모두 옵션이므로 반드시 사용할 필요는 없다. 단, 어떤 식도 선언하지 않으면 무한루프가 된다.

// 무한루프
for (;;) {...}

• for 문 내에 for 문을 중첩해 사용할 수 있다. 이를 중첩 for 문이라 한다.

for (var i + 1; i <= 6, i++){
  for (var j = 1; j <= 6; j++){
    if (i + j === 6) console.log(`[${i}. ${j}]`);
  }
}

// [1, 5]
// [2, 4]
// [3, 3]
// [4, 2]
// [5, 1]

📍  3.2    while 문

• for 문       : 반복 횟수가 명확할 때 주로 사용하고
• while 문   : 반복 횟수가 불명확할 때 주로 사용한다.

• 조건식의 평가 결과가 불리언 값이 아니면 불리언 값으로 강제 변환하여 논리적 참, 거짓을 구별한다.

var count = 0;

// count가 3보다 작을 때까지 코드 블록을 계속 반복 실행한다.
while (count < 3) {
  console.log(count); // 0 1 2
  count++;
}

• 조건식의 평가 결과가 언제나 참이면 무한루프가 된다.

while (true) { ... }

📍  3.3    do ... while 문

• 코드 블록을 먼저 실행하고 조건식을 평가한다. 따라서 코드 블록은 무조건 한 번 이상 실행된다.

var count = 0;

// count가 3보다 작을 때까지 코드 블록을 계속 반복 실행한다.
do {
  console.log(count); // 0 1 2
  count++;
} while (count < 3);

---

🔖  4.   break문

• 레이블 문, 반복문(for, for...in, for...of, while, do...while) 또는 switch 문의 코드 블록을 탈출할 때 사용된다.
• 이외에 break 문을 사용하면 SyntaxError(문법 에러)가 발생한다.

if (true) {
  break; // Uncaught SyntaxError: Illegal break statement

📝 레이블 문❓

• 식별자가 붙은 문

// foo라는 레이블 식별자가 붙은 레이블 문
foo: console.log('foo');

• 중첩된 for 문의 내부 for 문에서 break 문을 실행
  → 내부 for 문을 탈출하여 외부 for 문으로 진입한다.

• 내부 for 문이 아닌 외부 for 문을 탈출하려면 레이블 문을 사용한다.

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

console.log('Done!');

---

🔖  5.   continue문

• 반복문의 코드 블록 실행을 현 지점에서 중단하고 반복문의 증감식으로 실행 흐름을 이동시킨다.
• break 문 처럼 반복문을 탈출하지는 않는다.

var string = 'Hello World.';
var search = 'l';
var count = 0;

// 문자열은 유사 배열이므로 for 문으로 순회할 수 있다.
for (var i = 0; i < string.length; i++) {
  // 'l'이 아니면 현 지점에서 실행을 중단하고 반복문의 증감식으로 이동한다.
  if (string[i] !== search) continue;
  count++;
}

console.log(count); // 3