[JS] : 조건부 실행 / 삼항 연산자와 단축평가

조건부 실행

조건이라 함은 자연스레 떠오르는 if문을 사용하지 않고도, 조건부 실행을 할 수 있는 코드가 있다고 한다.

예시코드

let x = 10;

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

and 조건 ( && )

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

출력 값

예시코드와 조건부 실행한 두 코드 동일하게

x는 양수입니다.

를 출력한다.

조건부 실행코드 해석

and 조건을 사용함으로써

&& 앞의 x > 0이 만족하면 ~
&& 뒤의 console.log()도 출력이 되는 것이다.

삼항 연산자와 단축평가

내가 아는 삼항연산자는

true ? console.log(true) : console.log(false)

? 앞의 조건이 "참"이라는 값을 나타내면 두번째 항을 실행시키고,

조건이 "거짓"을 나타내면 세번째 항을 실행시키는 형태를 가지는 것으로 알고있다.

헌데 지금 배우는 삼항연산자와 단축평가에는 위의 형태를 지니고 있진 않지만, 삼항연산자라는 타이틀을 갖고 있고, 코드가 신기하기 때문에 작성해둔다.

or 조건 ( | | )예시코드

let y;
let z = y || 20;

console.log(z);

출력 값

20

코드 해석

위 코드의 y는 선언만 되었을 뿐 어떠한 값도 할당되지 않았다.
따라서 현재 y는 undefined의 상태.

하지만 z에 y 또는 20을 할당하고 console.log를 확인해보면 20이 출력된다.

그렇다는것은 다음과 같이 해석할 수 있는 것 같다.

let으로 선언한 z의 값에 y 또는 20을 할당할건데~

y가 없으면 20을 할당해주세요.

궁금한 점

지금 위 코드 느낌이 구조분해 할당의 초기값 설정과 비슷한 느낌이기 때문에, y에 값을 할당하면 20은 어떻게 될까가 궁금했다.

예시코드

let y = 10;
let z = y || 20;

console.log(z);

출력 값

10

느낀점

간단한 조건을 실행시킬때는 if를 사용하지 않고, 조건부 실행으로 내가 원하는 코드를 만들 수 있을 것 같다.

또한 or조건은, 구조분해할당 초기값의 느낌으로 받아들이는데 거부감이 들지 않았다.

요즘은 이런식의 코드도 많이 구사를 한다고 한다.

나도 이것저것 더 알아보면서 익숙해지면 도움이 많이 될 것 같다.