모던자바스크립트 Deep Dive - 8장 제어문

제어문(control flow statement)

- 조건에 따라 코드 블록을 실행(조건문)할 경우 혹은 반복 실행(반복문)할 경우 사용

- 가독성을 해칠 수 있음 ⇨ forEach, map, filter, reduce등과 함께 사용

 

블록문 : 0개 이상의 문을 중괄호로 묶은 것 = 코드 블록

✔️ 하나의 실행 단위로서 단독으로 사용하기 보단 제어문이나 함수 정의시 보통 사용

 

조건문

✔️ 주어진 조건식의 평가 결과(Boolean)에 따라 코드 블록 실행 결정

 

▪️ if-else문

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

if (condition) {
  //  block of code to be executed if the condition is true
} else {
  //  block of code to be executed if the condition is false
}

✅ 반드시 if문의 조건식이 Boolean값으로 평가되어야 함

⚠️ 그렇지 않을 경우 Javascript engine내에서 불리언값으로 강제로 변환돼 실행 ⚠️

 

▪️ if-else if-..else문

if (condition1) {
  //  block of code to be executed if condition1 is true
} else if (condition2) {
  //  block of code to be executed if the condition1 is false and condition2 is true
} else {
  //  block of code to be executed if the condition1 is false and condition2 is false
}

if (foo>0){
  sign='양수'
} else if (foo==0){
  sign='0'
} else {
  sign='음수'
}

console.log(sign) // '음수'

// 코드블록 내의 문이 하나라면 {} 생략 가능
if (foo>0) sign='양수'
else if (foo===0) sign='0'
else sign='음수'

console.log(sign) // '음수'

✅ 코드블록 내의 문이 하나라면 중괄호 {} 생략하여 표현가능

 

▪️ switch문

- 일치하는 case문이 없을 경우 default문(선택 사항)으로 이동

- 주어진 표현식을 평가해 값과 일치하는 표현식을 갖는 case문으로 실행 흐름을 옮김

- break문이 없다면 case문의 표현식과 일치하지 않아도 실행 흐름이 다음 case문으로 연이어 이동함 ⇨ 풀스루(full through) 되어버린다.

✔️ break문을 넣어주어야 함

switch (expression) {
  case value1:
    //Statements executed when the
    //result of expression matches value1
    [break;]
  case value2:
    //Statements executed when the
    //result of expression matches value2
    [break;]
  ...
  case valueN:
    //Statements executed when the
    //result of expression matches valueN
    [break;]
  [default:
    //Statements executed when none of
    //the values match the value of the expression
    [break;]]
}

let month=2;
let day;

switch(month){
  case 1: case 3: case 5: case 7: case 8: case 10: case 12:
    day=31; break;
  case 2: case 4: case 6: case 9: case 11:
    day=30; break;
  default:
    day='invalid'
}

console.log(day)

 

반복문

✔️ 조건식의 평가 결과가 참인 경우 코드 블록을 반복 실행

 

▪️ for문

for (변수 선언문 혹은 할당문; 조건식; 증감식) {
  // code block to be executed
}

// 구구단
for (let i=1; i<=9; i++){
  console.log(`${i}단 입니다.`)
  for (let j=1; j<=9; j++){
    console.log(`${i}*${j}=${i*j}`)
  }
}

 

▪️ while문

while (condition) {
  // code block to be executed
}

// 10까지 출력
let count=0;
while (count<=10){
  console.log(count);
  count++;
}

// 무한루프로 10까지 출력
let count=0;
while(1){
  console.log(count);
  count++;
  if(count>10){
    break
  }
}

✅ 주로 for문은 반복횟수가 명확할 때, while문은 불명확할 때 사용

 

▪️ do while문

- do-while문은 코드블록을 먼저 실행하고 조건식을 평가함 → 반복문은 무조건 최소 한번 이상 실행되게 됨!

do {
  // code block to be executed
}
while (condition);

// while문
while (count<0){
  console.log(count)
  count++
} 
// X

// do-while문
do {
  console.log(count)
  count++
} while (count<0) 
// 0

 

* 코드블록 제어기 - break, continue *

🔹 break문

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

- 반복문을 더 이상 진행하지 않아도 될 때 불필요한 반복을 회피할 수 있음

// 1~100까지 홀수합과 짝수합 구하기
let odd=even=0;
let i=1;
while(1){
  if(i>100) break
  if(i%2) odd+=i
  else even+=i
  i+=1
}
console.log(`1~100까지 홀수합: ${odd}`)
console.log(`1~100까지 짝수합: ${even}`)

🔸 continue문

- 반복문의 코드블록 실행을 현시점에서 중단하고 반복문의 증감식으로 실행 흐름을 이동

- break문처럼 반복문 자체를 탈출하는 게 아님

- continue문을 사용시 if문 밖에 코드를 작성할 수 있음

// 특정 문자열 개수 세기
let string='Hello Javascript'
const search='a'
let count=0

for(let i=0; i<string.length; i++){
  if (string[i]!==search) continue;
  count++
}
console.log(count) // 2

// continue문 쓰지 않고 단순 for문으로 구할 수 있음
let string='Hello Javascript'
const search='a'
let count=0

for(let i=0; i<string.length; i++){
  if (string[i]===search) count++
}
console.log(count) //2