JavaScript에서 배열을 병합하는 2가지 방법

다음은 배열을 결합하고 새 배열을 반환하는 두 가지 방법입니다. 저는 Spread 연산자를 사용하는 것을 좋아합니다. 그러나 이전 브라우저 지원이 필요한 경우 Concat을 사용해야 합니다.

// 2 Ways to Merge Arrays 

const cars = ['🚗', '🚙'];
const trucks = ['🚚', '🚛'];

// Method 1: Concat 
const combined1 = [].concat(cars, trucks);

// Method 2: Spread
const combined2 = [...cars, ...trucks];

// Result
// [ '🚗', '🚙', '🚚', '🚛' ]

대체 Concat 구문

또는 이와 관련하여 concat 메서드를 작성할 수도 있습니다.

const cars = ['🚗', '🚙'];
const trucks = ['🚚', '🚛'];

const combined = cars.concat(trucks);
// [ '🚗', '🚙', '🚚', '🚛' ]

console.log(cars); // ['🚗', '🚙'];
console.log(trucks); // ['🚚', '🚛'];

보시다시피 이 작성 방식은 기존 배열을 조작하거나 변경하지 않습니다.

어느 것을 골라야 할까요?

비교할 수 있도록 두 버전을 모두 나열해 보겠습니다.

// Version A:
const combinedA = [].concat(cars, trucks);

// Version B:
const combinedB = cars.concat(trucks);

이제 문제는 어떤 것을 선택해야 하느냐입니다🤔. 의도가 훨씬 더 명확하다고 생각하기 때문에 버전 A를 선호합니다. 보기만 해도 새 배열을 만들고 있다는 것을 알 수 있으며 기존 배열을 조작하지 않습니다. 반면 버전 B를 보면 trucks 배열을 cars 배열에 추가하는 것처럼 보이고 cars 배열이 변경되지 않는다는 것이 명확하지 않은 것 같습니다. 하지만, 어쩌면 그게 나일지도 몰라. 어떻게 생각하는지 알고 싶습니다.

미학 말고는 딱히 별 다른 이유가 없기 때문에, 당신과 당신의 팀은 당신이 선택한 것을 고수해야 한다고 생각합니다 👍

확산 대 Concat의 차이점

spread 를 사용하는 것을 선호합니다. 더 간결하고 작성하기 쉽기 때문입니다. 그러나 concat 를 사용하면 여전히 이점이 있습니다.

스프레드는 배열을 다루고 있다는 것을 미리 알고 있을 때 환상적입니다. 그러나 소스가 문자열과 같은 다른 것인 경우에는 어떻게 됩니까? 그리고 그 문자열을 배열에 추가하려고 합니다. 예제를 살펴보겠습니다.

예: 임의 인수 처리

이것이 우리가 원하는 결과라고 가정해 보겠습니다.

[1,2,3,'random']

A. 스프레드 사용

그리고 우리가 사용해 온 패턴을 따른다면 스프레드 연산자를 사용했습니다. 결과는 다음과 같습니다.

function combineArray(array1, array2) {
  return [...array1, ...array2];
}

const isArray = [1,2,3];
const notArray = 'random';

combineArray(isArray, notArray);
// 😱 [ 1, 2, 3, 'r', 'a', 'n', 'd', 'o', 'm' ]

☝️ 문자열을 펼치면 단어가 별도의 문자로 분리됩니다. 그래서 우리가 원하는 결과를 얻지 못합니다.

B. Concat 사용

그러나 우리가 해왔던 concat 패턴을 따른다면. 결과는 다음과 같습니다.

function combineArray(array1, array2) {
  return [].concat(array1, array2);
}

const isArray = [1,2,3];
const notArray = 'random';

combineArray(isArray, notArray);
// ✅  [ 1, 2, 3, 'random' ]

☝️ 훌륭합니다! 우리는 원하는 결과를 얻습니다.

나는 당신 중 일부가 같은 것을 압니다. 전달하는 것이 배열인지 확인하고 그에 따라 실행하기 위해 몇 가지 조건문을 작성하겠습니다. 물론 그것도 작동합니다. 또는 코드를 적게 작성하고 concat를 사용하고 😂로 완료하십시오.

평결

그래서 여기에 빠른 규칙이 있습니다. 배열을 다루고 있다는 것을 알고 있다면 spread 를 사용하십시오. 그러나 배열이 아닌 가능성을 처리하는 경우 concat를 사용하여 배열을 병합하세요 👍

어쨌든 나는 그것을 지적하고 싶기 때문에 해결하려는 문제에 따라 가장 적절한 방법을 사용할 수 있습니다 👍

푸시로 어레이 병합 🤔

여러분 중 일부는 배열을 병합하는 데 push를 사용할 수도 없냐고 묻습니다. 그리고 네, 확실히 할 수 있습니다! 그러나 push 를 사용하면 기존 배열을 조작하거나 변경합니다. 새 배열을 생성하지 않습니다. 그래서 당신이하려는 일에 따라. 그 점을 명심하십시오.

const cars = ['🚗', '🚙'];
const trucks = ['🚚', '🚛'];

const combined = cars.push(...trucks);

console.log(combined); // 4
// ☝when you use push, it returns the LENGTH of the combined array

console.log(cars); // [ '🚗', '🚙', '🚚', '🚛' ]
console.log(trucks); // ['🚚', '🚛']

또한 배열을 다른 배열로 푸시하려고 할 때. 확산해야 합니다. 그렇지 않으면 중첩 배열이 생성됩니다. 물론, 그것이 당신이 원하는 것이 아니라면 😜

const cars = ['🚗', '🚙'];
const trucks = ['🚚', '🚛'];

cars.push(trucks);
// 😱 cars: [ '🚗', '🚙', [ '🚚', '🚛' ] ]

cars.push(...trucks);
// ✅ cars: [ '🚗', '🚙', '🚚', '🚛' ]

브라우저 지원

Spread는 ES6에서 도입되었으므로 모든 최신 브라우저에서 지원합니다. "I'm too cool"Internet Explorer를 제외하고 - 지원하지 않습니다 😕. 따라서 IE 지원이 필요한 경우 대신 concat 를 사용하거나 Babel 과 같은 컴파일러를 사용하십시오.

Browser Support: Spread

Browser Support: Concat

자원

MDN Web Docs - Concat

MDN Web Docs - Spread

Stack Overflow: spread operator vs array.concat

읽어주셔서 감사합니다 ❤
안녕하세요! | | Facebook | Medium | Blog