모던 자바스크립트 Deep Dive

[TIL/모던 자바스크립트 Deep Dive] 2023/03/24

7장. 연산자(Operator) 는 하나 이상의 을 대상으로 (산술, 할당, 비교, 논리, 타입, 지수 연산) 등을 수행해 을 만든다. 이때 연산의 대상이 바로 이다. 피연산자가 "값"이라는 을 한다면, 연산자는 "피연산자를 연산하여 새로운 값을 만든다"라는 을 한

2023년 3월 24일3min read

7장. 연산자(Operator)

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


피연산자가 "값"이라는 ```명사의 역할```을 한다면, 연산자는 "피연산자를 연산하여 새로운 값을 만든다"라는 ```동사의 역할```을 한다고 볼 수 있다.

### 7-1. 산술 연산자(arithmetic operator)

피연산자(Operand)를 대상으로 ```수학적 계산```을 수행하여 새로운 숫자 값을 만들면 ```산술 연산자```라고 할 수 있다.

> **이항 산술 연산자**

operand가 2개이고, 수학적 계산을 하여 새로운 숫자 값을 만드는 연산자는 ```이항(binary) 산술 연산자```이다. 이항 산술 연산자는 어떠한 산술 연산을 해도 피연산자의 값이 바뀌는 경우는 없고 언제나 새로운 값을 만든다는 특징이 있다.

![](https://velog.velcdn.com/images/minkwan/post/57172867-3fe7-4216-99c4-65d644f10b9a/image.png)

> **단항 산술 연산자**

이항(binary) 산술 연산자```와는 달리 ```증가/감소(++/--) 연산자```는 피연산자의 값을 변경하는 ```side effect```가 존재한다. ```side effect```가 존재한다는 사실과 더불어 '증가/감소 연산자'는 해당 ```연산자의 위치```에 의미가 있다. 코드를 통해 살펴봤다.


![](https://velog.velcdn.com/images/minkwan/post/81326880-7d1c-43a0-b316-5af9c5f4cf86/image.png)

선할당 후증가의 매커니즘은 다음과 같다.
1. result라는 변수에 5라는 x값을 먼저 할당한다.
2. 이후 x의 값을 6으로 증가시킨다.
3. 따라서 콘솔에는 5, 6 순서로 출력이 된다.

선증가 후할당의 매커니즘은 다음과 같다.
1. 6이라고 전달받은 x값을 일단 먼저 7로 증가시킨다.
2. 증가시킨 x값을 result 변수에 할당한다.
3. 따라서 콘솔에는 7, 7 순서로 출력이 된다.

감소는 증가와 매커니즘이 동일하기에 생략하겠다.

숫자 타입이 아닌 피연산자에 + 단항 연산자를 사용하면 피연산자를 숫자 타입으로 변환하여 반환한다. 이때 ``피연산자를 변경하는 것은 아니고`` 숫자 타입으로 변환한 값을 생성해서 반환한다. 따라서 부수 효과는 없다.

- 단항 연산자```는 피연산자의 부호를 반전한 값을 반환한다. + 단항 연산자와 마찬가지로 숫자 타입이 아닌 피연산자에 사용하면 피연산자를 숫자 타입으로 변환하여 반환한다. 이때 피연산자를 변경하는 것은 아니고 부호를 반전한 값을 생성해 반환한다. 따라서 부수 효과는 없다.

![](https://velog.velcdn.com/images/minkwan/post/37799764-b0eb-450a-afee-af604dc842d7/image.png)


> **문자열 연결 연산자**

재미있는 점은 개발자의 의도와는 상관없이 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환되기도 한다는 것이다.

이러한 현상을 ``암묵적 타입 변환(implicit coercion)` 또는 `타입 강제 변환(type coercion)``이라고 한다. 9장에서 더욱 자세하게 다룬다고 한다!

7-2. 할당 연산자(assignment operator)

할당 연산자(assignment operator)```는 형식이 어떻든 변수 값이 변하는 side effect가 존재한다.


![](https://velog.velcdn.com/images/minkwan/post/ca00af22-64c6-4744-8509-e0c3f838d456/image.png)

할당문 자체보다는, 할당문이 ```표현식인 문인가, 표현식이 아닌 문인가```하는 쟁점이 더 중요해 보인다. 결론부터 말하자면, ```할당문은 표현식인 문```이다. 표현식인 문은 ```값으로 평가될 수 있는 문```을 의미하고, 값으로 활용될 수 있다는 것은 ```특정 변수에 할당할 수 있다는 뜻```을 내포한다.

![](https://velog.velcdn.com/images/minkwan/post/371601ac-1194-4b76-a3ab-2dd06e8d2a2f/image.png)

추가적으로, 이러한 특징을 활용하여 여러 변수에 동일한 값을 ```연쇄 할당```할 수 있다고 한다.

![](https://velog.velcdn.com/images/minkwan/post/b49b0dde-4028-4c6d-8888-c1a41b5514cf/image.png)

### 7-3. 비교 연산자(comparison operator)

동등/일치 비교 연산자

동등 비교 연산자(loose equality)```와 ```일치 비교 연산자(strict equality)```는 영어 표기가 더욱 직관적이다.


![](https://velog.velcdn.com/images/minkwan/post/66e1a8aa-798b-4e55-a056-a9aa56cee769/image.png)

일치 비교 연산자(strict equality)```는 불리언 값의 반환을 위해 ```값 자체와 타입까지 고려```하여 비교하는 연산자이다. 암묵적 타입 변환을 하지 않고도 값을 비교하기에 예측 가능성이 높아진다.


다만 ```일치 비교 연산자(strict equality)```에서 ```NaN과 0```은 주의해야 한다.

다음은 ``0`이다. 자바스크립트에는 `양의 0`과 `음의 0`이 있는데 이들을 비교하면 `true``를 반환하기에 주의해야 한다.