연산자란?
하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산등을 수행해 하나의 값을 만들며, 연산의 대상을 피연산자라고 한다.
또한 피연산자는 값으로 평가될 수 있는 표현식이다.
산술 연산자
피연산자를 대상으로 수학적 계산을 수행해 새로운 숫자 값을 만드는 연산자를 의미한다.
만약 산술 연산이 불가능한 경우 NaN을 반환한다.
이항 산술 연산자
2개의 피연산자를 산술 연산하여 숫자 값을 만든다.
모든 이항 산술 연산자는 부수 효과(side effect)가 없다.
즉, 산술 연산을 해도 피연산자의 값이 바뀌지 않고 새로운 값을 만든다.
| 이항 산술 연산자 | 의미 | 부수 효과 | 예시 |
|---|---|---|---|
| + | 덧셈 | X | 5 + 2 => 7 |
| - | 뺄셈 | X | 5 - 2 => 3 |
| * | 곱셈 | X | 5 * 2 => 10 |
| / | 나눗셈 | X | 5 / 2 => 2.5 |
| % | 나머지 | X | 5 % 2 => 1 |
단항 산술 연산자
1개의 피연산자를 산술 연산하여 숫자 값을 만든다.
| 단항 산술 연산자 | 의미 | 부수 효과 | 예시 |
|---|---|---|---|
| ++ | 증가 | O | x++ => x + 1 |
| -- | 감소 | O | x-- => x - 1 |
| + | 문자열 숫자, 불리언을 숫자 타입으로 변환 | X | +'10' => 10 |
| - | 양수 -> 음수, 음수 -> 양수 | X | +(-10) => -10 |
증가/감소(++/--) 연산자는 위치에 따라 연산이 다르게 수행된다
x = 5;
// 선할당 후증감
result = x++;
console.log(result, x); // 5 6
result = x--;
console.log(result, x); // 6 5
// 선증감 후할당
result = ++x;
console.log(result, x); // 6 6
result = --x;
console.log(result, x); // 5 5또한 + 연산자는 피연사자 중 하나 이상이 문자열인 경우 문자열 연결 연산자로 동작한다.
'1' + 2; // '12'
1 + '2'; // '12'할당 연산자
우항에 있는 피연산자의 결과 값을 좌항에 있는 변수에 할당한다.
따라서 할당 연산자는 좌항에 있는 변수의 값이 변하는 부수 효과가 있다.
| 할당 연산자 | 예시 | 동일 표현 | 부수 효과 |
|---|---|---|---|
| = | x = 5 | x = 5 | O |
| += | x += 5 | x = x + 5 | O |
| -= | x -= 5 | x = x - 5 | O |
| *= | x *= 5 | x = x * 5 | O |
| /= | x /= 5 | x = x / 5 | O |
| %= | x %= 5 | x = x % 5 | O |
이러한 할당문은 표현식으로 할당된 값으로 평가되어 다음과 같이 사용할 수 있다.
console.log(x = 10); // 10
// 연쇄 할당, 오른쪽에서 왼쪽으로 진행
a = b = c = 0;
console.log(a, b, c); // 0 0 0비교 연산자
좌항과 우항의 피연산자를 비교한 뒤 결과를 불리언 값으로 변환한다.
불리언 값이기 때문에 if문이나 for문과 같은 제어문의 조건식으로 주로 사용한다.
동등/일치 비교 연산자
동등 비교 연산자와 일치 비교 연산자의 차이는 엄격함의 정도가 다르다.
동등 비교 연산자(==)는 느슨한 비교로 값만 같으면 되지만, 일치 비교 연산자(===)는 엄격한 비교로 값과 타입이 같아야 한다.
| 비교 연산자 | 의미 | 예시 | 설명 | 부수 효과 |
|---|---|---|---|---|
| == | 동등 비교 | x == y | x와 y의 값이 같음 | X |
| === | 일치 비교 | x === y | x와 y의 값과 타입이 같음 | X |
| != | 부동등 비교 | x != y | x와 y의 값이 다름 | X |
| !== | 불일치 비교 | x !== y | x와 y의 값과 타입이 다름 | X |
동등 비교 연산자는 좌항과 우항의 피연산자를 비교할 때 암묵적 타입 변환을 통해 타입을 일치 시킨 뒤 값을 비교하여 서로 다른 타입이더라도 값이 같다면 true를 반환하게 된다.
5 == 5; // true
// 타입은 다르지만 암묵적 타입 변환으로 타입을 일치 시키면 값이 일치하기 때문에 true다.
5 == '5'; // true
// 안티 패턴
'0' == ''; // false
0 == ''; // true
0 == '0'; // true
false == 'false' // false
false == '0' // true
false == null // false
false == undefined // false동등 비교 연산자는 이러한 안티 패턴이 있기에 예측하기 어려운 결과를 만들 수 있으므로 일치 비교 연산자를 사용하는 것이 좋다.
일치 비교 연산자는 암묵적 타입 변환 없이 좌항과 우항의 타입과 값이 동일해야 true를 반환한다.
5 === 5; // true
// 타입이 서로 다르기 때문에 false다.
5 === '5'; // false
// NaN은 자신과 일치하지 않는 유일한 값이다.
NaN === NaN; // false
// isNaN 함수를 통해 NaN인지 확인이 가능하다.
isNaN(NaN); // true
isNaN(10); // false
isNaN(1 + undefined); // true
// 양의 0과 음의 0의 비교는 모두 true를 반환한다.
0 === -0; // true
0 == -0; // trueObject.is 메서드는 일치 비교 연산자와 비슷하게 정확한 비교 결과를 반환하지만 조금 다른점이 있다.
Object.is(-0, +0) => false
Object.is(NaN, NaN) => true
이 두개를 제외하고는 일치 비교 연산자와 동일한 결과를 반환한다.
대소 관계 비교 연산자
피연산자의 크기를 비교하여 불리언 값을 반환한다.
| 대소 관계 비교 연산자 | 예시 | 설명 | 부수 효과 |
|---|---|---|---|
| > | x > y | x가 y보다 크다 | X |
| < | x < y | x가 y보다 작다 | X |
| >= | x >= y | x가 y보다 크거나 같다 | X |
| <= | x <= y | x가 y보다 작거나 같다 | X |
삼항 조건 연산자
조건식의 결과 값에 따라 반환할 값을 결정한다.
사용법은 조건식 ? 조건식이 true일 때 반환 값 : 조건식이 false일 때 반환 값으로 표현한다.
if - else는 표현식이 아니지만 삼항 조건 연산자는 표현식으로 사용할 수 있다.
const x = 2;
let result = x % 2 ? '홀수' : '짝수';
console.log(result); // 짝수
// 아래와 동일하게 동작한다.
if(x % 2) result = '홀수';
else result = '짝수';
console.log(result); // 짝수
논리 연산자
우항과 좌항의 피연산자를 논리 연산한다.
만약 부정 논리 연산자의 경우 우항의 피연산자를 논리 연산한다.
| 논리 연산자 | 의미 | 부수 효과 |
|---|---|---|
| || | 논리합(OR) | X |
| && | 논리곱(AND) | X |
| ! | 부정(NOT) | X |
// 논리합
true || false; // true
false || true; // true
// 위 두 개의 비교는 같은 true를 반환한다.
// 하지만 첫 번째는 앞의 값이 true이기 때문에 뒤에 오는 값은 검사하지 않고 true를 반환한다.
// 두 번째는 앞의 값이 false이기 떄문에 뒤에 값까지 검사해서 true를 반환한다.
// 논리곱
true && false; // false
false && true; // false
// 여기서도 같은 false를 반환한다.
// 하지만 첫 번째는 앞이 true이기 때문에 뒤에 값까지 확인해야 결과를 알 수 있다.
// 두 번째는 앞이 false이기 떄문에 뒤에 값은 확인하지 않아도 false가 된다.쉼표 연산자
왼쪽 피연산자부터 차례대로 피연산자를 평가하여 마지막 피연산자의 평가가 끝나면 마지막 피연산자의 결과를 반환한다.
var x, y, z;
x = 1, y = 2, z = 3; // 마지막 피연산자의 값 3을 반환그룹 연산자
소괄호로 감싸는 그룹 연산자는 자신의 피연산자인 표현식을 가장 먼저 평가한다.
그룹 연산자를 사용하면 연산자의 우선 순위를 조절할 수 있고, 그룹 연산자가 가장 높다.
10 * 2 + 3; // 23
10 * (2 + 3); //50typeof 연산자
피연산자의 데이터 타입을 문자열로 반환한다.
typeof 연산자는 7가지 타입 string, number, boolean, undefined, symbol, object, function 중 하나를 반환한다.
typeof 연산자로 null을 연산하면 object를 반환하는데, 이는 자바스크립트의 첫 번째 버그다. 하지만 기존 코드에 영향을 줄 수 있어 아직까지 수정되지 못하고 있다.
따라서 값이 null 타입인지 확인할 때는 일치 비교 연산자(===)을 사용해야 한다.
선언하지 않은 식별자를 typeof 연산자로 연산하면 undefined를 반환하는 것도 주의하자.
지수 연산자
ES7에서 도입되었으며 좌항의 피연산자에 대해 우항의 피연산자를 지수 거듭 제곱하여 숫자 값을 반환한다.
2 ** 2; // 4
2 ** 2.5; // 5.65685424949238
2 ** 0; // 1
2 ** -2; // 0.25지수 연산자 이전에는 Math.pow 메서드를 통해 값을 반환했다.
그 외의 연산자
| 연산자 | 개요 | 예시 |
|---|---|---|
| ?. | 옵셔널 체이닝 연산자 | user?.data?.name => undefined 에러가 발생하지 않음 |
| ?? | null 병합 연산자 | a ?? b => a가 null이나 undefined가 아니면 a 그 외는 b |
| delete | 프로퍼티 삭제 | delete user.name => true값 반환하면 정상적으로 user객체의 name 프로퍼티를 삭제 |
| new | 생성자 함수를 호출할 때 사용하여 인스턴스 생성 | new function() |
| instanceof | 좌변의 객체가 우변의 생성자 함수와 연결된 인스턴스인지 판별 | obj instanceof Class => obj가 Class를 상속받으면 true 반환 |
| in | 프로퍼티 존재 확인 | "key" in object => object에 key가 있으면 true 없으면 false |
