[JS] 모던 Javascript Deep Dive 7장 - 연산자
업데이트:
연산자 파트는 외우기보다는 연산자 우선순위나 연산자를 사용할 때의 주의사항들을 기억하면 좋을 것 같다.
산술 연산자
1️⃣ 이항 산술 연산자 (부수 효과 x)
5 + 2 // 7
5 - 2 // 3
5 * 2 // 10
5 / 2 // 2.5
5 % 2 // 1
2️⃣ 단항 산술 연산자
| 단항 산술 연산자 | 의미 | 부수 효과 |
|---|---|---|
| ++ | 증가 | o |
| – | 감소 | o |
| + | 어떠한 효과도 없다. 음수를 양수로 반전하지도 않는다. | x |
| - | 양수를 음수로 음수를 양수로 반전한 값을 반환한다. | x |
var x = 5, result;
// 선대입 후증가 (Postfix increment operator)
result = x++;
console.log(result, x); // 5 6
// 선증가 후대입 (Prefix increment operator)
result = ++x;
console.log(result, x); // 7 7
// 선대입 후감소 (Postfix decrement operator)
result = x--;
console.log(result, x); // 7 6
// 선감소 후대입 (Prefix decrement operator)
result = --x;
console.log(result, x); // 5 5
증가/감소 연산자는 피연산자의 값을 변경하는 암묵적 할당이 이루어진다.
📐 숫자 타입이 아닌 피연산자에 +단항 연산자를 사용하면 숫자 타입으로 변환하여 반환한다.
var x = '1';
//문자열을 숫자로 타입 변환한다.
console.log(+x); // 1
3️⃣ **문자열 연결 연산자**
// 문자열 연결 연산자
'1' + '2' // '12'
'1' + 2 // '12'
//암묵적 타입 변환
1 + true // 2 (true → 1)
1 + false // 1 (false → 0)
true + false // 1 (true → 1 / false → 0)
1 + null // 1 (null → 0)
1 + undefined // NaN (undefined → NaN)
+연산자는 하나 이상이 문자열일 때, 문자열 연결 연산자로 동작한다.
문자열과 숫자가 더해지면 숫자 타입인 1이 암묵적 타입변환(타입 강제 변환)이 이루어지는 것이다.
할당 연산자
할당 연산자를 사용하면 변수 값이 변하므로 부수 효과가 있다.
var x;
x = 10; // 10
x += 5; // 15
x -= 5; // 10
x *= 5; // 50
x /= 5; // 10
x %= 5; // 0
var str = 'My name is ';
str += 'Lee'; // My name is Lee
📐 할당문은 표현식인 문일까 표현식이 아닌 문일까?
표현식은 값으로 평가될 수 있는 문이라고 배웠다. 그래서 값을 할당해보면 표현식인 문인지 아닌지 알 수 있다고 했다.
할당문은 값으로 평가되는 표현식인 문이다. 할당 연산 표현식을 다른 변수에 할당할 수도 있다
비교 연산자
1️⃣ 동등/일치 비교 연산자
동등 비교 연산자(==)에 비하면 일치 비교 연산자(===)가 엄격하다.
| 비교 연산자 | 의미 | 사례 | 설명 |
|---|---|---|---|
| == | 동등 비교 | x == y | x와 y의 값이 같음 |
| === | 일치 비교 | x === y | x와 y의 값과 타입이 같음 |
| != | 부등 비교 | x != y | x와 y의 값이 다름 |
| !== | 불일치 비교 | x !== y | x와 y의 값과 타입이 다름 |
동등 비교 연산자가 느슨한 이유는 두 피연산자를 비교할 때, 암묵적 타입 변환 후 같은 값을 가지면 true를 반환하기 때문이다. 타입이 달라도 값이 같으면 true를 반환한다.
대신 일치 비교 연산자는 타입과 값이 모두 같을 때만 true를 반환한다.
// 동등 비교
5 == 5 // true
// 타입은 다르지만 암묵적 타입 변환을 통해 타입을 일치시키면 같은 값을 같는다.
5 == '5' //true
5 == 8 // false
동등 비교 연산자는 예측하기 어려운 결과가 나오므로 일치 비교 연산자를 사용하는 편이 좋다.
📐 특이하게도 NaN(Not a Number)은 자신과 비교해도 같지 않다고 출력된다.
🔨 ES6에서 도입된 Object.is 메서드를 이용하면 정확한 비교 결과를 반환한다.
NaN === NaN; //false
Object.is(NaN, NaN); // true
부동등 비교 연산자(!=)와 불일치 비교 연산자(!==)는 동등/일치 비교 연산자와 반대 개념이다.
// 부동등 비교
5 != 8 // true
5 != 5 // false
5 != '5' // false
// 불일치 비교
5 !== 8 // true
5 !== 5 // false
5 !== '5' // true
2️⃣ 대소 관계 비교 연산자
크기를 비교하여 true/false 값을 반환한다.
| 대소 관계 비교 연산자 | 예제 | 설명 |
|---|---|---|
| > | x > y | x가 y보다 크다 ✕ |
| < | x < y | x가 y보다 작다 ✕ |
| >= | x >= y | x가 y보다 같거나 크다 ✕ |
| <= | x <= y | x가 y보다 같거나 크다 ✕ |
삼항 조건 연산자
자바스크립트가 가진 유일한 연산자로 부수 효과는 없다.
🔍 문법
조건식 ? 조건식이 ture일때 반환할 값 : 조건식이 false일때 반환할 값
✏ 예시
var x = 3
var result = x % 2 ? '홀수' : '짝수';
console.log(result); // 홀수
3 % 2을 하면 나머지 값이 1이다. 조건식은 true/false로 반환되어야 하기 때문에 값 1의 암묵적 타입 변환이 일어난다. 1은 true로 변환될 수있고 true일 때 반환할 값인 ‘홀수’가 출력되는 것이다.
if …else 문을 사용해도 삼항 조건 연산자 표현식과 동일하게 출력할 수 있다.
var x = 3, result;
// x가 짝수이면 '짝수'를 홀수이면 '홀수'를 반환한다.
// 2 % 2는 0이고 0은 false로 암묵적 타입 변환된다.
if (x % 2) result = '홀수';
else result = '짝수';
console.log(result); // 홀수
하지만 if …else문은 값으로 평가되지 않는다. 즉, 표현식이 아니다. 그러므로 재할당할 수도 없다.
삼항 조건 연산자는 변수에 값이 저장되고 값으로 평가할 수 있는 표현식이므로 매우 유용하게 쓰일 수 있다.
논리 연산자
불리언 값을 반환하는게 일반적이지만 아닌 경우도 있다.
// 논리합(||) 연산자
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
논리합(||) 연산자와 논리곱(&&) 연산자의 연산 결과는 불리언 값이 아닐 수도 있다. 이 두 연산자는 언제나 피연산자 중 어느 한쪽 값을 반환한다. 어떤 논리로 한쪽 값을 반환하는지는 모르지만 뒤의 “단축평가”장과 이어진다고 하니 기억만 해두도록 하자.
'Cat' && 'Dog' //"Dog"
쉼표 연산자
var x,y,z;
x = 1, y = 2, z = 3; // 3
왼쪽부터 차례대로 피연산자를 평가하고 마지막 피연산자의 평가 결과를 반환한다.
그룹 연산자
그룹 연산자는 그룹 내 표현식을 최우선으로 평가한다. 연산자 우선순위 중 가장 높다.
typeof 연산자
“string”, “number”, “boolean”, “undefined”, “symbol”, “object”, “function” 중 하나를 반환한다. 이전 장에서 배운 7가지 데이터 타입과 일치하지는 않는다. null을 반환하는 경우는 없다.
⚠ typeof 연산자로 null을 연산해보면 null이 나와야 할 것 같지만 “object”를 반환한다는 것을 주의해야 한다. 자바스크립트의 첫 번째 버그라고 한다. 일치 연산자(===)를 사용하여 null 타입인지 확인하도록 하자.
⚠ 선언하지 않은 식별자를 typeof 연산하면 undefined를 반환한다.
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"
지수 연산자
지수 연산자는 이항 연산자 중에서 가장 우선순위가 높다.
2 ** 2 // 4
2 ** -2 // 0.25
//음수를 거듭제곱의 밑으로 사용해 계산하려면 괄호로 묶어야 한다.
(-4) ** 3 // 64
연산자의 부수 효과
부수 효과가 있다는 것은 연산자의 값이 변경되었다는 것을 의미한다.
대표적으로 할당연산자(=), 증감 연산자(++/—), delete 연산자는 각각 피연산자의 값을 변경시킨다.
var x;
//위 변수 x의 값이 변하는 현상이 발생하면 부수 효과가 있다고 생각하면 된다.
x = 2;
//할당 연산자를 사용했더니 피연산자 x 값이 2로 변하였다.
x++;
//증가 연산자를 사용했더니 x 값이 2에서 3으로 증가하여 값이 변하였다.
연산자 우선순위
우선순위를 모두 기억하기보다는 연산자 우선순위가 가장 높은 그룹 연산자를 사용하여 우선순위를 조절하는 것을 권장한다고 한다.
댓글남기기