Skip to content

연산자 (Operators)

연산자란?

프로그래밍 언어에서 특정 연산을 행할 수 있도록 도와주는 기호이다. 값을 계산하거나, 비교하거나, 논리적 판단을 내릴 때 사용된다.

less
연산자 (Operators)
├── 산술 연산자 (Arithmetic Operators)
├── 대입 연산자 (Assignment Operators)
├── 논리 연산자 (Logical Operators)
├── 비교 연산자 (Comparison Operators)
├── 연결 연산자 (Concatenation Operator)
├── null 병합 연산자 (Nullish Coalescing Operator)
└── 삼항 연산자 (Ternary Operator)

연산자 분류

less
연산자
├── 산술 연산자
│   ├── 사칙 연산자 + - * /
│   ├── 나머지 연산자 %
│   └── 증감 연산자 ++ --
├── 대입 연산자
│   ├── 할당 연산자 =
│   └── 복합 대입 연산자 += -= *= /= %=
├── 논리 연산자
│   ├── NOT 연산자 !
│   ├── OR 연산자 ||
│   └── AND 연산자 &&
├── 비교 연산자
│   ├── 일치 연산자 == ===
│   ├── 불일치 연산자 != !==
│   └── 대소 비교 연산자 > < >= <=
├── 연결 연산자 +
├── null 병합 연산자 ??
└── 삼항 연산자 조건 ? 참일 때의 값 : 거짓일 때의 값

(1) 산술 연산자 (Arithmetic Operators)

less
산술 연산자
├── 사칙 연산자 + - * /
├── 나머지 연산자 %
└── 증감 연산자 ++ --

사칙 연산자 + - * /

js
let num1 = 10;
let num2 = 5;

console.log(num1 + num2); // 15
console.log(num1 - num2); // 5
console.log(num1 * num2); // 50
console.log(num1 / num2); // 2

나머지 연산자 %

  • 두 수를 나누었을 때의 나머지 값을 반환하는 연산자이다. 주로 짝수, 홀수 판별이나 주기적인 동작 처리에 활용된다.
js
let num1 = 10;
let num2 = 5;

console.log(num1 % 2); // 0 나머지 연산자
console.log(num2 % 2); // 1 나머지 연산자

증감 연산자 ++ --

  • 변수의 값을 1씩 증가 또는 감소 시킬 때 사용하는 연산자이다.
  • 전위와 후위 위치에 따라 실행 순서가 달라진다.
less
증가 연산자 ++
├── 후위 연산 (postfix): 현재 값을 먼저 반환한 후 1 증가
└── 전위 연산 (prefix): 1을 먼저 증가시키고 증가된 값을 반환

감소 연산자 --
├── 후위 연산 (postfix): 현재 값을 먼저 반환한 후 1 감소
└── 전위 연산 (prefix): 1을 먼저 감소시키고 감소된 값을 반환
js
// ++ 예시
let num = 10;

console.log(num++); // 10 후위연산
console.log(num); // 11 현재 num 값
console.log(++num); // 12 전위연산
js
// -- 예시
let num2 = 10;

console.log(num2--); // 10 후위연산
console.log(num2); // 9 현재 num 값
console.log(--num2); // 8 전위연산

(2) 대입 연산자 (Assignment Operators)

대입 연산자는 변수에 값을 할당하거나, 연산 결과를 변수에 저장할 때 사용하는 연산자이다. 주로 = 기호를 사용하며, 산술 연산자와 결합된 복합 대입 연산자도 함께 사용된다.

less
대입 연산자
├── 할당 연산자 =
└── 복합 대입 연산자 += -= *= /= %=

할당 연산자 =

js
let num = 20;
num = num + 5;

console.log(num); // 25

복합 대입 연산자 += -= *= /= %=

js
// 복합 대입 연산자: 산술 연산자와 대입 연산자가 결합한 것
let num = 20;

num += 5; // num = num + 5
num -= 5; // num = num - 5
num *= 5; // num = num * 5
num /= 5; // num = num / 5
num %= 5; // num = num % 5

(3) 논리 연산자 (Logical Operators)

논리 연산자는 Boolean 타입 값 true, false을 다룰 때 사용한다.

less
논리 연산자
├── NOT 연산자 (!): 조건을 반전시킴
├── OR 연산자 (||): 둘 중 하나라도 참이면 참
└── AND 연산자 (&&): 두 조건이 모두 참일 때 참

NOT 연산자 !

  • ! 연산자는 true를 false로, false를 true로 반전시킨다.
js
let isOpen = false;
let isClicked = true;

