[JavaScript] Double NOT(!!), Optional chaining(.?) Operator

🪩 Double NOT (!!)

!! 연산자는 논리 부정 연산자를 두 번 사용하여 값을 불리언으로 변환합니다. 즉, !! 연산자는 값이 어떤 형태이든 간에 항상 해당 값을 불리언으로 강제로 변환하여 반환합니다.

주로 !! 연산자는 변수나 표현식의 값을 명시적으로 불리언으로 변환해야 하는 상황에서 사용됩니다. 예를 들어, if문에서 변수의 값이 undefined, null, 0, NaN, '' (빈 문자열) 등으로 평가될 수 있는 경우에 이 값을 false로 변환하고, 그 외의 값은 true로 변환하기 위해 !!를 사용할 수 있습니다.

var value = null;
console.log(!!value); // false

value = 10;
console.log(!!value); // true

value = '';
console.log(!!value); // false

value = 'Hello';
console.log(!!value); // true

🪩 Optional chaining(?.)

?.는 옵셔널 체이닝 연산자(optional chaining operator)로, 객체의 속성 접근이나 메서드 호출을 할 때, 중간에 있는 속성이나 객체가 null 또는 undefined인 경우에도 에러를 발생시키지 않고 안전하게 접근할 수 있도록 도와줍니다.

옵셔널 체이닝 연산자 ?.의 사용법은 다음과 같습니다:

객체의 속성 접근에서 사용:

obj?.prop
obj?.['prop']

obj가 null 또는 undefined인 경우에도 속성 접근을 시도하며, obj가 null 또는 undefined일 경우에는 undefined를 반환합니다. 이를 통해 에러를 방지하고 코드를 안전하게 처리할 수 있습니다.

객체의 메서드 호출에서 사용:

obj?.method()

obj가 null 또는 undefined인 경우에는 메서드 호출을 시도하지 않고, 그대로 undefined를 반환합니다.

옵셔널 체이닝 연산자를 사용한 예시를 살펴보겠습니다:

const obj = {
  prop1: {
    prop2: {
      prop3: 'value'
    }
  }
};

console.log(obj?.prop1?.prop2?.prop3); // 'value'
console.log(obj?.prop1?.prop2?.prop4); // undefined

const arr = [1, 2, 3];
console.log(arr?.[2]); // 3

const nullObj = null;
console.log(nullObj?.prop); // undefined

const undefinedObj = undefined;
console.log(undefinedObj?.prop); // undefined

위의 예시에서는 옵셔널 체이닝 연산자 ?.를 사용하여 객체의 속성 접근과 배열 요소 접근을 안전하게 처리하고 있습니다. obj 객체의 prop1, prop2, prop3까지 연속적으로 안전하게 접근하여 값을 가져오고, 존재하지 않는 속성이나 객체에 접근할 때는 undefined를 반환합니다. 마지막 예시에서는 null 또는 undefined인 경우에도 안전하게 속성 접근이 가능합니다.

[출처: chatGPT]

🚀 TIL

• Double NOT (!!)
• Optional chaining(?.)