자바스크립트 연산자(Operators)

자바스크립트 연산자(Operators)란?

연산자는 변수나 값에 대해 계산, 비교, 논리적 판단, 대입 등을 할 때 사용하는 기호입니다.

ex) +, -, *, >, ===, && 등

 

주요 연산자 종류

1. 산술 연산자 (Arithmetic)

숫자를 계산할 때 사용합니다.

기호	설명	예시
+	더하기	2 + 3 → 5
-	빼기	5 - 2 → 3
*	곱하기	3 * 2 → 6
/	나누기	10 / 2 → 5
%	나머지	7 % 2 → 1
**	거듭제곱	2 ** 3 → 8

• 이항 산술 연산자
  • 두 개의 값(피연산자)을 계산해서 새로운 값을 만들어내는 연산자
  • 원래 값은 바뀌지 않고, 새로운 값이 만들어집니다. +,-,*,/, …
• 단항 산술 연산자
  • 하나의 값만 계산하는 연산자입니다. ++ -- + -

 

2. 문자열 연결 연산자

+ 연산자는 숫자끼리 더할 수도 있고, 문자열과 만나면 문자열로 연결됩니다.

//피연산자 중 하나 이상이 문자열인 경우 문자열 연결 연산자로 동작
"1" + 2  //12
1 + "2" //12

//문자열과 숫자 섞이면? → 자동 변환
+"10" //숫자 타입이 아닌 피연산자는 숫자 타입으로 변환하여 반환
+true //1 
+false //0
+"hello" //NaN 반환


let z = 1 + "1";
console.log(z); //11

let k = +"1" + 1;
console.log(k); //2 문자 앞에 +가 있으면 숫자로 계산

그런데 왜 이항 덧셈 연산자가 적용되기 전에 단항 덧셈 연산자가 먼저 적용될까요?

자바스크립트에서는 연산자 우선순위에 따라 표현식의 실행 순서가 결정됩니다. 예를 들어 1 + 2 * 2에서는 곱셈이 덧셈보다 우선순위가 높기 때문에, 곱셈이 먼저 실행되어 결과는 1 + 4 = 5가 됩니다.개발자는 괄호를 사용해 이 순서를 바꿀 수 있습니다. 괄호는 모든 연산자보다 우선순위가 높기 때문에 (1 + 2) * 2처럼 괄호 안의 연산이 먼저 실행됩니다.

*모든 순서를 기억할 필요는 없지만, 동일한 기호의 단항 연산자는 이항 연산자보다 우선순위가 더 높다는 것을 알고가면 좋습니다!

 

3. 할당 연산자 (Assignment)

오른쪽 피연산자의 계산 결과를 왼쪽 변수에 할당하는 역할을 합니다. +=, -= …

기호	설명	예시
=	값 할당	let x = 10
+=	더해서 할당	x += 5 → x = x + 5
-=	빼서 할당	x -= 2 → x = x - 2

let n = 2;
n += 5; // n은 7이 됩니다(n = n + 5와 동일).
n *= 2; // n은 14가 됩니다(n = n * 2와 동일).

//값을 반환하는 할당 연산자
let a = 1;
let b = 2;

let c = 3 - (a = b + 1); //괄호 안을 계산하고 할당할 수 있다.

alert( a ); // 3
alert( c ); // 0 

//할당 연산자 체이닝
let a, b, c;

a = b = c = 2 + 2;

alert( a ); // 4
alert( b ); // 4
alert( c ); // 4

 

4. 증감 연산자 (Increment/Decrement)

기호	설명	예시
++	1 증가	x++ 또는 ++x
--	1 감소	x-- 또는 --x

• 증가/감소(++/--)는 위치에 의미가 있습니다.
  • 값을 증가시키고 난 후, 증가한 값을 바로 사용하려면 전위형 증가 연산자를 사용
  • 값을 증가시키지만, 증가 전의 기존값을 사용하려면 후위형 증가 연산자를 사용

