이미지09
Coding Story/JAVASCRIPT

[ JavaScript ] 자바스크립트 삼항 연산자, && 연산자, || 연산자

반응형

 

 

삼항 연산자

우리는 어떠한 조건을 수행하는 로직을 작성할 때 

 

보통 if 문을 사용해 아래와 같이 표현하곤 한다.

const done = true;

if(done === true) {
    const result = '참';
} else {
    const result = '거짓';
}

console.log(result); //참

 

이러한 if 문 ~ else 문을 삼항 연산자를 사용하면 보다 요약적이게 작성가능하다.

 

위의 코드를 삼항 연산자를 이용해 작성하면 아래와 같다.

const done = true;

//삼항연산자
const result1 = done === true ? '참' : '거짓';
console.log(result1); //참

 

이처럼 조건 ? 결과1 : 결과2 의 형태를 가진 걸 삼항 연산자라 하며,

 

조건이 참이면 결과1을 수행하고 거짓이면 결과2를 수행하게 된다.

 

만약 참이라는 조건을 걸고 싶으면 참은 아래처럼 조건을 생략해도 기본으로 참 조건으로 적용된다.

const done = true;

const result1 = done ? '참' : '거짓';
console.log(result1); //참

 

 

 

 

 

&& 연산자와 || 연산자

먼저 예제 코드를 살펴보자.

const done = true;

//&&연산자 - 본인이 참이면 오른쪽으로넘어감
const result1 = done === true && '참';
console.log(result1); //"참"

//||연산자 - 본인이 거짓이면 오른쪽으로 넘어감
const result2 = done === false || '거짓';
console.log(result2); //"거짓"

//||연산자 - 본인이 참이면 본인을 수행함
const result3 = done === true || '거짓';
console.log(result3); //true

 

우리가 알던 "그리고", "또는" 의 의미와는 조금 다르게 사용되어진다 할 수도 있는 문법이며,

 

&& 연산자는 본인(조건)이 참이면 오른쪽으로 넘어가 다른 녀석을 return 하고,

 

본인이 거짓이면 본인을 그대로 return 한다.

 

반대로 || 연산자는 본인이 참이면 본인을 그대로 return 하고,

 

본인이 거짓이면 오른쪽으로 넘어가 다른 녀석을 return 한다.

 

 

 

포스팅을 마치며,

 

삼항 연산자를 사용하면 보다 간단하게 코드를 줄일 수 있긴 하지만,

 

그렇다고 IF ~ ELSE 문 대신 너무 삼항 연산자를 중첩 사용하면 오히려 가독성이 떨어지니

 

효율적으로 상황에 맞게 사용하도록 하자.

 

 

 

반응형