연산자

자바스크립트의 연산자

---

• 연산자: 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산 등을 수행함. 값으로 평가된 피연산자를 연산해 새로운 값을 만듦.
  • 피연산자: 연산의 대상. 값으로 평가될 수 있는 표현식.
  • 연산자 표현식: 피연산자+연산자. 값으로 평가될 수 있는 표현식.

1. 산술 연산자

• 수학적 계산을 수행해 새로운 숫자 값을 만듦.
• 연산 불가능 시 NaN 반환
• 이항 산술 연산자: 2개의 피연산자를 산술 연산
  • +, -, *, /, %가 해당
  • 피연산자의 값을 변경하는 부수 효과 없음
• 단항 산술 연산자: 1개의 피연산자를 산술 연산
  • ++(증가), --(감소), +, -가 해당
  • ++, --만 부수 효과 있음
  • 숫자 피연산자에 +는 아무 효과 없음. -는 양수를 음수로 반전한 값 반환. (ex: console.log(-(-10)); // 10)
• 전위 증가/감소 연산자는 증가/감소가 먼저 시행. 런타임 시점에서 1회 선 실행됨.
• 후위 증가/감소 연산자는 다른 연산이 먼저 시행.

var x = 5, result;
result = x++;
console.log(result, x); // 5 6

result = ++x;
console.log(result, x); // 7 7

• 숫자 타입이 아닌 피연산자에 +, - 단항 연산자 사용 시 피연산자를 숫자 타입으로 변환한 값을 생성해서 반환(부수 효과 X).

var x = '1';
console.log(+x); // 1

x = true;
console.log(+x); // 1

x = false;
console.log(+x); // 0

x = 'hello';
console.log(+x); // NaN

• 문자열 연결 연산자: + 연산자는 피연산자 중 하나 이상이 문자열인 경우 문자열 연결 연산자로 동작.
  • 문자열 연결의 경우를 포함해 피연산자들의 타입이 다를 경우 암묵적 타입 변환(강제 타입 변환) 발생.

    '1' + 2; // '12'
    1 + '2'; // '12'
    1 + true; // 2
    1 + false; // 1
    1 + null; // 1
    1 + undefined // NaN

2. 할당 연산자

• 우항(피연산자)의 평가 결과를 좌항(변수)에 할당. 변수 값이 변하는 부수 효과 있음.
• =, +=, -=, *=, /=, %=가 해당됨
• 할당문은 표현식인 문 -> 표현식은 값으로 평가될 수 있는 문 -> 할당문은 값으로 평가됨. 연쇄 할당으로 활용 가능

var a, b, c;

// 연쇄 할당. 오른쪽에서 왼쪽으로 진행. c = 0 -> 0, b = 0 -> 0을 거쳐 a = 0이라는 값으로 평가됨.
a = b = c = 0;
console.log(a, b, c); // 0 0 0

3. 비교 연산자

• 좌항과 우항의 피연산자를 비교해 그 결과를 불리언 값으로 반환

• 동등 비교(==), 일치 비교(===) 연산자, 대소 관계 비교 연산자(>, <, >=, <=)가 해당됨

  • 동등 비교: 값이 같으면 true, 다르면 false -> 비교하는 두 값은 암묵적 타입 변환 시행됨.
  • 일치 비교: 값과 타입이 모두 같으면 true, 하나라도 다르면 false.

• 동등 비교는 결과 예측이 어려우므로 일치 비교 사용 권장.

• 특수값

  • NaN: 자신과 일치하지 않는 유일한 값. 특정 값이 NaN인지 조사하려면 빌트인 함수 isNaN을 사용해야 함

    NaN === NaN; // false
    isNaN(NaN); // true
    isNaN(10); // false
    isNaN(1 + undefined) // true

  • 0: 양의 0(0)과 음의 0(-0)이 있는데 동등/일치 비교 모두 true 반환

  • ES6에서 Object.is의 도입으로 특수값의 정확한 비교가 가능해짐

    ```javascript

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

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

4. 삼항 조건 연산자

• 조건식의 평가 결과에 따라 반환할 값을 결정함. 부수 효과 없음. 두 번째 피연산자 또는 세 번째 피연산자로 평가되는 표현식.

// 조건식 ? 조건식이 true일 때 반환할 값 : 조건식이 false일 때 반환할 값
var result = score >= 60 ? 'pass' : 'fail';

• 피연산자1: 조건식, 불리언 타입의 값으로 평가될 표현식. 피연산자1의 평가 결과가 불리언 값이 아니면 불리언 값으로 암묵적 타입 변환됨.

var x = 2;

// 2 % 2는 0, 0은 false로 암묵적 타입 변환
var result = x % 2 ? '홀' : '짝';
console.log(result); // 짝

• if...else문과의 차이: 삼항 조건 연산자는 값처럼 사용이 가능 -> 다른 표현식의 일부가 될 수 있음. 조건에 따라 변수 값 할당이 가능.
• 조건에 따라 수행해야 할 문이 여러 개라면 if...else문이 가독성이 좋음.

5. 논리 연산자

• 우항과 좌항의 피연산자(부정 논리 연산자 !의 경우 우항의 피연산자)를 논리 연산함.
• 논리합(||), 논리곱(%%), 부정 논리(!) 연산자가 해당됨
• 부정 논리 연산자는 불리언 값을 반환함. 피연산자가 불리언 값이 아니면 불리언 타입으로 암묵적 타입 변환됨. (ex: !0; // true !'Hello'; // false)
• 논리합과 논리곱 연산자 표현식은 2개의 피연산자 중 어느 한쪽으로 평가됨. (ex: 'Cat' && 'Dog; // 'Dog');

6. 쉼표 연산자

• 왼쪽 피연산자부터 평가해 마지막 피연산자의 평가가 끝나면 마지막 피연산자의 평가 결과를 반환함

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

7. 그룹 연산자

• 소괄호로 감싸서 표현. 사용 시 자신의 피연산자인 표현식을 가장 먼저 평가함. -> 연산자의 우선순위를 조절할 수 있음.

8. typeof 연산자

• 피연산자의 데이터 타입을 문자열로 반환
• 반환 문자열 종류: "string", "number", "boolean", "undefined", "symbol", "object", "function" -> 데이터 타입과 완전히 일치하지는 않음
  • null, 배열([]), 객체({}), new 연산자(new Date()), 정규식(/test/gi)은 "object"
  • null이 "object"인 것은 버그! 일치 연산자(===)로 확인할 것
• 선언하지 않은 식별자를 typeof 연산자로 연산할 경우 ReferenceError가 발생하지 않고 undefined 반환함

9. 지수 연산자

• ES7에서 도입. 좌항의 피연산자를 밑, 우항의 피연산자를 지수로 거듭 제곱하여 숫자 값 반환
• 기존의 Math.pow 메서드와 같은 효과. 가독성이 더 좋음.
• 할당 연산자와 함께 사용 가능

var num = 5;
num ~~= 2; // 25

• 이항 연산자 중에서 우선순위가 가장 높음

2 * 5 ** 2; // 50

10. 기타 연산자

(예정)

11. 연산자의 부수 효과

• 부수 효과: 피연산자의 값이 변환 -> 다른 코드에 영향을 주게 됨
• 할당 연산자 =, 증가/감소 연산자 ++/--, delete 연산자만 부수 효과가 있음
  • delete: 프로퍼티 삭제

12. 연산자 우선순위

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

우선순위	연산자
1	()
2	new(매개변수 존재), . , [](프로퍼티 접근), ()(함수 호출), ?.(옵셔널 체이닝 연산자)
3	new(매개변수 미존재)
4	x++, x--
5	!x, +x, -x, ++x, --x, typeof, delete
6	**(이항 연산자 중 우선순위가 가장 높음)
7	*, /, %
8	+, -
9	<, <=, >, >=, in, instanceif
10	==, !=, ===, !==
11	??(null 병합 연산자)
12	&&
13
14	삼항 조건 연산자
15	할당 연산자(=, +=, -= 등)
16	,
- 모두 기억하기는 어려우므로 연산자 우선순위가 가장 높은 그룹 연산자를 사용해 우선순위를 명시적으로 조절하는 게 좋음

13. 연산자 결합 순서

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

  결합 순서	연산자
  좌 -> 우	+, -, /, %, <, <=, >, >=, &&,
  우 -> 좌	++, --, 할당 연산자(= 등), !x, +x, -x, ++x, --x, typeof, delete, 삼항 조건 연산자