console.log(!isOpen); // true
console.log(!isClicked); // false

// 이중 NOT 연산자 !! 두 번 사용하면 원래 Boolean 값으로 변환
console.log(!!isOpen); // false (false → true → false)
console.log(!!isClicked); // true (true → false → true)

OR 연산자 ||

  • 둘 중 하나라도 true이면 true 반환, 모두 false일 때만 false 반환
  • 왼쪽 값이 truthy면 그 값을 반환하고, falsy면 오른쪽 값을 반환한다.
  • Falsy 값: false, 0, ""(빈문자열), null, undefined, NaN
  • Truthy 값: 그 외 모든 값 (true, "hello", [] 빈 배열, {} 빈 객체 등)
js
console.log(true || true); // true
console.log(true || false); // true
console.log(false || false); // false
console.log(false || true); // true

console.log("admin" || 0); // "admin" → 첫 번째 truthy 값 반환
console.log("" || "guest"); // "guest" → 첫 번째 falsy → 두 번째 반환
console.log(null || undefined); // undefined → 둘 다 falsy → 마지막 반환
console.log(false || 42); // 42 → 첫 번째 falsy → 두 번째 반환
js
// 기본값 설정 예시
let userName = "";
let defaultName = "Guest";

console.log(userName || defaultName); // "Guest"
// userName이 falsy(빈 문자열)이므로 기본값 반환

AND 연산자 &&

  • 모든 조건이 true일 때만 true 반환
  • 하나라도 false가 있으면 false 반환
  • 불리언이 아닌 값을 평가할 경우, 첫 번째 falsy 값 또는 마지막 truthy 값을 반환 (단락 평가)
js
console.log(true && true); // true
console.log(true && false); // false
console.log(false && false); // false

console.log("user" && 42); // 42 (두 값 모두 truthy → 마지막 값 반환)
console.log(0 && "logged in"); // 0 (0은 falsy → 첫 번째 값 반환)
console.log(true && "Welcome!"); // "Welcome!" (둘 다 truthy → 마지막 값 반환)
console.log(undefined && "hello"); // undefined (undefined는 falsy → 반환됨)
js
// 조건문 활용 예시
let isLoggedIn = true;
let hasPermission = true;

if (isLoggedIn && hasPermission) {
  console.log("Access granted!"); // 두 조건이 모두 true일 때 실행
}
&& vs || 차이 정리
연산자평가 목적평가 방식반환 값기억 팁
&&모두 true여야 함왼쪽이 falsy면 즉시 반환첫 번째 falsy
or 마지막 truthy
거짓이면 멈춤!
||하나라도 true면 됨왼쪽이 truthy면 즉시 반환첫 번째 truthy
or 마지막 falsy
참이면 멈춤!
  • &&: 거짓이 나타나면 바로 그 값을 반환
  • \|\|: 참이 나타나면 바로 그 값을 반환

js
// AND (&&)
console.log("hello" && 123); // 123 (둘 다 truthy → 마지막 반환)
console.log(0 && "world"); // 0 (0은 falsy → 바로 반환)

// OR (||)
console.log("hello" || 123); // "hello" (truthy → 바로 반환)
console.log("" || "default"); // "default" (falsy → 두 번째 반환)

자주 쓰는 논리 연산 패턴

표현식설명코드 예시 → 실행 결과
!!value값을 Boolean 타입으로 강제 변환
(truthy → true, falsy → false)
!!"user"true
!!""false
value || 기본값value가 falsy이면 기본값 사용
(기본값 설정 패턴)
let name = "" || "Guest"
"Guest"
value && 실행문value가 truthy일 때만 실행문 수행
(조건부 실행 패턴)
isAdmin && deletePost()
(isAdmin이 true일 때만 실행)
  • !!value는 사용자 입력값의 유효성을 확인하거나 조건식에 명시적 Boolean 변환이 필요할 때 자주 사용된다.
  • ||는 "값이 없을 때 기본값을 제공"하는 용도로 쓰인다. 특히 폼 초기화나 옵션 설정 등에서 유용하다.
  • &&는 "조건을 만족할 때만 실행"하는 간단한 대체 if문처럼 쓰이며, JSX에서도 자주 쓰인다.

(4) 비교 연산자 (Comparison Operators)

자바스크립트에서 비교 연산자는 두 값이 같은지, 다른지, 크거나 작은지를 비교하는 연산자이다. 조건문과 함께 자주 사용되며, 반환값은 항상 Boolean 값 (true, false)이다.

