Web/모던 자바스크립트 Deep Dive

[모던 자바스크립트 Deep Dive] 07. 연산자

동띵 2023. 8. 7. 21:52

산술 연산자


  • 피연산자를 대상으로 수학적 계산을 수행해 새로운 숫자 값 생성
    • 산술 연산이 불가능한 경우 NaN 반환
  • 피연산자의 개수에 따라 이항 산술 연산자와 단항 산술 연산자로 나눔

이항 산술 연산자

  • 2개의 피연산자를 산술 연산하여 숫자 값 생성
  • 피연산자의 값을 변경하는 부수 효과 X ⇒ 언제나 새로운 값 생성
  • +, -, *, /, %

단항 산술 연산자

  • 1개의 피연산자를 산술 연산하여 숫자 값 생성
  • ++ (증가, 부수 효과 O)
    • 전위 증가/감소 연산자 : 먼저 피연산자 값을 증가/감소시킨 후 다른 연산 수행
    • 후위 증가/감소 연산자 : 먼저 다른 연산 수행 후, 피연산자 값 증가/감소
  • -- (감소, 부수 효과 O)
  • + (아무 효과 X, 부수 효과 X)
    • 숫자 타입이 아닌 피연산자에 + 단항 연산자를 사용하면 해당 값을 숫자 타입으로 변환한 값을 생성하여 반환
    • 숫자로 반환하지 못하면 NaN
    • ex) +false ⇒ +0
  • - (양수 → 음수, 음수 → 양수, 부수 효과 X)
    • 숫자 타입이 아닌 피연산자에 + 단항 연산자를 사용하면 해당 값을 숫자 타입으로 변환한 값을 생성하여 반환
    • 숫자로 반환하지 못하면 NaN
    • ex) -true ⇒ -1

문자열 연결 연산자

  • 연산자는 피연산자 중 하나 이상이 문자열인 경우 문자열 연결 연산자로 동작
  • 숫자 + boolean (or null)은 자바스크립트 엔진에 의한 암묵적 타입 변환 (강제 타입 변환)으로 인해 true → 1, false → 0, null → 0으로 변환 후 연산 수행
  • undefined는 숫자로 타입 변환되지 않아 NaN 됨

할당 연산자


  • 우항에 있는 피연산자의 결과를 좌항 변수에 할당 ⇒ 좌항 변수에 값을 할당하므로 부수 효과 O
  • 할당문은 값으로 평가되는 표현식인 문으로서 할당된 값으로 평가됨
    • 할당문을 다른 변수에 할당 가능
    • 여러 변수에 동일한 값을 연쇄 할당 가능 (ex. a = b = c = 0)

비교 연산자


  • 좌항과 우항의 피연산자 비교 후, 그 결과를 boolean 값으로 반환

동등/일치 비교 연산자

  • 좌항과 우항의 피연산자가 같은 값으로 평가되는지 비교 후, 그 결과를 boolean 값으로 반환
  • 동등 비교 연산자 : 느슨함
    • 동등 비교 ==, 부동등 비교 !=
    • 좌항과 우항 비교 시 먼저 암묵적 타입 변화를 통해 타입을 일치시킨 후 값 비교
  • 일치 비교 연산자 : 엄격함
    • 일치 비교 **===** , 불일치 비교 !==
  • NaN은 자기 자신과 일치하지 않는 유일한 값 ⇒ 일치 비교하면 false 반환
    • 숫자가 NaN인지 조사하려면 Number.isNaN 메서드 사용
  • Object.is 메서드 : 예측 가능한 정확한 비교 결과 반환
    • NaN === NaN ⇒ false
    • Object.is(NaN, NaN) ⇒ true

대소 관계 비교 연산자

  • 피연산자의 크기를 비교하여 boolean 값으로 반환
  • , <, ≥, ≤

