IT 강좌 JavaScript 기초 040_연산자

JavaScript 연산자는 수학 연산, 비교, 논리 연산 등의 작업을 수행하고 결과를 반환하는 데 사용됩니다.

산술 연산자

• +: 덧셈
• -: 뺄셈
• *: 곱셈
• /: 나눗셈
• %: 나머지
• **: 거듭제곱

예제:

1
let a = 5;
2
let b = 2;
3

4
console.log(a + b);  // 출력 7
5
console.log(a - b);  // 출력 3
6
console.log(a * b);  // 출력 10
7
console.log(a / b);  // 출력 2.5
8
console.log(a % b);  // 출력 1
9
console.log(a**b);  // 출력 25

할당 연산자

• =: 할당
• +=: 덧셈 할당
• -=: 뺄셈 할당
• *=: 곱셈 할당
• /=: 나눗셈 할당
• %=: 나머지 할당
• **=: 거듭제곱 할당
• ??=: null 할당, 변수 값이 null 또는 undefined일 때만 할당

예제:

1
let x = 5;
2
x += 2;  // x = x + 2; 출력 7
3
x -= 2;  // x = x - 2; 출력 3
4
x *= 2;  // x = x * 2; 출력 10
5
x /= 2;  // x = x / 2; 출력 2.5
6
x %= 2;  // x = x % 2; 출력 1
7
x **= 2;  // x = x ** 2; 출력 25
8
x ??= 2;  // 출력 5, x가 null 또는 undefined일 때 2로 할당
9
console.log(x);

비교 연산자

• ==: 동등 (값의 타입은 자동으로 변환됨)
• ===: 일치 (값과 타입 모두 같음)
• !=: 부등
• !==: 불일치
• >: 크다
• <: 작다
• >=: 크거나 같다
• <=: 작거나 같다

숫자가 아닌 값을 만나면 먼저 숫자로 변환한 후 비교하며, 문자열을 만나면 문자의 Unicode 코드를 한 자리씩 비교합니다.

예제:

1
let a = 5;
2
let b = '5';
3
let c = 10;
4

5
console.log(a == b);   // 출력 true, 값이 같음
6
console.log(a === b);  // 출력 false, 타입이 다름
7
console.log(a != b);   // 출력 false, 값이 같음
8
console.log(a !== b);  // 출력 true, 타입이 다름
9
console.log(a > c);  // 출력 false, 5 < 10
10
console.log(a < c);  // 출력 true, 5 < 10
11
console.log(a >= c);  // 출력 false, 5 <= 10
12
console.log(a <= c);  // 출력 true, 5 <= 10

논리 연산자

논리 연산자는 피연산자를 처리할 때 불린 값으로 변환하고 해당 피연산자의 원래 값을 반환합니다.

&&: 논리 AND

모든 조건이 true인지 판단하는 데 사용됩니다. 모든 조건이 true이면 전체 표현식의 결과는 true이고, 그렇지 않으면 false입니다. AND 연산은 왼쪽에서 오른쪽으로 첫 번째 false를 순차적으로 찾으며, false를 찾으면 계산을 중지하고 해당 피연산자의 원래 값을 반환합니다(단락 평가). 최종적으로 false가 없으면 마지막 true를 반환합니다.

||: 논리 OR

조건 중 적어도 하나가 true인지 판단하는 데 사용됩니다. 적어도 하나의 조건이 true이면 전체 표현식의 결과는 true이고, 모든 조건이 false이면 결과는 false입니다. OR 연산은 왼쪽에서 오른쪽으로 첫 번째 true를 순차적으로 찾으며, true를 찾으면 계산을 중지하고 해당 피연산자의 원래 값을 반환합니다(단락 평가). 최종적으로 true가 없으면 마지막 false를 반환합니다.

!: 논리 NOT

불린 값을 반전시키는 데 사용됩니다. 값이 true이면 논리 NOT 연산자를 사용하여 false로 반전시키고, 값이 false이면 true로 반전시킵니다. 논리 NOT은 불린이 아닌 값을 불린 값으로 변환하는 데에도 사용할 수 있습니다. null, undefined, 0, NaN, ""(빈 문자열)이 아닌 모든 값은 true로 변환되고, 앞서 언급한 값들은 모두 false로 변환됩니다.

예제:

1
let a = true;
2
let b = false;
3
let c = "hello";
4
let d = null;
5

6
console.log(a && b);  // 출력 false
7
console.log(c && d);  // 출력 null
8
console.log(a || b);  // 출력 true
9
console.log(c || d);  // 출력 hello
10
console.log(!a);      // 출력 false
11
console.log(!d);      // 출력 true

삼항 연산자