less
비교 연산자
├── 일치 연산자 == ===
├── 불일치 연산자 != !==
└── 대소 비교 연산자 > < >= <=

일치 연산자 == ===

  • == 느슨한 비교: 값이 같으면 true, 타입이 다르면 자동 형변환 후 비교
  • === 엄격한 비교: 값과 타입이 모두 같아야 true, 타입 변환 없음
js
let num1 = 10;
let num2 = "10";

console.log(num1 == num2); // true (타입 변환 후 비교)
console.log(num1 === num2); // false (타입까지 비교)

불일치 연산자 != !==

  • != 느슨한 불일치: 값만 다르면 true, 타입이 다르면 자동 형변환 후 비교
  • !== 엄격한 불일치: 값이 다르거나 타입이 다르면 true, 형변환 없이 비교
js
let num1 = 10;
let num2 = "10";

console.log(num1 != num2); // false (값이 달라서 false)
console.log(num1 !== num2); // true (타입이 달라서 true)

대소비교 연산자 > < >= <=

  • 대소비교 연산자는 두 값을 비교하여, 왼쪽 값이 오른쪽 값보다 크거나 작은지를 판단하는 연산자이다. 조건문에서 많이 활용된다.
js
let a = 10;
let b = 20;
let c = 10;

console.log(a < b); // true
console.log(a > b); // false
console.log(b >= c); // true
console.log(b > c); // true
console.log(a <= c); // true
console.log(a > c); // false

(5) 연결 연산자 (Concatenation Operator)

연결 연산자 +

  • + 연산자는 숫자뿐만 아니라 문자열과 문자열을 연결할 때도 사용된다.
  • 숫자 + 문자열은, 숫자가 문자열로 변환되어 문자열 연결로 처리된다.
js
let a = "안녕";
let b = "자니";

console.log(a + b); // "안녕자니"
console.log(a + " " + b); // "안녕 자니"
console.log(a + " " + b + "메롱"); // "안녕 자니메롱"

(6) null 병합 연산자 (Nullish Coalescing Operator)

null 병합 연산자 ??

  • ?? 연산자는 변수의 값이 없을 경우(null 또는 undefined)에만 오른쪽 값을 반환하거나 할당하는 기본값 설정 연산자이다. 즉, 변수의 기본값을 할당하고 싶을 때 사용한다.
  • 0, "", false 같은 값은 "값이 있는 것" 으로 간주되며, 그대로 유지된다.
js
// 값이 undefined인 경우
let num; // 선언했지만, 값은 할당하지 않음 -> undefined
num = num ?? 20; // num이 null 또는 undefined일 때 오른쪽 값 20을 할당

console.log(num); // 20
js
// 값이 이미 존재하는 경우 (null이나 undefined가 아닐 경우)
let num = 100;
num = num ?? 20; // num이 null 또는 undefined가 아니면 기존 값을 유지

console.log(num); // 100

(7) 삼항 연산자 (Ternary Operator)

삼항 연산자 조건 ? 참일 때의 값 : 거짓일 때의 값

  • 삼항 연산자는 조건에 따라 결과를 선택하며, 그 결과를 변수에 저장할 수도 있다.
js
// 기본 문법
조건 ? 참일 때 반환할 값 : 거짓일 때 반환할 값

// a라는 조건이 참이면 b를, 거짓이면 c를 반환한다.
a ? b : c
js
// 짝수/홀수 판단
let num = 100;

console.log(num % 2 === 0 ? "짝수" : "홀수"); // 짝수
js
// 변수에 결과 할당
let num = 7;
let result = num % 2 === 0 ? "짝수" : "홀수";

console.log(result); // "홀수"

연산자 우선순위

우선순위연산자설명결합 방향
1()괄호 (최우선 계산)왼 → 오
2++, -- (접두), !, typeof, +, - (단항)전위 증감, 논리 부정, 타입 판별, 단항 연산오른 → 왼
3**거듭제곱오른 → 왼
4*, /, %곱셈, 나눗셈, 나머지왼 → 오
5+, -덧셈, 뺄셈왼 → 오
6<, <=, >, >=비교 연산왼 → 오
7==, !=, ===, !==동등/일치 비교왼 → 오
8&&논리 AND왼 → 오
9||논리 OR왼 → 오
10??null 병합 연산자왼 → 오
11? :삼항 연산자오른 → 왼
12=, +=, -=, *=, /=, %=, **=, <<=, >>=, >>>=, &=, ^=, |=대입/복합 대입오른 → 왼
13,쉼표 연산자 (좌우식 모두 평가, 마지막 결과 반환)왼 → 오