[Javascript] 7장 연산자 (deep dive)

연산자는 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산 등을 수행해 하나의 값을 만든다.

 

산술 연산자

• 수학적 계산을 수행해 새로운 숫자 값을 만든다. 산술 연산이 불가능할 경우 NaN을 반환한다.

5 + 2; // 7		덧셈
5 - 2; // 3		뺄셈
5 * 2; // 10		곱셈
5 / 2; // 2.5		나눗셈
5 % 2; // 1		나머지

• 증가(++) / 감소(--) 연산자는 위치에 의미가 있다.
• 피연산자 앞에 위치한 전위 증감연산자는 피연산자의 값을 먼저 증감을 한 후 다른 연산을 수행한다.
• 피연산자의 뒤에 위치한 후위 증감연산자는 다른 연산을 진행한 후 값을 증감한다.

var x = 5, result;

result = x++;
console.log(result, x); // 5, 6

result = ++x;
console.log(result, x); // 7, 7

result = x--;
console.log(result, x); // 7, 6

result = --x;
console.log(result, x); // 5, 5

• 숫자 타입이 아닌 피연산자의 앞에 +를 붙이면 피연산자를 숫자 타입으로 변환한 값을 생성해서 반환한다. 피연산자의 값 변경 X
• 숫자 타입이 아닌 피연산자의 앞에 -를 붙이면 피연산자를 숫자 타입으로 변환하고 부호를 반전한 값을 생성해서 반환한다. 피연산자의 값 변경 X
• + 연산자는 피연산자 중 하나 이상이 문자열일 경우 문자열 연결 연산자로 동작한다.

'1' + 2; // '12'
1 + '2'; // '12'

 

할당 연산자

var x;

x = 5;
console.log(x); // 5

x += 5; // x = x + 5;
console.log(x); // 10

x -= 5; // x = x - 5;
console.log(x); // 5

x *= 5; // x = x * 5;
console.log(x); // 25

x /= 5; // x = x / 5;
console.log(x); // 5

x %= 5; // x = x % 5;
console.log(x); // 0;

 

비교 연산자

• 비교 연산자는 좌항과 우항의 피연산자를 비교한 후 그 결과를 불리언 값으로 반환한다.
• 동등 비교(==)와 부동등 비교(!=)는 좌항과 우항의 피연산자를 비교할 때 암묵적 타입 변환을 통해 타입을 일치시킨 후 값은 값인지 비교한다. -> 예측하기 어려운 결과를 만들어내기 때문에 사용하지 않는 편이 좋다고 한다. 굳이 왜 만들었는지 모르겠다.
• 일치 비교(===)와 불일치 비교(!==)를 사용하자. 타입과 값 모두 일치할 경우에만 true를 반환한다.
• NaN은 자신과 일치하지 않는 유일한 값이다. 따라서 숫자가 NaN인지 조사하려면 빌트인 함수 Number.isNaN을 사용하자.
• 숫자 0도 주의하라고 한다. 양의 0과 음의 0이 있는데 이들을 비교하면 true를 반환한다. 언어가 뇌절을 계속 하는 것 같다. 양의 0과 음의 0은 대체 어디에 사용되는 건지..
• 그 외에도 >, <, >=, <= 대소 관계 비교 연산자는 정상적으로 잘 존재하고 있다.

 

삼항 조건 연산자

var result = score >= 60 ? 'pass' : 'fail'; // score >= 60이 true일 경우 pass, false일 경우 fail

• 삼항 조건 연산자 표현식은 값으로 평가할 수 있는 표현식인 문이다. 다른 표현식의 일부가 될 수 있어서 유용하다.

var x = 10;

var result = x % 2 ? '홀수' : '짝수';
console.log(result); // 짝수

 

논리 연산자

• ||(논리합 OR), &&(논리곱 AND), !(부정 NOT)

 

쉼표 연산자와 그룹 연산자는 PASS 딱히 정리할 내용이 없다.

 

typeof 연산자

• typeof 연산자는 7가지 string, number, boolean, undefined, symbol, object, function 중 하나를 반환한다.
• null을 반환하는 경우는 없으며, 함수의 경우 function을 반환한다.
• null은 typeof로 판단하지 말고 변수 === null 로 판단하자.

 

지수 연산자

2 ** 2; // 4
2 ** -2; // 0.25
2 ** (3 ** 2) // 512

 

그 외의 연산자

연산자	개요	참고
?.	옵셔널 체이닝 연산자	9장 참고
??	null 병합 연산자	9장 참고
delete	프로퍼티 삭제	10장 참고
new	생성자 함수를 호출할 때 사용하여 인스턴스를 생성	17장 참고
instanceof	좌변의 객체가 우변의 생성자 함수와 연결된 인스턴스인지 판별	19장 참고
in	프로퍼티 존재 확인	19장 참고

위의 연산자들이 존재한다는 것만 알아두고 후에 공부할 부분에서 더 알아보는 것으로 하자.

 

연산자 우선순위

우선순위	연산자
1	()(그룹 연산자)
2	new(매개변수 존재), ., [](프로퍼티 접근), ()(함수 호출), ?.(옵셔널 체이닝 연산자)
3	new(매개변수 미존재)
4	x++, x--
5	!x, +x, -x, ++x, --x, typeof, delete
6	**
7	*, /, %
8	+, -
9	<, <=, >, >=, in, instanceof
10	==, !=, ===, !==
11	??(null 병합 연산자)
12	&&
13	||
14	? ... : ... (삼항 연산자)
15	할당 연산자(=, +=, -=, ...)
16	,(쉼표 연산자)

다 기억하기는 어렵고 실수를 하기도 쉽기 때문에 모두 기억하려고 노력하기 보다는 연산자 우선순위가 가장 높은 그룹 연산자를 사용하여 우선순위를 명시적으로 조절하는 것을 권장한다.