Optional Chaining / JS Array.some() / 논리 연산자

★ Optional Chaining : 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근 가능하도록 해주는 것으로 필요한 상황의 예시는 다음과 같다.

=> 1) 사용자가 여러 명 있는데 그 중 몇 명은 주소 정보를 가지고 있지 않다 가정했을 때, user.address.street를 사용해 주소 정보에 접근하면 에러가 발생될 수 있음

let user = {};

alert(user.address.street); // TypeError : Cannot read property 'street' of undefined 

2) 브라우저에서 동작하는 코드 개발 시 발생하는데, JS를 사용해 페이지에 존재하지 않는 요소에 접근해 요소의 정보를 가져오려 할 때 발생될 수 있음

let html = document.querySelector('.my-element').innerHTML; // 호출 결과가 null일 때 에러 발생

 

★ '?.' : '?.' 앞의 평가 대상이 undefined나 null일 경우 평가를 멈추고 undefined를 반환함(앞 평가 대상에만 동작하고 확장은 되지 않음)

=> 1 수정) alert(user?.address?.street); // undefined가 출력되며 에러가 발생하지 않음 

 

※ '?.'는 존재하지 않아도 괜찮은 대상해만 사용해야 한다. 위 1번 예시에서 논리상 user는 반드시 있어야 하지만 address는 필수 값이 아니므로 user.address?.street으로 사용하는 것이 바람직함

=> 실수로 user에 값을 할당하지 못했다면 바로 알아낼 수 있도록 해야 에러를 조기에 발견하고 디버깅이 편해짐

 

※ '?.' 앞의 변수는 꼭 선언되어 있어야 한다. 옵셔널 체이닝은 선언이 완료된 변수를 대상으로만 동작하기에 해당 변수가 선언되어 있지 않다면 에러가 발생한다.

 

☆ 단락 평가 : '?.'는 왼쪽 평가 대상에 값이 없으면 즉시 평가를 멈춥니다. 이러한 평가 방법을 단락 평가(short-circuit)라 부른다. 그러기에 함수 호출을 비롯한 '?.' 오른쪽에 있는 부가 동작은 '?.'의 평가가 멈췄을 때 더 일어나지 않는다.

=> 예시) let user = null; let x =0;

               user?.sayHi(x++); // 아무일도 일어나지 않는다.

               console.log(x) // 0, x는 증가하지 않는다.

 

★ '?.()' / '?.[]' : '?.'는 연산자가 아닌 함수나 대괄호와 함께 동작하는 특별한 문법 구조체이다. ()는 obj?.method()로 obj가 존재할 시 obj.method를 호출하고 그렇지 않으면 undefined를 반환하고 []는 obj?.[prop]로 obj가 존재할 시 obj[prop]을 반환하고 그렇지 않으면 undefined를 반환한다.

 

※ '?.'는 delete와 조합해 사용할 수 있음( delete user?.name; // user가 존재하면 user.name을 삭제) 하지만 '?.'는 쓰기에는 사용할 수 없다(읽기와 삭제만 가능) -> 할당 연산자 왼쪽에 사용이 불가능 함

=> ex) user?.name = "violet"; // SyntaxError로 undefined = "Violet"이 되기에 에러가 발생

 

※ 정리 : 옵셔널 체이닝은 왼쪽 평가 대상이 null이거나 undefined인지 확인하고 null이나 undefined가 아니라면 평가를 계속 진행한다. '?.'를 계속 연결해 체인을 만들면 중첩 프로퍼티들에 안전하게 접근이 가능하고 '?.'는 왼쪽 평가 대상이 없어도 괜찮은 케이스에만 선택적으로 사용해야 한다!

 

출처 : https://ko.javascript.info/optional-chaining#ref-713

옵셔널 체이닝 '?.'

 

 

★ Array.some() : 배열 안의 어떤 요소라도 주어진 판별 함수를 적어도 하나라도 통과하는지 테스트하는 메서드로 만약 배열에서 주어진 함수가 true를 반환하면 true를 반환하고 그렇지 않으면 false를 반환한다.(원본 배열은 변경하지 않음)

 

ex 1) function isBiggerThan10(element, index, array) { return element > 10; }

[2, 5, 8, 1, 4].some(isBiggerThan10); // false     ( = [2, 5, 8, 1, 4].some((x) => x > 10)

[12, 5, 8, 1, 4].some(isBiggerThan10); // true     ( = [12, 5, 8, 1, 4].some((x) => x > 10)

ex 2) const fruits = ["apple", "banana", "mango", "guava"];

function checkAvailability(arr, val) { return arr.some((arrVal) => val === arrVal); }

checkAvailability(fruits, "kela");  // false

checkAvailability(fruits, "banana");  // true

 

 

★ ?? 널 병합 연산자(Nullish coalescing operator) : 좌항의 값이 null 또는 undefined인 경우에만 우항의 값을 반환하고 그 외의 경우는 좌항의 값을 반환 해주는 연산자(옵셔널 체이닝 연산자와 함께 사용되기도 함)

 

★ !! 이중 부정 연산자(double negation operator) : !!를 사용해 값을 boolean 값으로 명시적으로 변환을 해주는 연산자로 null 또는 undefined인 경우에도 명시적으로 false 값을 얻을 수 있음

ex) let x = null;

      console.log(x); // null

      console.log(!!x); // false

 

★ ~ 비트 부정 연산자(틸드 연산자) : 피연산자로 들어온 숫자의 비트를 뒤집는 기능을 해 2진수의 0을 1로, 1을 0으로 바꿔주는 동작을 함 => -(K +1) 

 

★ ~~ : Not연산자를 두 번 사용 시, 다시 원본값을 반환하는 성질을 가지는데 기본적으로 ~연산자는 소수점 아래 비트를 버리는 성질을 가지는데 이를 이용해 Math.floor의 기능과 동일하게 소수점 제거하는데 활용이 가능