연산자

JavaScript에서는 수학의 더하기(+), 빼기(-), 곱하기(×, JavaScript에선 *), 나누기(÷, JavaScript에선 /) 등 값을 계산하는 사칙연산자 뿐만 아니라 다른 다양한 연산을 위한 연산자(Operator)를 제공합니다.
연산자의 종류는 매우 다양합니다. 이 장에서 연산자를 소개하는 이유는 여러분에게 연산자 외우기 숙제를 주려는 것이 아니라 앞으로 이를 많이 쓰게 될 것이기 때문입니다.

산술 연산자

산술 연산자는 방금 예시로 든 사칙연산과 같은 연산을 위한 연산자입니다.

산술 연산자
더하기 +

두 피연산자를 더했을 때의 값을 반환합니다.

12 + 5; // 17
빼기 -

두 피연산자를 뺐을 때의 값을 반환합니다.

12 - 5; // 7
곱하기 *

두 피연산자를 곱했을 때의 값을 반환합니다.

12 * 5; // 60
나누기 /

두 피연산자를 나눴을 때의 값을 반환합니다.

12 / 5; // 2.4
나머지 %

두 피연산자를 나눴을 때 나머지가 되는 값을 반환합니다.

12 % 5; // 2
거듭제곱 **

두 피연산자에 대하여 거듭제곱했을 때의 값을 반환합니다. 즉, A ** B의 경우 ABA^{B}의 값을 반환합니다.

2 ** 4; // 16
증가 ++

피연산자에 1을 더합니다. 증가 연산자는 ++x 또는 x++로 사용할 수 있으나, 두 방법은 동작 방식이 다릅니다.

++x는 x의 값을 1 더한 다음 x의 값을 반환합니다.

let x = 3; // x의 초기값: 3
msg.reply(++x); // x에 1을 더한 다음 값을 반환하므로 4를 출력합니다.

반면, x++는 x의 값을 반환한 다음 x의 값을 1 더합니다.

let x = 3; // x의 초기값: 3
msg.reply(x++); // x의 값을 먼저 반환하므로 3을 출력합니다. ... 이제 x에 1을 더했습니다!
msg.reply(x); // 4를 반환합니다.
감소 --

피연산자에 1을 뺍니다. 감소 연산자는 증가 연산자와 마찬가지로 --x 또는 x--로 사용할 수 있으나, 두 방법은 동작 방식이 다릅니다.

--x는 x의 값을 1 뺀 다음 x의 값을 반환합니다.

let x = 3; // x의 초기값: 3
msg.reply(--x); // x에 1을 뺀 다음 값을 반환하므로 2를 출력합니다.

반면, x--는 x의 값을 반환한 다음 x의 값을 1 뺍니다.

let x = 3; // x의 초기값: 3
msg.reply(x--); // x의 값을 먼저 반환하므로 3을 출력합니다. ... 이제 x에 1을 뺐습니다!
msg.reply(x); // 2를 반환합니다.
단항부정 -

피연산자의 부호를 반대로 바꾼 값을 반환합니다.

let x = 3;
let y = -5;
-x; // -3
-y; // 5
단항플러스 +

피연산자가 숫자가 아니면 숫자 데이터로의 변환을 시도합니다. 숫자 데이터로의 변환을 실패할 경우, NaN(Not a Number)을 반환합니다.

+"3" // 3
+true // 1
+"string" // NaN

비교 연산자

비교 연산자는 두 값을 비교하고 비교 결과에 따른 불리언 값을 반환합니다. '두 값이 같은가?', '다른가?', '더 큰가?' 와 같은 의미를 지닙니다.

비교 연산자
동등 ==

두 피연산자의 값이 같으면 true를, 아니면 false를 반환합니다.

const n1 = 3;
const n2 = 5;
n1 == 3; // true
n1 == n2; // false
n1 == "3"; // true
부등 !=

두 피연산자의 값이 다르면 true를, 아니면 false를 반환합니다.

const n1 = 3;
const n2 = 5;
n1 != 3; // false
n1 != n2; // true
n1 != "3"; // false
일치 ===

