- 연산는 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산 등을 수행해 하나의 값을 만든다. 이때 연산의 대상을 피연산자라 한다. 피연산자는 값으로 평가될 수 있는 표현식이어야 한다.
- 피연산자는 연산의 대상이 되어야 하므로 값으로 평가할 수 있어야 한다. (값)
- 연산자는 값으로 평가된 피연산자를 연산해 새로운 값을 만든다.
5 * 4
'My name is ' + 'Lee'
var color = 'red';
3 > 5
(5 > 3) && (2 < 4)
typeof 'Hi'
✅ 산술 연산자
- 산술 연산자는 피연산자를 대상으로 수학적 계산을 수행해 새로운 숫자 값을 만든다.
- 산술 연산이 불가능할때는 NaN을 반환한다.
- 이항 산술 연산자 / 단항 산술 연산자로 구분
이항 산술 연산자
- 이항 산술 연산자는 2개의 피연산자를 대상으로 연산하여 숫자 타입의 값을 만든다.
- 피연산자의 값을 변경하는 부수 효과가 없다. (단지 새로운 값을 만들 뿐)
- +, -. *, /, %
5 + 2
5 - 2
5 * 2
5 / 2
5 % 2
단항 산술 연산자
- 1개의 피연산자를 대상으로 연산한다.
- 증가(++)/ 감소(—) 연산자는 피연산자의 값을 변경하는 부수 효과가 있다.
var x = 5, result;
result = x++;
console.log(result, x);
result = ++x;
console.log(result, x);
result = x--;
console.log(result, x);
result = --x;
console.log(result, x);
- '+' 단항 연산자는 피연산자에 어떠한 효과도 없지만 숫자 타입이 아닌 피연산자에 사용시 숫자 타입으로 변환하여 반환한다.
- '-' 단항 연산자는 피연산자의 부호를 반전한 값을 반환한다. + 연산자와 마찬가지로 숫자 타입이 아닌 피연산자에 사용시 숫자 타입으로 변환하여 반환한다.
문자열 연결 연산자
- '+' 연산자는 피연산자 중 하나 이상이 문자열인 경우 문자열 연결 연산자로 사용된다.
'1' + '2'
'1' + 2
1 + 2
1 + true
1 + false
true + false
1 + null
1 + undefined
- 여기서 주목할 점은 자바스크립트 엔진에 의해 개발자의 의도와는 상관없이 암묵적으로 타입이 자동 변환된다는 점이다.
✅ 할당 연산자
- 우항에 있는 피연산자의 평가 결과를 좌항에 있는 변수에 할당한다.
- 좌항의 변수에 값을 할당하는 부수효과가 있다.
할당 연산자 | 사례 | 동일 표현 |
---|
= | x = y | x = y |
+= | x += y | x = x + y |
-= | x -= y | x = x - y |
*= | x *= y | x = x * y |
/= | x /= y | x = x / y |
%= | x %= y | x = x % y |
✅ 비교 연산자
- 비교연산자는 좌항과 우항의 피연산자를 비교하여 불리언 값을 반환한다.
- if or for문과 같은 제어문의 조건식에서 주로 활용
비교 연산자 | 의미 | 사례 | 설명 |
---|
== | 동등 비교 | x == y | x와 y의 값이 같음 |
=== | 일치 비교 | x === y | x와 y의 값과 타입이 같음 |
!= | 부등 비교 | x != y | x와 y의 값이 다름 |
!== | 불일치 비교 | x !== y | x와 y의 값과 타입이 다름 |
- ==(동등 비교 연산자) 는 암묵적 타입 변환을 통해 타입을 일치시킨 후 비교하지만,
===(일치 비교 연산자) 는 타입까지 비교하여 반환한다.
- 동등 비교 연산자는 편리한 경우도 있지만 부작용을 일으킬 수 있으므로 일치 비교 연산자를 사용하는게 좋다.
- 일치비교 연산자는 예측하기 쉽다. 다만 NaN은 자신과 일치하지 않는 유일한 값이다. (→ 숫자가 NaN인지 알려면 isNaN(NaN)함수를 사용한다.)
대소 관계 비교 연산자
- 대소관계 비교 연사자는 피연산자의 크기를 비교하여 불리언 값을 반환한다.
대소 관계 비교 연산자 | 예제 | 설명 |
---|
> | x > y | x가 y보다 크다 ✕ |
< | x < y | x가 y보다 작다 ✕ |
>= | x >= y | x가 y보다 같거나 크다 ✕ |
<= | x <= y | x가 y보다 같거나 크다 ✕ |
✅ 삼항 조건 연산자
- 삼항 조건 연산자는 조건식의 평가 결과에 따라 반환할 값을 결정한다. 부수 효과는 없다.
조건식 ? 조건식이 ture일때 반환할 값(A) : 조건식이 false일때 반환할 값(B)
- 물음표(?) 앞의 첫번째 피연산자가 조건식, 즉 불리언 타입의 값으로 평가될 표현식이다. 만약 조건식의 평가 결과가 불리언 값이 아니면 불리언 값으로 암묵적 타입 변환된다.
- 조건식이 참이면 콜론(:) 앞의 피연산자(A)가 평가되어 반환되고, 거짓이면 콜론(:) 뒤의 피연산자(B)가 평가되어 반환된다.
- if.. else와 같은 기능을 하지만 if..else는 표현식이 아닌 문이고, 값으로 평가할 수 없다. 하지만 삼항 조건 연산자는 값으로 평가할 수 있는 표현식이다.
- 삼항 조건 연산자식은 다른 표현식의 일부가 될 수 있어 유용
var x = 2;
var result = x % 2 ? '홀수' : '짝수';
console.log(result);
✅ 논리 연산자
- 논리 연산자는 우항과 좌항의 피연산자(부정 논리 연산자의 경우, 우항의 피연산자)를 논리연산한다.
- 논리 부정(!) 연산자는 언제나 불리언 값을 반환한다.
- 하지만 논리합(
||
) 연산자와 논리곱(&&
) 연산자는 일반적으로 불리언 값을 반환하지만 반드시 불리언 값을 반환해야 하는 것은 아니다.
논리 연산자 | 의미 |
---|
| |
&& | 논리곱(AND) |
! | 부정(NOT) |
true || true
true || false
false || true
false || false
true && true
true && false
false && true
false && false
!true
!false
!0
'Cat' && 'Dog'
✅ 쉼표 연산자
- 쉼표(,) 연산자는 왼쪽 피연산자부터 차례대로 피연산자를 평가하고 마지막 피연산자의 평가가 끝나면 마지막 피연산자의 평가 결과를 반환한다.
var x, y, z;
x = 1, y = 2, z = 3; // 3
✅ 그룹 연산자
그룹 ((…))연산자는 그룹 내의 표현식을 최우선으로 평가한다. 그룹 연산자를 사용하면 연산자의 우선 순위를 1순위로 높일 수 있다.
10 * 2 + 3 // 23
10 * (2 + 3) // 50
✅ typeof 연산자
- typeof 연산자는 자신의 뒤에 위치한 피연산자의 데이터 타입을 문자열로 반환한다.
- typeof 연산자는 7가지 문자열 “string”, “number”, “boolean”, “undefined”, “symbol”, “object”, “function” 중 하나를 반환한다.
- “null”을 반환하는 경우는 없다.
- null은 ‘object’를 반환한다.
- null 타입을 확인하고 싶으면 일치 연산자(===)를 사용하도록 한다.
- 함수의 경우 “function”을 반환한다.
typeof ''
typeof 1
typeof NaN
typeof true
typeof undefined
typeof Symbol()
typeof null
typeof []
typeof {}
typeof new Date()
typeof /test/gi
typeof function () {}
typeof undeclared
typeof null
var foo = null;
console.log(typeof foo === null);
console.log(foo === null);
✅ 지수 연산자
- ES7 에서 도입되었고 좌항의 피연산자를 밑으로, 우항의 피연산자를 지수로 거듭 제곱 하여 숫자값을 반환한다.
- '**'
- 지수 연산자 도입전에는 Math.pow 사용
- 음수를 거듭제곱의 밑으로 사용하려면 괄호로 묶어야한다.
- 이항 연산자 중 우선순위가 가장 높다.
✅ 그 외 연산자
연산자 | 개요 |
---|
?. | 옵셔널 체이닝 연산자 |
?? | null 병합 연산자 |
delete | 프로퍼티 삭제 |
new | 생성자 함수를 호출할때 사용하여 인스턴스를 생성 |
instanceof | 좌변의 객체가 우변의 생성자 함수와 연결된 인스턴스인지 판별 |
in | 프로퍼티 존재 확인 |