• condition ? expr1 : expr2: 조건이 참이면 expr1을 반환하고, 그렇지 않으면 expr2를 반환합니다.

예제:

1
let age = 18;
2
let status = (age >= 18) ? '성인' : '미성년자';
3
console.log(status);  // 출력 '성인'

null 병합 연산자

null 병합 연산자(Nullish Coalescing Operator)는 기본값을 처리하는 데 사용되는 연산자로, 일반적으로 변수가 null이 아닌(null 및 undefined가 아닌) 값을 갖도록 보장하는 데 사용됩니다. 이 연산자의 구문은 ??입니다.

null 병합 연산자를 사용하면 첫 번째로 정의된(null 및 undefined가 아닌) 피연산자를 반환하며, 첫 번째 피연산자가 null 또는 undefined이면 두 번째 피연산자를 반환합니다.

예제:

1
let num1 = 0;
2
let num2 = 1;
3
let result = num1 ?? num2;
4
console.log(result);  // 출력 0, num이 null 또는 undefined가 아니므로
5

6
let user;
7
console.log(user ?? "익명"); // 출력 익명, user가 정의되지 않았으므로

비트 연산자

• &: 비트 AND
• |: 비트 OR
• ^: 비트 XOR
• ~: 비트 NOT
• <<: 왼쪽 시프트
• >>: 오른쪽 시프트
• >>>: 부호 없는 오른쪽 시프트

예제:

1
let a = 5;  // 이진수: 0101
2
let b = 3;  // 이진수: 0011
3

4
console.log(a & b);   // 출력 1 (비트 AND)
5
console.log(a | b);   // 출력 7 (비트 OR)
6
console.log(a ^ b);   // 출력 6 (비트 XOR)
7
console.log(~a);      // 출력 -6 (비트 NOT)
8
console.log(a << 1);  // 출력 10 (왼쪽 시프트)
9
console.log(a >> 1);  // 출력 2 (오른쪽 시프트)

기타 연산자

• typeof: 계산되지 않은 피연산자의 타입을 나타내는 문자열을 반환합니다.
• instanceof: 객체가 지정된 타입의 인스턴스인지 테스트하는 데 사용됩니다.

예제:

1
let str = 'Hello';
2
console.log(typeof str);  // 출력 'string'
3

4
let arr = [1, 2, 3];
5
console.log(arr instanceof Array);  // 출력 true

+(더하기)

JavaScript에서 더하기 기호 +는 수학 연산, 문자열 연결 및 단항 연산을 포함한 여러 용도로 사용됩니다.

수학 연산

예제:

1
let a = 5;
2
let b = 3;
3
let result = a + b;
4
console.log(result);  // 출력 8

둘 다 숫자이면 +는 수학적 덧셈을 수행하는 데 사용됩니다.

문자열 연결

예제:

1
let str1 = 'Hello';
2
let str2 = ' World';
3
let result = str1 + str2;
4
console.log(result);  // 출력 'Hello World'

피연산자 중 하나가 문자열이면 +는 문자열 연결을 수행합니다.

단항 더하기 연산자

예제:

1
let str = '42';
2
let num = +str;
3
console.log(num);  // 출력 42

단일 피연산자 앞에 +를 사용하면 피연산자를 숫자로 변환할 수 있으며, 이것이 단항 더하기 연산자의 기능입니다.

타입 변환

예제:

1
let num = 42;
2
let str = '10';
3
let result = num + str;  // 암시적 타입 변환 (타입 강제 변환)
4
console.log(result);  // 출력 '4210'

피연산자 중 하나가 문자열이면 +는 타입 변환을 수행하여 다른 피연산자를 문자열로 변환한 다음 문자열 연결을 수행합니다.

배열 연결

예제:

1
let arr1 = [1, 2, 3];
2
let arr2 = [4, 5, 6];
3
let result = arr1 + arr2;
4
console.log(result);  // 출력 '1,2,34,5,6'

피연산자가 배열이면 +는 배열을 문자열로 변환한 다음 문자열 연결을 수행합니다.

특수한 경우

예제:

1
let specialResult1 = '1' + 2 + 3;
2
console.log(specialResult1);  // 출력 '123'
3

4
let specialResult2 =  2 + 3 + '1';
5
console.log(specialResult2);  // 출력 '51'

specialResult1은 문자열이 +의 가장 왼쪽에 나타나기 때문에 이후의 숫자는 문자열로 연결됩니다. specialResult2는 문자열이 +의 가장 오른쪽에 나타나기 때문에 이전의 숫자는 먼저 수학 연산을 수행한 후 연결됩니다.

-(빼기)

