자바스크립트 연산자 종류: 산술, 대입, 비교, 논리, 삼항 및 예시

연산자란 프로그래밍에서 변수와 값을 조작하여 특정 작업을 수행하기 위한 기호나 키워드입니다. 연산자는 변수나 상수의 값을 계산하거나, 비교하거나, 조작하거나, 논리적인 값을 조합하는 등의 작업을 수행합니다. 자바스크립트에서 매우 중요한 개념 중 하나이며 자바스크립트에서는 다양한 연산자 유형을 제공하고 있습니다.

그럼 자바스크립트의 연산자에 대해서 알아보겠습니다.

▼ 자바스크립트에서 사용 가능한 연산자 종류

연산자 유형	연산자	예시
산술 연산자	+, -, *, /, %, ++, —	2 + 3, 3 * 4, 10 % 3
대입 연산자	=, +=, -=, *=, /=, %=	x = 2, y += 3
비교 연산자	==, !=, ===, !==, >, <, >=, <=	3 == 3, x !== 2, y > 5
논리 연산자	&&
삼항 연산자	?:	x > 90 ? “Y” : “N”

☞ 이외에도 비트, typeof, void 연산자 등 다양한 연산자를 제공하고 있습니다.

▼ 목차

1. 산술 연산자
2. 대입 연산자
3. 비교 연산자
4. 논리 연산자
5. 삼항 연산자

1. 산술 연산자

산술 연산자는 숫자형 변수나 상수를 조작하는 데 사용됩니다.

1. 연산자

연산자	설명	예시
+	덧셈	2 + 3
–	뺄셈	9 – 2
*	곱셈	3 * 4
/	나눗셈	10 / 2
%	나머지	10 / 3
**	거듭제곱	2 ** 3
++	증가	i++, ++i
—	감소	j–, –j

2. 사용 예제

let n1 = 2 + 3;     // 5
let n2 = 5 - 2;     // 3
let n3 = 5 * 2;     // 10
let n4 = 10 / 2;    // 5
let n5 = 10 % 3;    // 1 (나머지)
let n6 = 2 ** 3;    // 8 (2의 3승)

// 후치 연산자(i++, j--) : 변수를 사용한 이후에 값을 증가 또는 감소시킵니다.
// 전치 연산자(++i, --j) : 변수의 값을 증가 또는 감소시킨 후에 사용합니다.
let x = 1;
let y = 1;

console.log(x++);   // 1 출력 (후치 연산)
console.log(++y);   // 2 출력 (전치 연산)

2. 대입 연산자

대입 연산자는 변수에 값을 할당할 때 사용됩니다. 대입 연산자는 변수에 값을 할당하는 것 외에도 산술 연산과 결합하여 간단한 연산과 대입을 동시에 수행할 수도 있습니다.

1. 연산자

연산자	예시	설명
=	x = 5	변수 x에 5를 할당합니다.
+=	x += 5	변수 x의 현재 값에 5를 더한 값을 할당합니다. (x=x+5)
-=	x -= 5	변수 x의 현재 값에서 5를 뺀 값을 할당합니다. (x=x-5)
*=	x *= 5	변수 x의 현재 값에 5를 곱한 값을 할당합니다. (x=x*5)
/=	x /= 5	변수 x의 현재 값에서 5를 나눈 값을 할당합니다. (x=x/5)
%=	x %= 5	변수 x의 현재 값에서 5를 나눈 나머지 값을 할당합니다. (x=x%5)

2. 사용 예제

let n1 = 10;
n1 += 5;    // 15 (n1 = n1 + 5)

let n2 = 10;
n2 -= 5;    // 5 (n2 = n2 - 5)

let n3 = 10;
n3 *= 5;    // 50 (n3 = n3 * 5)

let n4 = 10;
n4 /= 5;    // 2 (n4 = n4 / 5)

let n5 = 10;
n5 %= 3;    // 1 (n5 = n5 % 3)

3. 비교 연산자

비교 연산자는 두 개의 값을 비교하여 참(true) 또는 거짓(false)을 반환하는 연산자입니다.

1. 연산자

연산자	설명	예시
==	값이 같은지 비교	x == y
===	값과 타입이 모두 같은지 비교	x === y
!=	값이 다른지 비교	x != y
!==	값이 다르거나 타입이 다른지 비교	x !== y
>	왼쪽 값이 오른쪽 값보다 큰지 비교	x > y
>=	왼쪽 값이 오른쪽 값보다 크거나 같은지 비교	x >= y
<	왼쪽 값이 오른쪽 값보다 작은지 비교	x < y
<=	왼쪽 값이 오른쪽 값보다 작거나 같은지 비교	x <= y

2. 사용 예제

let x = 10;
let y = '10';

console.log(x == y);    // true
console.log(x === y);   // false

console.log(x != y);    // false
console.log(x !== y);   // true

console.log(x > y);    // false
console.log(x >= y);   // true

console.log(x < y);    // false
console.log(x <= y);   // true

4. 논리 연산자

논리 연산자는 논리값(참(true) 또는 거짓(false))을 조합하여 새로운 논리값을 반환하는 연산자입니다.

1. 연산자

연산자	설명	예시
&&	AND 연산자. 두 개의 조건이 모두 참일 때 참(true)을 반환합니다.	x > 0 && y > 0
||	OR 연산자. 두 개의 조건 중 하나라도 참일 때 참(true)을 반환합니다.	x > 0 || y > 0
!	NOT 연산자. 조건의 결과를 반대로 반환합니다	!(x > 0)

2. 사용 예제

let x = 1;
let y = 2;
let z = -1;

if (x > 0 && y > 0) {
    console.log('x와 y의 값이 모두 양수입니다.');
}

if (y > 0 || z > 0) {
    console.log('y와 z의 값 중 하나 이상이 양수입니다.');
}

if (!(z > 0)) {
    console.log('z의 값이 양수가 아닙니다.');
}

5. 삼항 연산자

삼항 연산자는 조건문과 비슷한 역할을 수행합니다. 조건이 참(true)인 경우와 거짓(false)인 경우 각각 다른 값을 반환합니다.

1. 연산자

연산자	예시	설명
?:	조건 ? 값1 : 값2	조건이 참(true)인 경우 값1을 반환하고, 거짓(false)인 경우 값2를 반환합니다.

2. 사용 예제

let x = -5;
let result = x > 0 ? '양수' : '음수';
console.log(result);    // 음수

이 글이 도움이 되셨다면 공유를 부탁 드립니다. 다음 글에서 뵙겠습니다!.

자바스크립트 기초 이전 게시글

1. 자바스크립트 HTML 추가 및 작성 위치 (async, defer)

2. 자바스크립트 변수와 상수: var, let, const 차이점과 사용법

3. 자바스크립트 자료형 종류 및 사용 예시