Front-End/JavaScript

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

김검정 2023. 8. 11. 21:05

연산자와 피연산자

구분 설명
연산자(Operator) 연산을 수행하는 기호
피연산자(Operand) 연산에 참여하는 변수나 상수

ex) 3 + 5  라는 식이 있으면 + 연산자 3 과 5는 피연산자이다.

 

산술 연산자

산술 연산자는 피연산자를 대상으로 수학적 계산을 수행해 새로운 숫자 값을 만든다. 산술 연산이 불가능한 경우 NaN 을 반환한다.

 

이항 산술 연산자

이항 산술 연산자

부수 효과가 없다는 것은 어떤 산술 연산을 수행해도 피연산자의 값이 변경되는 경우는 없고 언제나 새로운 값이 만들어진다는 것이다.

 

단항 산술 연산자

단항 산술 연산자

증가/감소(++/--) 연산자는 피연산자의 값을 변경하는 부수효과가 있다.

var x = 4;
var result = 0;

result = x++;
console.log(result, x); // 4, 5

result = ++x;
console.log(result, x); // 6, 6

result = x--;
console.log(result, x); // 6, 5

result = --x;
console.log(result, x); // 4, 4

 

+ 의 경우 피연산자 중 하나 이상이 문자열인 경우 연결 연산자로 동작한다.

'1' + 2; // '12'

1 + 2; // 3

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

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

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

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

위에서 자바스크립트 엔진에 의해 암묵적으로 타입이 변환된 경우가 존재한다. 이를 암묵적 타입 변환 (implicit coercion) 또는 타입 강제 변환 (type coercion)이라고 한다.

 

 

할당 연산자

할당 연산자는 우항에 있는 피연산자의 평가 결과를 좌항에 있는 변수에 할당한다.

 

 

비교 연산자

비교 연산자는 좌항과 우항의 피연산자를 비교한 다음 그 결과를 불리언 값으로 반환한다.

동등 비교(==) 연산자의 경우 좌항과 우항의 피연산자를 비교할 때 먼저 암묵적 타입 변환을 통해 타입을 일치시킨 후 같은 값인지 비교한다.

5 == '5'; // true

5 == 5; // true

1 == true; // true

0 == false; // true

따라서 동등 비교 연산자의 경우 정확한 값 비교가 어렵다. 그렇기 때문에 동등 비교 연산자 보다는 일치 비교(===)를 사용해야 한다.

 

5 === '5'; // false

1 === true; // false

일치 비교 연산에서 주의할 경우를 알아보자

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

// 따라서 isNaN을 사용해야 하는데 지정한 값이 NaN인지 확인하고 그 결과를 불리언으로 반환한다.
isNaN(NaN); // true
isNaN(10); // false

//숫자 0의 경우에도 양의 0과 음의 0이 있는데 이 둘을 비교하면 true를 반환한다.
0 === -0; // true
0 == -0; // true
-0 === +0 // true

// 0을 비교하고 싶은 경우 Object.is를 사용한다.
Object.is(-0, +0) // true

 

 

대소 관계 비교 연산자

대소 관계 비교 연산자

 

 

삼항 조건 연산자

삼항 조건 연산자는 조건식의 평가 결과에 따라 반환할 값을 결정한다. 부수 효과는 없다.

삼항 조건 연산자

var x = 10;

var result = x % 2 ? '홀수' : '짝수';

console.log(result); // 짝수

 

 

논리 연산자

논리 연산자

true || true; // true
true || false; // true
false || false; // false

true && true; // true
true && false; // false

!true; // false
!false; // true

// 논리부정(!) 의 경우 항상 불리언 값을 반환한다. 불리언 값이 아니면 암묵적 타입 변환이 일어난다.
!0; // true
!'Hello'; // false