07장 연산자
Last modified: 12 December 2024연산자는 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입 지수 연산(operation)등을 수행해 하나의 값을 만든다. 이때 연산의 대상을 피연산자(operand)라고 한다. 피연산자는 값으로 평가될 수 있는 표현식이어야 한다.
// 예제 07-01
// 산술 연산자
5 + 4 // => 9 (피연산자 = 5, 4)
// 문자열 연결 연산자
'My name is' + 'Lee' // => 'My name is Lee'
// 할당 연산자
color = 'red' // => 'red'
// 비교 연산자
3 > 5 // => false
// 논리 연산자
true && false // => false
// 타입 연산자
typeof 'Hi' // => string
1. 산술 연산자
산술 연산자(arithmetic operator)는 피연산자를 대상으로 계산을 수행해 새로운 숫자 값을 만든다. 연산이 불가능할 경우. NaN을 반환한다.
1.1 이항 산술 연산자
이항 산술 연산자 | 의미 | 부수 효과 |
---|---|---|
+ | 덧셈 | X |
- | 뺄셈 | X |
* | 곱셈 | X |
/ | 나눗셈 | X |
% | 나머지 | X |
// [예제 07-02]
5 + 2; // => 7
5 - 2; // => 3
5 * 2; // => 10
5 / 2; // => 2.5
5 % 2; // => 1
1.2 단항 산술 연산자
단항(unary) 산술 연산자는 1개의 피연산자를 산술 연산하여 숫자 값을 만든다.
단항 산술 연산자 | 의미 | 부수 효과 |
---|---|---|
++ | 증감 | O |
-- | 감소 | O |
+ | 어떠한 효과도 없다. 음수를 양수로 반환하지 않는다. | X |
- | 어떠한 효과도 없다. 음수를 양수로 반환한다. | X |
주의할 점은 이항 산술 연산자와는 달리 증가/감소(++/—) 연산자는 피연산자의 값을 변경하는 부수효과가 있다.
// [예제 07-03]
var x = 1;
// ++ 연산자는 피연산자의 값을 변경하는 암묵적 할당이 이뤄진다.
x++; // x = x + 1;
console.log(x); // 2
// -- 연산자는 피연산자의 값은 변경하는 암묵적 할당이 이뤄진다.
x--; // x = x - 1;
console.log(x); // 1
증가/감소 (++/--) 연산자는 위치에 의미가 있다.
피연산자 앞에 위치한 전위 증가/감소 연산자(prefix increment/decrement operator는 먼저 피연산자의 값을 증가/감소시킨 후 다른 연산을 수행한다. (먼저 더한 값을 계산한다.)
피연산자 뒤에 위치한 후위 증가/감소 연산자(postfix increment/decrement operator)는 먼저 다른 연산을 수행한 후, 피 연산자의 값을 증가/ 감소 시킨다. (사용한 후 값을 더한다.)
// [예제 07-04]
var x = 5, result;
// 선할당 후증가(postfix increment operator)
result = x++;
console.log(result, x); // 5 6
// 선증가 후할당(prefix increment operator)
result = ++x;
console.log(result, x); // 7 7
// 선할당 후감소(postfix decrement operator)
result = x--;
console.log(result, x); // 7 6
// 선감소 후할당(prefix decrement operator)
result = --x;
console.log(result, x); // 5 5
‘+’ 단항 연산자는 피연산자에 어떠한 효과도 없다. 음수를 양수로 반전하지도 않는다.
// [예제 07-05]
+10; // => 10
+(-10) // => -10
// [예제 07-06]
var x = '1';
// 문자열을 숫자로 타입 변환한다.
console.log(+x);
// 부수 효과는 없다.
console.log(x); // "1"
// 불리언 값을 숫자로 타입 변환한다.
x = true;
console.log(+x); // 1
// 부수 효과는 없다.
console.log(x); // true
// 불리언 값을 숫자로 타입 변환한다.
x = false;
console.log(+x); // 0
// 부수 효과는 없다.
console.log(x); // false
// 문자열을 숫자로 타입 변환할 수 없으므로 NaN을 반환한다.
x = 'Hello';
console.log(+x); // NaN
// 부수 효과는 없다.
console.log(x); // "Hello"
‘-’ 단항 연산자는 피연산자의 부호를 반전한 값을 반환한다. ‘+’ 단항 연산자와 마찬가지로 숫자타입이 아닌 피연산자에 사용하면 숫자 타입으로 변환하여 반환한다.
// [예제 07-06]
// 부호를 반전한다
-(-10); // => 10
// 문자열을 숫자로 타입 변환한다.
-'10'; // => -10
// 불리언 값을 숫자로 타입 변환한다.
-true; // => 1
// 문자열은 숫자로 타입 변환할 수 없으므로 NaN을 반환한다.
-'Hello'; // => NaN
1.3 문자열 연결 연산자
‘+’ 연산자는 피연산자 중 하나 이상이 문자열인 경우 문자열 연결 연산자로 동작한다. 그 외의 경우는 산술 연산자로 동작한다.
// [예제 07-08]
'1' + 2; // => 12
1 + '2'; // => 12
// 산술 연산자
1 + 2; // => 3
// true는 1로 타입 변환된다.
1 + true; // => 2
// false는 0으로 타입 변환된다.
1 + false; // => 0
// null은 0을 타입 변환된다.
1 + null; // => 1
// undefined는 숫자로 타입 변환되지 않는다.
+undefined; // => NaN
1 + undefined; // => NaN
2. 할당 연산자
할당 연산자 | 예 | 동일 표현 | 부수 효과 |
---|---|---|---|
= | x = 5 | x = 5 | O |
+= | x += 5 | x = x + 5 | O |
-= | x -= 5 | x = x - 5 | O |
*= | x *= 5 | x = x * 5 | O |
/= | x /= 5 | x = x / 5 | O |
%= | x %= 5 | x = x % 5 | O |
// [예제 07-09]
x = 10;
console.log(x); // 10
x += 5; // x = x + 5;
console.log(x); // 15
x -= 5; // x = x - 5;
console.log(x); // 10
x *= 5; // x = x * 5;
console.log(x); // 50
x /= 5; // x = x / 5;
console.log(x); // 10
x %= 5; // x = x % 5;
console.log(x); // 0
// 문자열 연결 연산자
str += 'Lee'; // str = str + 'Lee'
console.log(str); // My name is Lee
3. 비교 연산자
3.1 동등 / 일치 비교 연산자
비교 연산자 | 의미 | 사례 | 설명 | 부수 효과 |
---|---|---|---|---|
== | 동등 비교 | x == y | x와 y의 값이 같음 | X |
=== | 일치 비교 | x === y | x와 y의 값과 타입이 다름 | X |
≠ | 부동등 비교 | x ≠ y | x와 y의 값이 다름 | X |
≠= | 불일치 비교 | x ≠=y | x와 y의 타입이 다름 | X |
3.2 대소 관계 비교 연산자
대소 관계 비교 연산자 | 예제 | 설명 | 부수 효과 |
---|---|---|---|
> | x > y | x가 y보다 크다 | X |
< | x < y | x가 y보다 작다 | X |
≥ | x ≥ y | x가 y보다 크거나 같다 | X |
≤ | x ≤ y | x가 y보다 작거나 같다 | X |
4, 삼항 조건 연산자

// [예제 07-24]
var x = 10;
// 삼항 조건 연산자 표현식은 표현식인 문이다. 따라서 값처럼 사용할 수 있다.
var result = x % 2 ? '홀수' : '짝수';
console.log(result); // 짝수
5. 논리 연산자
논리 연산자 | 의미 | 부수 효과 |
---|---|---|
| 논리합(OR) | X |
&& | 논리곱(AND) | X |
! | 부정(NOT) | X |
// 논리합 (||) 연산자
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
6. 쉼표 연산자
쉼표 (,) 연산자는 왼쪽 피연산자부터 차례대로 피연산자를 평가하고 마지막 피연산자의 평가가 끝나면 마지막 피연산자의 평가 결과를 반환한다.
// [예제 07-29]
var x, y, z;
x = 1, y = 2, z = 3; // 3
7. 최우선 연산자
소괄호’( )’로 피연산자를 감싸는 그룹 연산자는 자신의 피연산자인 표현식을 가장먼저 평가한다.
// [예제 07-30]
// 그룹 연산자를 사용하여 우선순위를 조절
10 * (2 + 3); // 50
8. typeof 연산자
// [예제 07-31]
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 Data() // => "object"
typeof /test/gi // => "object"
typeof function () {} // => "function"
// 보기와 같이 값이 null 인지 확인하고 싶을때 typeof를 쓰면 object가 뜬다.
// 일치연산자(===)를 사용하자
var foo = null;
typeof foo === null; // false
foo === null; // true
9. 지수 연산자
// [예제 07-34]
2 ** 2; // 4
2 ** 2.5; // 5.6567...
2 ** 0; // 1
2 ** -2; // 0.25
// [예제 07-35]
Math.pow(2, 2); // 4
Math.pow(2, 2.5); // 5.65645
Math.pow(2, 0); // 1
Math.pow(2, -2); // 0.25
// [예제 07-36]
// 지수 연산자의 결합 순서는 우항에서 좌항이다. 즉 우결합성을 갖는다.
2 * 8 * (3 ** 2); // 512
Math.pow(2, Math.pow(3,2)); // 512
// [예제 07-37]
// 음수를 거듭제곱의 밑으로 사용해 계산하려면 다음과 같이 괄호로 묶어야 한다.
-5 ** 2 ; // SyntaxError: ...
(-5) ** 2; // 25
10. 그 외의 연산자
연산자 | 개요 | 참고 |
---|---|---|
?. | 옵셔널 체이닝 연산자 | 9.4.2절 “옵셔널 체이닝 연산자” |
?? | null 병합 연산자 | 9.4.3절 “null 병합 연산자” |
delete | 프로퍼티 삭제 | 10.8절 “프로퍼티 삭제” |
new | 생성자 함수를 호출할 때 사용하는 인스턴스를 생성 | 17.2.6 “new 연산자” |
instanceof | 좌변이 우변의 상속된 객체인지 판별 | 19.10 “instanceof 연산자” |
in | 프로퍼티 존재 확인 | 19.13.1 “in 연산자” |
11. 연산자의 부수효과
대부분의 연산자들과 달리 다른 코드에 영향을 주는 부수 효과들이다.
//[예제 07-40]
var x;
// 할당 연산자는 변수 값이 변하는 부수 효과가 있다. 이는 x 변수를 사용하는 다른 코드에
// 영향을 준다.
x = 1;
console.log(x); // 1
// 증가/감소 연산자(++/--)는 피 연산자의 값을 변경하는 부수 효과가 있다.
// 피연산자 x의 값이 재할당되어 변경된다. 이는 x 변수를 사용하는 다른 코드에 영향을 준다.
x++;
console.log(x); // 2
var o = { a: 1 };
// delete 연산자는 객체의 프로퍼티를 삭제하는 부수 효과가 있다. 이는 o 객체를 사용하는
// 다른 코드에 영향을 준다.
delete o.a;
console.log(o); // {}
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. 연산자 결합 순서
결합 순서 | 연산자 |
---|---|
좌항 ⇒ 우항 | +, -, /, %, <, ≤, >, ≥, &&, |
우항 ⇒ 좌항 | ++, --, 할당 연산자(=, +=, -=, …), !x, +x, -x, ++x, --x, typeof, delete, ? … : …, ** |