(4장) 표현식과 연산자 - 7. 연산자 개요 8. 산술표현식 [자바스크립트 완벽 가이드 7판]

iberis2·2023년 1월 2일
0

4장 표현식과 연산자

7. 연산자 개요

7-1. 피연산자 개수

  • 1항(단항) 연산자 : + 숫자로 타입 변환, - 부호 변환
  • 2항 연산자 : *, % 등 일반적인 연산자 대부분
  • 3항 연산자 : (조건식)?(true일 경우 동작):(false일 경우 동작)

7-2. 피연산자 결과와 타입

연산자의 필요에 따라 피연산자의 타입을 변환하기도 한다.

  • * 연산자는 '3' * '1'을 피연산자를 숫자형으로 변환하여 숫자형 15로 평가한다.
  • < 는 피연산자의 타입에 따라 숫자 순서 비교 또는 알파벳 순서 비교로 작동하기도 한다.

7-3. 연산자와 부수 효과

할당 연산자, ++, -- 연산자는 해당 변수나 프로퍼티에 값을 할당 하는 것 뿐만 아니라 해당 변수(프로퍼티)를 사용하는 모든 표현식에 영향을 끼치는 부수 효과가 있다.

delete 로 프로퍼티를 삭제하는 것은 해당 프로퍼티에 undefined를 할당하는 것과 비슷한 효과를 낸다.

7-4. 연산자 우선 순위

자바스크립트 연산자 우선순위 MDN

우선순위가 불확실한 연산자는 ( )를 사용하여 순서를 명시한다.

7-5. 연산자 결합성

연산자 결합성 : 우선순위가 같은 동작을 수행할 때의 순서

// 윗 줄은 아래 줄의 계산 순서와 같은 순서로 진행된다.

w = x - y - z; // - 연산자는 좌결합성
w = (x - y) - z;

y = a ** b ** c; // ** 연산자는 우결합성
y = a ** (b ** c);

d = e = f = g;
d = (e = (f = g)); // = 연산자는 우결합성

7-6. 평가 순서

표현식은 항상 왼쪽에서 → 오른쪽으로 평가한다.
괄호를 추가해서 곱셈, 덧셈, 할당 순서를 바꿀 수는 있지만 왼쪽에서 오른쪽으로의 진행되는 평가 순서를 바꿀 수는 없다.

  • w = x + y * z에서 w를 가장 먼저 평가한다.
    만약 w에 z에서 사용하는 변수를 증가시키는 내용이 들어있다면, 평가(계산)된 w가 z의 평가(계산)에도 영향을 끼친다.

8. 산술 표현식

+를 제외한 기본 산술연산자 **, *, /, %, -는 피연산자를 평가해 필요하다면 숫자로 변환하여 계산한다.
숫자로 변환할 수 없는 피연산자는 NaN 으로 변환된다. 피연산자 중 하나가 NaN인 경우 (거의 항상) 결과도 NaN이다.

  • ** 지수 연산자

    • Math.pow(밑, 지수) 함수와 같다.
    • 부호를 바꾸는 마이너스 연산자와의 우선순위가 모호하여, ()괄호로 우선순위를 명시하지 않는 경우 문법 에러가 발생한다.
      console.log(-3**2); // SyntaxError: Unary operator used immediately before exponentiation expression. Parenthesis must be used to disambiguate operator precedence
       console.log((-3)**2); // 9
       console.log(-(3**2)); // -9
  • / 나눗셈 연산자

    console.log(0 / 0); // NaN
    console.log(1 / 0); // Infinity (양수 / 0은 항상 양의 무한대)
    console.log(-1 / 0); // -Infinity (음수 / 0은 항상 음의 무한대)
  • % 나머지 연산자

    • 일반적으로 정수 피연산자를 받지만, 부동 소수점 값도 사용할 수 있다.
    console.log(6.5 % 2.1); // 0.19999999999999973
  • + 연산자

    • 문자열은 병합하고, 숫자는 더한다.
    • 피연산자 중 하나가 문자열 또는 문자열로 변환할 수 있는 객체라면 다른 피연산자도 문자열로 변환하여 병합한다.
    • 두 피연산자 모두 문자열이 아닐 떄에만 숫자(또는 NaN)으로 변환 후 덧셈을 수행한다.
    console.log(1 + 2); // 3
    console.log("1" + 2); // '12'
    console.log(1 + {}); // 1[object Object] (객체를 문자열로 변환 후 덧셈)
    console.log(1 + null); // 1 (null을 0으로 변환 후 덧셈)
    console.log(1 + undefined); // NaN (undefined를 NaN으로 변환 후 덧셈)
    • 좌결합성(같은 우선순위 동작 수행할 떄 왼쪽에서 → 오른쪽으로) 덧셈을 수행한다.
    console.log(1 + 2 + "가나다"); // 3가나다
    connsole.log(1 + (2 + "가나다")); // 12가나다

8-1. 단항 산술 연산자

우결합성(같은 우선순위 동작을 수행할 때 오른쪽에서 왼쪽←)으로 연산을 수행한다.

  • +

    • 피연산자를 숫자(또는 NaN)으로 변환하여 반환

    • 이미 숫자인 피연산자에는 아무 일도 일어나지 않음

    • BigInt 값에 사용할 수 없음

      console.log(+"str"); // NaN
      
      let strNum = "1";
      console.log(+strNum); // 1
      console.log(typeof +strNum); // number
      
      let bigNum = BigInt(1);
      console.log(+bigNum); // TypeError: Cannot convert a BigInt value to a number
  • -

    • 피연산자를 숫자로 변환하여 부호를 바꿈
    console.log(-true); // -1
  • ++

    • for 반복문에서 자주 사용
    • 피연산자를 숫자로 변환하여 1을 더해 증가한 값을 다시 피연산자에 할당한다.
    • 피연산자는 반드시 lvalue(변수, 객체의 프로퍼티, 배열의 요소)이어야 한다.
    • 반환값이 연산자 위치에 따라 달라진다.
      • ++i (전위 증가 연산자), i++ (후위 증가 연산자)
    let x = 1, y = ++x; // x와 y 모두 2
    let n = 1, m = n++; // m은 1, n은 2
    • x = x+1 과 달리 문자열 병합을 하지 않는다.
      항상 숫자로 변환하여 덧셈을 수행한다.
    let x = "1";
    x = x + 1;
    console.log(x); // 11
    console.log(typeof x); // string
    
    let y = "1";
    y++;
    console.log(y); // 2
    console.log(typeof y); // number
  • -

    • 피연산자를 숫자로 변환하여 1을 빼고 감소한 값을 다시 피연산자에 할당한다.
    • 피연산자는 반드시 lvalue(변수, 객체의 프로퍼티, 배열의 요소)이어야 한다.
    • 반환값이 연산자 위치에 따라 달라진다.
      - --i (전위 감소 연산자), i-- (후위 감소 연산자)
      let x = 2, y = --x; // x와 y 모두 1
      let n = 2, m = n--; // m은 2, n은 1
profile
React, Next.js, TypeScript 로 개발 중인 프론트엔드 개발자

0개의 댓글