[javascript] nullish 병합 연산자 (??)

Mandy·2022년 8월 14일
0
post-thumbnail

자바스크립트의 기초

intro. 본 포스팅은 아래의 강좌와 노션을 참조하였습니다.
강좌 링크 : https://www.youtube.com/watch?v=NQZZyVM8ksw&list=PLkfUwwo13dlUx9J5Wdmh0yiv0nJmalORJ
노션 주소 : https://paullabworkspace.notion.site/JS-22-6-8723b46e0cde4d90b020b689e5cb9f0a

자바스크립트란 무엇일까요?

JavaScript는 개발자가 대화식 웹 페이지를 만들기 위해 사용하는 프로그래밍 언어입니다. 소셜 미디어 피드 새로 고침부터 애니메이션 및 대화형 지도 표시에 이르기까지, JavaScript 함수는 웹 사이트의 사용자 경험을 개선할 수 있습니다. 클라이언트 측 스크립팅 언어로서 JavaScript는 월드 와이드 웹의 핵심 기술 중 하나입니다. 예를 들어 인터넷 탐색 시 웹 페이지에서 이미지 슬라이드쇼, 클릭하면 표시되는 드롭 다운 메뉴 또는 객체 색상의 동적 변화를 보게 된다면 이는 JavaScript의 효과를 보는 것입니다.
출처 : https://aws.amazon.com/ko/what-is/javascript/

자바스크립트는 쉽게말해 HTML과 CSS로 구성해놓은 페이지를 동적으로 활용할 수 있는 기능을 제공하는 언어라고 볼 수 있습니다.

자바스크립트는 vscode등의 에디터에서 .js 확장자로 생성할 수 있으며 html 내부에 script를 작성하는것과 외부에서 script를 불러오는것 모두가 가능합니다. 이러한 방식은 html 파일에서 css 파일을 불러와서 사용하는것과 비슷합니다.

자바스크립트에 대한 소개는 이정도 하면 될 것 같습니다!




본격적으로 자바스크립트에 대해 처음 알아가게 되면서 이해가 어려웠거나 새로운 내용에 대해서 다뤄볼까 합니다.


기존에 다른 언어를 배우셨다면 자바스크립트를 배우실 때도 비슷한 부분들이 보이실 것 같습니다. 조건문이나 반복문, 연산자등의 내용들은 다른 언어를 공부할때와 비슷한 패턴을 보였기 때문입니다.

다만, 처음 보는 형태의 연산자가 있어 알아보려 합니다.


Nullish coalescing operator (??)(널 병합 연산자 (??))

널 병합..?

널 병합 연산자 라고도 하는 이 연산자는 이름만 봐도 어떤 기능인지 감이 오는 다른 연산자에 비해 이름도 생소하고 생긴것도 생소하기 짝이 없었습니다.

이 연산자에 대해 알아본 바를 정리하자면 아래와 같습니다.

문법

A ?? B

상세

  1. 널 병합 연산자 (??) 는 왼쪽 피연산자가 null 또는 undefined일 때 오른쪽 피연산자를 반환하고, 그렇지 않으면 왼쪽 피연산자를 반환하는 논리 연산자입니다.
    널 병합 연산자는 만약 왼쪽 표현식이 null 또는 undefined인 경우, 오른쪽 표현식의 결과를 반환합니다.

=> A ?? B 일 때 A가 null 또는 undefined이면 B 반환! null 또는 undefined이 아니면 A 반환!

  1. nullish 병합 연산자(nullish coalescing operator) ??를 사용하면 짧은 문법으로 여러 피연산자 중 **그 값이 ‘확정되어있는’ 변수를 찾을 수 있습니다.

=> 한마디로 null이나 undefined가 아닌 값을 찾을 수 있습니다!

  1. ||는 첫 번째 *truthy 값을 반환합니다.
    ??는 첫 번째 정의된(defined) 값을 반환합니다.
    null과 undefined, 숫자 0을 구분 지어 다뤄야 할 때 이 차이점은 매우 중요한 역할을 합니다.
    [용어 참조]
    *. Falsy값 : 거짓 같은 값(Falsy, falsey로 쓰이기도 함) 값은 boolean 문맥에서 false로 평가되는 값입니다.=> false, 0, -0, 0n, "", null, undefined, NaN
    *. Truthy값 : 참 같은 값(Truthy) 값은 boolean을 기대하는 문맥에서 true로 평가되는 값입니다. 따로 거짓 같은 값으로 정의된 값이 아니면 모두 참 같은 값으로 평가됩니다.

3번 내용에 대한 예시는 아래와 같습니다.

[예시 1]

height = height ?? 100; 		//height = 100

height라는 변수의 값이 할당되지 않은 상태에서 ?? 연산자를 이용한다면 height은 undefined 이기에 오른쪽 피연산자인 100을 반환합니다.

[예시 2]

let height = 0;

alert(height || 100); 			// 100
alert(height ?? 100); 			// 0

height || 100은 height에 0을 할당했지만 0을 *falsy 한 값으로 취급했기 때문에 null이나 undefined를 할당한 것과 동일하게 처리합니다. 따라서 height || 100의 평가 결과는 100입니다.

반면 height ?? 100의 평가 결과는 height가 정확하게 null이나 undefined일 경우에만 100이 됩니다. 예시에선 height에 0이라는 값을 할당했기 때문에 alert창엔 0이 출력됩니다.

이런 특징 때문에 높이처럼 0이 할당될 수 있는 변수를 사용해 기능을 개발할 땐 ||보다 ??가 적합합니다.

  1. 안정성 관련 이슈 때문에 AND (&&) 와 OR 연산자 (||)를 ??와 직접적으로 결합하여 사용하는 것은 불가능합니다. 이 경우 SyntaxError가 발생됩니다.
null || undefined ?? "Hello"; // SyntaxError 발생
true || undefined ?? "Hello"; // SyntaxError 발생

그러나 우선 순위를 명시적으로 나타내기 위해 괄호를 사용하면 가능합니다

(null || undefined ) ?? "Hello"; // "Hello"를 리턴합니다.
  1. 널 병합 연산자는 연산자 우선 순위가 다섯번째로 낮은데, || 의 바로 아래이며 조건부 (삼항) 연산자의 바로 위입니다.

nullish 병합 연산자 ??없이 x = a ?? b와 동일한 동작을 하는 코드는 아래와 같습니다.

x = (a !== null && a !== undefined) ? a : b;

널 병합 연산자를 사용하면 위처럼 길고 복잡하게 연산자를 사용할 필요 없이 null 또는 undefined이 아닌 확정된 값을 찾아낼 수 있으니 코드가 더 간결하고 편리하게 작성될 수 있겠습니다!

널 병합 연산자에 대해 알아보면서 어떠한 기능을 하는 연산자인지 파악할 수 있는 유익한 시간이였습니다.

이제는 널 병합 연산자를 적당한 위치에 삽입하여 사용할 수 있을것 같습니다.






출처 :
1. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator
2. https://ko.javascript.info/nullish-coalescing-operator

profile
즐코 행코 하세용

0개의 댓글