Chap07. 연산자
연산자 종류
1. 산술 연산자
피연산자를 대상으로 수학적 계산을 수행해 새로운 숫자 값 생성
- 산술 연산 불가능한 경우, NaN 반환
1) 이항 산술 연산자
2개의 피연산자를 산술 연산하여 숫자 값 생성
- 피연산자의 값을 변경하는 부수 효과 X
- 피연산자의 값이 바뀌는 것이 아닌, 새로운 값을 만들어 내는 것
- 덧셈(+), 뺄셈(-), 곱셈(*), 나눗셈(/), 나머지(%)
2) 단항 산술 연산자
1개의 피연산자를 산술 연산하여 숫자 값 생성
- 증감연산자(++/—)는 피연산자의 값을 변경하는 부수 효과 O
- 전위 증감 연산자: 먼저 피연산자의 값 증가/감소 시킨 후, 다른 연산 수행
- 후위 증감 연산자: 다른 연산 수행 후, 피연산자의 값 증가/감소
- 단항 연산자 +: 아무런 효과 X, 음수를 양수로 반전하지도 않음, 부수 효과 X
- 단항 연산자 -: 양수를 음수로, 음수를 양수로 값 반환, 부수 효과 X
-(-10); // 10 - '10'; // -10 (문자열을 숫자로 타입 변환) -true; // -1 (불리언 값을 숫자로 타입 변환) -'Hello'; // NaN (문자열은 숫자로 타입 변환 불가능하므로 NaN 반환) - 문자열 연결 연산자 +: 피연산자 중 하나 이상이 문자열인 경우, 문자열 연결 연산자로 동작
'1' + 2; // '12' 1+ '2'; // '12' 1 + true; // 2 1 + false; // 1 1 + null; // 1 +undefined; // NaN 1+undefined; // NaN
2. 할당 연산자
우항에 있는 피연산자의 평가 결과를 좌항에 있는 변수에 할당, 변수값이 변하기 때문에 부수 효과 O
var x;
x = 10;
console.log(x); // 10
x += 5; // x = x + 5
console.log(x); // 15
x -= 5; // x = x - 5
console.log(x); // 10
x *= 5; // x = x * 5
console.log(x); // 50
x /= 5; // x = x / 5
console.log(x); // 10
x %= 5; // x = x % 5
console.log(x); // 0
var str = "My name is ";
str += "Lee";
console.log(str); // My name is Lee- 할당문은 값으로 평가되는 표현식인 문으로서 할당된 값으로 평가됨
3. 비교 연산자
좌항과 우항의 피연산자를 비교한 다음 그 결과를 불리언 값으로 반환
- 주로, if문이나 for문과 같은 제어문의 조건식에서 사용
1) 동등/일치 비교 연산자
좌항과 우항의 피연산자 같은 값으로 평가되는지 비교, 부수 효과 X
- 둘은 비교하는 엄격성의 정도가 다름
- 동등 비교 연산자는 느슨한 비교, 일치 비교 연산자는 엄격한 비교
- 동등 비교 연산자(
==): 좌항과 우항의 피연산자를 비교할 때 먼저 암묵적 타입 변환을 통해 타입을 일치시킨 후 같은 값인지 비교'0' == ''; // false 0 == ''; // true 0 == '0'; // true false == 'false'; // false false == '0'; // true false == null; // false false == undefined; // false- 편리하지만, 결과를 예측하기 어렵고 실수하기 쉬움
- 일치 비교 연산자(
===): 좌항과 우항의 피연산자가 타입도 같고 값도 같은 경우 → 즉, 암묵적 타입 변환 일어나지 않음
❗️NaN은 유일하게 자신과 일치하지 않은 값임! NaN인지 조사하기 위해서는5 === 5; // true 5 === '5'; // false NaN === NaN; // falseisNaN사용isNaN(NaN); // true isNaN(10); // false isNaN(1+undefined); // true - 부동등 비교 연산자(
!=): x와 y의 값이 다름, 동등 비교 연산자의 반대 개념5 != 8; // true 5 != 5; // false 5 != '5'; // false - 불일치 비교 연산자(
!==): 일치 비교 연산자의 반대 개념5 !== 8; // true 5 !== 5; // false 5 !== '5'; // true
2) 대소 관계 비교 연산자
피연산자의 크기를 비교하여 불리언 값 반환
5 > 0; // true
5 > 5; // false
5 >= 5; // true
5 <= 5; // true4. 삼항 조건 연산자
조건식의 평가 결과에 따라 반환할 값 결정, 부수 효과 X
형태: 조건식 ? 조건식이 true일 때 반환 값 : 조건식이 false일 때 반환 값
var x = 2;
var result = x % 2 ? "홀수" : "짝수";
console.log(result); // 짝수- if…else 문으로 사용 가능
var x = 2; if (x % 2) result = "홀수"; else result = "짝수"; console.log(result); // 짝수 - 조건에 따라 어떤 값을 결정해야 한다면 if…else 문보다 삼항 조건 연산자 표현식 사용하는 편이 유리
- 조건에 따라 수행해야 할 문이 하나가 아닌 여러개인 경우, if…else문의 가독성이 더 좋음
5. 논리 연산자
우항과 좌항의 피연산자를 논리 연산
→ 논리합(||), 논리곱(&&), 논리 부정(!)
// 논리합(||)
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; // true6. 쉼표 연산자
왼쪽 피연산자부터 차례대로 피연산자 평가하고 마지막 피연산자의 평가가 끝나면 마지막 피연산자의 평가 결과 반환
var x, y, z;
x = 1, y = 2, z = 3; // 37. 그룹 연산자
소괄호()로 감싸진 피연산자 그룹부터 표현식 평가
- 그룹 연산자 이용하여 연산자의 우선순위 조절
- 그룹연산자가 연산자 우선순위 가장 높음
10 * 2 + 3; // 23
10 * (2 + 3); // 508. typeof 연산자
피연산자의 데이터 타입을 문자열로 반환
string,number,boolean,undefined,symbol,object,function중 하나 반환- null을 반환하는 경우 X
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"❗️null을 typeof 연산자로 연산해보면, object 반환함! → JS 버그 중 하나
- null타입인지 확인하기 위해 일치 연산자(===) 사용
var foo = null; typeof foo === null; // false foo === null; // true - 선언하지 않은 식별자를 typeof로 연산해보면 ReferenceError가 아닌, undefined 반환
9. 지수 연산자
ES7부터 도입되었으며, 좌항의 피연산자를 밑(base)으로, 우항의 피연산자를 지수(exponent)로 거듭 제곱하여 숫자 값 반환
2 ** 2; // 4
2 ** 2.5; // 5.6568...
2 ** 0; // 1
2 ** -2; // 0.25- 지수 연산자 도입 이전에는
Math.pow메서드 사용Math.pow(2, 2); // 4 Math.pow(2, 2.5); // 5.6568... - 음수를 거듭제곱의 밑으로 사용해 계산하려면, 괄호로 묶어야 함
(-5) ** 2; // 25
10. 그 외 연산자
?.: 옵셔널 체이닝 연산자??: null 병합 연산자delete: 프로퍼티 삭제new: 생성자 함수를 호출할 때 사용하여 인스턴스 생성instanceof: 좌변의 객체가 우변의 생성자 함수와 연결된 인스턴스인지 판별in: 프로퍼트 존재 확인
→ 뒷 장에 나옴!
연산자 우선순위
| 우선순위 | 연산자 |
|---|---|
| 1 | () |
| 2 | new(매개변수 O), ., [], (), ?. |
| 3 | new(매개변수 X) |
| 4 | x++, x-- |
| 5 | !x, +x, -x, ++x, --x, typeof, delete |
| 6 | ** |
| 7 | *, /, % |
| 8 | +, - |
| 9 | <, <=, >, >=, in, instanceof |
| 10 | ==, !=, ===, !== |
| 11 | ?? |
| 12 | && |
| 13 | || |
| 14 | ? … : … |
| 15 | =, +=, -=(할당 연산자) |
| 16 | , |
