8장 제어문

 

📂8장 제어문

• 조건에 따라 코드 블록을 실행(조건문)하거나 반복 실행(반복문)할 때 사용.
• 코드의 실행 흐름을 인위적으로 제어할 수 있음.
• forEach, map, filter, reduce같은 고차 함수를 사용한 함수형 프로그래밍 기법에선 제어문의 사용을 억제하여 복잡성을 해결하기 위해 사용

블록문

• 0개 이상의 문을 중괄호로 묶은 것
• 코드 블록 또는 블록이라고도 함
• 하나의 실행 단위로 취급
• 블록문 끝에는 세미콜론을 붙이지 않음.
  • why? 세미콜론은 문의 종료를 의미하는 자체 종결성을 갖기 때문

// 블록문
{
  var foo = 10;
} // 블록문 끝엔 세미콜론x

//제어문
{
  var x = 1;
  if(x<10) {
    x++;
  }
}
// 함수 선언문
function sum(a,b) {
  return a+b;
}

---

조건문

• 조건식의 평가 결과에 따라 블록문의 실행을 결정.

if...else문

• 논리적 참 또는 거짓에 따라 실행할 코드 블록을 결정.
• 조건식은 불리언 값으로 평가될 수 있는 표현식.
  • 불리언 값으로 평가될 수 없으면? 자바스크립트 엔진에 의해 암묵적으로 불리언 값으로 강제 변환되어 실행할 코드 블록을 결정 => 9장 암묵적 타입 변환 참고.

if(조건문) {
  // 조건문이 true일때 이 부분에 적힌 코드 블록이 실행함.
} else {
  // 조건식이 false일때 이 부분에 적힌 코드 블록이 실행함.
}

// 조건이 여러개일때
if(조건문1) {
  // 조건문1이 true이면, 코드 블록 실행
} else if(조건문2) {
  // 조건문2가 true이면, 코드 블록 실행
} else {
  // 모든 조건문들이 false이면 , 코드 블록 실행
}

• 예제(if...else문)

  /** num이 짝수이면 result 변수에 "짝수", num이 홀수이면 "홀수"를 할당한다. **/
  const num = 2;
  let result;
  // 0은 false이다. 그러므로 2로 나누어 떨어지면 짝수이고 false이다.
  if(num % 2) result = "홀수";
  else result = "짝수" ;
  console.log(result) // 짝수

- 클린코드에선 else를 지양하라고 함. 아래 게시글을 참고하세요

[cleanCode] else을 왜 지양할까?

삼항 연산자

• 예제(삼항 연산자)

const num = 2;
let result = num%2 ? "홀수":"짝수";
console.log(result)

• 경우의 수가 3가지라면? 짝수 홀수 영

  const num = 2;
  let result = num ? (num%2 ? "홀수":"짝수") : "영";
  console.log(result)

  • num ? (num%2 ? "홀수":"짝수") : "영"
    밑줄 그인 부분부터 실행, 만약 num이 0이면 false임으로 result에 "영"을 할당함.
    하지만 위 조건에서 num은 2임으로 true임.
  • num%2 ? "홀수":"짝수"
    num이 2로 나눌때 나머지가 0이면 false임으로 짝수를 할당하고 나머지가 0이 아니면 true임으로 "홀수"를 할당함.

삼항 연산자를 잘 활용하는 방법

2022.12.10 - [분류 전체보기] - [CleanCode] 삼항연산자를 어떻게 다룰까?

[CleanCode] 삼항연산자를 어떻게 다룰까?

if...else문과 삼항연산자 어떤 상황에 사용할까?

• 단순히 값을 결정하여 변수에 할당하는 경우는 삼항 조건 연산자
• 실행해야 할 내용이 복잡하여 여러 줄의 문이 필요하다면 if...else문

switch문

• 주어진 표현식을 평가하여 그 값과 일치하는 표현식을 갖는 case 문으로 실행 흐름을 옮김.
• switch 문의 문자열이나 숫자 값인 경우가 많음
  • cf) if문은 논리적 참,거짓 (불리언 값)
• case 문은 표현식을 지정하고 콜론(:)으로 마침.
• default 문은 초기값, case문과 일치하는 표현식이 없으면 defalut 문으로 이동. (선택사항)

switch(표현식) {
  case 표현식1 :
    switch 문과 표현식1이 일치하면 실행함
    break ;
  case 표현식2 :
    switch 문과 표현식2이 일치하면 실행함
    break ;
  default :
    switch 문과 일치하는 case문이 없으면 실행함.
}

• 폴스루(fall through)

  const number5 = "five";
  let numberName;
  switch(number5) {
  case 1 : numberName = "one";
  case 2 : numberName = "two";
  case 3 : numberName = "three";
  case 4 : numberName = "four";
  case 5 : numberName = "five";
  default: numberName = "nothing";
  }
  console.log(numberName) // nothing

