[JS Q.R 스터디] 연산자

최종 수정 : 2024-04-15

7장 연산자

 

연산자(operator)는 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산 등을 수행해 하나의 값을 만든다. 이때 연산의 대상을 피연산자(operand)라 한다.

 

1. 산술 연산자(arithmetic operator)

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

 

이항(binary) 산술 연산자

+, -, *, /, %

 

단항(unary) 산술 연산자

++, --, +, -

+ : 피연산자를 숫자 타입으로 변환하여 반환한다. 피연산자 중 문자열이 있다면, 문자열 연결 연산자로 동작한다.

- : 양수 -> 음수, 음수-> 양수로 반전한 값을 반환한다. +와 마찬가지로 숫자 타입으로 변환시킨다.

 

증가.감소 연산자는 위치에 의미가 있다.

위치에 따라 후위(postfix) 연산과 전위(prefix) 연산이라 불린다. 예전에 작성한 글을 이미지로 가져왔다.

 

2. 할당 연산자(assignment operator)

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

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

 

 

3. 비교 연산자(comparion operator)

좌항과 우항의 피연산자를 비교한 다음 그 결과를 불리언 값으로 반환한다.

 

동등 비교(loose equality)

==, !=

느슨한 비교라 불리며, 연산자를 비교할 때 먼저 암묵적 타입 변환을 통해 타입을 일치시킨 후 같은 값인지 비교한다. 편리한 경우도 있지만, 결과를 예측하기 어렵고 실수하기 쉬우므로, 사용을 권하지 않는다.

 

일치 비교(strict equlity)

===, !==

엄격한 비교라 불리며, 피연산자의 타입과 값이 모두 같은 경우에 true를 반환한다.

주의할 것

NaN === NaN; // false

0 === -0; // true
0 == -0; // true

 

대소 관계 비교

>, >=, <, <=

 

4. 삼항 조건 연산자(ternary operator)

조건식의 평가 결과에 따라 반환할 값을 결정한다. if ... else 문을 사용하여 유사하게 처리할 수 있다. 하지만, 중요한 차이가 있다. 삼항 조건 연산자 표현식은 값처럼 사용할 수 있지만 if ... else 문은 값처럼 사용할 수 없다. 표현식이 아니라 문이기 때문이다.

var x = 10;

var result = if (x % 2) { result = '홀수'; } else { result = '짝수'; };
// SyntaxError

var result = x % 2 ? '홀수' : '짝수';
console.log(result); // 짝수

 

5. 논리 연산자(logical operator)

피연산자를 논리 연산한다. 이는 단축 평가로도 활용된다.

||, &&, !

논리합( || ) 연산자

true || true; // true
true || false; // true
false || true; // true
false || false; // false

 

논리곱( && ) 연산자

true && true // true
true && false // false
false && true // false
false && false // false

 

논리 부정( ! ) 연산자

!true // false
!false // true

 

드 모르간의 법칙

복잡한 표현식을 좀 더 가독성 좋은 표현식으로 변환할 수 있다.

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

 

6. 쉼표 연산자

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

var x, y, z;

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

 

7. 그룹 연산자

연산자의 우선순위를 조절할 수 있으며, 그룹 연산자가 가장 높은 우선순위로 처리된다.

그외 연산자간의 우선순위는 외우기보다는 사용하면서 익히거나, 코드를 작성할 때 그룹 연산자로 묶는 것이 더 낫다.

 

8. typeof 연산자

피연산자의 데이터 타입을 '문자열'로 반환한다.

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 null // "object"인 이유는 자바스크립트의 첫 번째 버전의 버그다. 하지만 기존 코드에 영향을 줄 수 있기에 아직까지 수정되지 못하고 있다. 따라서 값이 null 타입인지 확인하고 싶을 때는 일치 연산자(===)를 사용하는 게 낫다.

var foo = null;

typeof foo === null; // flase
foo === null; // true

 

9. 지수 연산자

ES7에서 도입되었으며, 좌항의 피연사자를 밑(base)으로, 우항의 피연산자를 지수(exponent)로 거듭 제곱하여 숫자를 반환한다. 단, 음수를 밑으로 사용하려면 괄호로 묶어야 한다.

 

지수 연산자가 도입되기 전에는 Math.pow 메서드를 사용했다.

2 ** 2; // 4
2 ** 2.5; // 5.65685424949238
2 ** -2; // 0.25

Math.pow(2, 2); // 4
Math.pow(2, 2.5); // 5.65685424949238
Math.pow(2, -2); // 0.25

(-5) ** 2; // 25