🐸 [JavaScript] 연산자

JavaScript의 연산자에 대해 알아보자.

---

연산자

우선 연산자 operator의 정의를 알아보자.


하나 이상의 표현식을 대상으로,
산술, 할당, 비교, 논리, 타입, 지수 연산 등을 수행해서,
하나의 값을 만드는 것이다.

연산의 대상의 되는 것을 피연산자라고 하는데, 이 피연산자는 표현식이어야 한다.

그러니까, 값으로 평가될 수 있어야만 한다는 뜻이다.

연산자의 종류에 대해 알아보자.

---

1. 산술연산자 arithmetic operator

피연산자를 대상으로 수학적 계산 을 수행해서, 새로운 숫자값을 만드는 연산자이다.

산술 연산이 불가능한 경우에는, NaN 이라는 값을 반환한다.

피연산자의 개수에 따라, 산술 연산자의 종류는 두가지로 나뉜다.

이항 산술 연산자 binary

+, -, *, /, %

피연산자가 2개인 연산자이다.
어떤 산술 연산을 하더라도, 피연산자의 값이 바뀌는 경우(side effect)는 없다.

단항 산술 연산자 unary

++, --, +, -

피연산자가 하나인 연산자이다.
증감연산자인 ++, --의 경우, 부수효과가 존재한다.

+, -는, 덧셈 뺄셈이 아니다.

숫자타입이 아닌 피연산자에 +를 사용하면, 피연산자를 숫자타입으로 변환한 값을 생성해 반환한다.
마찬가지로 -를 사용하면, 피연산자를 숫자타입으로 변환해 부호를 반전한 값을 생성해 반환한다.


이항 산술 연산자의 +는, 피연산자 중 하나 이상이 문자열인 경우, 문자열 연결 연산자로 동작한다.

주의할 점은, 1 + true 의 경우,
JavaScript 엔진이 true를 숫자타입인 1로 강제 타입 변환을 한 후에 연산을 수행한다.

이처럼 개발자가 의도치 않았지만 타입이 변환되는 것을 암묵적 타입변환(implicit coercion)이라고 한다.

2. 할당 연산자 assignment operator

우항에 있는 피연산자의 평가 결과를, 좌항에 있는 변수에 할당하는 연산자이다.

변수에 값을 대입하기 때문에, 당연히 변수의 값이 변하는 side effect 가 일어난다.

=, +=, -=, *=, /=, %=


할당문은, 값으로 표현되는 표현식인 문이라고 정리한 바 있다. 그렇기 때문에 할당문 자체를 변수에 할당하는 것도 가능하다.

---

3. 비교 연산자 comparison operator

좌항과 우항의 피연산자를 비교한 다음, 그 결과를 boolean 타입의 값으로 반환하는 연산자이다.

3-1. 동등/일치 비교 연산자

==, ===, !=, !==

if, for문 같은 제어문의 조건식에서 주로 사용하는 연산자이다.


여기서 주의할 점은 ==, ===의 사용이다.

둘의 차이가 이해가 안될 수 있다.

간단한 개념으로 정리하자면, 둘은 비교의 엄격성에 있어서 차이가 있다.


== 의 경우, JavaScript 엔진에 의해 암묵적 타입 변환이 일어나서, 피연산자의 타입을 일치시킨 후에 값만을 비교한다.

반면 === 의 경우, 피연산자의 값 뿐만 아니라 타입까지 일치해야 true가 반환된다.

== 는, true가 나와도, 동일하지 않을 가능성이 존재하기 때문에, ==보다는 ===을 사용하도록 하자.


그리고 또 주의할 점이 있다.

NaN === NaN 은 어떤 값이 나올까?
누가 봐도 true가 나올 것 같지만, 결과는 false이다.

그래서 결과의 값이 NaN인지 확인하려면,
=== 연산자가 아닌, 빌트인 함수 Number.isNaN 을 사용해야 한다고 한다.


또한, JavaScript에는 -0과 +0이 별도로 존재한다.
그런데, 이 두 값을 === 연산자로 비교하면 true가 나온다.

ES6의 Object.is 메서드에서는, 정확한 비교 결과를 제공한다고 하니, 해당 연산을 진행할 때는 Object.is 메서드를 사용하도록 하자.

