[자바스크립트] 삼항 조건 연산자, 옵셔널체이닝 연산자, null병합 연산자: 변수, 객체, 값의 null 체크 검사 방법

1. 조건에 따라 변수에 다른 값을 할당하거나, 

2. 변수의 null 값 검사를 하거나,

3. 객체의 null 체크를 할 때,

과거에는 주로 if문을 활용했었다.

// 1. 조건에 따른 변수 값 할당
let str = "";

if(5 > 3){
    str = "5가 3보다 커요";
}else{
    str = "5는 3보다 작아요";
}


// 2. 변수 null 체크
const response = "서버에서 받은 응답값";

if(response){
    console.log(response);
}else{
    console.log("결과 없음");
}


// 3. 객체 null 체크
const obj = {name: '카레유', job: '개발자'};

if(!obj){
    console.log('객체 없음');
}else{
    console.log(obj.name);
}

 

그러나 삼항연산자나 null병합연산자, 옵셔널체이닝연산자를 사용하면, 훨씬 더 효율적으로 코드를 작성할 수 있다.

// 1. 삼항 조건 연산자
const str = 5 > 3 ? "5가 3보다 커요" : "5는 3보다 작아요";


// 2. null 병합 연산자
const response = "서버에서 받은 응답값";
console.log(response ?? "결과 없음");


// 3. 옵셔널 체이닝 연산자
const obj = {name: '카레유', job: '개발자'};
console.log(obj?.name);

 

이 글은 삼항조건연산자, null병합연산자, 옵셔널체이닝연산자를 정리한다.

---

1. 삼항 조건 연산자(Ternary Operator)

- 형식:  조건 ? 값1 : 값2 

- 의미: 조건이 true이면 값1을 반환하고, 조건이 false이면 값2를 반환한다.

- 활용: 조건에 따라 변수에 다른 값을 할당할 수 있다.(여러번 중첩 사용 가능)

- 샘플코드: 

const result_01 = true ? "값1" : "값2";
console.log(result_01); // 값1


const result_02 = false ? "값1" : "값2";
console.log(result_02); // 값2


const result_03 = (5 > 3) ? "값1" : "값2";
console.log(result_03); // 값1


const result_04 = (3 > 5) ? "값1" : "값2";
console.log(result_04); // 값2


const result_05 = true ? true ? "값1" : "값2" : "값3"; // true ? (true ? "값1" : "값2") : "값3" 와 동일함
console.log(result_05); // 값1


const result_06 = false ? true ? "값1" : "값2" : "값3"; // false ? (true ? "값1" : "값2") : "값3" 와 동일함
console.log(result_06); // 값3

 

- 주의사항:  조건 부분에 false로 평가되는 0이나 ""(빈문자열) 등이 들어오면 예상치 못한 버그가 발생할 수 있다.

const num = 0;

const result_07 = num ? num : -1;

console.log(result_07); // -1

 

예를 들어 서버로부터 들어온 값이 0인 경우,

삼항연산자를 사용하면 false로 평가되는 버그가 발생할 수 있는 것이다.

(자바스크립트의 false => false, undefined, null, NaN, ""(빈 문자열), 0, -0 )

 

이런 위험이 있을 경우, null 병합 연산자나 옵셔널 체이닝 연산자를 사용해주는게 안전하다.

단, ES11(ECMAScript2020)부터 도입된 문법이라, 구형 브라우저에선 작동하지 않을 수 있다.

 

2. null 병합 연산자(Nullish Coalescing Operator)

- 형식:  값1 ?? 값2 

- 의미: 값1이 null, undefined가 아닌 경우에만, 값1을 반환한다. (값1이 null, undefined이면 값2를 반환한다.)

- 활용: 변수를 참조할 때, null 체크를 편하게 할 수 있다.(여러번 중첩 사용 가능)

- 샘플 코드 : 

console.log(null ?? '디폴트'); // 디폴트

console.log('안녕' ?? '디폴트'); // 안녕


const response_01 = null;
const result_01 = response_01 ?? '디폴트';
console.log(result_01); // '디폴트'


const response_02 = "안녕";
const result_02 = response_02 ?? '디폴트';
console.log(result_02); // '안녕'


const result_03 = null ?? null ?? '세번째';
console.log(result_03); // 세번째


const result_04 = null ?? "두번째" ?? '세번째';
console.log(result_04); // 두번째

 

- 주의사항: 값1이 false인 경우라도, null이나 undefined가 아니면 출력된다.(삼항조건연산자와 다르다)

const response_05 = 0;
const result_05 = response_05 ?? '디폴트';
console.log(result_05); // 0


const response_06 = "";
const result_06 = response_06 ?? '디폴트';
console.log(result_06); // ""

 

0, ""(빈문자열) 은 fasle로 평가되지만, null이나 undefined가 아니므로 출력된다.

 

3. 옵셔널 체이닝 연산자(Optional Chaining Operator)

- 형식:  객체?.키 

- 의미: 왼쪽 객체가 null, undefined가 아닌 경우에만, 객체.키 값을 참조한다.(왼쪽 객체가 null, undefined이면 undefiend를 반환한다)

- 활용: 객체의 프로퍼티를 참조할 때, null 체크를 편하게 할 수 있다.(여러번 중첩 사용 가능)

- 샘플 코드 : 

const obj_01 = null;

console.log(obj_01.name); // !!!Error발생!!!
console.log(obj_01?.name); // undefined 출력



const obj_02 = {
    name: '카레유',
    family : {
        father: '아빠',
        mother: '엄마'
    }
}

console.log(obj_02?.name); // '카레유' 출력
console.log(obj_02?.family?.mother); // '엄마' 출력

console.log(obj_02?.friends?.first); // 'undefined' 출력
console.log(obj_02.friends.first); // !!!Error발생!!!

 

 

- 주의사항: 왼쪽 객체가 false로 평가되더라도, null이나 undefined가 아니면 객체.키값을 참조한다.

const str = "";
console.log(str?.length); // 0

---

지금까지 정리한 삼항조건연산자, null병합연산자, 옵셔널체이닝연산자를 사용하면,

안전하고 효율적으로 값을 검사/참조/할당할 수 있다.

 

상황에 따라 적절히 선택해서 사용하면 된다.

 

이와 비슷한 문법으로 단축평가라는게 있는데, 궁금하다면 아래 글을 참고하자.

[자바스크립트] 논리연산자(&&, ||) 단축평가