[JavaScript] 단항 산술 연산자, 문자열 연결 연결자, 비교 연산자, Object.is()

'모던 자바스크립트' 책을 읽고 익숙하지 않은 내용 위주로 정리 해보려고 한다.

---

우선, 연산자와 피연산자의 의미는 아래와 같다.

1 + 2

• 연산자 : 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산 등을 수행해 하나의 값을 만든다. (위 예시에서 +가 연산자이다.)
• 피연산자 : 연산의 대상 (위 예시에서 1과 2가 피연산자이다.)

---

1. 단항 산술 연산자

1️⃣ + 단항 연산자는 피연산자에 어떠한 효과도 없다.

    음수를 양수로 반전하지도 않는다.

+10;	// 10
+(-10);	// -10

 

숫자 타입이 아닌 피연산자에 + 단항 연산자를 사용하면 피연산자를 숫자 타입으로 변환하여 반환한다.

이 때, 피연산자를 변경하는 것이 아닌 숫자 타입을 변환한 값을 생성하여 반환한다.

// 문자열을 숫자로 변환
let x = '1';
console.log(+x);	// 1
console.log(x);		// "1"

// boolean 값을 숫자로 변환
x = true;
console.log(+x);	// 1
console.log(x);		// true

// boolean 값을 숫자로 변환
x = false;
console.log(+x);	// 0
console.log(x);		// false

// 문자열을 숫자로 변환할 수 없어서 NaN으로 반환
x = 'Hello';
console.log(+x);	// NaN
console.log(x);		// "Hello"

 

 

2️⃣ - 단항 연산자는 피연산자의 부호를 반전한 값으로 반환한다.

    + 단항 연산자와 마찬가지로 숫자 타입이 아닌 피연산자에 사용하면 피연산자를 숫자 타입으로 변환하여 반환한다.

// 부호 반전
-(-10);		// 10

// 문자열을 숫자로 변환
-'10';		// -10

// boolean 값을 숫자로 변환
-true;		// -1

// 문자열을 숫자로 변환할 수 없어서 NaN으로 반환
-'Hello';	// NaN

---

2. 문자열 연결 연결자

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

// 문자열 연결 연산자
'1'+2;	// '12'

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

// false는 0으로 변환
1 + false	// 1

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

 

💡 개발자의 의도와 상관없이 JavaScript 엔진에 의해 암묵적으로 타입이 자동 변환 되는 것을

    암묵적 타입 변환(Implicit Coercion) 혹은 타입 강제 변환(Type Coercion)이라고 한다.

---

3. 비교 연산자

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

 

1️⃣ 동등 비교(==) 연산자

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

5 == 5;		// true
5 == '5';	// true

 

또한, 동등 비교(==) 연산자는 결과를 예측하기 어려워 실수하기 쉽다.

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

 

💡 따라서, 동등 비교(==) 연산자는 사용하지 않는 편이 좋고, 일치 비교(===) 연산자를 사용하는 것이 좋다.

 

 

2️⃣ 일치 비교(===) 연산자

일치 비교(===) 연산자는 좌항과 우항의 피연산자가 타입도 같고 값도 같은 경우에 한하여 true를 반환한다.

동등 비교(==) 연산자처럼 암묵적 타입 변환이 되지 않는다.

5 === 5;	// true
5 === '5';	// false

 

단, 일치 비교(===) 연산자에서 NaN은 동일한 값으로 보지 않아 false가 반환된다.

  * NaN은 자신과 일치하지 않는 유일한 값

NaN === NaN;	// false

 

💡 동등 비교(==) 연산자과 일치 비교(===) 연산자는 +0과 -0을 동일하다고 평가하고, NaN과 NaN을 다른 값으로 평가한다. JavaScript ES6 문법인 Object.is() 메서드는 정확한 비교 결과를 반환한다. 그 외에는 일치 비교(===) 연산자와 동일하게 동작한다.

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

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

 

 

3️⃣ 부동등 비교(!=) 연산자와 불일치 비교(!==) 연산자

부동등 비교(!=) 연산자와 불일치 비교(!==) 연산자는 동등 비교(==) 연산자와 일치 비교(===) 연산자의 반대 개념이다.

// 부동등 비교 연산자
5 != 8;			// true
5 != 5;			// false
5 != '5';		// false

// 불일치 비교 연산자
5 !== 8;		// true
5 !== 5;		// false
5 !== '5';		// true