두 피연산자의 값과 자료형 모두 같으면 true를, 아니면 false를 반환합니다.

const n1 = 3;
const n2 = 5;
n1 === 3; // true
n1 === n2; // false
n1 === "3"; // false
불일치 !==

두 피연산자의 값 또는 자료형이 다르면 true를, 아니면 false를 반환합니다.

const n1 = 3;
const n2 = 5;
n1 === 3; // false
n1 === n2; // true
n1 === "3"; // true
큼 >

왼쪽 피연산자의 값이 오른쪽 피연산자의 값보다 크면 true를, 아니면 false를 반환합니다.

const n1 = 3;
const n2 = 5;
n1 > 1; // true
n1 > n2; // false
n1 > 3; // false
크거나 같음 >=

왼쪽 피연산자의 값이 오른쪽 피연산자의 값보다 크거나 같으면 true를, 아니면 false를 반환합니다.

const n1 = 3;
const n2 = 5;
n1 >= 1; // true
n1 >= n2; // false
n1 >= 3; // true
작음 <

왼쪽 피연산자의 값이 오른쪽 피연산자의 값보다 작으면 true를, 아니면 false를 반환합니다.

const n1 = 3;
const n2 = 5;
n2 < 7; // true
n2 < n1; // false
n2 < 5; // false
작거나 같음 <=

왼쪽 피연산자의 값이 오른쪽 피연산자의 값보다 작거나 같으면 true를, 아니면 false를 반환합니다.

const n1 = 3;
const n2 = 5;
n2 <= 7; // true
n2 <= n1; // false
n2 <= 5; // true

정보

무엇이든 적절한 때에 적절한 연산자를 사용하는 것이 좋지만, 그 외의 상황에서는 두 값의 일치/불일치를 판단할 때 동등 연산자(==)보다 일치 연산자(===)를 사용하는 것을 권장합니다. 일치 연산자는 값 뿐만 아니라 자료형까지 고려하기 때문에 더 엄밀한 비교가 가능하기 때문입니다. 가령, 다음과 같은 상황을 생각해봅시다.

if (x == 3) { // x의 값이 3일 경우
    x = x + 2; // x에 2를 더합니다! ..이 뿐일까요?
}

아마도 여러분들은 위 코드를 보고 x의 값이 3일 경우 x의 값은 5가 되리라 기대할 겁니다. 하지만 이 코드는 여러분들이 예상하지 못한 결과를 낳을 수도 있습니다.

if (x == 3) { // x가 문자열 "3"일 경우에도 참입니다.
    x = x + 2; // 따라서 이 경우엔 x의 값은 5가 아니라 문자열 "32"가 됩니다.
}

JavaScript는 다른 프로그래밍 언어에 비해 자료형에 대해 관대하지만, 이는 프로그래머가 예상하지 못한 결과로 빠질 가능성이 상대적으로 높다는 것을 의미하기도 합니다. 이것이 바로 자료형까지 비교하는 동등 연산자를 권장하는 이유입니다. 마찬가지의 이유로 부등 연산자(!=) 또한 불일치 연산자(!==)를 대신 사용하기를 권장합니다.

할당 연산자

할당 연산자는 왼쪽 피연산자에 오른쪽 피연산자의 값을 할당합니다. 이전에 변수 할당에 사용한 = 연산자 또한 할당 연산자 중 하나입니다. 이 외에도 여러 할당 연산자가 있습니다.

할당 연산자
할당 =

왼쪽 피연산자에 오른쪽 피연산자의 값을 할당합니다.

let x = 12; // x에 12를 할당합니다. x의 값은 12입니다.
x = 5; // x에 5를 다시 할당합니다. 이제 x의 값은 5입니다.
더하기 할당 +=

기존 왼쪽 피연산자의 값에 오른쪽 피연산자의 값을 더한 값을 왼쪽 피연산자에 할당합니다. 예를 들어, A += B는 A = A + B와 같습니다.

let x = 12; // x에 12를 할당합니다. x의 값은 12입니다.
x += 5; // x의 값(12)과 5를 더한 값을 할당합니다. 이제 x의 값은 17입니다.
빼기 할당 -=

