7장 연산자

* 해당 글은 모던 자바스크립트 Deep Dive를 공부하며 정리한 글입니다. *

연산자, 피연산자란?

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

피연산자 : 연산의 대상이 되는 값

 

연산자 종류

산술 연산자 - 산술 연산이 불가능한 경우 NaN 반환

 

단항 연산자와 증가/감소 연산자의 차이는 부수 효과 X, O

 

문자열 연결 연산자

+ 연산자는 피연산자 중 하나라도 문자열이 있다면, 문자열 연결 연산자로 작동한다.

// true는 1로 타입 변환
1 + true; // 2

// false는 0으로 타입 변환
1 + false; // 1

// null은 0으로 타입 변환
1 + null; // 1

// undefined는 숫자로 타입 변환이 되지 않음
+undefined; // NaN
1 + undefined; // NaN

연쇄 할당

// 연쇄 할당 : 오른쪽에서 왼쪽으로 진행됨
let a, b, c;
a = b = c = 0;
console.log(a, b, c); // 0 0 0

 

비교 연산자

동등 비교 연산자 (느슨한 비교)

7 == 7; // true
7 == '7' // true

'0' == ''; // false
0 == ''; // true
0 == '0'; // true
false == 'false'; // false
false == '0'; // true
false == null; // false
false == undefined; // false

이처럼 예측하기 어려운 결과가 나오기 때문에 사용하지 않는 편이 좋다.

 

일치 비교 연산자 (엄격한 비교)

타입도 같고 값도 같은 경우에만 true를 반환한다.

7 === 7 // true
7 === '7' // false

NaN은 자신과 일치하지 않는 유일한 값이다.

그래서 숫자가 NaN인지 확인하려면 Number.isNaN 함수를 사용해서 판단한다.

NaN === NaN; // false

Number.isNaN(NaN); // true
Number.isNaN(1 + undefined); // true

자바스크립트에는 양의 0, 음의 0이 존재한다.

양, 음에 상관없이 서로 비교하면 true를 반환한다.

0 === -0; // true
0 == -0; // true

이러한 문제 때문에 ES6에서는 Object.is 라는 메서드가 도입됐다.

일치 비교 연산자보다 더 정확하게 값을 비교해준다.

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

 

삼항 조건 연산자

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

 

let x = 4;

// if else 문
if(x%2) { // 리턴값은 0으로 false로 변환
	console.log("홀수입니다.");
} else {
	console.log("짝수입니다.");
}

// 삼항 조건 연산자
x % 2 ? '홀수입니다.' : '짝수입니다.';

 

논리 연산자

논리 부정 연산자 (!)는 언제나 불리언 값을 반환한다. 피연산자가 항상 불리언 값일 필요는 없어서, 불리언 값이 아닌 값이 들어가면 어떻게 되는지 알아보자.

// 암묵적 타입 변환
!0; // true, 0은 원래 false로 타입 변환이 되기 때문에 반대 개념인 true로 리턴
!'Hello'; // false

 

쉼표 연산자

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

let x = 1;
x = (x++, x);
console.log(x); // 2

typeof 연산자

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

// string
typeof ''

// number
typeof 7
typeof NaN

// boolean
typeof true

// undefined
typeof undefined

// symbol
typeof Symbol()

// object
typeof null
typeof []
typeof {}
typeof new Date()
typeof /test/v1

// function
typeof function() {}

 

지수 연산자

ES7에 도입됐으며, 거듭 제곱에 사용된다.

2 ** 2; // 4

// 음수를 거듭제곱할 때는 괄호로 묶어서 사용해야 한다.
(-3) ** 2; // 9

// 할당 연산자와 함께 사용 가능하다.
let x = 5;
x **= 2; // 25

 

연산자 우선순위

책이나 아래 사이트 참고

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Operator_Precedence

연산자 우선순위 - JavaScript | MDN

 

연산자 결합순서