연산자 (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, NaNTruthy 값
: 그 외 모든 값 (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 | , | 쉼표 연산자 (좌우식 모두 평가, 마지막 결과 반환) | 왼 → 오 |