기존 왼쪽 피연산자의 값에 오른쪽 피연산자의 값을 뺀 값을 왼쪽 피연산자에 할당합니다. 예를 들어, A -= B는 A = A - B와 같습니다.

let x = 12; // x에 12를 할당합니다. x의 값은 12입니다.
x -= 5; // x의 값(12)에 5를 뺀 값을 할당합니다. 이제 x의 값은 7입니다.
곱하기 할당 *=

기존 왼쪽 피연산자의 값에 오른쪽 피연산자의 값을 곱한 값을 왼쪽 피연산자에 할당합니다. 예를 들어, A *= B는 A = A * B와 같습니다.

let x = 12; // x에 12를 할당합니다. x의 값은 12입니다.
x *= 5; // x의 값(12)에 5를 곱한 값을 할당합니다. 이제 x의 값은 60입니다.
나누기 할당 /=

기존 왼쪽 피연산자의 값에 오른쪽 피연산자의 값을 나눈 값을 왼쪽 피연산자에 할당합니다. 예를 들어, A /= B는 A = A / B와 같습니다.

let x = 12; // x에 12를 할당합니다. x의 값은 12입니다.
x /= 5; // x의 값(12)에 5를 나눈 값을 할당합니다. 이제 x의 값은 2.4입니다.
나머지 할당 %=

기존 왼쪽 피연산자의 값에 오른쪽 피연산자의 값을 나눴을 때 나머지가 되는 값을 왼쪽 피연산자에 할당합니다. 예를 들어, A %= B는 A = A % B와 같습니다.

let x = 12; // x에 12를 할당합니다. x의 값은 12입니다.
x %= 5; // x의 값(12)에 5를 나눴을 때 나머지가 되는 값을 할당합니다. 이제 x의 값은 2입니다.
거듭제곱 할당 **=

기존 왼쪽 피연산자의 값에 오른쪽 피연산자의 값만큼 거듭제곱한 값을 왼쪽 피연산자에 할당합니다. 예를 들어, A **= B는 A = A ** B와 같습니다.

let x = 2; // x에 2를 할당합니다. x의 값은 2입니다.
x **= 4; // x의 값(2)에 5를 거듭제곱한 값을 할당합니다. 이제 x의 값은 16입니다.

논리 연산자

논리 연산자는 '그리고', '또는', '아니다'를 연산으로 제공하며, 피연산자들을 불리언 데이터로 형 변환한 값을 이용합니다.

논리 연산자
논리AND &&

A && B에서, A의 값을 false로 볼 수 있으면 A를 반환하며, 그렇지 않으면 B를 반환합니다.
불리언 데이터와 사용했을 때 A와 B 모두 true이면 true를, 그렇지 않으면 false를 반환합니다.

0 && 1; // 0 (0은 false로 볼 수 있습니다.)
1 && 2; // 1 (1은 0이 아니므로 true로 볼 수 있습니다.)
3 && ""; // "" (빈 문자열 ""는 false로 볼 수 있습니다.)
논리OR ||

A || B에서, A의 값을 true로 볼 수 있으면 A를 반환하며, 그렇지 않으면 B를 반환합니다.
불리언 데이터와 사용했을 때 A와 B 둘 중 적어도 하나가 true이면 true를, 그렇지 않으면 false를 반환합니다.

0 || 1; // 1 (1은 true로 볼 수 있습니다.)
1 || 2; // 1 (1은 true로 볼 수 있습니다.)
3 || ""; // 3 (3은 true로 볼 수 있습니다.)

정보

기호 |는 수직선(Vertical line), 바(Bar) 등으로 불리는 기호로, shift+\(원화 기호 키로 보임)을 눌러 입력할 수 있습니다.

논리NOT !

!A에서, A의 값을 true로 볼 수 있으면 false를 반환하며, 그렇지 않으면 true를 반환합니다. 즉, 피연산자의 값에 대한 불리언 데이터를 부정한 값을 반환합니다.

!true // false
!0 // true
!(23 > 10) // false

이전

변수와 자료형

다음

문자열