JavaScript 조건문 과 falsy한 값과 truthy한 값

 

 

자바스크립트에서는 조건문을 사용하여 특정 조건을 만족하는 경우 코드를 실행 할 수 있다.

(물론 모든 언어에 다 있는 기능이다)

 

1. IF 문

1-1. 기본적인 if 문

let x = 10;

if (x > 0) {
  console.log("x는 양수입니다.");
}

 

변수 x가 양수인지를 판별하여, 양수인 경우 "x는 양수입니다."라는 메시지를 출력합니다.

if문은 조건이 참인 경우에만 코드를 실행하고, 조건에 부합하지 않을 경우 내부 로직이 실행되지 않는다.

let y = "hello world";
if (y.length >=5) {
    console.log(y.length);
}

 

변수 y의 길이를 측정하여, 5보다 크거나 같으면 길이를 출력합니다.

 

 

1-2. if-else문

let x = -10;

if (x > 0) {
  console.log("x는 양수입니다.");
} else {
  console.log("x는 음수입니다.");
}

 

변수 x가 양수인지를 판별하여, 양수인 경우 "x는 양수입니다."라는 메시지를 출력

그렇지 않은 경우 "x는 음수입니다."라는 메시지를 출력한다.

if-else문은 조건이 참인 경우와 거짓인 경우 각각 다른 코드를 실행합니다.

 

 

1-3. if-else if-else문

 

let x = 0;

if (x > 0) {
  console.log("x는 양수입니다.");
} else if (x < 0) {
  console.log("x는 음수입니다.");
} else {
  console.log("x는 0입니다.");
}

 

변수 x가 양수인지, 음수인지를 판별하여

변수 x가 0인 경우를 포함해 각각 다른 메시지를 출력한다.

 

let x = -1;
if (x < 5) {
  console.log("x는 5보다 작다");
} else if (x >= 0 && x < 10) {
  console.log("x는 0보다 크거나 같고 10보다 작다");
} else {
  console.log("x는 10보다 크다");
}

 

x를 판별하여 5보다 작으면 첫번째 조건의 메시지를 출력

0보다 크거나 같고, 10보다 작으면 두번째 조건의 메시지를 출력

두개의 조건에 부합하지 않을경우 10보다 크다를 출력한다.

 

if-else if-else문은 여러 개의 조건을 순서대로 비교하여, 해당하는 조건에 맞는 코드를 실행하는 로직이다.

 

 

 

2. SWITCH 문

let fruit = "사과";

switch (fruit) {
  case "사과":
    console.log("사과는 빨간색입니다.");
    break;
  case "바나나":
    console.log("바나나는 노란색입니다.");
    break;
  case "오렌지":
    console.log("오렌지는 주황색입니다.");
    break;
  default:
    console.log("해당하는 과일이 없습니다.");
    break;
}

 

switch문을 사용하여 과일의 종류에 따라 정해진 색상 문자열을 출력한다.

switch문은 변수의 값에 따라 여러 개의 조건(case) 중 하나를 선택하여 해당하는 코드를 실행한다.

default는 모든 경우에 맞지 않는 경우에 실행되는 코드를 작성하고, 반드시 모든 case 끝에는 break; 를 붙여주어야 한다.

 

 

 

3. 삼항 연산자 ( 조건문의 중첩 )

let age = 19;
let gender = '남성';

if (age >= 18) {
    if (gender === '남성') {
        console.log('성인 남성입니다.');
    } else {
        console.log('성인 여성입니다.');
    }
} else {
    if (gender === '남성') {
        console.log('미성년 남성입니다.');
    } else {
        console.log('미성년 여성입니다.');
    }
}

 

위의 코드는 변수 age 와 gender 를 중첩된 if문을 사용하여 구분하고, 성인남성 / 성인여성 / 미성년남성 / 미성년여성 을 구분하여 출력한다.

이렇게 여러번 중첩된 if문을 많이 쓰는 것은 좋지 않다.

코드의 가독성이 떨어지고, 코드의 유지보수가 어려워 지기 때문이다.

하지만 반드시 사용해야하는 상황에서는 꼭 써야 하기 때문에 구조를 이해하도록 하자.

 

let age = 20;
let message = (age >= 18) ? "성인입니다." : "미성년자입니다.";
console.log(message);   // "성인입니다."

 

삼항 연산자를 사용하여 변수 age가 18세 이상인 경우 "성인입니다.", 그렇지 않은 경우 "미성년자입니다."라는 메시지를 출력한다.

삼항 연산자는 if문과 비슷한 역할을 하며, 조건이 참인 경우와 거짓인 경우 각각 다른 값을 반환합니다.

 

 

 

4. 조건부 실행

4-1. AND 조건 &&

let x = 10;
if (x > 0) {
    console.log("x는 양수 입니다.");
}

 

위의 if 조건문은 줄여서 아래 코드처럼 사용할 수 도 있다.

let x = 10;
(x > 0) && console.log("x는 양수 입니다.");

 

위 코드는 x가 0보다 클때 라는 조건을 만족하면 오른쪽을 실행하는 조건부가 실행된다.

최근들어 상당히 많이 사용하는 세련된 코드 라고 한다.

 

 

4-2. OR 조건 || (삼항연산자와 단축평가)

let y;
let z = y || 20;

console.log(z);

 

위 코드를 실행 해보면 z 는 20이 출력된다.

해석해보면, y라는 값은 선언만 하고 값을 할당하지 않은 undefined 상태이다.

z라는 값에는 y가 undefined 상태일 경우 우측의 값을 할당해줘 라는 뜻이다.

 

 

5. falsy한 값과 truthy한 값

if (0) {
  console.log("이 코드는 실행되지 않습니다.");
}

if ("") {
  console.log("이 코드는 실행되지 않습니다.");
}

if (null) {
  console.log("이 코드는 실행되지 않습니다.");
}

if (undefined) {
  console.log("이 코드는 실행되지 않습니다.");
}

if (NaN) {
  console.log("이 코드는 실행되지 않습니다.");
}

if (false) {
  console.log("이 코드는 실행되지 않습니다.");
}

if (true) {
  console.log("Hello World");
}

 

falsy한 값들을 사용하여 if문의 조건을 만족시키지 못하도록 합니다. 0, 빈 문자열, null, undefined, NaN, false는 falsy한 값으로, if문의 조건을 만족시키지 못합니다. 그 외의 값들은 모두 truthy한 값으로, if문의 조건을 만족하여 내부의 로직을 실행한다.