제어문이란?

제어문은 조건에 따라 코드 블록을 실행하거나 반복 실행할 때 사용한다. 일반적으로 코드는 위에서 아래 방향으로 순차적으로 실행된다. 제어문을 사용하면 코드의 실행 흐름을 인위적으로 제어할 수 있다.
[모던 자바스크립트 Deep Dive]

블록문

블록문은 0개 이상의 구문을 묶을 때 사용하는 것으로 한쌍의 중괄호로 구성하고 선택적으로 레이블을 붙일 수 있다. 변수에서 const, let의 블록레벨 스코프의 블록과 같은 범위이다.

{
  let name = "kim"
}

이것을 하나의 블록이라고 할 수 있고 자바스크립트는 블록을 하나의 실행 단위로 취급합니다.

조건문

조건문은 조건식의 평가에 따라 블록의 실행을 결정하는 것이다. 여기서 조건식은 ture, false의 블리언의 값으로 평가되는 표현식을 말하고 조건문에는 if else문과 switch문이 있다.

if else문

if(조건식) {
  // 블럭문1
} else {
  // 블럭문2
}

if else문은 위의 코드처럼 구성되어 있고 조건식의 평가 값이 true이면 블럭문1이 실행되고 false이면 블럭문2가 실행되는 것이다. 예를 들면

const name = "lee";
let age = 0;

if(name === "lee") {
  age = 26;
} else {
  age = 3;
}

console.log(age); // 26

이렇게 조건식이 true로 평가 되었기 때문에 위에 있는 블록문이 실행되어 age값이 26이 되었다.
하지만 조건식이 1개가 아닌 여러개 일 경우에는 else if문을 사용할 수 있다.

const name = "lee";
let age = 0;

if(name === "kim") {
  age = 2; // 블럭문1
} else if(name === "choi") {
  age = 3; // 블럭문2
} else {
  age = 26; // 블럭문3
}

console.log(age); // 26

조건식1이 true면 블럭문1이 실행되고 false면 조건식2를 평가한다. 조건식2가 true면 블럭문2가 실행되고 false면 블럭문3이 실행되게 된다.

if else문 → 삼항 조건 연산자

대부분의 if else문은 삼항 조건 연산자로 변경이 가능한데 다음과 같이 작성한다.

//if else문
const name = "lee";
let age = 0;

if(name === "lee") {
  age = 26;
} else {
  age = 3;
}

console.log(age); // 26

//삼항 조건 연산자
const name = "lee";
let age = 0;

age = name === "lee" ? 26 : 3;

console.log(age); // 26

name의 값이 "lee"와 같다를 코드로 name === "lee" ? 이렇게 작성하고 ture에는 26 : 3; 중 좌변의 26을 false이면 26 : 3;중 우변의 3을 사용하는 것이다.

switch문

switch문은 주어진 표현식을 평가하고 그것과 일치하는 case를 실행하는 역할을 한다.
구성은 다음과 같다

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

예를 들면

const areaCode = 02
let area;

switch (areaCode) {
  case 02:
    area = "Seoul";
    break;
  case 032:
    area = "Incheon";
    break;
  default:
    area = "can not find area";  
}

console.log(area); // Seoul

위의 코드에서 areaCode 값이 "02"이고 case 02:는 area에 "Seoul"을 할당해서 area의 값은 "Seoul"이 되는 것을 알 수 있다.