연산자 (Operator)
연산자는 하나 이상의 표현식을 대상으로 연산을 수행하여 하나의 값을 만드는 것이다. 연산의 대상을 피연산자라고 하며, 피연산자는 값으로 평가될 수 있는 표현식이어야 한다. 연산자와 피연산자의 조합으로 이루어진 연산자 표현식 또한 값으로 평가될 수 있는 표현식이다.
산술 연산자
산술 연산자는 피연산자를 대상으로 수학적 연산을 진행하여 새로운 숫자 값을 만들어낸다. 연산이 불가능한 경우, NaN을 반환한다. 산술 연산자에 따라 피연산자의 값을 변경하는 부수 효과가 있다. 산술 연산자는 "이항 산술 연산자"와 "단항 산술 연산자"로 구분된다.
이항 산술 연산자
이항 산술 연산자는 2개의 피연산자를 산술 연산하여 숫자 값을 만드는 연산자이다. 종류는 다음과 같다.
- + : 덧셈을 의미한다. 부수효과는 존재하지 않는다.
- - : 뺄셈을 의미한다. 부수효과는 존재하지 않는다.
- * : 곱셈을 의미한다. 부수효과는 존재하지 않는다.
- / : 나눗셈을 의미한다. 부수효과는 존재하지 않는다.
- % : 나머지 반환을 의미한다. 부수효과는 존재하지 않는다.
단항 산술 연산자
단항 산술 연산자는 1개의 피연산자를 연산하여 숫자 값을 만든다. 증가/감소(++/- -) 연산자는 피연산자의 값을 변경하는 부수 효과가 있으며, 연산자의 위치에 따라 의미가 달라진다. 전위 증가/감소 연산자는 피연산자 앞에 위치하며, 먼저 피연산자의 값을 증가/감소시킨 후, 다른 연산을 진행한다. 반면 후위 증가/감소 연산자는 피연산자 뒤에 위치하며, 다른 연산을 먼저 진행한 후, 피연산자의 값을 증가/감소시킨다.
이때, 이항 산술 연산자의 +, -와 단항 산술 연산자의 +, -를 구분할 필요가 있다.
- ++ : 증가를 의미한다. 피연산자의 값을 변경하는 부수효과가 존재한다.
- -- : 감소를 의미한다. 피연산자의 값을 변경하는 부수효과가 존재한다.
- + : 피연산자를 숫자 타입으로 변경한다. 부수효과도 존재하지 않는다.
- - : 부호를 반전시킨 값을 반환한다. 부수효과는 존재하지 않는다.
문자열 연결 연산자
+ 연산자는 피연산자 중 하나 이상이 문자열일 때, 문자열 연결 연산자로 동작한다. 그렇지 않은 경우는 산술 연산자로 동작한다. 자바스크립트 엔진이 암묵적으로 타입을 변화시킨다. (암묵적 타입 변환, 타입 강제 변환)
// 문자열 연결 연산자
'1' + 2; // '12'
1 + '2'; // '12'
// 산술 연산자
1 + 2; // 3
// true는 1로, false는 0으로 타입이 변환된다.
1 + true; // 2
1 + false; // 1
// null은 0으로 타입이 변환된다.
1 + null; // 1
// undefined는 숫자로 타입이 변환되지 않는다.
+undefined; // NaN
1 + undefined; // NaN할당 연산자
할당 연산자는 우항에 있는 피연산자의 평가 결과를 좌항에 있는 변수에 할당한다. 할당 연산자는 좌항의 변수에 값을 할당하기에 변수 값이 변화하는 부수 효과가 있다. =, +=, -=, *=, /=, %= 등이 있다. 코드를 통해 할당 연산자들을 이해해보도록 하겠다.
var x = 10;
console.log(x); // 10
x += 5;
console.log(x); // 15
x -= 5;
console.log(x); // 10
x *= 5;
console.log(x); // 50
x /= 5;
console.log(x); // 10
x %= 5;
console.log(x); // 0
var str = 'My name is ';
// 문자열 연결 연산자
str += 'Lee';
console.log(str); // 'My name is Lee'
var a, b, c;
a = b = c = 0;
console.log(a, b, c); // 0, 0, 0비교 연산자
비교 연산자는 좌항과 우항의 피연산자를 비교하고, 비교 결과를 불리언 값으로 반환한다.
동등/일치 비교 연산자
동등 비교 연산자와 일치 비교 연산자는 좌항과 우항의 피연산자가 같은 값으로 평가되는지를 비교하여 불리언 값을 반환한다. 그러나, 이 둘의 비교하는 엄격성에는 차이가 있다. 일치 비교 연산자가 동등 비교 연산자보다 더 빡세다.
- == : 동등 비교이며, x == y 는 x와 y의 값이 같음을 의미한다.
- === : 일치 비교이며, x === y는 x와 y의 값과 타입이 모두 같음을 의미한다.
- != : 부동등 비교이며, x != y는 x와 y의 값이 다름을 의미한다.
- !== : 불일치 비교이며, x !== y는 x와 y의 값과 타입이 모두 다름을 의미한다.
동등 비교 연산자는 암묵적 타입 변환으로 타입을 일치시키고 같은 값인지 비교하기에 결과를 예측하기 어렵고 실수하기 쉽다. 반면 일치 비교 연산자는 좌항과 우항이 타입도 값도 같은 경우에만 true를 반환하기에(암묵적 타입 변환X) 값을 비교하고 예측하기가 쉽다. 따라서 동등 비교 연산자를 사용하지 않는 것이 좋고 일치 비교 연산자만 사용하는 것이 권장된다.
대소 관계 비교 연산자
대소 관계 비교 연산자는 말 그대로 어떤 값이 더 큰지를 비교하는 것이다.
- > : x > y 는 x의 값이 y보다 더 큼을 의미한다.
- < : x < y는 y의 값이 x보다 더 큼을 의미한다.
- >= : x >= y는 x의 값이 y보다 더 크거나 같음을 의미한다.
- <= : x <= y는 y의 값이 x보다 더 크거나 같음을 의미한다.
삼항 연산자
삼항 조건 연산자(?)에서는 조건식의 평가 결과에 따라 반환할 값이 결정된다. 첫 번째 피연산자가 true 로 평가되면 두 번째 피연산자를 반환하고, 첫 번째 피연산자가 false로 평가되면 세 번째 피연산자를 반환하게 된다. 이때, 첫 번째 피연산자는 불리언 타입의 값으로 평가되는 조건식이다.
var x = 2;
// 2 % 2는 0이고 0은 false로 암묵적 타입 변환된다.
var result = x % 2 ? '홀수' : '짝수';
console.log(result); // 짝수삼항 조건 연산자 표현식은 값으로 평가할 수 있는 표현식인 문이기에 값처럼 다른 표현식의 일부가 될 수 있어서 유용하게 사용된다. 다만, 조건에 따라 수행해야 하는 문이 여러 개라면 if else문을 사용하는 것이 더 좋다.
논리 연산자
논리 연산자는 우항과 좌항의 피연산자를 논리 연산하는 것이다.
- || : 논리합(OR)을 의미한다.
- && : 논리곱(AND)을 의미한다.
- ! : 부정(NOT)을 의미한다.
그 외의 연산자들
| 연산자 | 개요 |
| , | 쉼표 연산자, 가장 왼쪽 피연산자부터 차례로 평가한다. |
| ( ) | 그룹 연산자, 우선순위가 가장 높은 연산자이다. |
| typeof | typeof 연산자, 피연산자의 데이터 타입을 문자열로 반환한다. (string, number, boolean, undefined, symbol, object, function) |
| ** | 지수 연산자, 좌항의 피연산자를 밑으로, 우항의 피연산자를 지수로 거듭제곱한 값을 반환한다. |
| ?. | 옵셔널 체이닝 연산자 |
| ?? | null 병합 연산자 |
| delete | 프로퍼티 삭제 연산자 |
| new | 생성자 함수를 호출할 때 사용하여 인스턴스를 생성하는 연산자 |
| instanceof | 좌편의 객체가 우변의 생성자 함수와 연결된 인스턴스인지 판별하는 연산자 |
| in | 프로퍼티의 존재를 확인하는 연산자 |
연산자 우선순위
연산자 우선순위란 여러 개의 연산자로 이루어진 문이 실행될 때 연산자가 실행되는 순서를 말한다. 우선순위가 높을수록 먼저 실행된다.
연산자는 종류가 많아 우선순위를 모두 기억하기는 어렵고 연산자 우선순위가 가장 높은 그룹 연산자( )를 사용해서 우선순위를 명시적으로 조절하는 것이 좋다.
연산자 결합 순서
연산자의 결합 순서란 수식 내에 우선순위가 같은 연산자가 둘 이상 있을 때, 먼저 어느 연산을 수행할 것인가를 결정합니다
- 좌항->우항: 산술 연산자(+, -, /, %), 비교 연산자(<, <=, >, >=), 논리 연산자(&&, ||), in, instanceof 등...
- 우항->좌항: 할당 연산자(=, +=, -=), 단항 연산자 (++, --, +, -), typeof, delete 등...
래퍼런스(Reference)
https://www.yes24.com/Product/Goods/92742567
