[JavaScript] 모던 JS Deep Dive 7장

7.0 연산자

하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산 등을 수행해 하나의 값을 만듦

• 연산의 대상을 피연산자(operand)라고 함
• 피연산자는 값으로 평가될 수 있는 표현식이어야 함
• 피연산자와 연산자의 조합으로 이뤄진 연산자 표현식도 값으로 평가될 수 있는 표현식

7.1 산술 연산자

피연산자를 대상으로 수학적 계산을 수해새 새로운 숫자 값을 만드는 연산자

• 산술 연산이 불가능한 경우 NaN 반환
• 피연산자의 개수에 따라 이항 산술 연산자와 단항 산술 연산자로 구분됨

이항 산술 연산자

2개의 피연산자를 산술 연산하여 숫자 값을 만듦

• 어떤 산술 연산을 해도 피연산자의 값이 바뀌는 경우는 없음

단항 산술 연산자

1개의 피연산자를 산술 연산하여 숫자 값을 만듦

• 증가/감소(++/—) 연산자는 피연산자의 값을 변경하는 부수 효과가 있음
  • 전위 증가/감소 연산자는 먼저 피연산자의 값을 증가/감소시킨 후 다른 연산을 수행
  • 후위 증가/감소 연산자는 먼저 다른 연산을 수행한 후 피연산자의 값을 증가/감소 수행
• +/- 단항 연산자는 피연산자에 어떠한 효과도 없음
  • 숫자 타입이 아닌 피연산자에 사용하면 숫자 타입으로 변환한 값을 생성하여 반환
  • '-’ 단항 연산자는 피연산자의 부호를 반전한 값을 생성하여 반환

문자열 연결 연산자

'+' 연산자는 피연산자 중 하나 이상이 문자열인 경우 문자열 연결 연산자로 동작함

• 암묵적 타입 변환 (implicit type coercion) : boolean(1/0으로) 또는 null(0으로)은 타입이 자동 변환되기도 함

7.2 할당 연산자

우항에 있는 피연산자의 평가 결과를 좌항에 있는 변수에 할당함

• 좌항의 변수에 값을 할당하므로 변수 값이 변하는 부수 효과가 있음
• 할당문은 값으로 평가되는 표현식인 문으로 할당된 값으로 평가됨

  var x;
  console.log(x = 10); //x에 10이 할당되었으므로 10이 출력됨

• 할당문을 다른 변수에 할당할 수도 있으므로 연쇄 할당 가능

7.3 비교 연산자

좌항과 우항의 피연산자를 비교한 다음 그 결과를 boolean 값으로 반환함

• 보통 if문 또는 for문과 같은 제어문의 조건식에서 주로 사용됨

동등/일치 비교 연산자

좌항과 우항의 피연산자가 같은 값으로 평가되는지 비교해 boolean 값 반환

• 동등 비교(loose equality) 연산자는 **비교시 먼저 암묵적 타입 변환**을 통해 타입을 일치시킨 후 같은 값인지 비교
  • 타입은 달라도 타입 변환 후에 같으면 true 반환
  • 편리하지만 결과를 예측하기 어려움
• 일치 비교(strict equality) 연산자는 비교시 타입 변환 없이 바로 같은 값인지 비교
  • 피연산자가 타입도 같고 값도 같은 경우에 한하여 true 반환
  • 결과 예측 쉬움
  • NaN는 자신과 일치하지 않는 유일한 값 → 비교시 연산자 대신 Number.isNaN(숫자 값) 함수 사용
  • 양과 음의 0은 비교시 true 반환됨
  • Object.is(숫자값1, 숫자값2) 사용시 정확한 비교 결과 반환 ⇒ NaN == NaN , -0 ≠ +0

대소 관계 비교 연산자

피연산자의 크기를 비교하여 boolean 값 반환

• 부수 효과 없음

7.4 삼항 조건 연산자

조건식의 평가 결과에 따라 반환할 값을 결정

• 표현식 : 조건식 ? 조건식이 true일 때 반환할 값 : false일 때 반환할 값
• 만약 조건식의 평가 결과가 boolean 값이 아니면 boolean 값으로 암묵적 타입 변환 후 해당하는 반환 값 반환
• if … else 문을 사용해서 유사하게 처리 가능
• 삼항 조건 연산자 표현식
  • 표현식인 문으로 값처럼 사용할 수 있음
  • 다른 표현식의 일부가 될 수 있어 매우 유용함
  • 조건에 따라 어떤 값을 결정할 때 사용하기 편리함
