[javascript] 자바스크립트 배열 추가 (push)

참고: https://blog.hubspot.com/website/javascript-array-push

JavaScript 개발자라면 배열로 작업하는 방법을 알아햐 합니다. 특히 많은 양의 데이터를 접해야한다면 더더욱 그렇습니다. JavaScript 내에서 배열은 단일 변수에 여러 개의 요소를 저장하는 용도로 사용합니다. 하지만 배열의 요소를 수동으로 추가한다면 시간이 많이 걸리고 복잡해집니다. 이런 경우 JavaScript 배열 push 메소드를 사용하면 됩니다.

이 포스트에서는 JavaScript 배열의 push 메소드를 사용하는 방법을 알아보겠습니다.

JavaScript array push 란?

이미 여려개의 요소를 가지고 있는 배열이 있다고 가정해보겠습니다. 이 배열에 요소를 추가하고자 한다면 새 요소를 가지고 있는 새로운 배열을 만드는 대신 기존 배열에 .push() 메소드를 사용하여 배열 끝에 요소를 추가할 수 있습니다.

.push() 메소드는 리턴 값으로 요소가 추가된 배열의 길이를 반환합니다. push를 통해 한 개 또는 여러 개의 요소를 추가할 수 있고 push를 사용하여 배열의 길이를 알 수도 있습니다.

배열 생성 방법

.push() 메소드에는 하나 이상의 매개변수를 사용할 수 있습니다. 이 매개변수는 문자열, 변수, 함수 등이 될 수 있습니다. .push()를 사용하여 한 배열에서 다른 배열로 요소를 추가할 수도 있습니다.

다음 예제는 배열 push의 문법입니다:

array.push(element1, element2, element3, ..., elementN);

이 것이 array.push 메소드 사용법 입니다. 쉼표로 구분된 목록은 기존 배열에 추가하려는 요소를 나타냅니다.

array push 실제 예제

JavaScript의 array.push를 이해하기 가장 좋은 방법은 다양한 상황에서 사용하는 예제를 익히는 것 입니다. 다음은 array.push에 대한 몇 가지 사용 사례입니다.

push를 사용하여 기존 배열에 요소 추가

이 첫 번째 예제에서 .push()를 사용해 개별 항목을 추가하며 메소드를 어떻게 사용하는지 간단하게 알아보겠습니다.

반려동물의 목록을 가지는 배열이 있다고 가정해 보겠습니다. 여기에 친칠라를 추가하고 싶다면 어떻게 해야하는지 알아보겠습니다.

const pets = ['dogs', 'cats'];

pets.push('chinchillas');

console.log(pets);

기존의 pets 배열에는 dogs와 cats가 이미 존재했는데 push 메소드를 사용해 위와 같은 결과를 얻었습니다. 이는 단순히 push() 메소드를 통해 chinchillas를 기존 배열에 추가한 것 입니다.

push를 통해 여러 요소 추가

첫 번째 예제는 매우 간단하고 유용했습니다. 하지만 실질적으로 .push() 메소드의 실제 가치는 배열 끝에 여러 요소를 한번에 추가하는 기능 입니다.

반려동물 시나리오를 계속 이어 기존 배열에 chinchillas, pigs, birds를 추가하고 싶다고 가정해 보겠습니다. 스크립트는 다음과 같습니다.

const pets = ["dogs", "cats"];

pets.push("chinchillas", "pigs", "birds");

console.log(pets);

메소드 사용 방법은 이전과 완전 동일합니다. 다만 push() 메소드에 전달한 매개변수가 추가되었을 뿐 입니다. 코드 실행 결과는 위의 이미지와 같습니다. 이를 통해 새로운 아이템을 추가할 때 새로운 배열을 만들 필요가 없어졌습니다.

한 배열에서 다른 배열로 요소 추가

array push() 메소드를 유용하게 사용할 다른 예제는 어떤게 있을까요? 여러 사례 중 하나의 배열에서 요소를 가져와서 완전히 다른 배열에 모두 추가하는 상황이 있을 수 있습니다.

반려동물 목록이 이미 존재하고 있고 여기에 파충류 배열의 내용을 추가하고 싶다면 어떻게 해야할까요? 다음은 이미 존재하는 반려동물과 파충류 목록입니다:

const pets = ["dogs", "cats", "chinchillas", "pigs", "birds"];

const reptiles = ["lizards", "snakes", "chameleons"];

for 루프를 사용하여 파충류를 반려동물에 추가해 보겠습니다. 루프는 파충류 배열의 모든 요소를 반복하며 반려동물 배열에 push 합니다. 소스 코드는 다음과 같습니다.

for (const pet of reptiles) {
   pets.push(pet);
}

console.log(pets);

위의 예제는 두 개의 배열을 합치는 직접적이고 간단한 방법입니다.

좀 더 효율적으로 push 사용하기

위의 예제는 매우 유용합니다. 하지만 많은 양의 데이터를 처리해야 할 때 반복적인 코드를 생략할 수 있는 몇 가지 요령이 있습니다. JavaScript의 ES6 표준에서는 코드 작성을 효율적으로 하기 위한 몇 가지 방법이 추가되었습니다. 이 중 하나는 스프레드 연산자(...) 입니다. 이 기능을 사용하면 반복 가능한 객체(예: 배열)를 펼칠 수 있습니다. 이를 사용해 push() 메소드에 매개변수를 하나하나 전달하는 코드를 짜지 않고 복사 붙여넣기 처럼 사용할 수 있습니다. 다음 예제는 스프레드 연산자(...)를 사용하여 한 배열에서 다른 배열로 요소를 추가하는 방법입니다.

const pets = ["dogs", "cats"];
const reptiles = ["lizards", "snakes", "chameleons"];

pets.push(...reptiles);

console.log(pets);

위의 코드를 통해 파충류 항목을 수동적으로 반복 추가하는 방법과 동일한 결과를 얻을 수 있습니다. 이로서 크고 복잡한 배열을 처리할 때 스프레드 연산자가 얼마나 유용한지 확실히 알 수 있습니다.

정리

JavaScript에 능숙해지려면 가능한 한 빠르고 효율적으로 코드를 작성할 줄 알아야합니다. array push와 같은 기능을 사용하면 많은 양의 데이터를 처리하는 수많은 수동 코딩 및 반복 입력을 줄일 수 있습니다.

관련 글

자바스크립트 배열의 모든 값 더하기

자바스크립트 배열에서 최대/최소 구하기

자바스크립트 배열 비교