JS 조건문의 중첩 / 조건부실행 ( && ) / 삼항 연산자와 단축평가 ( || )

 

 

만약 성인여성, 성인남성, 미성년 여성, 미성년 남성 이런식으로 구분을 하는 코드를 만든다고 생각해 보자.

 

일단 변수 설정 먼저 해야겟지??

 

let age = 20;

let gender = "여성";

 

if (age > 19 ) {

     if (gender === "여성") {

          console.log("성인 여성 입니다.");

     } else {

          console.log("성인 남성 입니다.");

     }

 

} else {

     if (gender === "여성") {

          console.log("미성년 여성 입니다.");

     } else {

          console.log("미성년 남성 입니다.");

     }

}

 

 

이런식으로 쓰면 된다.

이게 바로 if 문의 중첩!!

그런데 사실 이런식으로 많이쓰는 것은 좋은 방법은 아니다.

꼭 필요할 때에는 써야겟지만,

 

여러가지 문제점이 있다. 

1. 코드의 가독성이 떨어진다.
2. 코드의 유지보수가 어려워 진다. 

 

 

 

조건부 실행 ( && )

 

어떠한 조건에 들어왔을 때에만 실행하게 하는것

 

let x = 10;

 

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

 

어?? 이거 if 문으로 했던거를 이렇게 표현한거 아니야??? 라고 했던 분들

맞아여~~~~ 

이거 원래 if 문으로 표현하면,

 

let x = 10;

 

if (x > 0) {

     console.log("x는 양수입니다.");

}

 

요건데, 이걸 한줄로 표현할수 있는 아주 편리한 && 조건부 실행 이라는 기능~~~!!!

 

 

3항 연산자 /  단축 평가  ( || )

 

let y;

let z = y || 20;

 

console.log(z);  

 

이렇게 했을 때 결과값은 20이 나온다. 

왜일까?

 

일단 y는 undefined 값이다. 

그 상태에서 z 변수에 값으로 y || 20  을 넣어두었는데 이 말은

y값이 존재하지 않는 상태일 때, 20을 기본값으로 셋팅 해종~~~  

 

|| 연산자를 사용하여 단축 평가(short-circuit evaluation)를 할 수 있음!!!

변수 x가 존재하지 않는 경우, || 연산자는 false 값을 반환하고, 기본값으로 지정한 10을 반환한다!!

 

 

falsy 한 값, truthy 한 값.

만약

if (0) {

     console.log("hello");

}

라고 했을때 결과가 나오는지 보자. 

터미널에서 확인해 봤을때 아무것도 뜨지 않는다. 

그렇다면 해당 if 문에 조건으로 넣은 0 이라는 값은 falsy 하다는 말이다. 

 

이처럼  falsy 한 값들이 있다. 

0 , " " ,  null , undefined ,  NaN  ===  false