[FE] Deep Dive - 7장 연산자

7장 연산자

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

피연산자(Operand): 연산의 대상

 

* 부수효과(Side Effect): 함수나 연산의 실행 과정에서 시스템의 상태를 변경하거나 외부와의 상호 작용을 통해 예상치 못한 효과가 발생하는 것. 여기서는 연산의 결과로 피연산자의 값이 바뀌는 경우!

연산자의 종류

• 산술 연산자
• 할당 연산자
• 비교 연산자
• 삼항 조건 연산자
• 논리 연산자
• 쉼표 연산자
• 그룹 연산자
• typeof 연산자
• 지수 연산자
• 그외 연산자

 

산술 연산자

이항 산술 연산자

우리가 아는 3 + 4 같은거

단항 산술 연산자

++/--/+/-

++: 증가, 피연산자의 값을 변경하는 부수효과 존재, 피연산자에 붙는 위치(전위/후위)에 따라 연산이 조금 달라진다.

--: 감소, 피연산자의 값을 변경하는 부수효과 존재, 피연산자에 붙는 위치(전위/후위)에 따라 연산이 조금 달라진다.

+: number 타입이 아닌 피연산자에 + 단항 연산자를 사용하여 number타입의 값을 반환한다. 부수효과는 없다.

-: 피연산자의 부호를 반전한 값을 반환한다. 부수효과는 없다.

 

문자열 연결 연산자

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

 

* '1' + 2 => '12'

* 1 + '2' => '12

* 1 + true의 경우, JS 엔진은 암묵적으로 boolean 타입의 값인 true를 number 타입인 1로 타입을 강제로 바꾸고 연산한다. => 2 => 암묵적 타입 변환(Implicit Coercion) 또는 타입 강제 변환(Type Coercion)이라고 한다.

* 1 + null => null이 0으로 타입 변환 => 1 + 0 

* 1 + undefined => undefined는 숫자로 타입 변환되지 않는다.

 

할당 연산자

오른쪽 항에 있는 피연산자의 연산 결과를 왼쪽 항에 있는 변수에 할당한다.  이때 왼쪽 항에 있는 변수에 값을 할당하므로 부수효과가 발생한다.

 

비교 연산자

동등/일치 비교 연산자

동등 비교 연산자(Loose Equality)와 일치 비교 연산자(Strict Equality)는 좌항과 우항의 피연산자가 같은 값으로 평가되는지 비교해 boolean 값을 반환한다. 그러나 비교하는 엄격성의 정도가 다르다. 동등 비교는 늠슨한 비교를 하지만 일치 비교는 엄격한 비교를 한다. 전부 부수효과는 없다.

 

x == y: 동등 비교, x와 y 값이 같음

x === y: 일치 비교, x와 y 값과 타입이 같음

x != y: 부동등 비교, x와 y 값이 다름

x !== y: 불일치 비교, x와 y 값과 타입이 다름

 

이때 동등 비교 연산자는 좌항과 우항의 피연산자를 비교할 때 먼저 암묵적 타입 변환을 통해 타입을 일치시키고 같은 값인지 비교한다. 따라서 동등 비교 연산자는 서로 타입이 다르더라도 암묵적 타입 변환 후 같은 값일 수 있다면 true를 반환한다.

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

동등 비교 연산자는 결과를 예측하기 어렵기 때문에 일치 비교 연산자를 사용하자.

 

5 === 5; // true
5 === '5'; // false 값은 같지만 타입이 다르다

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

// 주의
NaN === NaN: // false, NaN은 자신과 일치하지 않는 유일한 값이다.
// 이때는 빌트인 함수를 사용하자.
isNaN(NaN) // true
isNaN(10) // false
isNaN(1+undefined) // true

 

* ES6에서 도입된 Object.is 메서드는 다음과 같이 예측 가능한 정확한 비교 결과를 반환한다. 이 외에는 일치 비교 연산자(===)와 동일하게 동작한다.

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

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

 

대소 비교 연산자

 

삼항 조건 연산자

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

 

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

if...else 문은 표현식이 아닌 "문"이다. 따라서 if...else 문은 값처럼 사용할 수 없다. 그러나 삼항 조건 연산자 표현식은 값으로 평가할 수 있는 표현식인 "문"이다. 따라서 삼항 조건 연산자 표현식은 값처럼 다른 표현식의 일부가 될 수 있다!

 

논리 연산자

전부 부수효과가 없다.

||: 논리합(OR)

&&: 논립곱(AND)

!: 부정(NOT)

 

쉼표 연산자

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

 

let x, y, z;

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

 

그룹 연산자

 

typeof 연산자

typeof 연산자는 피연산자의 데이터 타입을 문자열로 반환한다. typeof 연산자는 7가지 문자열 "string", "number", "boolean", "undefined", "symbol", "object", "function" 중 하나를 반환한다. "null"을 반환하는 경우는 없으며, 함수의 경우 "function"을 반환한다. 따라서 typeof 연산자가 반환하는 문자열은 7개의 데이터 타입과 정확히 일치하지 않는다.

 

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 Date() // object
typeof function () {} // function

 

typeof null이 "null"이 아닌 "object"를 반환하는 것은 자바스크립트 첫 번째 버전의 버그다. 그러나 기존 코드에 영향을 줄 수 있기 때문에 아직까지 수정되지 못하고 있다. 따라서 값이 null인지 확인할 때는 일치 연산자(===)를 사용하자.

 

let foo = null;

typeof foo === null; // => "string" === null => false
foo === null; // true

 

지수 연산자

ES7에서 도입된 지수 연산자는 좌항의 피연산자를 밑(base)으로, 우항의 피연산자를 지수(exponent)로 거듭 제곱하여 숫가 값을 반환한다.