모던 자바 스크립트 Deep Dive 를 공부하며 정리하는 글을 또 정리하며 이해하는 글입니다.

---

0. 연산자

• 연산자
  • 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산 등을 수행해 하나의 값을 만드는 것
• 피연산자
  • 연산의 대상
  • 값으로 평가될 수 있는 표현식
  • 연산자는 값으로 평가된 피연산자를 연산해 새로운 값을 만든다.
• 연산자 표현식
  • 피연산자와 연산자의 조합
  • 피연산자는 연산의 대상이 되어야 하므로 값으로 평가할 수 있어야 한다.

---

1. 산술 연산자

• 산술 연산자
  • 피연산자를 대상으로 수학적 계산을 수행해 새로운 숫자 값을 만든다.
  • 산술 연산이 불가능한 경우, NaN을 반환한다.
• 산술 연산자는 피연산자의 개수에 따라 이항 산술 연산자와 단항 산술 연산자로 구분할 수 있다.

1.1 이항 산술 연산자

• 2개의 피연산자를 산술 연산하여 숫자 값을 만든다.
• 모든 이항 산술 연산자는 피연산자의 값을 변경하는 부수 효과가 없다.
• 어떤 산술 연산을 해도 피연산자의 값이 바뀌는 경우는 없고 언제나 새로운 값을 만들 뿐이다.
• +(덧셈), -(뺄셈), *(곱셈), /(나눗셈), %(나머지

1.2 단항 산술 연산자

• 1개의 피연산자를 산술 연산하여 숫자 값을 만든다.
• ++(증가), --(감소), +(효과 x), -(양수를 음수로, 음수를 양수로)
• 증가/감소(++/--) 연산자
  • 이항 산술 연산자와는 달리 증가/감소(++/--) 연산자는 피연산자의 값을 변경하는 부수 효과가 있다.
    • 증가/감소 연산을 하면 피연산자의 값을 변경하는 암묵적 할당이 이뤄진다.
  • 증가/감소(++/--) 연산자는 위치에 의미가 있다.
    • 피연산자 앞에 위치할 경우, 먼저 피연산자의 값을 증가/감소시킨 후, 다른 연산을 수행한다.
    • 피연산자 뒤에 위치할 경우, 먼저 다른 연산을 수행한 후, 피연산자의 값을 증가/감소시킨다.
• • 단항 연산자
  • • 단항 연산자는 피연산자에 어떠한 효과도 없다. 음수를 양수로 반전하지도 않는다.
  • 숫자 타입이 아닌 피연산자에 + 단항 연산자를 사용하면 피연산자를 숫자 타입으로 변환하여 반환한다.
    • 피연산자를 변경하는 것은 아니고 숫자 타입으로 변환한 값을 생성해서 반환한다.
• • 단항 연산자
  • • 단항 연산자는 피연산자의 부호를 반전한 값을 반환한다.
  • • 연산자와 마찬가지로 숫자 타입이 아닌 피연산자에 사용하면 피연산자를 숫자 타입으로 변환하여 반환한다.
    • 피연산자를 변경하는 것은 아니고 부호를 반전한 값을 생성해 반환한다.

1.3 문자열 연결 연산자

• • 연산자는 피연산자 중 하나 이상이 문자열일 경우 문자열 연결 연산자로 동작한다.
• 개발자의 의도와는 상관없이 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환되기도 한다.
  • 암묵적 타입 변환 또는 타입 강제 변환

---

2. 할당 연산자

• 우항에 있는 피연산자의 평가 결과를 좌항에 있는 변수에 할당한다.
• 좌항의 변수에 값을 할당하므로 변수 값이 변하는 부수 효과가 있다.
• =, +=, -=, *=, /=, %=
• 할당문은 값으로 평가되는 표현식인 문으로서 할당된 값으로 평가된다.
• 할당문을 다른 변수에 할당할 수도 있다.
• 이러한 특징을 활용해 여러 변수에 동일한 값을 연쇄 할당할 수 있다.

---

3. 비교 연산자

• 좌항과 우항의 피연산자를 비교한 다음 그 결과를 불리언 값으로 반환한다.
• if 문이나 for 문과 같은 제어문의 조건식에서 주로 사용한다.

3.1 동등/일치 비교 연산자

• 공통점
  • 동등 비교 연산자와 일치 비교 연산자는 좌항과 우항의 피연산자가 같은 값으로 평가되는지 비교해 불리언 값을 반환한다.
• 차이점
  • 동등 비교 연산자는 느슨한 비교를 한다.
  • 일치 비교 연산자는 엄격한 비교를 한다.
• ==(동등 비교), ===(일치 비교), !=(부동등 비교), !==(불일치 비교)
• 개발자의 의도와는 상관없이 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환되기도 한다.
  • 암묵적 타입 변환

동등 비교(==) 연산자

• 좌항과 우항의 피연산자를 비교할 때 먼저 암묵적 타입 변환을 통해 타입을 일치시킨 후 같은 값인지 비교한다.
  • 좌항과 우항의 피연산자가 타입은 다르더라도 암묵적 타입 변환 후에 같은 값일 수 있다면 true를 반환한다.
• 동등 비교 연산자는 편리한 경우도 있지만 결과를 예측하기 어렵고 실수하기 쉽다.
• 동등 비교 연산자는 예측하기 어려운 결과를 만들어내므로 사용하지 않는 편이 좋다.

일치 비교(===) 연산자

• 좌항과 우항의 피연산자가 타입도 같고 값도 같은 경우에 한하여 true를 반환
• 암묵적 타입 변환을 하지 않고 값을 비교한다.
• 따라서 일치 비교 연산자는 예측하기 쉽다.
• NaN은 자신과 일치하지 않는 유일한 값이므로 주의해야 한다.
  • 숫자가 NaN인지 조사하려면 빌트인 함수 Number.isNaN을 사용한다.
• 자바스크립트에는 양의 0과 음의 0이 있는데 이들을 비교하면 true를 반환한다.

Object.is 메서드

• ES6에 도입된 Object.is 메서드는 예측 가능한 정확한 비교 결과를 반환한다.

• 그 외에는 일치 비교 연산자(===)와 동일하게 동작한다.

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

3.2 대소 관계 연산자

• 피연산자의 크기를 비교하여 불리언 값을 반환
• >, <. >=, <=

---

4. 삼항 조건 연산자

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

• 자바스크립트의 유일한 삼항 연산자이며, 부수 효과는 없다.

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

• 삼항 조건 연산자는 첫 번째 피연산자가 true로 평가되면 두 번째 피연산자를 반환하고, 첫 번째 피연산자가 false로 평가되면 세 번째 피연산자를 반환한다.

• 물음표(?) 앞의 첫 번째 피연산자는 조건식, 즉 불리언 타입의 값으로 평가될 표현식이다.

• 삼항 조건 연산자의 첫 번째 피연산자는 조건식이므로 삼항 조건 연산자 표현식은 조건문이다

• 삼항 조건 연산자 표현식은 값으로 평가할 수 있는 표현식인 문이다.

• 조건에 따라 어떤 값을 결정해야 한다면 if..else문보다 삼항 조건 연산자 표현식을 사용하는 편이 유리하다.

---

5. 논리 연산자

• 우항과 좌항의 피연산자(부정 논리 연산자의 경우 우항의 피연산자)를 논리 연산한다.
• ||, &&. !
• 논리 부정(!) 연산자는 언제나 불리언 값을 반환한다.
• 논리합(||) 또는 논리곱(&&) 연산자 표현식의 평가 결과는 불리언 값이 아닐 수도 있다.
• 논리합(||) 또는 논리곱(&&) 연산자 표현식은 언제나 2개의 피연산자 중 어느 한 쪽으로 평가된다.

---

6. 쉼표 연산자

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

---

7. 그룹 연산자

• 소괄호 () 로 피연산자를 감싸는 그룹 연산자는 자신의 피연산자인 표현식을 가장 먼저 평가한다.
  • 그룹 연산자를 사용하면 연산자의 우선순위를 조절할 수 있다.
• 그룹 연산자는 연산 우선순위가 가장 높다.

---

8. typeof 연산자

• 피연산자의 데이터 타입을 문자열로 반환한다.
• 7가지 문자열 중 하나를 반환한다.
  • string, numer, 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 /test/gi // object
typeof function() {} // function

typeof 연산자 주의

• typeof 연산자로 null 값을 연산해 보면 null이 아닌 object를 반환한다.
  • 자바스크립트의 첫 번째 버전의 버그
  • 값이 null 타입인지 확인할 때는 typeof 연산자를 사용하지 말고 일치 연산자(===)를 사용하자.
• 선언하지 않은 식별자를 typeof 연산자로 연산하면 ReferenceError가 발생하지 않고 undefined를 반환한다.

---

9. 지수 연산자

• ES7에서 도입된 지수 연산자는 좌항의 피연산자를 밑으로, 우항의 피연산자를 지수로 거듭 제곱하여 숫자값을 반환한다.
• 지수 연산자가 도입되기 이전에는 Math.pow 메서드를 사용했다.

---

10. 그 외의 연산자

• ?. : 옵셔널 체이닝 연산자
• ?? : null 병합 연산자
• delete : 프로퍼티 삭제
• new : 생성자 함수를 호출할 때 사용하여 인스턴스를 생성
• instanceof : 좌변의 객체가 우변의 생성자 함수와 연결된 인스턴스인지 판별
• in : 프로퍼티 존재 확인

---

11. 연산자의 부수 효과

• 부수 효과가 있는 연산자는 할당 연산자(=), 증가/감소 연산자(++/--), delete 연산자이다.

---

12. 연산자 우선순위

• 연산자 우선순위란 여러 개의 연산자로 이뤄진 문이 실행될 때 연산자가 실행되는 순서를 말한다.
• 우선순위가 높을수록 먼저 실행된다.

1. ()
2. new(매개변수 존재), ., [](프로퍼티 접근). ()(함수 호출), ?.(옵셔널 체이닝 연산자)
3. new(매개변수 미존재)
4. x++, x—
5. !x, +x, -x, ++x, —x, typeof, delete
6. **(이항 연산자 중에서 우선순위가 가장 높다)
7. *, /, %
8. +, -
9. <, <=, >, >=, in, instanceof
10. ==, ! =,  ===, ! == 
11. ??(null 병합 연산자)
12. &&
13. ||
14. ? … : …
15. 할당 연산자(=, +=, -=, …)
16. ,

---

13. 연산자 결합 순서

• 연산자 결합 순서
  • 연산자의 어느 쪽(좌항 또는 우항)부터 평가를 수행할 것인지를 나타내는 순서

결합 순서

• 좌항 → 우항
  • +, -, /, %, <, ≤, >, ≥, &&, ||, ., [], (), ??, ?., in, instanceof
• 우항 → 좌항
  • ++, --, 할당 연산자(=, +=, -=, …), !x, +x, -x, ++x, --x, typeof, delete, ? … : …. **

---

전체 정리 노션