---
description: 모던 자바스크립트 딥다이브 07장 연산자
---

# 07장 연산자

## 연산자

연산자는 하나 이상의 표현식[^1]을 대상으로 연산을 수행하여 하나의 값을 만든다.

연산의 대상인 피연산자는 반드시 값으로 평가 될 수 있는 표현식이어야 한다. 또한 피연산자와 연산자의 조합으로 이루어진 연산자 표현식도 값으로 평가 될 수 있는 표현식이다.

$$연산자 표현식 = \{ 피연산자, 연산자, ... \}$$

$$연산자표현식 \in 표현식$$

피연산자는 **'값' 이라는 명사**, 연산자는 ' **새로운 값**을 만든다.' 라는 **동사**

### 1.산술 연산자

수학적 계산 수행

숫자값 혹은 NaN 반환

이항 산술 연산자(부수효과[^2]X, 2개의 피연산자를 연산), 단항 산술 연산자(부수효과O, 1개의 피연산자를 연산)

* 단항 산술 연산자
  * 증가/감소 연산자 (++/--)
    * 증가/감소 연산자는 피연산자의 값을 변경하는 암묵적 할당이 이루어진다.(부수효과)
    * 증가/감소 연산자의 위치에는 의미가 있다.
    * 전위 증가/감소 연산자 : 먼저 피연산자의 값을 변경하고 다른 연산을 수행
    * 후위 증가/감소 연산자 : 다른 연산을 수행한 뒤 피연산자의 값을 변경
  * \+ , - 단항 연산자
    * 숫자 타입이 아닌 연산자에 사용하면 숫자 타입으로 변환한 값을 새로 생성해서 반환한다.
* 문자열 연결 연산 ( 이항 연산에서 )
  * \+ 연산자는 피연산자 중 하나 이상이 문자열인 경우 문자열 연결 연산자로 동작한다. 그 외의 경우는 산술 연산자로 동작한다.
  * 이때 true는 1로 false는 0으로 null 은 0으로 **암묵적 타입 전환**이 되며 undefined는 숫자로 변경되지 않는다.

### 2.할당 연산자

우항에 있는 평가 결과를 좌항에 할당. 변수의 값이 변하는 부수효과가 있다.

할당하는 역할만 하는 것이 아니라, 할당문 역시 연산자표현식으로 값으로 평가되는 표현식이다.

$$x=10$$은 x 우항에 10을 할당하는 역할 뿐 아니라, 10 자체로도 평가된다. 따라서 여러변수에 동일한 값을 연쇄 할당 가능하다.

$$a=b=c=10$$ 이와 같은 연쇄할당은 오른쪽에서 왼쪽으로 진행되며 c=10, b=10, a=10 과 같다.

### 3.비교 연산자

좌항과 우항을 비교하여 불리언 값으로 반환한다.

동등비교, 일치비교 : 같은 값인지 비교, 엄격성의 차이

* 동등비교 : 암묵적 타입 변환을 통해 타입을 일치 시킨 후 비교, 따라서 개발자의 의도와 다른 값이 나올 수 있음.
* 일치비교 :  값과 타입이 모두 일치하는지 확인. 보다 엄격.
  * NaN 주의 :  NaN는 자신과 일치하지 않는 유일한 값. $$NaN \neq NaN$$&#x20;
    * 따라서 `NaN === NaN // false`
  * +0,-0 주의 : 둘은 다른 값인데 비교하면 또 같다고 함
    * `0 === -0 //true`
    * `0 == -0 //true`
  * Object.is 메서드&#x20;
    * ES6에 추가된 메서드 예측 가능한 결과를 반환한다.
    * `Object.is(-0, +0) //false`
    * `Object.is(NaN, NaN) //true`
* 대소관계비교
  * 피연산자의 크기를 비교하여 불리언 값을 반환

### 4.삼항 조건 연산자

조건식의 평가 결과에 따라 반환할 값을 결정.

자바스크립트 유일의 삼항 연산자, 부수효과 없음.

$$조건식?참 일때 반환할 값 : 조건거짓일때 반환할 값$$

if ... else 문과 논리적 구조가 유사하나, if ... else 문은 문으로 값처럼 사용할 수 없다.

{% code title="말도 안되는 코드..." %}
```javascript
var result = if(x > 2){result =  '2보다 큼'} else { result = '2보다 작음'}
```
{% endcode %}

반면, 삼항 조건 연산자 표현식은은 동일한 논리라도 값으로 사용할 수 있기 때문에 유용하다.

{% code title="완전 가능.. 파서블" %}
```javascript
var result = x>2?'2보다 큼':'2보다 작음'
```
{% endcode %}

### 5.논리 연산자

우항과 좌항의 피연산자를 논리연산한다.

* || : OR, 논리합
* && : AND, 논리곱
* ! : NOT, 부정
  * 논리합과 논리곱 논리연산자는 피연산자 한쪽을 반환한다.
  * 부정 논리연산자는 반드시 불리언을 반환한다. 피연산자가 불리언이 아닐경우 묵시적 형변환을 통해 불리언으로 형 변환한다음 부정값을 반환한다.

### 6.쉼표 연산자

```javascript
var x, y, z; 
a = (x =1, y=2, z=3) 
console.log(a) // 3
```

### [https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Comma\_operator](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Comma_operator)

### 7.그룹 연산자

소괄호로 피연산자를 감싸는 연산자. 그룹 연산자를 사용하면 연산자위 우선순위를 조절 할 수 있다.

### 8.typeof 연산자

피연산자의 데이터 타입을 문자열로 반환하는 연산자

* 자바스크립트의 모든 데이터 타입과 일치하지 않는다. (null을 연산할 경우 'object'를 반환한다. 따라서 null 체크를 위해서는 일치 연산자를 사용 해야 한다.)
* 선언하지 않은 식별자를 연산할 경우에도 'object'를 반환한다.

### 9.지수연산자

ES7에 도입된 연산자

* &#x20;`2**2` =  $$2^2$$
* 좌항을 밑으로 우항을 지수로 거듭제곱한 숫자값을 반환한다. 도입 이전에는 Math.pow 메소드를 사용했다.&#x20;
* 음수 거듭제곱을 위해서는 괄호로 감싸야 한다. `(-5)**2`
* 이항 연산자들 중 우선순위가 가장 높다.

### 10. 연산자의 Side Effect

대부분의 연산자는 값을 생성 할 뿐 다른 코드에 영향을 주지 않음.

* 할당 연산자 :  변수값을 변화 하는 부수 효과
* 증가/감소 연산자 (++/--) : 피연산자 값이 재할당 되어 변화 하는 부수 효과
* delete 연산자 : 객체 프로퍼티를 삭제하는 부수효과
  1. `var obj = { a : 'apple', b : 'bananna'}`
  2. `delete obj.a`
  3. `console.log(obj) // {b: 'bananna'}`





[^1]: 값으로 표현될 수 있느 모든 것

[^2]: 피연산의 값을 변경하는 효과, 모든 이항 산술 연산자는 언제나 새로운 값을 만든다.
