[자바스크립트] 모던 자바스크립트 DeepDive 공부 #7

Chapter7 - 연산자

---

7.1 산술 연산자

7.1.1 이항 산술 연산자

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

이항산술연산자	의미	부수효과
+	덧셈	X
-	뺄셈	X
*	곱셈	X
/	나눗셈	X
%	나머지	X

7.1.2 단항 산술 연산자

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

단항 산술 연산자	의미	부수효과
++	증가	O
--	감소	O
+	어떠한 효과도 없음 / 음수, 양수 반전도 없음	X
-	양수, 음수 반전 값 반환	X

• 증가/감소 연산자의 위치에 따른 결과 예시 코드

    var x = 5, result;
  
    // 선할당 후증가
    result = x++;
    console.log(result, x); // 5, 6
  
    // 선증가 후할당
    result = ++x;
    console.log(result, x); // 7, 7
  
    // 선할당 후감소
    result = x--;
    console.log(result, x); // 7, 6
  
    // 선감소 후할당
    result = --x;
    console.log(result, x); // 5, 5

• '+' 단항 연산자는 피연산자를 숫자 타입으로 변환한 값을 생성하여 반환

7.1.3 문자열 연결 연산자

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

    '1' + 2; // '12'
    1 + '2'; // '12'
  
    1 + 2; // 3
  
    // 암묵적 타입 변환 or 타입 강제 변환
    1 + true; // 2
    1 + false; // 1
    1 + null; // 1
  
    +undefined // NaN
    1 + undefined // NaN

7.2 할당 연산자

• 우변의 피연산자 평가 결과를 좌변의 변수에 할당

할당연산자	예시	동일 표현	부수 효과
=	x = 5	x = 5	O
+=	x += 5	x = x + 5	O
-=	x -= 5	x = x - 5	O
*=	x *= 5	x = x * 5	O
/=	x /= 5	x = x / 5	O
%=	x %= 5	x = x % 5	O

• 할당문은 값으로 평가되는 표현식인 문으로서 할당된 값으로 평가

7.3 비교 연산자

• if, for문 같은 제어문의 조건식에서 주로 사용

7.3.1 동등/일치 비교 연산자

비교연산자	의미	사례	설명	부수효과
==	동등 비교	x == y	x와 y의 값이 같음	X
===	일치 비교	x === y	x와 y의 값과 타입이 같음	X
!=	부동등 비교	x != y	x와 y의 값이 다름	X
!==	불일치 비교	x !== y	x와 y의 값과 타입이 다름	X

• '==' 연산자는 좌항과 우항의 피연산자 비교시 암묵적 타입 변환을 통해 타입을 일치시킨 후 같은 값인지 비교 -> 값을 예측하기 어려움

• '===' 연산자는 좌항과 우항의 피연산자가 타입도 같고 값도 같은 경우에 한해 true 반환

• Object.is 메서드: 예측 가능한 정확한 비교 결과 반환 & 그 외에는 '===' 연산자와 동일하게 작동

    -0 === +0; // true
    Object.is(-0, +0); // true
  
    NaN === NaN; // false
    Object.is(NaN, NaN); // true

7.3.2 대소 관계 비교 연산자

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

대소 관계 비교 연산자	예제	설명	부수 효과
>	x > y	x가 y보다 크다	X
<	x < y	x가 y보다 작다	X
>=	x >= y	x가 y보다 크거나 같다	X
<=	x <= y	x가 y보다 작거나 같다	X

7.4 삼항 조건 연산자

• 기본 문법

    조건식 ? 조건식이 true일 떄 반환할 값 : 조건식이 false일 때 반환할 값

• if else문으로 표현 가능 -> 삼항 조건 연산자 표현식은 값으로 사용이 가능하지만 if else문은 값으로 사용 불가능

    var x = 10;
  
    var result = if (x % 2) { 
            result = '홀수'; 
        } else {
            result = '짝수';
        };
    // SyntaxError: Unexpected token if

    var x = 10;
  
    var result = x % 2 ? '홀수' : '짝수';
    console.log(result); // 짝수

7.5 논리 연산자

• 우항과 좌항의 피연산자를 논리연산

논리연산자	의미	부수 효과
||	논리합(OR)	X
&&	논리곱(AND)	X
!	부정(NOT)	X

7.6 쉼표 연산자

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

    var x, y, z;
    x = 1, y = 2, z = 3; // 3

7.7 그룹 연산자

• 소괄호를 이용하여 우선순위 조절

7.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 Data() // object
    typeof /test/gi // object
    typeof function () {} // function

7.9 지수 연산자

• ES7에서 도입, 좌항의 피연산자를 base로 우항의 피연산자를 exponent로
• 이전에는 Math.pow 연산자 사용

    2 ** 2; // 4
    2 ** -2; // 0.25 
    Math.pow(2,2); // 4
    Math.pow(2,-2); // 0.25

• 지수 연산자가 Math.pow 메서드보다 가독성이 좋음
• 할당 연산자와 같이 사용 가능

    var num = 5;
    num **= 2; // 25

7.10 그 외의 연산자

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

7.11 연산자의 부수 효과

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

    var x;
  
    // 할당 연산자는 변수 값이 변하는 부수 효과
    x = 1;
    console.log(x); // 1
  
    x++;
    console.log(x); // 2
  
    var o = { a: 1 };
    delete o.a;
    console.log(o); // {}

7.12 연산자 우선순위

우선순위	연산자
1	()
2	new(매개변수 존재), ., [](프로퍼티 접근), ()(함수호출), ?.(옵셔널 체이닝 연산자)
3	new(매개변수 미존재)
4	x++, x--
5	!x, +x, -x, ++x, --x, typeof,delte
6	**(이항 연산자 중 가장 우선순위가 높음)
7	*, /, %
8	+, -
9	<, <=, >, >=, in, instanceof
10	==, !=, ===, !==
11	??(null 병합 연산자)
12	&&
13	||
14	? ... : ...
15	할당 연산자
16	,

7.13 연산자 결합 순서

결합 순서	연산자
좌항->우항	+, -, /, %, <, >, in ...
우항->좌항	++, --, delete ...