3-2. 대소 관계 비교 연산자

<, >, <=, >=

피연산자의 크기를 비교해 boolean 값을 반환하는 연산자이다.

---

4. 삼항 조건 연산자 trenary operator

JavaScript에서, 삼항 조건 연산자는 딱 하나뿐이다.

조건식의 평가 결과에 따라 반환할 값을 결정하는 연산자이며, side effect는 일어나지 않는다.

(조건식) ? (true시 반환할 결과) : (false시 반환할 결과)

조건식의 결과는 boolean으로 평가하며, boolean이 아닌 타입으로 평가될 경우 암묵적 타입 변환이 일어난다.

이런 연산자는 if...else 문으로 대체할 수 있다고 생각된다.

그러나 if...else 문과는 다르게, 그 결과를 값처럼 사용할 수 있다.

그러니까 삼항 조건 연산자를 사용하면, 표현식인 문이 되는 것이다.

이는 다른 표현식의 일부가 될 수 있기 때문에 매우 유용하다.


그러나 여러 조건을 걸쳐 그에 따른 결론을 내려야 하는 경우에는 if...else 문을 사용하는 것이 좋다.

---

5. 논리연산자 logical operator

||, &&, !

우항과 좌항의 피연산자를 논리연산하는 연산자이다.

논리 부정 연산자 `!` 는, 언제나 boolean 타입의 값을 변환한다.

논리합, 논리곱 연산자의 표현식의 평가 결과는 boolean 값이 아닐 수도 있다.

---

6. 쉼표 연산자

,

왼쪽 피연산자부터 차례로 피연산자를 평가하고, 마지막 피연산자의 평가가 종료되면, 마지막 피연산자의 평가 결과를 반환한다.

7. 그룹연산자

()

() 로 피연산자를 감싸는 연산자.
자신의 피연산자인 표현식을 가장 먼저 평가한다.

-> 연산자 우선순위를 조절할 수 있다.

그러니까 한마디로, 우리가 수학에서 가장 먼저 계산해야 하는 식을 ()로 감싸는 것과 동일한 역할을 하는 연산자이다.

8. typeof 연산자

피연산자의 data type을 문자열로 반환하는 연산자이다.

string, number, boolean, undefined, symbol, object, function 이렇게 7개의 data type을 반환하는데, 정확하게 일치하지는 않는다.


null을 반환하는 경우는 없으며, null을 typeof 연산자로 연산해보면 object가 반환된다.

이건 JavaScript의 해결되지 않은 버그라고 한다.

null 타입 검사를 하려면, typeof 연산자가 아닌 ===연산자를 사용하자.


그리고 선언하지 않은 식별자를 typeof로 연산할 경우, ReferenceError 가 발생할 것 같지만 undefined 가 반환된다는 사실도 알아두자..

9. 지수 연산자

**

ES7에서 도입되었다.

좌항의 피연산자를 지수계산의 밑 base로, 우항의 피연산자를 지수 exponent로 거듭제곱하여 숫자값을 반환하는 연산자이다.


원래는 Math.pow 메서드를 사용했다.
지수 연산자의 사용과 비교해보면, 지수연산자를 사용하는 것이 훨씬 직관적이고 깔끔하다.

2 ** (3 ** 2)
Math.pow(2, Math.pow(3, 2))

음수를 거듭제곱의 밑으로 사용하려면, 괄호로 묶어줘야 한다.

---

그 외의 연산자들 & 연산자 우선순위

?., ??, delete, new, instanceof, in이라는 연산자들도 존재하지만,,

나중에 차차 살펴보도록하자.

앞서서 side effect 효과가 있는 연산자들이 종종 등장했었는데, 정리해보자면
할당연산자=, 증감연산자++/--, 그리고 나중에 나올 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	,

---

생각했던 것 보다 예외나 오류,,? 버그가 많아서 공부하면서 좀.. 신뢰도가 떨어졌다.

왜 버그가 있는 걸 알면서 고치지 않는 건지 모르겠지만 일단,,, 이유가 있을 거라는 생각으로 연산자 파트를 마무리했다.

다음 글에는 제어문을 다루어 볼 것이다.