JavaScript에서 빼기 기호 -는 수학적 뺄셈을 수행하는 데 사용되는 연산자입니다.

수학적 뺄셈

예제:

1
let a = 5;
2
let b = 3;
3
let result = a - b;
4
console.log(result);  // 출력 2

둘 다 숫자이면 -는 수학적 뺄셈을 수행하는 데 사용됩니다.

단항 빼기 연산자

예제:

1
let num = 42;
2
let result = -num;
3
console.log(result);  // 출력 -42

단일 피연산자 앞에 -를 사용하면 단항 뺄셈 연산을 수행하여 피연산자를 반대 부호로 만듭니다.

타입 변환

예제:

1
let num1 = 42;
2
let str = '10';
3
let result = num1 - str;
4
console.log(result);  // 출력 32

피연산자 중 하나가 문자열이면 -는 타입 변환을 수행하여 다른 피연산자를 숫자로 변환한 다음 수학적 뺄셈을 수행합니다.

특수한 경우

예제:

1
let specialResult = '10' - 2;
2
console.log(specialResult);  // 출력 8

이 특수한 경우에는 문자열의 내용이 숫자로 성공적으로 변환될 수 있기 때문에 -가 수학적 뺄셈을 수행합니다.

=、==、===(할당, 느슨한 동등, 엄격한 동등)

JavaScript에서 등호 =는 할당 연산자이고, ==와 ===는 비교 연산자입니다. 느슨한 동등은 두 피연산자를 동일한 타입으로 변환한 다음 비교합니다. 조건부 판단에서는 일반적으로 ===를 사용하여 타입 변환을 수행하지 않는 엄격한 동등성 비교를 수행합니다.

할당 연산자

=는 오른쪽의 값을 왼쪽의 변수에 할당하는 데 사용됩니다.

예제:

1
let x = 5;
2
let y = 'Hello';
3
console.log(x);  // 출력 5
4
console.log(y);  // 출력 'Hello'

이 예제에서 =는 오른쪽의 값을 왼쪽의 변수 x와 y에 할당합니다.

비교 연산자

==와 ===는 두 값의 동등성을 비교하는 데 사용됩니다.

예제:

1
let a = 5;
2
let b = '5';
3

4
console.log(a == b);   // 출력 true
5
console.log(a === b);  // 출력 false

==는 동등성 비교를 수행할 때 타입 변환을 수행하며, null == undefined는 true를 출력합니다. ===는 동등성 비교를 수행할 때 값과 타입이 모두 같아야 하며, null === undefined는 false를 출력합니다. NaN은 NaN 자체를 포함하여 어떤 값과도 같지 않습니다.

++、--(증가, 감소)

JavaScript에서 증가(++)와 감소(--)는 변수 값을 증가하거나 감소시키는 데 사용되는 연산자입니다.

증가 연산자 (++)

사용하면 원래 변수를 즉시 1 증가시킵니다. 전위 증가는 증가된 값(새 값)을 반환합니다. 후위 증가는 증가 전 값(이전 값)을 반환합니다.

전위 증가 예제:

1
let a = 5;
2
// 전위 증가, 먼저 1 증가한 다음 새 값 사용
3
let b = ++a;
4
console.log(b);  // 출력 6
5
console.log(a);  // 출력 6

이 예제에서 a는 먼저 1 증가한 다음 b가 새로운 a 값(6)을 얻습니다.

후위 증가 예제:

1
let x = 5;
2
// 후위 증가, 먼저 현재 값을 사용한 다음 1 증가
3
let y = x++;
4
console.log(y);  // 출력 5
5
console.log(x);  // 출력 6

이 예제에서 y는 먼저 x의 현재 값(5)을 얻은 다음 x 값이 1 증가합니다.

감소 연산자 (—)

사용하면 원래 변수를 즉시 1 감소시킵니다. 전위 감소는 감소된 값(새 값)을 반환합니다. 후위 감소는 감소 전 값(이전 값)을 반환합니다.

전위 감소 예제:

1
let p = 10;
2
// 전위 감소, 먼저 1 감소한 다음 새 값 사용
3
let q = --p;
4
console.log(q);  // 출력 9
5
console.log(p);  // 출력 9

이 예제에서 p는 먼저 1 감소한 다음 q가 새로운 p 값(9)을 얻습니다.

후위 감소 예제:

1
let m = 8;
2
// 후위 감소, 먼저 현재 값을 사용한 다음 1 감소
3
let n = m--;
4
console.log(n);  // 출력 8
5
console.log(m);  // 출력 7

이 예제에서 n은 먼저 m의 현재 값(8)을 얻은 다음 m 값이 1 감소합니다.

연산자 우선순위:

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Operator_precedence