[WEB] 옵셔널 체이닝 (?.), null (??) 병합 연산자 이게 뭐지?

 

안녕하세요 대추입니다.

오늘은 ES11부터 도입된 옵셔널 체이닝과 null 병합 연산자에 대해 기록하겠습니다.

 

간단하게 설명하자면 평소에 사용하던 논리연산자 '&&', '||' 를 응용했던 단축 평가와 거의 유사합니다.

옵셔널 체이닝과 null 병합 연산자를 이해하기 위해 먼저 단축 평가에 대해 알아보겠습니다.

 

1. 논리 연산자의 단축 평가

// 1. output: 'abcd'
false || 'abcd'

// 2. output: true
true || 'abcd'

// 3. output: false
false && 'abcd'

// 4. output: false
true && false

 

위와 같이 단축 평가라 함은 평가결과(TRUE or FALSE)가 결정된 부분에서 나머지를 생략하는 것을 말합니다

1번의 경우 '||' 연산자를 true로 만드는 부분이 'abcd'이기 떄문에 결과값이 'abcd' 입니다.

2번의 경우 '||' 연산자를 true로 만드는 부분이 true이기 때문에 뒤의 'abcd'의 평가가 생략되고 결과 값이 true 입니다.

3번의 경우 '&&' 연산자를 false로 만드는 부분이 false이기 때문에 뒤의 'abcd'의 평가가 생략되고 결과 값이 false 입니다.

4번의 경우 '&&' 연산자를 false로 만드는 부분이 false이기 때문에 앞의 결과 값이 false 입니다.

 

무슨 의미인지 대략 감이 오시죠?

'||' 연산자는 true로 만드는 시점 이후의 것들을 생략, '&&' 연산자는 false로 만드는 시점 이후의 것들을 생략합니다.

이를 활용해 조건이 false 또는 true 일때 무언가를 해야할때 활용을 하죠

// 1. '||' 연산자 활용 예시
let tmp = undefined || 'default value';
console.log(tmp);
// output: 'default value'


// 2. '&&' 연산자 활용 예시
let element = null;
let tmp = element && element.value;
console.log(tmp);
// output: null

 

'||' 연산자는 이처럼 어떤 인자라던가 변수의 값이 false일때의 경우에

초기 값을 지정하는 등의 방법으로 활용이 가능합니다.

'&&' 연산자는 어떤 객체의 프로퍼티를 접근할때 위와같이 묶어주면 객체가 null이거나 undefined 일 경우 발생하는

에러를 방지할 수 있습니다.

 

하지만 이 방법에는 단점이 있습니다.

개발자가 falsy 값 예를 들어 0, -0, '' 등이 넘어올때는 단축평가를 원하지 않으나 '&&', '||' 을 사용했을때

단축평가가 되버리는 경우가 있어 의도치 않은 동작을 할 수도 있습니다.

이를 보완한 것이 옵셔널 체이닝 (?.), null 병합 (??) 연산자 입니다.

 

2. 옵셔널 체이닝 연산자 (?.)

한 줄로 설명하자면 왼쪽의 연산자가 null 또는 undefined일때 undefined를 반환하고

오른쪽으로 이어가는 연산자입니다.

// 1. 옵셔널 체이닝 연산자 예시
let element = null;
console.log(element?.value);
// output: undefined

// 2. && 연산자 예시
let str = '';
console.log(str && str.length);
// output: ''

// 3. 옵셔널 체이닝 연산자 예시2
let str = '';
console.log(str?.length);
// output: 0

 

간단한 예시들 입니다.

1번의 경우 element가 null이기 때문에 undefined를 반환한 뒤 오른쪽으로 쭉 간 뒤에 undefined가 반환됩니다.

2번의 경우 str이 ''이지만 falsy한 값이기때문에 우측으로 넘어가지 못하고 단축평가되어 ''가 반환됩니다.

3번의 경우 str이 null, undefined가 아니기때문에 참조를 이어갑니다. 그래서 0이 반환됩니다.

 

예시를 보니 '&&'와 '?.' 연산자의 차이가 보이시나요?

옵셔널 체이닝 연산자는 참조값이 nullish 할때를 체크하기 위해 사용하거나 '&&' 연산자와 같이 값이 null인 객체의

프로퍼티를 접근할때도 사용 가능합니다. 비슷한 듯 다른 이 차이점을 이해해야 합니다.

'?.'은 null, undefined 일때만 단축평가, '&&'은 falsy한 (0, -0, '', NaN) 등일때 모두 단축평가입니다.

 

반응형

 

3. null 병합 연산자 (??)

null 병합 연산자를 한 줄로 정리하면 왼쪽의 연산자가 null, undefined라면 오른쪽 연산자를 반환

아니라면 왼쪽의 연산자를 반환하는 것입니다. 옵셔널 체이닝 연산자와 거의 유사합니다.

// 1. null 병합 연산자 예시
let tmp = null ?? 'default value';
console.log(tmp);
// output: 'default string'

// 2. '||' 연산자 예시
let tmp = '' || 'default value';
console.log(tmp);
// output: 'default value'

// 3. null 병합 연산자 예시2
let tmp = '' ?? 'default value';
console.log(tmp);
// output: ''

 

1번의 경우 왼쪽이 null이기 때문에 오른쪽의 'default value'가 반환됩니다.

2번의 경우 왼쪽이 falsy한 값이기 때문에 오른쪽으로 넘어가 truthy한 'default value'가 반환됩니다.

3번의 경우 왼쪽이 null, undefined가 아니기때문에 단축평가되어 ''가 반환됩니다.

 

예시를 보시면 아시겠지만 '||' 연산자와 거의 같은데 만약 사용자가 ''나 NaN 등의 falsy한 값들도 인정하겠다 할경우

유용하게 쓸 수 있는 연산자입니다.

예를 들어 null, undefined가 아닐때만 기본값으로 설정하는 경우에 사용하실 수 있습니다.

'||'경우 falsy한 일부 경우도 기본값으로 하고싶을때 할 수 없이 조건문을 달아 했어야 했지만, 훨씬 편리하게 되었습니다.

 

4. 옵셔널 체이닝, null 병합 연산자는 '&&', '||'의 완벽 대체인가요?

당연히 아닙니다. 반드시 체크하고 넘어가야 할 부분들이 있습니다.

4-1. ES11부터 지원하기때문에 동작하지 않는 브라우저가 있음

4-2. 존재하지 않아도 되는 경우 (옵셔널 체이닝), falsy한 값들이 사용되었을때를 모두 대처할수 있을 때 (null 병합) 사용

그 밖의 여러 제한 사항이 있을 수 있지만 일단 두 가지정도는 기억하시고 사용하시길 바라겠습니다.