Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

JavaScript Symbol.isConcatSpreadable 완벽 이해: concat() 배열 펼침 동작 제어하기

Symbol.isConcatSpreadable이란?

Symbol.isConcatSpreadable은 JavaScript의 잘 알려진(well-known) 심볼 중 하나로, Array.prototype.concat() 메서드를 사용할 때 객체가 배열 요소로 펼쳐질(flatten)지 여부를 설정하는 데 사용됩니다. 이 값이 false로 설정되면 배열이 펼쳐지지 않고 하나의 요소로 그대로 병합됩니다.

기본적으로 Symbol.isConcatSpreadable의 값은 true입니다. 따라서 명시적으로 선언하지 않는 한, concat() 실행 시 배열의 펼침(flattening) 동작을 피할 수 없습니다.

심볼을 사용하지 않은 경우

예제

다음 예제에서는 Symbol.isConcatSpreadable을 명시적으로 선언하지 않았습니다. 따라서 기본 동작에 따라 두 번째 배열이 개별 요소로 펼쳐져 병합되는 것을 출력 결과에서 확인할 수 있습니다.

<html>
<body>
<script>
   var arr1 = ['mango', 'apple', 'guava'];
   var arr2 = ['cashew', 'pista', 'bhadham'];
   var res1 = arr1.concat(arr2);
   console.log(res1);
</script>
</body>
</html>

출력 결과

["mango", "apple", "guava", "cashew", "pista", "bhadham"]

위 결과에서 볼 수 있듯이, arr2의 모든 요소가 개별적으로 펼쳐져 arr1의 뒤에 순서대로 추가되었습니다. 이것이 concat() 메서드의 기본 동작입니다.

심볼을 사용한 경우

예제

다음 예제에서는 Symbol.isConcatSpreadable을 명시적으로 false로 설정했습니다. 따라서 배열이 펼쳐지지 않고 하나의 배열 객체로 그대로 병합되는 것을 출력 결과에서 확인할 수 있습니다.

<html>
<body>
<script>
   var arr1 = ['mango', 'apple', 'guava'];
   var arr2 = ['cashew', 'pista', 'bhadham'];
   arr2[Symbol.isConcatSpreadable] = false;
   var res2 = arr1.concat(arr2);
   console.log(res2);
</script>
</body>
</html>

출력 결과

["mango", "apple", "guava", Array(3)]

이번에는 arr2가 개별 요소로 펼쳐지지 않고, 배열 전체가 하나의 중첩된 요소(Array(3))로 병합된 것을 확인할 수 있습니다.

정리

Symbol.isConcatSpreadable은 배열이나 유사 배열(array-like) 객체를 concat()으로 병합할 때 펼침 동작을 세밀하게 제어할 수 있는 유용한 도구입니다. 특히 배열 형태를 가진 객체를 중첩 구조로 유지한 채 병합해야 하는 경우에 유용하게 활용할 수 있습니다.