모던 자바스크립트 (스터디) 7-1~5장

연산자란?

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

 

연산의 대상 : 피연산자

피연산자는 값으로 평가될 수 있는 표현식이어야 하고, 피연산자와 연산자의 조합으로 이뤄진 연산자 표현식도 값으로 평가될 수 있는 표현식이다.

 

산술연산자

피연산자를 대상으로 수학적 계산을 수행해 새로운 숫자 값을 만든다. 

산술 연산이 불가능한 경우 NaN을 반환한다.

 

이항 산술 연산자

2개의 피연산자를 산술 연산하여 숫자 값을 만든다.

이항 산술 연산자	의미
+	덧셈
-	뺄셈
*	곱셈
/	나눗셈
%	나머지

 

단항 산술 연산자

1개의 피연산자를 산술 연산하여 숫자 값을 만든다.

단항 산술 연산자	의미
++	증가
--	감소
+	어떠한 효과도 없다. 음수를 양수로 반전하지도 않는다.
-	양수를 음수로, 음수를 양수로 반전한 값을 반환한다.

증가/감소(++/--)연산자는 피연산자의 값을 변경하는 부수효과가 있다.

 

숫자 타입이 아닌 피연산자에 + 단항 연산자를 사용하면 피연산자를 숫자 타입으로 변환하여 반환한다.

var x = '1';

console.log(+x); // 1

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

x = false;
console.log(-x); // 0

x ='Hello';
console.log(+x); // NaN

- 단항 연산자는 피연산자의 부호를 반전한 값을 반환한다.

 

문자열 연결 연산자

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

//문자열 연결 연산자 
'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

여기서 주목할 점은 개발자의 의도와는 상관없이 자바스크립트 엔진에 의해 암묵적으로 타입이 자동변환되기도 한다.

이를 암묵적 타입 변환 또는 타입 강제 변환 이라고 한다. +/- 단항 연산자도 암묵적 타입 변환이 발생한다.

 

할당 연산자 

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

할당 연산자	예	동일 표현
=	x = 5	x = 5
+=	x += 5	x = x + 5
-=	x -=5	x = x - 5
*=	x *= 5	x = x * 5
/=	x /= 5	x = x / 5
%=	x %= 5	x = x % 5

할당문은 값으로 평가되는 표현식인 문으로서 할당된 값으로 평가된다. 이러한 특징을 활용해 여러 변수에 동일한 값을 연쇄 할당할 수 있다.

a = b = c = 0;

console.log(a,b,c); // 0 0 0

 

비교 연산자

좌항과 우항의 피연산자를 비교한 다음 그 결과를 불리언 값으로 반환한다. 

 

동등/일치 비교 연산자

좌항과 우항의 피연산자가 같은 값으로 평가되는지 비교해 불리언 값을 반환한다. 

동등 비교(==) 연산자는 좌항과 우항의 피연산자를 비교할 때 먼저 암묵적 타입 변환을 통해 타일을 일치시킨 후 같은 값인지 비교한다. 

 

일치비교(===)연산자는 좌항과 우항의 피연산자가 타입도 같고 값도 같은 경우에 한하여 true를 반환한다.

 

NaN은 자신과 일치하지 않는 유일한 값이다. 숫자가 NaN인지 조사하려면 빌트인 함수 Number.isNaN을 사용한다.

Number.isNaN(NaN); // true
Number.isNaN(10); // false
Number.isNaN(1+undefined); // true

NaN은 자신과 일치하지 않는 유일한 값이다.

NaN === NaN // false

 

 

삼항 조건 연산자

조건식의 평가 결과에 따라 반환할 값을 결정한다. 

조건식 ? 조건식이 true일 때 반환할 값 : 조건식이 false일 때 반환할 값

삼항 조건 연산자 표현식은 if ... else문과 중요한 차이가 있다. 삼항 조건 연산자 표현식은 값처럼 사용할 수 있지만 if ... else 문은 값처럼 사용할 수 없다. 

if ... else문은 표현식이 아니라 문이다. 따라서 if ... else문은 값처럼 사용할 수 없다. 

 

삼항 조건 연산자 표현식은 값으로 평가할 수 있는 표현식인 문이다. 

조건에 다라 수행해야 할 문이 하나가 아니라 여러 개라면 if .. else문의 가독성이 더 좋다.

 

논리 연산자

우항과 좌항의 피연산자(부정 논리 연산자의 경우 우항의 피연산자)를 논리 연산한다.

논리 연산자	의미
||	논리합(OR)
&&	논리곱(AND)
!	부정(NOT)

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

드 모르간의 법칙

논리 연산자로 구성된 복잡한 표현식은 가독성이 좋지 않아 한눈에 이해하기 어려울 때가 있다. 이러한 경우 드 모르간의 법칙을 활용하면 복잡한 표현식을 좀 더 가독성 좋은 표현식으로 변환할 수 있다.

!(x || y) === (!x && !y)
!(x && y) === (!x || !y)
// ⬆️ 드 모르간의 법칙