7장 연산자 (JS Deep Dive)

연산의 대상을 피연산자라 한다. 피연산자는 값으로 평가될 수 있는 표현식이다. 연산자 표현식도 값으로 평가될 수 있는 표현식이다.

• 피연산자
  • 값 (명사)
• 연산자
  • 피연산자를 연산하여 새로운 값을 만든다 (동사)

산술 연산자

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

이항 산술 연산자

2개의 피연산자를 산술 연산하여 숫자 값을 만든다. 산술 연산을 하면 피연산자의 값이 바뀌지 않고 언제나 새로운 값을 만든다. 피연산자의 값을 변경하는 부수 효과가 없다.

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

단항 산술 연산자

1개의 피연산자를 산술 연산하여 숫자 값을 만든다. 증가/감소(++/--) 연산자는 피연산자의 값을 변경하는 부수 효과가 있다.

const x = 1;

// 피연산자의 값을 변경하는 암묵적 할당이 이뤄진다.
x++;  // x = x + 1
x--;  // x = x - 1

증가/감소(++/--) 연산자는 위치에 의미가 있다.

• 피연산자 앞에 위치하면 먼저 피연산자의 값을 증가/감소시킨 후, 다른 연산을 수행한다.
• 피연산자 뒤에 위치하면 먼저 다른 연산을 수행한 후, 피연산자의 값을 증가/감소시킨다.

const x = 5, result;

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

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

• 단항 연산자는 피연산자에 어떠한 효과도 없고 음수를 양수로 반전하지도 않는다. 숫자 타입이 아닌 피연산자에 +단항 연산자를 사용하면 피연산자를 숫자 타입으로 변환하여 반환한다. 부수효과는 없다.

const x = '5';

console.log(+x);  // 5
console.log(x);  // '5'

• 단항 영산자는 피연산자의 부호를 반전한 값을 반환한다. 이 외에 + 단항 연산자와 동일하다.

-'10';  // -10

-true;  // -1

-'Hello'  // NaN

문자열 연결 연산자

• 연산자는 피연산자 중 하나 이상이 문자열인 경우 문자열 연결 연산자로 동작한다. 개발자의 의도와는 상관없이 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환되기도 한다. 이를 암묵적 타입 변환 또는 타입 강제 변환이라고 한다. +/-단항 연산자도 암묵적 타입 변환이 발생한다.

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

1 + true;  // 2

1+ false; // 1

1 + null; // 1

1 + undefined;  // NaN

할당 연산자

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

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

// 문자열 연결 연산자
const str = 'Be';
str += 'Oh';
console.log(str);  // 'Be Oh'

할당문은 값으로 평가되는 표현식인 문으로서 할당된 값으로 평가된다.

const a, b, c
// 연쇄 할당
a = b = c = 1

console.log(a, b, c)  // 1 1 1

비교 연산자

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

동등/일치 비교 연산자

동등 비교 연산자는 느슨한 비교를 하지만 일치 비교 연산자는 엄격한 비교를 한다.

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

// 타입은 다르지만 암묵적 타입 변환을 통해 타입을 일치시키면 동등하다.
5 == '5';  // true

false == 'false';  // false
false == '0';  // true

동등 비교 연산자는 결과를 예측하기 어렵다. 그래서 동등 비교 연산자 대신 일치 비교(===) 연산자를 사용한다.

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

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

NaN인지 조사하려면 빌트인 함수 Number.isNaN을 사용한다.

숫자 0도 주의 해야한다.

// 숫자 0은 음의 0, 양의 0이 있다.
0 === -0  // true

부동등(!=)/불일치(!==) 비교 연산자는 반대 개념이다. false 값이면 true가 나온다.

대소 관계 비교 연산자

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

> 초과
< 미만
>= 이상
<= 이하

삼항 조건 연산자

삼항 조건 연산자는 조건식의 평가 결과에 따라 반환할 값을 결정한다. 물음표 앞의 첫 번째 피연산자는 조건식이며 암묵적으로 불리언 타입 변환값으로 평가될 표현식이다.

const result = score >= 60 ? 'pass' : 'fail';

(score >= 60) === true  // 'pass'
(score >= 60) === false  // 'fail'

조건에 따라 어떤 값을 결정해야 한다면 삼항 조건 연산자 표현식을 사용하는 편이 유리하다. 하지만 조건에 따라 수행해야 할 문이 여러 개라면 if...else문의 가독성이 더 좋다.

논리 연산자

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

• 논리합
  • false || false; // false
  • 그 외에 항상 true
• 논리곱
  • true && true; // true
  • 그 외에 항상 false
• 논리 부정(!) 연산자
  • !true; // false
  • !false; // true

논리합 또는 논리곱 연산자 표현식은 언제나 2개의 피연산자 중 어느 한쪽으로 평가된다.