Redjen TIL
Redjen TIL

Contents

모던 자바스크립트 Deep Dive 7장 - 연산자

   1515 words   4 minutes 

연산자의 정의

하나 이상의 표현식을 대상으로 연산을 수행해 하나의 값을 만드는 표현식

피연산자는 연산의 대상 -> 값으로 평가 가능해야 결국 연산자는 피연산자에 대한 동사

연산자의 종류

1. 산술 연산자

피연산자로 수학적 계산 수행 -> 새로운 숫자 값 output

  • 이항 산술 연산자 (binary)
    • 2 개의 피연산자 (input) -> 새 숫자 값 (output)
    • 덧셈, 뺄셈, 곱셈, 나눗셈, 나머지
    • side effect 없다 (피연산자 자체의 값이 바뀌는 일이 없다)
  • 단항 산술 연산자 (unary)
    • 1 개의 피연산자 (input) -> 새 숫자 값 (output)
    • ++, -- : 피연산자에 대한 증가와 감소 수행, side effect 존재한다
      • 즉 피연산자의 값을 변경 후 할당하는 side effect가 있다.
      • 피연산자에 대한 상대적 위치에 따라 의미가 달라진다
        • x++, x-- 는 선 할당 후 증감 수행
        • ++x, --x는 선 증감 후 할당 수행
    • + : 아무 효과도 없다
    • -: 양수 음수 변환
  • 문자열 연결 연산자 (+)
    • 피연산자 중 하나 이상이 문자열일 경우 +는 문자열 연결 연산자가 된다 (그 외는 산술)
    • 개발자의 의도와는 무관하게 js 엔진은 암묵적 타입 자동 변환을 수행한다 (type coercion)
      • 1 + true = ?

2. 할당 연산자

우항에 있는 피연산자의 eval 값을 좌항에 있는 변수에 할당하는 연산자. 모두 side effect가 존재한다

  • = : 가장 기본이 되는 할당 연산자
  • += : x += 5는 x = x + 5와 동치
  • -= : x -= 5는 x = x - 5와 동치
  • *=: x *= 5는 x = x * 5와 동치
  • /=: x /= 5는 x = x / 5와 동치
  • %=: x %= 5는 x = x % 5와 동치

할당문은 값으로 평가되는 표현식인 문 (statement)로써 할당된 값으로 평가된다. 즉 할당문 x = 10 자체는 다른 변수에 할당 될 수 있다.

let a, b, c;
a = b = c = 0;
console.log(a, b, c); // 0 0 0

3. 비교 연산자

좌항과 우항의 피연산자를 비교한 후 결과를 boolean 값으로 return

동등 비교 (loose equality) 연산자 vs 일치 비교 (strict equality) 연산자

동등 비교 연산자는 값만 비교, 일치 비교 연산자는 값과 타입 모두 비교한다.

  • ==, !=는 동등 비교 연산자로 느슨한 비교 수행
    • 때문에 좌항 우항 피연산자 비교 시 type coercion 수행한 뒤 같은 값인지 비교한다
    • 암묵적 타입 변환 후 같은 값일 수 있다면 true
  • ===, !== 는 일치 비교 연산자로 엄격한 비교 수행
    • 웬만하면 이거 쓰자
    • NaN의 경우 자기 자신과의 일치 비교가 false 인 유일한 값 (NaN === NaN은 false)

대소 비교 연산자 (>, <, <=, >=) : 여러분이 아는 그거와 같습니다

4. 삼항 조건 연산자 (Ternary operator)

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

`조건식` ? `조건식이 true일 때 return할 값` : `조건식이 false일 때 return할 값`

이 표현식 또한 값으로 평가될 수 있는 statement -> 다른 표현식의 일부가 될 수 있다. let result = x % 2 ? 'odd' : 'even';

5. 논리 연산자

우항과 좌항의 피연산자를 논리 연산 수행, 논리합 (OR), 논리곱 (AND), 부정 (NOT)이 존재

  • 논리 부정 연산자 (!)는 언제나 boolean 값을 반환한다 (!true, !false)
  • 하지만 논리 합, 논리 곱 연산자는 boolean 값을 반환하지 않을 수 있다.
    • 'Cat' && 'Dog' 은 'Dog'를 리턴

6. 쉼표 연산자

왼쪽 피연산자부터 차례대로 피연산자 eval, 마지막 피연산자의 eval 끝나면 마지막 피연산자 평가 결과 return

let x, y, z;
x = 1, y = 2, z = 3; // return 3

7. 그룹 연산자

소괄호로 감싸는 그룹 연산자를 통해 그룹 내 피연산자를 가장 먼저 eval 연산자 우선 순위가 제일 높다.

let res = 10 * ( 2 + 3 ); // 50

8. typeof 연산자

피연산자의 데이터 타입을 문자열로 반환..

typeof ``            // "string"
typeof 1             // "number"
typeof NaN           // "number"
typeof true          // "boolean"
typeof undefined     // "undefined"
typeof Symbol()      // "symbol"
typeof null          // "object"
typeof []            // "object"
typeof {}            // "object"
typeof new Date()    // "object"
typeof /test/gi      // "object"
typeof function() {} // "function"

typeof null (js 뉴비 절단기) -> 값이 null 인지 체크하려면 === 사용해야

  • 선언하지 않은 식별자를 typeof 연산 시 ReferenceError 발생 안하고 undefined 반환하는 것도 유의

9. 지수 연산자

좌항의 피연산자를 밑으로, 우항의 피연산자를 지수로 거듭 제곱한 값을 반환

let res = 2 ** 3; // 8

연산자의 side effect

대부분의 연산자는 다른 코드에 영향을 주지 않지만, side effect 가 있는 연산자는 다른 코드에 영향을 준다. 다음의 연산자는 side effect가 있다.

  • 할당 연산자 (=)
  • 증가 / 감소 연산자 (++, --)
  • delete 연산자

연산자 우선순위

  1. () (그룹 연산자)
  2. new(something), [] (객체 속성 접근), 함수 호출, ?.
  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. condition ? 'true value' : 'false value'
  15. 할당 연산자
  16. 쉼표 연산자
Updated on 2023-08-09
Back | Home