[스터디] 모던자바스크립트 07장 연산자
- 연산자는 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산등을 수행하여 하나의 값을 만든다.
- 연산의 대상을 피연산자라고 하며, 값으로 평가될 수 있는 표현식이어야한다.
7.1 산술 연산자
- 피연산자를 대상으로 수학적 계산을 수행하는 연산자이다.
- 산술 연산이 불가능한 경우, NaN을 반환한다.
7.1.1 이항 산술 연산자
- 2개의 피연산자르 산술 연산하여 숫자 값을 만든다.
- 이항 산술 연산자는 피연산자의 값을 절대 변경할 수 없고 언제나 새로운 값을 만든다.
| 이항 산술 연산자 | 의미 | 부수 효과 |
|---|---|---|
| + | 덧셈 | X |
| - | 뺄셈 | X |
| * | 곱셈 | X |
| / | 나눗셈 | X |
| % | 나머지 | X |
7.1.2 단항 산술 연산자
- 1개의 피연산자를 산술 연산하여 숫자 값을 만든다.
| 단항 산술 연산자 | 의미 | 부수 효과 |
|---|---|---|
| ++ | 증가 | O |
| – | 감소 | O |
| + | 어떠한 효과도 없다. 음수를 양수로 반전하지도 않는다. | X |
| - | 양수를 음수로, 음수를 양수로 반전한 값을 반환한다. | X |
- 증가/감소(++/–) 연산자는 피연산자의 값을 변경하는 부수효과가 있다.
- 증가/감소 연산을 하면 피연산자의 값을 변경하는 암묵적 할당이 이뤄진다.
// 증가 연산을 하면 피연산자의 값을 변경하는 암묵적 할당이 이뤄진다.
var x = 7;
x++; // x = x+1;
console.log(x); // 8
// 감소 연산을 하면 피연산자의 값을 변경하는 암묵적 할당이 이뤄진다.
var y = 7;
y++; // x = x+1;
console.log(y); // 6
7.1.3 문자열 연결 연산자
- + 연산자는 피연산자 중 하나 이상이 문자열인 경우 문자열 연결 연산자로 동작한다.
// 문자열 연결 연산자
"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
- 위 예제 중 불린값을 자바스크립트 엔진이 암묵적 타입 변환을 하여 true는 1로, false는 0으로 만들어 주었다. 암묵적 타입 변환에 대해서는 9장 참고하자.
7.2 할당 연산자
- 우항에 있는 피연산자의 평가 결과를 좌항에 있는 변수에 할당한다.
- 할당 연산자는 좌항의 변수에 값을 할당하기때문에 변수 값이 변하는 부수 효과가 있다.
| 할당 연산자 | 예 | 동일 표현 | 부수 효과 |
|---|---|---|---|
| = | x = 7 | x = 7 | O |
| += | x += 7 | x = x + 7 | O |
| -= | x -= 7 | x = x - 7 | O |
| *= | x *= 7 | x = x * 7 | O |
| /= | x /= 7 | x = x / 7 | O |
| %= | x %= 7 | x = x % 7 | O |
- 할당문은 값으로 평가되는 표현식인 문으로서 할당된 값으로 평가된다.
var a, b, c;
// 연쇄 할당. 오른쪽에서 왼쪽으로 진행.
// ① c = 0 : 0으로 평가된다
// ② b = 0 : 0으로 평가된다
// ③ a = 0 : 0으로 평가된다
a = b = c = 0;
console.log(a, b, c); // 0 0 0
7.3 비교 연산자
- 좌항과 우항의 피연산자를 비교한 다음 그 결과를 불리언 값으로 반환한다.
- if 문이나 for 문과 같은 제어문의 조건식에서 주로 사용한다.
7.3.1 동등/일치 비교 연산자
- 좌항과 우항의 피연산자가 같은 값으로 평가되는지 비교해 불리언 값을 반환한다.
- 동등 비교 연산자(==)는 좌항과 우항의 피연산자를 비교할 때, 먼저 암묵적 타입 변환을 통해 타입을 일치시킨 후 같은 값인지 비교한다.
- 일치 비교 연산자(===)는 좌항과 우항의 피연산자가 타입도 같고, 값도 같은 경우에 한하여 true를 반환한다.
| 비교 연산자 | 의미 | 예 | 설명 | 부수 효과 |
|---|---|---|---|---|
| == | 동등 비교 | x == y | x와 y의 값이 같음 | X |
| === | 일치 비교 | x == y | x와 y의 값과 타입이 모두 같음 | X |
| != | 부동등 비교 | x != y | x와 y의 값이 다름 | X |
| !== | 불일치 비교 | x !== y | x와 y의 값과 타입이 모두 다름 | X |
7.3.2 대소 비교 연산자
- 피연산자의 크기를 비교하여 불리언 값을 반환한다.
| 대소 관계 비교 연산자 | 예제 | 설명 | 부수 효과 |
|---|---|---|---|
| > | x > y | x가 y보다 크다 | X |
| < | x < y | x가 y보다 작다 | X |
| >= | x >= y | x가 y보다 크거나 같다 | X |
| <= | x <= y | x가 y보다 작거나 같다 | X |
7.4 삼항 조건 연산자
- 조건식의 평가 결과에 따라 반환할 값을 결정한다.
- 자바스크립트의 유일한 삼항 연산자이며, 부수 효과는 없다.
- 삼항 조건 연산자 표현식은 표현식인 문이다. 따라서 값처럼 사용할 수 있다.(예제 4)
조건식 ? 조건식이 true일 때 반환 : 조건식이 false일 때 반환
예제 1)
var x = 2;
// 2 % 2는 0이고 0은 false로 암묵적 타입 변환된다.
var result = x % 2 ? '홀수' : '짝수';
console.log(result); // 짝수
예제 2)
var x = 2, result;
// 2 % 2는 0이고 0은 false로 암묵적 타입 변환된다.
if (x % 2) result = '홀수';
else result = '짝수';
console.log(result); // 짝수
예제 3)
var x = 10;
// if...else 문은 표현식이 아닌 문이다. 따라서 값처럼 사용할 수 없다.
var result = if (x % 2) { result = '홀수'; } else { result = '짝수'; };
// SyntaxError: Unexpected token if
예제 4)
var x = 10;
// 삼항 조건 연산자 표현식은 표현식인 문이다. 따라서 값처럼 사용할 수 있다.
var result = x % 2 ? '홀수' : '짝수';
console.log(result); // 짝수
7.5 논리 연산자
- 우항과 좌항의 피연산자를 논리 연산한다.
- 논리 부정 연산자는 항상 불리언값을 반환한다. 단, 피연산자가 꼭 불리언값일 필요는 없다. 만약 피연산자가 불리언 값이 아니면 암묵적 타입 변환을 통해 불린 값으로 변환 후 연산한다.
| 논리 연산자 | 의미 | 부수 효과 |
|---|---|---|
| || | 논리합(OR) | X |
| && | 논리곱(AND) | X |
| ! | 부정(NOT) | X |
// 논리합(||) 연산자
true || true; // -> true
true || false; // -> true
false || true; // -> true
false || false; // -> false
// 논리곱(&&) 연산자
true && true; // -> true
true && false; // -> false
false && true; // -> false
false && false; // -> false
// 논리 부정(!) 연산자
!true; // -> false
!false; // -> true
// 암묵적 타입 변환
!0; // -> true
!"Hello"; // -> false
// 단축 평가
"Cat" && "Dog"; // -> 'Dog'
7.6 쉼표 연산자
- 쉼표(,)연산자는 왼쪽 피연산자부터 차례대로 피연산자를 평가하고 마지막 피연산자의 평가가 끝나면 마지막 피연산자의 평가 결과를 반환한다.
var x, y, z;
(x = 1), (y = 2), (z = 3); // 3
7.7 그룹 연산자
- 소괄호로 피연산자를 감싸는 그룹 연산자는 자신의 피연산자인 표현식을 가장 먼저 평가한다.
- 그룹 연산자를 사용하여 연산자의 우선순위를 조절할 수 있고, 그룹 연산자 우선순위가 가장 높다.
10 * 2 + 3; // -> 23
// 그룹 연산자를 사용하여 우선순위를 조절
10 * (2 + 3); // -> 50
7.8 typeof 연산자
- 피연산자의 데이터 타입을 문자열로 반환한다.
- 7가지 “string”, “number”, “boolean”, “undefined”, “symbol”, “object”, “function” 중 하나의 문자열을 반환한다.
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"
7.9 지수 연산자
- ES7에서 도입된 지수 연산자는 좌항의 피연산자를 밑(base)으로, 우항의 피연산자를 지수(exponent)로 거듭 제곱하여 숫자 값을 반환한다.
2 ** 2; // -> 4
2 ** 2.5; // -> 5.65685424949238
2 ** 0; // -> 1
2 ** -2; // -> 0.25
- 지수 연산자가 도입되기 이전에는 Math.pow() 메서드를 사용했다.
Math.pow(2, 2); // -> 4
Math.pow(2, 2.5); // -> 5.65685424949238
Math.pow(2, 0); // -> 1
Math.pow(2, -2); // -> 0.25
7.10 그 외의 연산자
| 연산자 | 개요 | 참고 |
|---|---|---|
| ?. | 옵셔널 체이닝 연산자 | 9.4.2 “옵셔널 체이닝 연산자” |
| ?? | null 병합 연산자 | 9.4.3 “null 병합 연산자” |
| deletenew | 프로퍼티 삭제 | 10.8 “프로퍼티 삭제” |
| new | 생성자 함수를 호출할 때 사용하여 인스턴스를 생성 | 17.2.6 “new 연산자” |
| instanceof | 좌변의 객체가 우변의 생성자 함수와 연결된 인스턴스인지 판별 | 19.10 “instanceof 연산자” |
| in | 프로퍼티 존재 확인 | 19.13.1 “in 연산자” |
7.11 연산자의 부수 효과
- 대부분의 연산자는 다른 코드에 영향을 주지 않는다. 하지만 일부 연산자는 다른 코드에 영향을 주는 부수 효과가 있다.
- 부수 효과가 있는 연산자는 다음과 같다. 할당 연산자 = 증가/감소 연산자 ++, – delete 연산자
var x;
// 할당 연산자는 변수 값이 변하는 부수 효과가 있다.
// 이는 x 변수를 사용하는 다른 코드에 영향을 준다.
x = 1;
console.log(x); // 1
// 증가/감소 연산자(++/--)는 피연산자의 값을 변경하는 부수 효과가 있다.
// 피연산자 x의 값이 재할당되어 변경된다. 이는 x 변수를 사용하는 다른 코드에 영향을 준다.
x++;
console.log(x); // 2
var o = { a: 1 };
// delete 연산자는 객체의 프로퍼티를 삭제하는 부수 효과가 있다.
// 이는 o 객체를 사용하는 다른 코드에 영향을 준다.
delete o.a;
console.log(o); // {}
7.12 연산자 우선순위
- 여러 개의 연산자가 사용되었을 경우 우선수위가 높을수록 먼저 실행된다.
7.13 연산자 결합 순서
| 결합 순서 | 연산자 |
|---|---|
| 좌항->우항 | +, - , / , %, <, >, <=, >=, &&, ||, ., [ ], ( ), ??, ?., in, instanceof |
| 우항->좌항 | ++, –, 할당연산자, !x, +x, -x , +=x , –x, typeof, delete, 삼항 연산자 |
댓글남기기