삼항 조건 연산자


  • 조건식의 평가 결과에 따라 반환할 값 결정
  • 조건식 ? 조건식이 true일 때 반환할 값 : 조건식이 false일 때 반환할 값
    • 조건식의 평가 결과가 boolean이 아니면 암묵적 타입 변환을 통해 boolean 값으로 평가됨
    • 그 값이 true면 ? 뒤에 있는 값이 반환되고, false면 : 뒤에 있는 값이 반환됨
  • if else 문도 조건에 따라 결과를 수행하지만 표현식이 아니므로 값처럼 사용 X
    • 삼항 조건 연산자 표현식은 값으로 평가할 수 있어서 다른 표현식의 일부가 될 수 있음

논리 연산자


  • 우항과 좌항의 피연산자 (부정 논리 연산자의 경우 우항의 피연산자)
  • || : 논리합 (OR)
    • 결과가 boolean 값이 아닐 수 있음, 언제나 2개의 피연산자 중 어느 한쪽으로 평가됨
  • && : 논리곱 (AND)
    • 결과가 boolean 값이 아닐 수 있음, 언제나 2개의 피연산자 중 어느 한쪽으로 평가됨
  • ! : 부정 (NOT)
    • boolean 값 반환 (피연산자가 boolean 값이 아니더라도 boolean으로 암묵적 타입 변환)

쉼표 연산자


  • 왼쪽 피연산자부터 차례대로 평가하고, 마지막 피연산자 평가 결과를 반환
var x, y, z;
x = 1, y = 2, z = 3; // 3

그룹 연산자


  • 연산자 우선순위 조절 가능
  • 소괄호로 피연산자 감싸면 해당 표현식의 우선순위가 가장 높아짐 ⇒ 연산자 우선순위 가장 높음

typeof 연산자


  • 피연산자의 데이터 타입을 문자열로 반환
  • “string”, “number”, “boolean”, “undefined”, “symbol”, “object”, “function”
  • typeof null ⇒ object 나옴 (자바스크립트 버그)
    • 값이 null type인지 확인할 때는 일치 연산자 (===) 사용
  • 선언하지 않은 식별자의 타입은 undefined

지수 연산자


  • ES7에서 도입된 연산자
  • 좌항의 피연산자를 밑(base)으로, 우항의 피연산자를 지수(exponent)로 거듭 제곱하여 숫자 값 반환
2 ** 2 // 4
2 ** 0 // 1
2 ** -2 // 0.25
  • 음수를 거듭제곱의 밑으로 사용해 계산하려면 괄호로 묶어야됨 (-5) ** 2 ⇒ 25
  • 할당 연산자와 함께 사용 가능
var num = 5;
num **= 2 // 25
  • 이항 연산자 중에서 우선순위 가장 높음

그 외의 연산자


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

연산자의 부수 효과


  • 다른 코드에 영향을 줌
  • 부수 효과가 있는 연산자
    • 할당 연산자 (=)
    • 증가/감소 연산자 (++/--)
    • delete 연산자 (객체의 프로퍼티를 삭제함)

연산자 우선순위


  1. ()
  2. new(매개변수 존재), ., [](프로퍼티 접근), ()(함수 호출), ?.(옵셔널 체이닝 연산자)
  3. new(매개변수 미존재)
  4. x++, x-- (후위 증감 연산자)
  5. !x, +x, -x, ++x, --x, typeof, delete
  6. ** (지수 연산자)
  7. *, /, %
  8. +, -
  9. <, ≤, >, ≥, in, instanceof
  10. ==, !=, ===, !==
  11. ?? (null 병합 연산자)
  12. &&
  13. ||
  14. ? … : … (삼항 연산자)
  15. ,

연산자 결합 순서


  • 연산자의 어느 쪽 (좌항 or 우항)부터 평가를 수행할 것인지 나타내는 순서
  • 좌항 → 우항
    • +, -, /, %, <, ≤, >, ≥, &&, ||, ., [], (), ?., in, instanceof
  • 우항 → 좌항
    • ++, --, 할당 연산자(=, +=, -=, …), !x, +x, -x, ++x, --x, typeof, delete, 삼항 연산자, **