[12] JavaScript 연산자 (2)

2.11 논리 연산자

8. 논리 연산자

||, &&, !

논리 연산자는 피연산자로 불린형뿐만 아니라 모든 타입의 값을 받을 수 있습니다. 연산 결과 역시 모든 타입이 될 수 있습니다.

1. 연산자 우선순위 : ! > && > ||
2. if를 ||나 &&로 대체하지 마라.
   &&를 사용한 코드가 더 짧긴 하지만 if 문을 사용한 예시가 코드에서 무엇을 구현하고자 하는지 더 명백히 드러내고, 가독성도 좋습니다.

|| (OR)

피연산자가 불린형일 경우

피연산자가 모두 false인 경우를 제외하고 연산 결과는 항상 true입니다.
OR 연산자 ||은 주어진 조건 중 하나라도 참인지를 테스트하는 용도로 if 문에서 자주 사용됩니다.

alert( true || true );   // true
alert( false || true );  // true
alert( false || false ); // false

피연산자가 불린형이 아닐 경우 (첫 번째 truthy를 찾는 OR 연산자 ‘||’)

피연산자가 불린형이 아니면, 평가를 위해 불린형으로 변환됩니다.

1. 변수 또는 표현식으로 구성된 목록에서 첫 번째 truthy 얻기
   OR (||) 연산자를 여러 개 체이닝(chaining) 하면 첫 번째 truthy를 반환합니다. 피연산자에 truthy가 하나도 없다면 마지막 피연산자를 반환합니다. 이때 반환 값은 형 변환을 하지 않은 원래 값입니다.

2. 단락 평가
   OR (||)은 왼쪽부터 시작해서 오른쪽으로 평가를 진행하는데, truthy를 만나면 나머지 값들은 건드리지 않은 채 평가를 멈춥니다. 이런 프로세스를 '단락 평가’라고 합니다.
   단락 평가는 연산자 왼쪽 조건이 falsy일 때만 명령어를 실행하고자 할 때 자주 쓰입니다.

&& (AND)

피연산자가 불린형일 경우

AND 연산자는 두 피연산자가 모두가 참일 때 true를 반환합니다. 그 외의 경우는 false를 반환하죠.

alert( true && true );   // true
alert( false && true );  // false
alert( false && false ); // false

피연산자가 불린형이 아닐 경우 (첫 번째 falsy를 찾는 AND 연산자 ‘&&’)

AND 연산자는 첫 번째 falsy를 반환합니다. 피연산자에 falsy가 없다면 마지막 값을 반환합니다.

! (NOT)

1. 피연산자를 불린형(true / false)으로 변환합니다.
2. 1에서 변환된 값의 역을 반환합니다.

NOT을 두 개 연달아 사용(!!)하면 값을 불린형으로 변환할 수 있습니다. 내장 함수 Boolean을 사용하면 !!을 사용한 것과 같은 결과를 도출할 수 있습니다.

2.12 null 병합 연산자 '??'

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

(!) 스펙에 추가된 지 얼마 안 된 문법입니다. 구식 브라우저는 폴리필이 필요합니다.

a가 null도 아니고 undefined도 아니면 a, 그 외의 경우는 b

null 병합 연산자 (??)를 사용하면 피연산자 중 값이 할당된 변수를 빠르게 찾을 수 있습니다.
??는 변수에 기본값을 할당하는 용도로 사용할 수 있습니다.

  a ?? b

// null 병합 연산자(??) 없이 x = a ?? b와 동일한 동작을 하는 코드
  x = (a !== null && a !== undefined) ? a : b;

'??'와 '||'의 차이

||는 첫 번째 truthy 값을 반환하지만 ??는 첫 번째 정의된 값을 반환한다.
null과 undefined, 숫자 0을 구분 지어 다뤄야 할 때 이 차이점은 매우 중요한 역할을 한다. 0이 할당될 수 있는 변수를 사용해 기능을 개발할 땐 ||보다 ??가 적합하다.

  0 ?? 100 // 0
  0 || 100 // 100 (0을 falsy한 값으로 취급하는 ||)

연산자 우선순위

1. ??의 연산자 우선순위는 대다수의 연산자보다 낮고 ?와 = 보다는 높습니다.
   그렇기 때문에 복잡한 표현식 안에서 ??를 사용해 값을 하나 선택할 땐 괄호를 추가하는 게 좋습니다.

2. 안정성 관련 이슈 때문에 ??는 &&나 ||와 함께 사용하지 못합니다.
   함께 사용하면 문법 에러가 발생합니다. 제약을 피하려면 괄호를 사용해주세요.

10. 그 외

delete 연산자

delete 연산자는 피연산자인 객체, 객체의 프로퍼티(property) 또는 배열의 요소(element) 등을 삭제해 줍니다.
피연산자가 성공적으로 삭제되었을 때는 참(true)을 반환하고, 삭제하지 못했을 때는 거짓(false)을 반환합니다.

typeof 연산자

typeof 연산자는 피연산자의 타입을 반환합니다.

instanceof 연산자

instanceof 연산자는 피연산자인 객체가 특정 객체의 인스턴스인지 아닌지를 확인해 줍니다.
피연산자가 특정 객체의 인스턴스이면 참(true)을 반환하고, 특정 객체의 인스턴스가 아니면 거짓(false)을 반환합니다.
이 연산자는 두 개의 피연산자를 가지는 이항 연산자이며, 피연산자들의 결합 방향은 왼쪽에서 오른쪽입니다.

집을 지을 때 그 집을 짓기 위한 설계도 = class
설계도를 보고 만든 집 = instance
설계도나 만들어진 집, 만든 사람 = 객체

출처: 자바스크립트 인스턴스란? - Zzolab Project

void 연산자

void 연산자는 피연산자로 어떤 타입의 값이 오던지 상관없이 언제나 undefined 값만을 반환합니다.

---

마침

1. 새로운 기술에 대한 적용의 정도에 대해 더 제대로 알기 위해 실무에서 일해보고 싶다.
2. 문자로 생긴 연산자가 존재해서 연산자가 함수와 헷갈렸었는데 연산자는 단순히 연산을 수행하기 위한 기호 같은 것이라는 것을 알았습니다.

더 공부할 내용

1. instance 공부하기

---

출처: 모던 JavaScript 튜토리얼,
3. 연산자 - TCP SCHOOL