[Deep Dive] 7장 연산자

팡긍·2022년 5월 5일

JavaScript Deep Dive

목록 보기

5/8

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

자, 기본적인 용어는 뭔지 알았으니 그럼 지금부터 자바스크립트가 제공하는 다양한 연산자에 대해서 알아보자.

7.1 산술 연산자

산술 연산자 arithmetic operator 는 피연산자를 대상으로 수학적 계산을 수행해 새로운 숫자 값을 만든다. 산술 연산이 불가능한 경우 NaN을 반환한다.

7.1.1 이항 산술 연산자

이항 binary 산술 연산자 는 2개의 피연산자를 산술 연산하여 숫자 값을 만든다. 흔히 우리가 더하고 뺄 때 사용하는 그 연산자 맞다.

5 + 2 // 7
5 - 2 // 3
5 * 2 // 10
5 / 2 // 2.5
5 % 2 // 1

7.1.2 단항 산술 연산자

단항 unary 산술 연산자 는 1개의 피연산자를 산술연산하여 숫자 값을 만든다.
단항 산술 연산자가 이항 산술 연산자와 다른 점은 증감 연산자(++, --)가 있다.

var x = 1;

x++; // x = x + 1
console.log(x) // 2

x--;
console.log(x) // 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

+ 단항 연산자에 대해 더 알아보자.
+ 단항 연산자는 숫자 타입이 아닌 피연산자에 사용하면 피연산자를 숫자 타입으로 변환한다. 이때, 피연산자가 숫자 타입으로 바뀔 수 없는 타입일 경우(ex. string) NaN을 반환한다. +가 있듯 -도 있는데 - 단항 연산자는 숫자 타입으로 바꿈과 동시에 부호를 반전시킨다.

7.1.3 문자열 연결 연산자

+ 연산자는 피연산자 중 하나 이상이 문자열인 경우 문자열 연결 연산자로 동작한다.

// 문자열 연결 연산자
'1' + 2; // '12'
1 + '2'; // '12

// 산술 연산자
1 + 2; // 3

// true는 1로, false는 0으로 변환된다.
1 + true; // 2
1 _ false; // 1

// null은 0으로 반환된다.
1 + null; // 1

// undefined는 숫자로 타입 변환되지 않는다.
+undefined; // NaN
1 + undefined; // NaN

이 예제에서 볼 수 있듯, 개발자의 의도와는 상관 없이 자바스크립트 엔진이 암묵적으로 타입을 변환시킨다. 이를 암묵적 타입 변환 implicit coercion 또는 타입 강제 변환 type coercion 이라고 한다.

7.2 할당 연산자

할당 연산자 assignment operator 는 우항에 있는 피연산자의 평가 결과를 좌항에 있는 변수에 할당한다.

var x;

x = 10;

x += 5;
x -= 5;
x *= 5;
x /= 5;
x %= 5;

// 문자열 연결 연산자
var str = 'My name is'

str += 'Jeon'
console.log(str); // My name is Jeon

7.3 비교 연산자

비교 연산자 comparison operator 는 좌항과 우항의 피연산자를 비교한 다음 그 결과를 불리언 값으로 반환한다. 주로 if문이나 for문과 같은 제어문에서 많이 사용한다.

7.3.1 동등/일치 비교 연산자

동등 비교 loose equality 연산자와 일치 비교 strict equality 연산자는 좌항과 우항의 피연산자가 같은 값으로 평가되는지 비교해 불리언 값을 반환하지만 비교하는 엄격성의 정도가 다르다.

비교 연산자	의미	사례	설명
==	동등 비교	x == y	x와 y의 값이 같음
===	일치 비교	x === y	x와 y의 값과 타입이 같음
!=	동등 비교	x != y	x와 y의 값이 다름
!==	일치 비교	x !== y	x와 y의 값과 타입이 다름

위의 표를 보면 동등과 일치 비교의 차이를 알 수 있다. 차이점은 타입 체크를 하는지 안하는지를 보게 된다.
동등 비교 == 같은 경우에는 단순히 값만 같으면 같다고 표시한다. 즉 1 == "1" 과 같은 상황에서도 암묵적 타입 변환을 통해 일치하는지를 확인한다. 하지만 일치 비교 === 같은 경우에는 좌항과 우항의 값 + 타입이 같아야 최종적으로 true를 반환한다.

타입스크립트와는 다르게 자바스크립트는 타입을 개발자가 직접 설정해 주지 않는다. 그렇기에 예측 가능한 결과를 만들어내기 위해서는 == 보다는 ===을 사용하는 것이 더 좋다고 생각이 든다.

7.3.2 대소 관계 비교 연산자

대소 관계 비교 연산자는 피연산자의 크기를 비교하여 불리언 값을 반환한다.

5 > 0; // true
5 > 5; // false
5 >= 5; // true
t <= 5; // true

7.4 삼항 조건 연산자

삼항 조건 연산자 ternary operator 는 조건식의 평가 결과에 따라 반환할 값을 정한다.
조건식 ? 조건식이 true 일 때 반환값 : 조건식이 false 일 때 반환값
var result = score >= 60 ? 'pass' : 'fail'

이때, 조건식의 반환값은 Boolean 타입이어야 하며, Boolean 타입이 아닐 시에는 암묵적인 타입 변환이 발생하게 된다. 위의 조건식 score >= 60의 결과에 따라서 변수 result에 할당될 값이 달라진다.

삼항 연산자는 if문을 간단하게 쓸 때 종종 사용되곤 하는데 너무 남발하게 되면 오히려 코드의 가독성이 떨어질 수 있다고 생각하여 나는 잘 쓰지 않는 편이다. 또한, if...else 문으로 사용할 수 없기에 생각보다 사용할 수 있는 기회가 많은 편도 아니라고 생각이 든다.

7.5 논리 연산자

논리 연산자 logical operator는 우항과 좌항의 피연산자를 논리 연산 한다.

논리 연산자	의미
\|\|	OR
&&	AND
!	NOT

7.6 그 외 연산자

~~다양한 연산자가 있지만, 귀찮으니 간단히 요약~~

쉼표 연산자 ,
그룹 연산자 ()
typeof 연산자 typeof → 피연산자의 데이터 타입을 문자열로 반환함.
- 단, null 타입인지 확인을 할 때에는 ===를 사용하자.
지수 연산자 ** : 거듭 제곱을 표현할 수 있다.
- 하지만 **을 사용하는 것 보다 Math.pow(a, n)을 사용하는 것이 더 깔끔해보인다.
더욱 더 그 외 연산자들
- ?. : 옵셔널 체이닝 연산자
- ?? : null 병합 연산자
- delete : 프로퍼티 삭제
- new : 생성자 함수를 호출할 때 사용하여 인스턴스를 생성
- instanceof : 좌변의 객체가 우변의 생성자 함수와 연결된 인스턴스인지 판별
- in : 프로퍼티 존재 확인