쫌만알자! (11) - 자바스크립트 제어문(1) - 조건문

자바스크립트에서는 조건문, 반복문 등의 제어문(control flow statement)이 있습니다. 제어문은 특정한 코드블록을 조건에 따라 실행하거나, 반복실행합니다.

프로그램은 위에서부터 아래로 순차적으로 실행되지만, 이런 제어문을 사용하면 실행 흐름을 조작할 수 있습니다.

❕ 참고

실행 흐름을 인위적으로 조작하는 것은 프로그램의 흐름을 알기 어렵고, 가독성을 해치기도 합니다. 따라서 요즈음 함수형 프로그래밍에서는 제어문 사용을 지양하고, 고차함수를 사용하는 등의 방법을 택하고 있습니다.

코드블록

코드블록은 {} 로 감싸져 있는 하나의 실행 단위를 의미합니다. 블록은 조건문이나 반복문 없이 단독으로도 사용될 수 있습니다. 다만 대부분 조건문, 반복문, 함수 선언문과 함께 사용합니다.

// 코드블록
{
  let foo = 100
}

let x = 10
if (x > 9) {
  console.log("wow!")
}

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

function sum(a, b) {
  return a + b
}

블록 스코프

소스코드를 작성했을 때, 소스코드의 범위를 스코프(scope) 라고 합니다.

스코프는 식별자 접근 규칙에 따라 달라지는 식별자의 유효 범위입니다. 코드블록도 블록 스코프인데요. 간단히 말하자면 블록 내에서 선언된 변수는 블록 내에서만 유효하다는 것입니다.
식별자에 따라 유효범위가 어떻게 달라지는지는 이후에 스코프를 배워보며 더 자세히 알아보겠습니다.

여기서는 {} 블록으로 나누어지는 것이 실행 단위라는 점만 기억하고 넘어갑시다.

조건문 (Conditional Statement)

조건문은 조건식의 평가 결과에 따라 코드블록의 실행 여부를 결정합니다.

조건식은 if ... else 혹은 switch 로 작성합니다.

if...else 문

if (조건식) {
  // 조건식이 true이면 실행
} else {
  // 조건식이 false이면 실행
}

if 뒤 괄호()에는 조건식을 넣어줍니다. 조건문은 true 혹은 false로 동작을 제어하기 때문에, if문에 들어갈 조건식은 값으로 평가될 수 있어야 합니다.

let x = 10

if (x > 9) {
  console.log("greater than 9")
} else {
  console.log("less than or equal to 9")
}

위 소스코드의 조건식은 x > 9로, true가 됩니다.
그럼 만약 조건식이 true 혹은 false인 boolean 값이 아닐 경우엔 어떻게 될까요?

자바스크립트의 암묵적 형변환에 의해 true 혹은 false 값으로 치환되어 조건문이 실행되게 합니다.

만약 여러 조건에 따라 실행될 코드를 추가하고 싶다면 else if를 추가로 작성할 수 있습니다.

if (조건식1) {
} else if (조건식2) {
} else {
}

else if와 else는 if...else 조건문에서 선택적입니다. 또한 if와 else는 한번 밖에 사용할 수 없지만, else if는 하나의 조건문 내에서 여러 번 사용될 수 있습니다.

다만 else if를 과도하게 많이 사용하는 것은 추천하는 방식이 아닙니다. else if는 기본적으로 아래 코드와 같습니다.

if (조건식1) {
} else {
  if (조건식2) {
  }
}

if 조건식1의 평가 걀과가 false일 때, 그리고 조건식2가 true 일때 실행되는 것입니다.

let x = 10

// if 조건문1
if (x > 9) {
  console.log("9보다 큼")
} else if (x > 8) {
  console.log("8보다 큼")
} else {
  console.log("???")
}

//if 조건문2
if (x > 9) {
  console.log("9보다 큼")
} else {
  if (x > 8) {
    console.log("8보다 큼")
  }
  console.log("???")
}

위 코드를 실행하면 콘솔에 찍힐 내용은 무엇일까요? 조건문1, 2 둘다 9보다 큼이 출력됩니다.

왜냐하면 이미 if(x > 9) 라는 조건이 true로 평가되고, 해당 코드블록의 코드가 실행되었기 때문입니다.

if...else 조건문을 사용할 때에 아무리 else if의 조건식이 참이더라도, if의 조건식이 이미 참이면 else if의 코드블록은 영원히 실행되지 않습니다.

지나치게 많은 조건들을 나열해 코드를 작성한다면, 어떤 코드블록이 실행될 지 예측하기 어렵겠죠? 따라서 과도한 if...else문 사용은 지양하는 것이 좋습니다.

switch 문

switch문은 표현식을 평가해 그 값과 일치하는 case문으로 흐름을 제어하는 조건문입니다.

case는 특정한 케이스일 경우~ 를 의미합니다. default는 case에 하나도 부합하지 않으면 기본적으로 실행될 동작을 작성합니다.

break는 일치하는 케이스를 찾았을 경우 실행을 멈추게 합니다.

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

if...else문의 조건식은 true 혹은 false로 평가되는 boolean 값이었는데요. switch 문에서의 표현식은 문자열이나 숫자가 많습니다. 표현식의 문자와 case가 맞을 때 실행되는 것이죠.

예제로 한번 살펴보겠습니다.

let day = ""

// getDay()는 일주일의 요일을 0부터 6까지의 숫자로 반환합니다.
// 일요일 = 0, 월요일 = 1 ...
switch (new Date("2022-10-05").getDay()) {
  case 0:
    day = "일"
  case 1:
    day = "월"
  case 2:
    day = "화"
  case 3:
    day = "수"
  case 4:
    day = "목"
  case 5:
    day = "금"
  case 6:
    day = "토"
  default:
    day = "유효하지 않은 요일!!"
}

console.log(day)

이렇게 작성을 해보았습니다. 글을 올린 오늘(22년 10월 5일)은 수요일입니다. day는 무엇으로 출력될까요?

결과는 유효하지 않은 요일!!입니다. 분명 case에서 3과 일치했을텐데 왜 default의 값이 출력되는걸까요?

바로 break가 없기 때문입니다. switch문은 기본적으로 표현식과 모든 case문을 한 번씩 대조합니다. 위 코드에서는 case 0부터 시작해 case 3에서 일치하는 케이스를 찾았지만, 그 다음 case 4... default까지 멈추지 않고 계속 실행된 것입니다.

따라서 일치하는 결과를 찾았으면 case를 찾는 것을 멈춰야 합니다.

break문을 작성한 코드를 확인해봅시다.

switch (new Date("2022-10-05").getDay()) {
  case 0:
    day = "일"
    break
  case 1:
    day = "월"
    break
  case 2:
    day = "화"
    break
  case 3:
    day = "수"
    break
  case 4:
    day = "목"
    break
  case 5:
    day = "금"
    break
  case 6:
    day = "토"
    break
  default:
    day = "유효하지 않은 요일!!"
}

console.log(day) // 수

잘 출력되는 것을 볼 수 있습니다.

결론

만약 if...else 문으로 해결할 수 있다면 switch문 보다는 if...else문이 좋습니다. 다만 앞서 말했다시피, else if가 많아져 가독성이 떨어지게 되는 경우는 switch 문으로 전환하는 것이 효과적입니다.

다음 글에서는 제어문 (2), 반복문에 대해 알아보겠습니다.

◾ 자바스크립트 연산자 👈 이전 글 보기
◾ 자바스크립트 제어문(2) - 반복문 👈 다음 글 보기

Yeony