• if … else 문
  • 표현식이 아닌 문으로 값처럼 사용할 수 없음
  • 조건에 따라 수행해야 할 문이 여러 개일 때 가독성이 더 좋음

7.5 논리 연산자

우항과 좌항의 피연산자(부정 논리 연산자의 경우 우항의 피연산자)를 논리 연산함

• || (논리 합 OR)과 && (논리 곱 AND)
  • 평가 결과가 boolean 값이 아닐 수도 있음
  • 언제나 2개의 피연산자 중 어느 한쪽으로 평가됨
• ! (부정 NOT)
  • 언제나 boolean 값 반환하지만 반드시 피연산자가 boolean 값일 필욘 없음
• 드 모르간의 법칙을 활용하여 복잡한 표현식을 좀 더 가독성있게 변환할 수 있음

7.6 쉼표 연산자

왼쪽 피연산자부터 차례대로 피연산자를 평가하고 마지막 평가가 끝나면 마지막 평가 결과를 반환

7.7 그룹 연산자

소괄호로 피연산자를 감싸는 (그룹 연산자)는 자신의 피연산자인 표현식을 가장 먼저 평가함

• 그룹 연산자를 사용하여 연산자의 우선순위를 조절할 수 있음
• 연산자 우선순위 중 가장 높음

7.8 typeof 연산자

피연산자의 데이터 타입을 7가지 문자열 중 하나를 반환함

• 7가지 문자열 : string number boolean undefined symbol object function
• 주의사항
  • null은 object로 반환하므로 보통 일치 연산자(===) 사용하는 것을 추천
  • 선언하지 않은 식별자는 undefined로 반환됨
• typeof 연산자가 반환하는 문자열은 7개의 데이터 타입과 완전히 일치하지는 않음

7.9 지수 연산자

ES7부터 도입된 연산자로 좌항의 피연산자를 밑(base)로, 우항의 피연산자를 지수(exponent)로 거듭 제곱하여 숫자 값을 반환

• 표현식 : 밑**지수
• 이전에는 Math.pow(밑, 지수)을 사용
• 지수 연산자가 더 가독성이 좋음
• (음수)를 밑으로 사용시 괄호로 묶어서 표현
• 할당 연산자와 함께 사용 가능 ⇒ num **= 2
• 이항 연산자 중에서 우선순위가 가장 높음

7.10 그 외의 연산자

• ?. : 옵셔널 체이닝 연산자
• ?? : null 병합 연산자
• delete : 프로퍼티 삭제
• new : 생성자 함수를 호출할 때 사용하여 인스턴스를 생성
• instanceof : 좌변의 객체가 우변의 생성자 함수와 연결된 인스턴스인지 판별
• in : 프로퍼티 존재 확인

7.11 연산자의 부수 효과

• 대부분의 연산자는 다른 코드에 영향을 주지 않고 새로운 값을 생성함
• 부수 효과 있는 연산자
  • 할당 연산자(=) : 변수 값을 변경
  • 증가/감소 연산자(++/—) : 피연산자의 값을 재할당하여 변경
  • delete 연산자 : 객체의 프로퍼티 삭제

7.12 연산자 우선순위

여러 개의 연산자로 이뤄진 문이 실행될 때 연산자가 실행되는 순서

• 우선순위가 높을수록 먼저 실행됨
• 그룹 연산자(소괄호)가 우선순위가 제일 높음
• 그룹 연산자를 사용하여 우선순위를 명시적으로 조절하는 것 권장함
• 단항 연산자가 이항 연산자보다 우선순위가 높음
• 지수 연산자(**)가 이항 연산자 중에서 우선순위가 가장 높음

7.13 연산자 결합 순서

연산자의 좌항 또는 우항 중 어느 쪽부터 평가를 수행할 것인지 나타내는 순서

• 좌항 → 우항 : 이항 연산자 (+ - / *) , 논리 연산자 (|| &&), 비교 연산자 (< > ..) ..등
• 우항 → 좌항 : 할당 연산자 (+= -= = ..), 단항 연산자(++ —), typeof, delete ..등