[JavaScript] 자바스크립트 if문 조건문 이해하기

코드를 작성하다 보면 프로그램이 어떤 조건에 따라 다르게 동작해야 할 때가 필요하다.

 

자바스크립트에서는 이럴 때 if문과 삼항 연산자를 이용하면 되는데,

이번에는 if문에 대해서 정리해보자.

 

if 기본 문법

if (조건식) 동작;

if문은 if라는 키워드로 시작해서 소괄호를 열어 그 안에 조건식을 작성한 뒤, 바로 뒤에 조건식이 참일 경우에 동작할 코드를 작성하면 된다.

let a = 1;

if (a > 0) console.log('hello!'); // hello!

이렇게 한 줄로 작성해도 제대로 동작하지만, 일반적으로 이렇게 한 줄로 간단하게 동작할 코드를 작성하는 일이 많지 않기 때문에 두 가지 이상의 여러 가지 동작들을 작성해야 할 때는 중괄호로 블록 문을 만들어서 그 안에 코드를 담으면 된다.

let a = 1;

if (a > 0) {
    console.log('안녕하세요!'); // 안녕하세요!
    console.log('조건식이 true입니다!'); // 조건식이 true입니다!
}

참고로 보통 이렇게 여러 줄 코드를 작성할 때 중괄호로 블록문을 만들어주지만, if문을 한 줄로 작성하더라도 중괄호를 표기해주는 것이 가독성이 좋다는 의견도 있다.

else문

if문은 뒤에 else문을 붙여 조건식이 거짓일 때의 동작도 제어할 수 있다. 결국 else문을 활용하면 결국 조건식의 참과 거짓일 때 모두 특정한 동작들이 이뤄질 수 있도록 설계가 가능하다. 하지만 else는 if문에서 선택사항이니, 반드시 붙여야 할 필요는 없다는 것만 인지하자!

let a = 0;

if (a > 0) {
    console.log('안녕하세요!'); 
    console.log('조건식이 true입니다!');
} else {
    console.log('반갑습니다!'); //반갑습니다!
    console.log('조건식이 false입니다!'); // 조건식이 false입니다!
}

중첩

if문은 {} 중괄호로 감싸진 블록문을 통해서 구문을 구분하기 때문에, 블록 문 안에서 다시 또 조건문 작성이 가능하다.

let a = 2020;

if (a < 0) {
    console.log('안녕하세요!'); 
    console.log('첫번째 조건식이 true입니다!');
} else {
    if (a > 2000) {
        console.log('첫 번째 조건식은 false,'); // 첫 번째 조건식은 false,
        console.log('두 번째 조건식은 true입니다!'); // 두 번째 조건식은 true입니다!
    } else {
        console.log('첫 번째 조건식도 false,');
        console.log('두 번째 조건식도 false입니다.');
    }
} 

이렇게 하면 첫 번째 조건식이 false인 경우 else문 안으로 들어가게 되는데 else문 안에서 또다시 if문이 실행되기 때문에 한 번 더 조건식 평가를 하게 되는 형태로 코드를 작성할 수 있는 것이다. 하지만 이렇게 중첩해서 블록 문을 작성하는 것이 사람에 따라서는 가독성이 현저히 떨어져 보이기도 하는데 그런 경우에는 else if문을 활용할 수도 있다.

else if문

if문을 작성할 때 else if문을 활용하면 여러가지 조건식을 조금 더 깔끔하게(?) 중첩할 수 있다.
추가적으로 너무 당연한 이야길 수 있겠지만, else if문을 활용할 때 else는 반드시 마지막에 붙여야 한다. 중간에 else문이 들어가게 되면 첫 번째 조건식만 평가하고 전체적인 조건문이 종료가 되기 때문이다.

(물론 여기서도 else 문은 생략해도 되는 선택사항이다.)

let a = 2020;

if (a < 0) {
    console.log('안녕하세요!'); 
    console.log('첫번째 조건식이 true입니다!');
} else if (a > 2000) {
    console.log('첫 번째 조건식은 false,'); // 첫 번째 조건식은 false,
    console.log('두 번째 조건식은 true입니다!'); // 두 번째 조건식은 true입니다!
} else {
    console.log('첫 번째 조건식도 false,');
    console.log('두 번째 조건식도 false입니다.');
}

 

주의사항

처음 if문을 접할 때 생각보다 간과하는 부분이 있는데, 조건식 부분의 결과가 불린형으로 형 변환된다는 사실이다.

그렇기 때문에 반드시 비교연산자나 논리 연산자를 활용할 필요 없이, truthy 한 값을 넣어주거나, falsy 한 값을 넣어줘도 조건식으로 평가가 가능하다.

// 빈문자도 falsy한 값 입니다.
if('') {
    console.log('true');
} else {
    console.log('빈문자는 falsy한 값 입니다.');
}

// 숫자0도 falsy한 값 입니다.
if(0) {
    console.log('true');
} else {
    console.log('숫자0도 falsy한 값 입니다.'); 
}

// NaN도 falsy한 값 입니다.
if(NaN) {
    console.log('true');
} else {
    console.log('NaN도 falsy한 값 입니다.'); 
}

// false는 당연히 falsy한 값 입니다.
if(false) {
    console.log('true');
} else {
    console.log('false는 당연히 falsy한 값 입니다.'); 
}

// null도 falsy한 값 입니다.
if(null) {
    console.log('true');
} else {
    console.log('null도 falsy한 값 입니다.');
}

// undefined도 falsy한 값 입니다.
if(undefined) {
    console.log('true');
} else {
    console.log('undefined도 falsy한 값 입니다.'); 
}

// 그 밖의 값들은 대부분 truthy한 값 입니다.
if('값') {
    console.log('그 밖의 값들은 대부분 truthy한 값 입니다.');
} else {
    console.log('false');
}

truthy와 falsy값에 대한 이야기는 [JavaScript] 자바스크립트 형변환(Type Conversion) 이해하기 - 1의 마지막 부분에서 확인할 수 있다.