자바스크립트에서 배열에 + 연산자를 사용하면 왜 이상한 결과가 나올까?
자바스크립트의 + 연산자는 두 가지 역할을 합니다. 숫자끼리 더하거나, 문자열을 연결하는 것이죠. 하지만 배열을 합치고 싶을 때 +를 사용하면 예상과 다른 결과가 나옵니다.
배열을 합쳐서 새로운 배열을 만들려면 concat() 메서드를 사용해야 합니다. 예를 들어 다음과 같습니다.
[50, 70].concat([90, 100])
위 코드를 실행하면 아래와 같은 결과가 출력됩니다.
[50, 70, 90, 100]
[1,2] + [3,4]가 '1,23,4'가 되는 과정
그렇다면 [1,2] + [3,4]의 결과가 왜 '1,23,4'인지 살펴보겠습니다. 핵심은 자바스크립트가 + 연산자를 사용할 때 배열을 자동으로 문자열로 변환한다는 점입니다. 변환 과정은 다음과 같습니다.
[1,2] + [3,4]
'1,2' + '3,4'
'1,23,4'
즉, 각 배열이 내부적으로 toString() 메서드에 의해 쉼표로 구분된 문자열로 바뀌고, 그 후 두 문자열이 단순히 연결되기 때문에 숫자 사이에 구분 기호 없이 붙어버리는 것입니다.
올바른 방법: concat() 사용하기
배열을 진짜로 하나로 합치고 싶다면 앞서 언급한 것처럼 concat() 메서드를 사용해야 합니다.
[1,2].concat([3,4])
[1,2,3,4]
참고로 최신 자바스크립트(ES6)에서는 스프레드 연산자를 활용하는 방법도 있습니다.
[...[1,2], ...[3,4]]
[1,2,3,4]
정리
+연산자는 숫자 덧셈 또는 문자열 연결에만 적합합니다.- 배열에
+를 사용하면 배열이 문자열로 변환되어 의도하지 않은 결과가 나옵니다. - 배열을 합칠 때는
concat()메서드나 스프레드 연산자(...)를 사용하세요.