• - five가 출력되지 않고 nothing이 출력되는 이유는?
    - switch 문과 일차하는 case문으로 실행 흐름이 이동되어 문이 실행되었음.
    - 하지만 일치한 case문에서 탈출하지 못하고 계속 이동하게되어 default문까지 이동하게 됨.
    - 이러한 것을 폴스루하고 함.
• 해결 코드

const number5 = "five";
let numberName;

switch(number5) {
  case 1 : numberName = "one";
    break;
  case 2 : numberName = "two";
    break;
  case 3 : numberName = "three";
    break;
  case 4 : numberName = "four";
    break;
  case 5 : numberName = "five";
    break;
  default: numberName = "nothing";
}
console.log(numberName) // five

---

반복문

• 평가 결과가 참인 경우 코드 블록을 실행for문
• 조건식이 거짓으로 평가될 때까지 코드 블록을 반복 실행.

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

• 조건문 흐름 파악하기.

  for (let i = 0; i<2 ; i++) {
  console.log(i) // 0 1
  }

1. let i = 0 변수 선언문은 단 한번 실행됨. 현재 i = 0
2. i<2 현재 i는 0이니깐 true, 코드 블록 실행 // console.log(0)
3. i++ 로 인해 i는 +1을 해주어 현재 i = 1
4. 변수 선언문은 단 한번 실행 됨으로 조건문으로 넘어감.
5. i<2 현재 i는 1이니깐 true, 코드 블록 실행 // console.log(1)
6. i++ 로 인해 i는 +1을 해주어 현재 i = 2
7. i<2 현재 i는 2이니깐 false 반복 종료.

• 이중 for문을 더 알고 싶으면 아래의 게시글을 참고해주세요

2022.12.10 - [개발언어] - 이중 for문 흐름 이해하기

이중 for문 흐름 이해하기

while문

• 조건식의 평가 결과가 참이면 코드 블록을 계속 반복 실행함.
• 반복 횟수가 불명확할 때 사용
  • cf) for문은 반복 횟수가 명확할 때 사용
• 조건식이 불리언 값이 아니면 불리언 값으로 강제 변환함.

while(조건식) {
  // 조건과 일치하면 코드 블록 실행
}

• 무한 루프와 무한 루프 탈출법

  while(true){
  // 코드 블록 실행=> 멈추지 않고 계속 실행 => 무한 루프
  }
  
  while(true){
  // 코드 블록 실행
  if(조건) break; // if문의 조건문이 일치하면 break문으로 이동하여 탈출함.
  }

do...while문

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

let count = 0;

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

더 공부해야 할 부분

• 배열을 순회할때 사용하는 forEach
• 객체의 프로퍼티를 열거할때 사용하는 for...in
• ES6 이터러블을 순회할 수 있는 for...of

---

break문

• 레이블 문, 반복문(for, for...in, for...of, while, do...while), switch문의 코드 블록을 탈출함.
  • 만약 if문에 break을 쓰면 문법 에러(SyntaxError) 발생.

🔎 용어 정리

레이블 문 : 식별자가 붙은 문

  label :
       statement

• statement : 구문. break는 모든 레이블 구문에서 사용될 수 있음.
• strict mode에서 "let"을 레이블 이름으로 사용 할 수 없음.
• 프로그램 실행 순서을 제어하는 데 사용
• 중첩된 for문 외부로 탈출할 때 유용하지만 그 밖의 경우 권장하지 않음.
  • 흐름이 복잡해져서 가독성이 나빠지고 오류를 발생할 가능성이 높음.

var i, j;

loop1:
for (i = 0; i < 3; i++) {      //첫번째 for문은 "loop1" 레이블을 붙였다.
   loop2:
   for (j = 0; j < 3; j++) {   //두번째 for문은 "loop2" 레이블을 붙였다.
      if (i === 1 && j === 1) {
         continue loop1; // i = 1, j =1 이면 콘솔하지 않고 바로 증감식으로 넘어감.
      }
      console.log('i = ' + i + ', j = ' + j);
   }
}

// 출력 결과:
//   "i = 0, j = 0"
//   "i = 0, j = 1"
//   "i = 0, j = 2"
//   "i = 1, j = 0"
//   "i = 2, j = 0"
//   "i = 2, j = 1"
//   "i = 2, j = 2"

---

continue문

• 반복문의 코드 블록 실행을 현 지점에서 중단, 반복문의 증감식으로 실행 흐름을 이동시킴.

const str = "Hello World";
const search = "l"
let count = 0;

for(let i =0 ; i<str.length;i++) {
  // 'l'이 아니면 continue문 실행(현 지점에서 중단, i는 증감식으로 이동하여 +1)
  if(str[i] !== search) continue;
  count++ // str[i] === search이면 count++ 실행함./ continue가 실행되면 이 문은 실행X
}
console.log(count) //3

• continue를 쓰면 if문 밖에서 코드를 실행 할 수 있음.
• if문 내에서 실행해야 할 코드가 길어진다면 continue를 사용하는 편이 가독성이 더 높음.

---

[모던 자바스크립트 Deep Dive, ⌜이웅모 ⌟, 위키북스, 20210103]를 읽고 정리한 글입니다.