let x = 1;

x++;  // x는 2가 되지만, "원래 값 1"을 먼저 사용함 (선할당 후증가)
++x;  // x는 3이 되고, "바뀐 값 3"을 바로 사용함 (선증가 후할당)


//반환 값을 사용하지 않는 경우라면, 전위형과 후위형엔 차이가 없습니다.
let counter = 0;
counter++;
++counter;
alert( counter ); // 2, 위 두 라인은 동일한 연산을 수행합니다.

 

5. 비교 연산자 (Comparison)

값을 비교해서 true 또는 false를 반환합니다.

기호	설명	예시
>	초과	5 > 3 → true
<	미만	2 < 1 → false
>=, <=	이상, 이하	5 >= 5 → true
==	값만 비교 (느슨한 비교)	"5" == 5 → true
===	값과 타입까지 비교 (엄격한 비교)	"5" === 5 → false
!=, !==	같지 않음	5 !== "5" → true

console.log(10 > 5);     // true
console.log(3 == '3');   // true (값만 비교)
console.log(3 === '3');  // false (타입도 비교)
console.log(4 !== 4);    // false
console.log(4 !== '4');  // true

 

비교하려는 값이 다른 형을 가진 경우, 자바스크립트는 이 값들을 숫자형으로 바꿉니다.

alert( '2' > 1 ); // true, 문자열 '2'가 숫자 2로 변환된 후 비교가 진행
alert( '01' == 1 ); // true, 문자열 '01'이 숫자 1로 변환된 후 비교가 진행

문자열 비교

자바스크립트는 문자열을 '사전 순(lexicographical)'으로 비교합니다. 즉, 사전에서 단어를 배열하듯이, 문자열을 앞에서부터 문자 하나씩 비교하여 크기를 판단합니다. 이 기준에 따르면, 사전 뒤쪽에 오는 문자열일수록 더 큰 값으로 간주됩니다.

alert( 'Z' > 'A' ); // true
alert( 'Glow' > 'Glee' ); // true
alert( 'Bee' > 'Be' ); // true

정확히는 사전 순이 아니라 유니코드 순입니다. 대문자 'A'와 소문자 'a'를 비교했을 때 소문자 'a'가 더 큽니다. 자바스크립트 내부에서 사용되는 인코딩 표인 유니코드에선 소문자가 대문자보다 더 큰 인덱스를 갖기 때문입니다.

⚠️

실무에서는 대부분 ===와 !==을 사용합니다. 예상치 못한 결과를 피하고 버그를 줄일 수 있기 때문입니다.

console.log(null == undefined);  // true
console.log(null === undefined); // false

 

추가로 알아두면 좋은 팁!

 

❗ null vs 0 

alert(null > 0);   // false
alert(null == 0);  // false
alert(null >= 0);  // true

🔸 비교 연산자 (<, >, <=, >=) : null을 숫자 0으로 바꿔서 비교합니다.

🔸 동등 비교 (==): null은 오직 undefined랑만 같다고 판단합니다.

• null > 0 → 0 > 0 → false
• null == 0 → null은 undefined랑만 같다고 판단 → false
• null >= 0 → null이 숫자 0으로 바뀌어서 비교 → 0 >= 0 → true

 

❗ undefined는 항상 false  

alert(undefined > 0);  // false
alert(undefined < 0);  // false
alert(undefined == 0); // false

• undefined를 숫자로 바꾸면 NaN
• NaN은 어떤 수와 비교해도 결과가 항상 false

💡 null, undefined가 숫자랑 섞일 가능성이 있으면, 비교하기 전에 체크하자.

 

6. 논리 연산자 (Logical)

여러 조건을 결합하거나 반전할 때 사용합니다.

기호	설명	예시
&&	그리고 (AND)	true && false → false
||	또는 (OR)	true || false → true
!	반전 (NOT)	!true → false

console.log(true && false);  // false
console.log(true || false);  // true
console.log(!false);         // true

