반응형
삼항 연산자
우리는 어떠한 조건을 수행하는 로직을 작성할 때
보통 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 문 대신 너무 삼항 연산자를 중첩 사용하면 오히려 가독성이 떨어지니
효율적으로 상황에 맞게 사용하도록 하자.
반응형
'Coding Story > JAVASCRIPT' 카테고리의 다른 글
[ JavaScript ] 자바스크립트 map( ) 함수 (2) | 2020.11.20 |
---|---|
[ JavaScript ] 자바스크립트 배열 concat (0) | 2020.11.20 |
[ JavaScript ] 자바스크립트 화살표 함수 (0) | 2020.11.20 |
[ JavaScript ] 자바스크립트 템플릿 리터럴(Template Literal) (0) | 2020.11.19 |
[ JavaScript ] 자바스크립트 var, let, const 의 차이 (0) | 2020.11.19 |