TIL - 나의 앱웹을 지켜줄 연산자 모음( ?. , ?? )

jake·2022년 2월 23일
0

TIL

목록 보기
40/54
post-thumbnail

내 프로그램이 죽지 않게하기위해 연산자를 잘 써야한다.

널 병합 연산자 (??)

MDN
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator

널 병합 연산자 (??) 는 왼쪽 피연산자가 null 또는 undefined일 때 오른쪽 피연산자를 반환하고, 그렇지 않으면 왼쪽 피연산자를 반환하는 논리 연산자이다.

이는 왼쪽 피연산자가 null 또는 undefined 뿐만 아니라 falsy 값에 해당할 경우 오른쪽 피연산자를 반환하는 논리 연산자 OR (||)와는 대조된다. 다시 말해 만약 어떤 변수 foo에게 falsy 값( '' 또는 0)을 포함한 값을 제공하기 위해 ||을 사용하는 것을 고려했다면 예기치 않는 동작이 발생할 수 있다. 하단에 더 많은 예제가 있다.

  • 사용 예제
const foo = null ?? 'default string';
console.log(foo);
// expected output: "default string"

const baz = 0 ?? 42;
console.log(baz);
// expected output: 0
  • 널 병합 연산자와 옵셔널체이닝 같이사용하기
let customer = {
  name: "Carl",
  details: { age: 82 }
};
const customerCity = customer?.city ?? "Unknown city";
console.log(customerCity); // Unknown city

옵셔널 체이닝

MDN
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Optional_chaining

약 참조가 nullish (en-US) (null 또는 undefined)이라면, 에러가 발생하는 것 대신에 표현식의 리턴 값은 undefined로 단락된다. 함수 호출에서 사용될 때, 만약 주어진 함수가 존재하지 않는다면, undefined를 리턴한다.

적용전과 적용후는 동일한 코드지만 옵셔널 체이닝을 쓰고 안쓰고의 차이이다.

// 적용전
let temp = obj.first;
let nestedProp = ((temp === null || temp === undefined) ? undefined : 
temp.second);

// 적용 후 
let nestedProp = obj.first?.second
만약 first가없다면 undefiend로 반환된다.

빈배열은 []은 === null, undefiend를 했을 때 false가 나온다.

때문에 [] 변수를 옵셔널 체이닝으로 ?. 비교했을때 null,undefiend가 아니라서 빈배열 값이 변수에 들어간다.

( Logical nullish assignment (??=) - JavaScript | MDN

MDN
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_nullish_assignment

식 및 연산자 - JavaScript | MDN

자바스크립트 모든 연산자
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators

profile
열린 마음의 개발자가 되려합니다

0개의 댓글