ℹ️

단축 평가(Short-circuit evaluation)

자바스크립트는 &&과 || 연산자를 조건 판단뿐 아니라 값 리턴에도 사용합니다.

console.log('hello' && 123); // 123
console.log(null || 0 || 'default'); // 'default'

이 특성은 초기값 설정, 조건부 렌더링 등에서 매우 자주 활용됩니다.

 

7. 비트 연산자 (bitwise operator)

인수를 32비트 정수로 변환하여 이진 연산을 수행합니다.

연산자	의미	예시
&	AND	둘 다 1이면 1
|	OR	둘 중 하나라도 1이면 1
^	XOR	서로 다르면 1
~	NOT	반전
<<	왼쪽 시프트	비트를 왼쪽으로 밀기
>>	오른쪽 시프트	부호 유지하며 오른쪽으로 밀기
>>>	부호 없이 오른쪽 시프트	부호 무시하고 오른쪽으로 밀기

const a = 5;   // 00000000000000000000000000000101
const b = 3;   // 00000000000000000000000000000011

console.log(a & b); // 1  -> 00000000000000000000000000000001
console.log(a | b); // 7  -> 00000000000000000000000000000111
console.log(a ^ b); // 6  -> 00000000000000000000000000000110
console.log(~a);    // -6 -> 반전

 

8. 쉼표 연산자 (comma operator)

자주 사용하는 연산자는 아니지만 알아두자. 여러 표현식을 코드 한 줄에서 평가할 수 있게 합니다.

let a = (1 + 2, 3 + 4);

alert( a ); // 7 (3 + 4의 결과)
//마지막 표현식의 평가 결과만 반환

⚠️

쉼표의 우선순위는 매우 낮습니다.

예를 들어 a= 1+2,3+4 처럼 괄호 없이 작성하면, + 연산이 먼저 수행되어 a = 3, 7로 해석됩니다. 이때 할당 연산자(=)는 쉼표 연산자보다 우선순위가 높기 때문에, a에는 3이 저장되고 7은 버려집니다. 즉, (a = 1+2),3+4 처럼 작동하는 셈입니다.

 

쉼표 연산자는 자바스크립트에서 자주 사용되지는 않지만, 일부 프레임워크에서는 종종 활용됩니다.

다만, 가독성을 해치기 쉬우므로 꼭 필요한 경우가 아니라면 사용을 피하는 것이 좋습니다.

 

9. 삼항 연산자 (조건 연산자 if)

삼항 연산자는 조건에 따라 값을 간단하게 선택할 수 있게 해주는 연산자입니다.

조건 ? 참일 때의 값 : 거짓일 때의 값

const age = 20;
const status = age >= 18 ? '성인' : '미성년자';
console.log(status); // "성인"

 

10. nullish 병합 연산자(nullish coalescing operator)

??는 좌측 값이 null 또는 undefined일 때만 우측 값을 반환합니다.

즉, "값이 정의되지 않았을 때만 대체값을 쓰겠다"는 의미입니다.

⚠️스펙에 추가된 지 얼마 안 된 문법입니다. 구식 브라우저는 폴리필이 필요합니다.

let result = 값1 ?? 값2;

//값1이 null 또는 undefined → 값2 반환
//그 외에는 값1 반환

let name = null;
let userName = name ?? '익명';
console.log(userName); // '익명'

 

|| vs ?? 차이점

let height = 0;

alert(height || 100); // 100
alert(height ?? 100); // 0

• || 연산자는 널리 값이 없다고 판단하는 경우에 대체값을 사용합니다.
• ??는 정말 '값이 없음(null 또는 undefined)'인 경우에만 대체값을 사용합니다.

그래서 사용자의 입력값처럼 0이나 빈 문자열도 중요한 값일 땐 ??를 사용하는 것이 더 안전하고 의도에 부합합니다.

 

참고 : https://ko.javascript.info/

모던 JavaScript 튜토리얼