연산자(Operator)는 하나 이상의 표현식을 대상으로 값으로 평가될 수 있는 표현식이어야 한다.
// 산술 연산자
5 * 4 // ➔ 20
// 문자열 연결 연산자
'My name is ' + 'apil' // ➔ My name is apil
// 할당 연산자
color = 'blue' // ➔ blue
// 비교 연산자
3 > 5 // ➔ false
// 논리 연산자
true && false // ➔ false
// 타입 연산자
typeof 'Hi' // ➔ string
피연산자는 값이라는 명사의 역할을 하고
연산자는 피연산자를 연산하여 새로운 값을 만든다 라는 동사 역할을 한다.
산술 연산자(arithmetic operator)는 피연산자를 대상으로
NaN
을 반환한다.이항 산술 연산자는 2개의 피연산자를 산술 연산하여 숫자 값을 만든다.
이항 산술 연산자 | 의미 | 부수효과 |
---|---|---|
+ | 덧셈 | x |
- | 뺄셈 | x |
* | 곱셈 | x |
/ | 나눗셈 | x |
% | 나머지 | x |
단항 산술 연산자는 1개의 피연산자를 산술 연산하여 숫자 값을 만든다.
단항 산술 연산자 | 의미 | 부수효과 |
---|---|---|
++ | 증가 | 0 |
-- | 감소 | 0 |
+ | 어떠한 효과도 없다, 음수를 양수로 반전하지도 않는다. | x |
- | 양수를 음수로, 음수로 양수로 반전한 값을 반환한다. | x |
var x = 5;
var result;
// 선할당 후 증가(postfix increment oprator)
result = x++;
console.log(result, x); // 5, 6
// 선증가 후 할당(prefix increment oprator)
result = ++x;
console.log(result, x); // 7, 7
// 선할당 후 감소(postfix decrement oprator)
result = x--;
console.log(result, x); // 7, 6
// 선감소 후 할당(prefix decrement oprator)
result = --x;
console.log(result, x); // 5, 5
+ 연산자는 피연산자 중 하나 이상의 문자열인 경우 문자열 연결 연산자로 동작한다.
// 문자열 연결 연산자
'1' + 2; // '12`
1 + '2'; // '12'
// 산술 연산자
1 + 2; // 3
// true는 1로 타입 변환된다.
1 + true; // 2
// false는 0으로 타입 변환된다.
1 + false; // 1
// null는 0으로 타입 변환된다.
1 + null; // 1
// undefined는 숫자로 타입 변환되지 않는다.
+undefined // NaN
1 + undefined; // NaN
1 + true
를 연산하면 자바스크립트 엔진은 암묵적으로 불리언 타입의 값인 true를 숫자 타입인 1로 강제 변환한 후 연산을 수행한다.할당 연산자는 우항에 있는 피연산자의 평가 결과를 좌항에 있는 변수에 할당한다.
할당 연산자 | 예 | 동일 표현 | 부수 효과 |
---|---|---|---|
= | x = 5 | x = 5 | 0 |
+= | x += 5 | x = x + 5 | 0 |
-= | x -= 5 | x = x -5 | 0 |
*= | x *= 5 | x = x * 5 | 0 |
/= | x /= 5 | x = x / 5 | 0 |
%= | x %= 5 | x = x % 5 | 0 |
좌항과 우항의 피연산자를 비교한 다음 그 결과를 불리언 값으로 반환한다.
동등 비교 연산자와 일치 비교 연산자는
비교 연산자 | 의미 | 사례 | 설명 | 부수 효과 |
---|---|---|---|---|
== | 동등 비교 | x == y | x와 y의 값이 같음 | X |
=== | 일치 비교 | x === y | x와 y의 값과 타입이 같음 | X |
!= | 부동등 비교 | x != y | x와 y의 값이 다름 | X |
!== | 불일치 비교 | x !== y | x와 y의 값과 타입이 다름 | X |
// 동등 비교
5 == 5; // true
// 타입은 다르지만 암묵적 타입 변환을 통해 일치시키면 동등하다.
5 == '5'; // true
// 부동등 비교
5 != 8; // true
5 != '5'; // false
// 불알치 비교
5 !== 8; // true
5 !== '5'; // true
대소 관계 비교 연산자는 피연산자의 크기를 비교해서 불리언 값 을 반환한다.
대소 관계 비교 연산자 | 예제 | 설명 |
---|---|---|
> | x > y | x가 y보다 크다 |
< | x < y | x가 y보다 작다 |
>= | x >= y | x가 y보다 크거나 같다 |
<= | x <= y | x가 y보다 작거나 같다 |
삼항 조건 연산자는 조건식의 평가 결과에 따라 반환할 값을 결정한다.
논리 연산자는 우항과 좌항의 피연산자를 논리 연산 한다.
논리 연산자 | 의미 |
---|---|
II | 논리합(OR) |
&& | 논리곱(AND) |
! | 부정(NOT) |
// 논리합(||) 연산자
true || true; // true
true || false; // true
false || true; // true
false || false; // false
// 논리곱(&&) 연산자
true && true; // true
true && false; // false
false && true; // false
false && false; // false
// 논리 부정(!) 연산자는 언제나 boolean 값을 반환 ➔ 암묵적 타입 변환
!0; // true
!'Hello'; // false
드 모르간의 법칙
논리 연산자로 구성된 복잡한 표현식은 가독성이 좋지 않아 한눈에 이해하기 어려울때가 있다.
이러한 경우 드 모르간의 법칙을 활용하면 복잡한 표현식을 좀 더 가독성 좋은 표현식으로 변환할 수 있다.!(x || y) === (!x && !y) !(x && y) === (!x || !y) ```js
쉼표(,) 연산자는 왼쪽 피연산자부터 차례대로 피연산자를 평가하고
var x, y, z;
x = 1, y =2, z =3; // 3
소괄호(()
)로 피연산자를 감싸는 그룹 연산자는 자신의 피연산자인 표현식을 가장 먼저 평가한다.
10 * 2 + 3; // 23
// 우선순위 조절
10 * (2 + 3); // 50
typeof 연산자는 피연산자의 데이터 타입을 문자열로 반환한다.
null
을 반환하는 경우는 없으며, 함수의 경우 function
을 반환한다.null
값을 연산해 보면 object
를 반환한다.null
타입인지 확인 할 때는 일치 연산자(===) 사용 권장typeof '' // "string"
typeof 1 // "number"
typeof NaN // "number"
typeof true // "boolean"
typeof undefined // "undefined"
typeof Symbol() // "symbol"
typeof null // "object"
typeof [] // "object"
typeof {} // "object"
typeof new Date() // "object"
typeof /test/gi // "object"
typeof function(){} // "function"
ES7 에서 도입된 지수 연산자는
2 ** 2; // 4
Math.pow(2, 2); // 4 (지수 연산자가 도입되기 이전)
// 음수를 밑으로 사용하려면 다음과 같이 괄호로 묶어야 한다.
(-5) ** 2; // 25
// 할당연산자와 같이 사용 가능하다.
var num = 5;
num **= 2 // 25
// 지수 연산자는 이항 연산자 중에서 우선순위가 가장 높다
2 * 5 ** 2; // 50
연산자는 종류가 많아 우선순위를 모두 기억하기 어렵다 -> 그룹연산자를 사용하는 것을 권장한다.
연산자 결합 순서는 연산자의 어느 쪽(좌항 또는 우항)부터 평가를 수행할 것인지 나타내는 순서