JS Essential: 조건문

해당 게시물은 도서 <모던 자바스크립트 Deep Dive>와 패스트캠퍼스 강의 "김민태의 프론트엔드 아카데미 : 제 1강 JavaScript & TypeScript Essential"를 참고하여 작성되었습니다.

제어문의 정의

자바스크립트는 다양한 형태의 제어문을 갖추고 있습니다. 이러한 제어문을 써서 우리는 복잡한 로직들을 만들어 낼 수 있습니다.

이러한 제어문에는 블록문, 반복문, 조건문 등 여러 가지 종류의 타입이 있습니다.

그 중 조건문(conditional statement)은 주어진 조건식의 결과 값에 따라서 코드 블럭(블록문)의 실행을 결정하는 형태의 제어문입니다.

조건문은 다시 if 문과 switch 문으로 나뉘어지는데, 각각의 케이스를 나누어서 한번 설명해보도록 하겠습니다.

If 문

if 문은 자바스크립트에 갓 입문하신 분들도 아마 한번쯤은 보셨을거라고 생각합니다. 기본 구조는 다음과 같습니다.

let age = 20;

if(age === 20) {
	console.log('Age is 20.')
}
else {
	console.log('No Idea.')
}

age 변수에 20이라는 숫자를 할당해주었으므로 콘솔에는 "Age is 20." 이 찍히게 되겠군요.

보시는 것처럼, age === 20 과 같은 조건식을 추가하고, 그 조건이 참일 경우 뒤의 블럭문을 실행하는 구조입니다.

else는 if에서 사용했던 조건식이 참이 아닐 경우 실행하게 될 블럭문을 가지고 있습니다. 여기까지는 아주 간단합니다.

그런데 우리가 적용하고 싶은 조건이 많을 수도 있잖아요? 그럴 땐 if 문을 약간 변형하면 됩니다.

let age = 20;

if(age === 20) {
	console.log('Age is 20.')
}
else if (age === 10) {
	console.log('Age is 10.')
}
else if (age === 30) {
	console.log('Age is 30.')
}
else {
	console.log('No Idea.')
}

보시다시피, else if 라는 문법을 써서 추가적인 조건들을 붙여줬습니다.

if와 else if의 조건식에 하나도 부합하지 않는다면, 그때는 else 뒤의 블록문을 실행하게 되겠죠?

(조건식 안에는 저번 글에서 다루었던 논리 연산자나 비교 연산자도 사용할 수 있습니다!)

if 문은 기본적으로 if만 있으면 됩니다. 즉, else if는 물론이고 else도 생략 가능합니다. else 없이 조건문을 작성하면, if의 조건식이 참이 아닐 때 그냥 거기서 조건문이 끝납니다.

let age = 10;

if(age === 20) {
	console.log('Age is 20.')
}

그래서 이 코드 블럭은 결국 아무 일도 일어나지 않겠죠.

다음에 소개해 드릴 내용이 매우 중요한데, if 문의 조건식 처리에 관한 부분입니다.

기본적으로 if 문의 조건식은 값을 true 나 false를 반환하게 되어 있습니다. 더 자세하게 설명하자면, if 문은 조건식 안의 결과값을 언제나 Boolean 타입으로 변환한다는 얘기입니다.

그래서 원래는 Boolean 타입이 아닌 값을 넣어도 이를 참 또는 거짓으로 변환합니다. 다음 예시를 참고해보세요.

let age = 10;

if(age) {
	console.log('We got the age.')
}
else {
	console.log('No age.')
}

조건식 안에 달랑 변수 age 하나만 들어가 있습니다. 처음에 보면, age가 뭐 어쨌다고? 이런 생각이 드실거에요.

아까 말한 것 처럼, if 문은 조건식 안에 들어온 값들을 모두 Boolean으로 변환해서 내놓습니다. 따라서 age에 숫자값 10이 들어가 있고, 이는 truthy라고 판단되어 age라는 조건식은 참으로 간주되는 것입니다.

(truthy나 falsy에 대한 부분은 https://velog.io/@kite1993/JS-Essential-%EA%B0%92Value 를 참고하세요.)

Switch 문

이제 switch 문에 대해서 한 번 살펴 보겠습니다. 기본 구조는 다음과 같습니다.

참고로 default는 else 처럼 조건식에 하나도 부합하지 않았을 때 실행되는 것이고, break는 switch 문을 종료 시키는 코드입니다.

let age = 1;

switch(age) {
case 1: 
  console.log(1);
  case 2: 
    console.log(2);
  	case 3: 
    	console.log(3);
  	default:
    	console.log('??');
    break;
}

혹시 위 코드를 실행하면 콘솔에 어떤 숫자가 찍힐까요? age가 1이니까 case 1만 실행하지 않을까요?

하지만 아닙니다. 이 상태로는 코드를 실행하면 1, 2, 3 그리고 물음표 두 개까지 모든 코드가 실행이 됩니다.

왜 이런 일이 일어날까요? 그건 바로 switch 문의 작동 방식 때문입니다.

switch문은 case들을 쭉 훑어 내려가다가, 참인 case들의 코드를 실행합니다. 근데 거기서 멈추는 게 아니라, break를 만날 때 까지 자기 밑의 코드들을 계속 실행합니다.

age가 1이기 때문에, case 1에서 이미 조건식은 참이 되었을 것입니다. 그런데 break는 제일 밑에 있죠? 그래서 그 사이에 입력된 case 2, case 3, default의 코드까지 다 실행해버린 것이죠.

그래서 제가 보여드린 예시를 올바르게 쓰려면 다음과 같이 작성해야 할 것입니다.

let age = 1;

switch(age) {
case 1: 
  console.log(1);
    break
  case 2: 
    console.log(2);
    break
  	case 3: 
    	console.log(3);
    	break
  	default:
    	console.log('??');
    break;
}

이렇게 하면 진짜 참인 조건식 하의 코드만 실행하고 switch 문이 종료되겠죠?

결과적으로 switch 문은 하나의 값을 계속 비교해가면서 조건문을 실행하는 형태를 취하고 있습니다.

if 문을 사용하는 경우가 많지만, switch 문이 더 효율적인 경우도 많습니다. 둘 다 실제로 사용해보시고, 상황에 맞게 더 적합한 조건문 형태를 활용하시면 되겠습니다.