자바스크립트에서 함부로 덧셈하지 마라

`[] + []` 는 `''` 입니다.

`[] + {}` 는 `'[object Object]'` 입니다.

`{} + []` 는 `0` 입니다.

`+{}` 는 `NaN` 입니다.

 

아 더하기 함부로 하지 말라고요

 

자바스크립트는 어쩌다 이렇게 되었을까요?

 

+ 기호가 가지는 세 가지 의미

자바스크립트에서 더하기(+) 기호는 세 가지 의미를 가질 수 있습니다.

 

• 단항(unary) 산술 연산자
• 이항(binary) 산술 연산자
• 문자열 연결 연산자

 

피연산자 앞에 홀로 쓰이면 단항 산술 연산자가 됩니다.

두 피연산자 사이에 쓰이면 이항 산술 연산자가 됩니다.

두 피연산자 중 하나 이상이 문자열인 경우 문자열 연결 연산자가 됩니다.

 

+'1';     // 1
+'Hello'; // NaN

1 + 2;    // 3

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

 

이런 특징 때문에 두 피연산자의 덧셈은 예측하기 어렵습니다.

서로 다른 타입을 더하려고 하면 자바스크립트는 오류를 내는 대신 암묵적 타입 변환을 수행하거든요.

이는 프로그램이 시끄러운 오류 없이 조용히 실패하게 만드는 원인이 됩니다.

 

 

자바스크립트 개발자 분들은 공감하실거에요.

분명 콘솔에는 오류가 없는데... 이상한 값이 나온다거나...

오류가 나긴 났는데 원인이 어딘지 찾기 어렵다거나...

 

객체의 덧셈

이제 `[] + []` 가 왜 빈 문자열(`''`)인지를 확인해 보겠습니다.

 

자바스크립트 엔진은 `[] + []`을 수행할 때 아래 순서로 동작합니다.

 

1. 더하기(+) 연산자가 산술 연산자인지 문자열 연결 연산자인지 판단을 시도합니다.

2. 앞에 있는 피연산자를 먼저 봅니다. 배열이네요. 배열은 객체이므로 그 자체로는 더할 수 없습니다.

3. 따라서 원시값으로 변환을 시도합니다.

[].toString(); // ''

4. 아하! 빈 문자열로 평가되네요. 이제 더하기는 문자열 연결 연산자가 되었습니다.

5. 결과적으로 위의 식은 아래와 같이 변합니다.

'' + ''; // ''

 

같은 맥락에서 아래와 같은 일들이 벌어질 수 있습니다.

[1] + [2]      // "12"
[1,2] + [3,4]  // "1,23,4"
[] + {}        // "[object Object]"
{} + []        // 0

 

 

 

건강하게 더하는 법

위와 같이 자바스크립트는 서로 다른 타입 간의 덧셈에서 오류를 내지 않기 때문에, 실무에서 더하기는 신중하게 사용해야 합니다.

양쪽 피연산자의 타입이 확실한 경우에만 사용하는 것이 좋습니다.

 

// 두 숫자의 덧셈
const HUNDRED = 100;
const THOUSAND = 1000;
HUNDRED + THOUSAND; // 1100

// 두 문자의 덧셈
const SEOUL = '서울';
const SPECIAL_CITY = '특별시';
SEOUL + SPECIAL_CITY; // '서울특별시'

// 두 배열은 concat으로 이어줄 수 있습니다.
const firstArray = [1, 2];
const secondArray = [3, 4];
firstArray.concat(secondArray); // [1, 2, 3, 4]

// 두 객체는 전개 구문이나 Object.assign()으로 병합할 수 있습니다.
const firstObject = { a: 1, b: 2 };
const secondObject = { c: 3, d: 4 };
{ ...firstObject, ...secondObject }          // { a: 1, b: 2, c: 3, d: 4 }
Object.assign({}, firstObject, secondObject) // { a: 1, b: 2, c: 3, d: 4 }