[JS] control flow statement

suuhyeony·2022년 8월 22일
0

crack JavaScript

목록 보기
6/18
post-thumbnail

제어문

조건에 따라 코드 블록을 실행하거나 반복 실행할 때 사용.
코드의 흐름을 인위적으로 제어할 수 있다.

1. 블록문 (block statement)

0개 이상의 문을 중괄호로 묶은 것으로 자바스크립트는 블록문을 하나의 실행 단위로 취급한다.
일반적으로 제어문이나 함수를 정의할 때 사용한다.

// 단독 블록문
{
  const foo = 10;
}

// 조건문에 쓰인 블록문
const x = 1;
if (x < 10) {
  x++;
} else if (...) {} else {}

switch (a) {
    case: ...
    default;
}

// 함수 정의에 쓰인 블록문
function sum(a, b) {
  return a + b
}

// 반복문
while(...) {}
for(...) {}
    
// try catch 문
try {} catch(e) {}

2. 조건문 (conditional statement)

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

1) if else 문

if (조건식1) {
  // 조건식1이 참일 때 실행
} else if (조건식2) {
  // 조건식2가 참일 때 실행
} else {
  // 조건식1과 조건식2가 모두 거짓일 때 실행
}

2) 삼항 조건 연산자

  • 조건에 따라 단순히 값을 결정하여 변수에 할당하는 경우 사용
  • if else 문보다 가독성이 좋으나, 너무 복잡한 경우에는 if else 문 사용하기
const x = 2;
const result = x % 2 === 0 ? '짝수' : '홀수';
console.log(result);  // 짝수

3. switch 문

주어진 표현식을 평가하여 그 값과 일치하는 표현식을 갖는 case 문으로 실행 흐름을 옮긴다.
일치하는 case 문이 없다면 실행 순서는 default 문으로 이동.

언제 쓰면 좋을까?

  • 조건이 너무 많아 if else문을 사용하기 힘들 때.
  • 표현식이 불리언 값보다는 다양한 상황(문자열 / 숫자 값)에 따라 실행할 코드 블록을 결정할 때.
switch (표현식) {
  case 표현식1:
    // 표현식 === 표현식1일 때 실행되는 문;
    break;  // break 문을 써주어야 다음 case 문으로 이동하지 않음!
  case 표현식2:
    // 표현식 === 표현식2일 때 실행되는 문;
    break;
  default:
    // 일치하는 case 문이 없을 때 실행되는 문;
    
 // 여러 개의 case 문을 하나의 조건으로 사용
 switch (month) {
   case 3: case 4: case 5:
     console.log('spring');
     break;

4. 반복문 (loop statement)

조건식의 평가 결과가 참인 경우 코드 블록 실행.
조건식이 거짓일 때까지 코드 블록을 계속 실행.

반복문 대체

  • forEach - 배열 순회 시
  • for ... in - 객체의 프로퍼티를 열거할 때
  • for ... of - 이터러블을 순회

1) for 문

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

for (let i = 0; i < 10; i++;) {
  console.log(i);
}
// 0 ~ 9
  • for 문을 실행하면 먼저 변수 선언문 let i = 0이 실행된다. (단 한번만 실행)
  • 조건식이 실행된다. 평가가 true면 코드 블록이 실행된다.
  • 코드 블록 실행이 종료되면 증감식이 실행되어 변수 값이 변화한다.
  • 다시 조건식이 실행되고, 평가 결과에 따라 코드 블록이 실행되거나 실행이 종료된다.

2) while 문

주어진 조건식의 평가 결과가 참이면 코드 블록을 반복 실행.

*for문은 반복 횟수가 명확할 때 사용하고, while 문은 반복 횟수가 불명확할 때 사용.

let count = 0;
while (count < 3) {
  console.log(count);  // 0 1 2
  count++;
}

// break문 삽입하여 무한루프 탈출
while (true) {
  consle.log(count);  // 0 ~ 9
  count++;
  if (count === 10) break;
}

3) do ... while 문

코드 블록을 먼저 실행하고 조건식을 평가. 무조건 한 번 이상 실행됨.

let count = 0;

do {
  console.log(count); // 0 1 2
  count++;
} while (count < 3);

5. break 문

반복문, switch문, 레이블 문의 코드 블록을 탈출.

*참고: 레이블문
객체와 헷갈리기 때문에 사용하지 않는 것을 추천.

outer: for (let i = 0; i < 3; i++) {
  for (let j = 0; j < 3; j++) {
    if (i + j === 3) break outer;
    console.log(`inner [${i}, ${j}]`);  // [1, 2] 일 때 멈춤
  }
}

6. continue 문

반복문의 코드 블록 실행을 현 지점에서 중단하고, 반복문의 증감식으로 실행 흐름을 이동.
(= 이번 턴만 건너뛴다)
break와 달리 반복문을 탈출하지는 않음.

const str = 'hello world';
const search = 'l';
let count = 0;

for (let i = 0; i < str.length; i++) {
  if (str[i] !== search) continue;
  count++;
}
// 3

참고: deep dive JS

profile
울보 개발자(멍.. 하고 울어요)

0개의 댓글