[JavaScript] 연산자

연산자는 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산 등을 수행하여 하나의 값을 만들고 이 때 연산의 대상을 피연산자로 함

산술 연산자

피연산자를 대상으로 수학적 계산을 수행해 새로운 숫자 값을 만들고 산술 연산이 불가능한 경우 NaN을 반환

이항 산술 연산자

2개의 피연산자를 산술 연한하여 숫자 값을 만드는데, 피연산자의 값이 바뀌는 경우가 없고 언제나 새로운 값을 만든다.

• + : 덧셈
• - : 뺄셈
• * : 곱셈
• / : 나눗셈
• % : 나머지

단항 산술 연산자

1개의 피연산자를 산술 연산하여 숫자 값을 만든다.

• ++ : 증가 (부수효과 존재)
• -- : 감소 (부수효과 존재)
• + : 어떤 효과도 없고 음수를 양수로 반전하지도 않음
• - : 양수를 음수로, 음수를 양수로 반전한 값을 변환

증가/감소(++ / --) 연산자의 위치에 의미가 있으므로 전위인 경우 피연산자 값을 증가/감소시킨 후 다른 연산자 수행, 후위인 경우 다른 연산 수행한 후 피연산자 값을 증가/감소시킨다.

문자열 연결 연산자

연산자는 피연산자 중 하나 이상이 문자열인 경우 문자열 연결 연산자로 동작하며 그 외는 산술 연산자로 동작

할당 연산자

우항에 있는 피연산자의 평가 결과를 좌항에 있는 변수에 할당하며 변수 값이 변하는 부수효과 존재

• =
• +=
• -=
• *=
• /=
• %=

비교 연산자

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

동등/일치 비교 연산자

좌항과 우항의 피연산자가 같은 값으로 평가되는지 비교해 불리언 값을 반환

동등 비교 ==

좌항과 우항의 피연산자를 비교할 때 암묵적 타입 변환을 통해 타입을 일치시킨 후 같은 값인지 비교

일치 비교 ===

연산자는 좌항과 우항의 피연산자가 타입도 같고 값도 같은 경우에 한하여 true 반환

다만 NaN은 자신과 일치하지 않는 유일한 값으로 NaN을 조사하려면 빌트인 함수 Number.isNaN을 사용, 숫자 0도 양의 0과 음의 0이 다르지만 같은 값으로 평가하여 Object.is를 사용하여 평가

부동등 비교 !=

동등 비교 연산자의 반대 개념

불일치 비교 !==

일치 비교 연산자의 반대 개념

대소 관계 비교 연산자

피연산자의 크기를 비교하여 불리언 값을 반환

• >
• <
• >=
• <=

삼항 조건 연산자

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

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

논리 연산자

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

• || : 논리합(OR)
• && : 논리곱(AND)
• ! : 부정(NOT)

드 모르간 법칙

논리 연산자로 구성된 복잡한 표현식은 가독성이 좋지 않아 이해하기 어려우므로 드 모르간의 법칙을 활용하면 복잡한 표현식을 더 좋은 표현식으로 변환 가능

!(x || y) === (!x && !y)
!(x && y) === (!x || !y)

쉼표 연산자

쉼표 연산자는 왼쪽 피연산자부터 차례대로 피연산자를 평가하고 마지막 피연산자 평가 끝나면 마지막 피 연산자 평과 결과를 반환

그룹 연산자

소괄호()로 피연산자를 감싸는 그룹 연산자는 자신의 피연산자인 표현식을 가장 먼저 평가하여 우선순위를 조절 가능

typeof 연산자

7가지 문자열 “string”, “number”, “boolean”, “undefined”, “symbol”, “object”, “function” 중 하나를 반환하고 null을 반환하는 경우는 없다.

• null 값을 연산해 보면 null이 아닌 object를 반환하여 null 타입 확인을 위해서는 일치 연산자(===) 사용
• 선언하지 않은 식별자를 typeof 연산자로 연산해 보면 ReferenceError가 발생하지 않고 undefined를 반환

지수연산자

ES7에 도입된 지수 연산자로 좌항의 피연산자를 밑으로 우항의 피연산자를 지수로 거듭 제곱하여 숫자 값을 반환하는 것으로 음수를 거듭제곱의 밑으로 사용해 계산하려면 다음과 같이 괄호로 묶어야 한다.

• 할당 연산자로 함께 사용
• 이항 연산자 중 우선순위가 가장 높음

그 외의 연산자

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

연산자의 부수효과

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

= 할당 연산자

변수 값이 변하는 부수 효과

++ / -- 증감 연산자

피연산자의 값을 변경하는 부수 효과

delete 연산자

객체 프로퍼티를 삭제하는 부수 효과가 있어 객체를 사용하는 다른 코드에 영향을 준다.

연산자 우선순위

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. ,

연산자 결합 순서

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

[출처] 모던자바스크립트 Deep Dive