Array.prototype.push()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Array 인스턴스의 push() 메서드는 배열의 끝에 명시된 요소를 추가하고 배열의 새로운 길이를 반환합니다.

시도해보기

구문

js
push()
push(element1)
push(element1, element2)
push(element1, element2, /* …, */ elementN)

매개변수

element1, …, elementN

배열의 끝에 추가할 요소(들).

반환 값

이 메서드가 호출된 객체의 새로운 length 속성.

설명

push 메서드는 배열 끝에 여러 값을 추가합니다.

Array.prototype.unshift()는 push()의 동작과 비슷하지만 배열의 시작 부분에 적용됩니다.

push() 메서드는 변이 메서드입니다. 이 메서드는 this의 길이와 내용을 변경합니다. this의 값은 동일하게 유지하지만 끝에 요소가 추가된 새로운 배열을 반환하길 원한다면 [arr.concat([element0, element1, /* ... ,*/ elementN])]을 대신 사용할 수 있습니다. 그렇지 않으면 요소 자체가 배열인 경우 concat()의 동작으로 인해 요소가 단일 요소로 푸시되는 대신 분산된다는 점에 유의하시기 바랍니다.

push()는 범용 메서드입니다. 오직 this 값이 length 속성과 숫자 키 속성만 가지고 있을 것을 기대합니다. 문자열이 배열과 유사하긴 하지만, 문자열은 불변이기 때문에 이 메서드는 문자열에는 어울리지 않습니다.

예시

배열에 요소 추가하기

다음 코드는 2개의 요소를 가진 sports 배열을 생성하고 2개의 요소를 추가합니다. total 변수는 이 배열의 새로운 길이를 가집니다.

js
const sports = ["soccer", "baseball"];
const total = sports.push("football", "swimming");

console.log(sports); // ['soccer', 'baseball', 'football', 'swimming']
console.log(total); // 4

두 개의 배열을 합치기

아래 예제는 spread syntax를 사용하여 두 번째 배열의 모든 요소를 첫 번째에 넣습니다.

js
const vegetables = ["parsnip", "potato"];
const moreVegs = ["celery", "beetroot"];

// 두 번째 배열을 첫 번째 배열로 합칩니다
vegetables.push(...moreVegs);

console.log(vegetables); // ['parsnip', 'potato', 'celery', 'beetroot']

concat()을 사용해서도 두 배열을 합칠 수 있습니다.

배열이 아닌 객체에 push() 호출하기

push() 메서드는 this의 length 속성을 읽습니다. 그런 다음, push()에 전달된 인수들을 이용해 this의 length부터 각 인덱스에 값을 설정합니다. 마지막으로, 이전 length에 추가된 요소의 개수를 더하여 length를 설정합니다.

js
const arrayLike = {
  length: 3,
  unrelated: "foo",
  2: 4,
};
Array.prototype.push.call(arrayLike, 1, 2);
console.log(arrayLike);
// { '2': 4, '3': 1, '4': 2, length: 5, unrelated: 'foo' }

const plainObj = {};
// length 속성이 없으므로 길이는 0입니다.
Array.prototype.push.call(plainObj, 1, 2);
console.log(plainObj);
// { '0': 1, '1': 2, length: 2 }

유사 배열과 방식으로 객체 사용하기

위에서 언급했듯이 push는 의도적으로 범용이며, 이를 유리하게 사용할 수 있습니다. 이 예시에서 볼 수 있듯이 Array.prototype.push는 객체에서 잘 작동합니다.

객체 컬렉션을 저장하기 위해 배열을 만들지 않는다는 점에 유의하시기 바랍니다. 대신 객체 자체에 컬렉션을 저장하고 Array.prototype.push에서 call을 사용하여 메서드가 배열을 다루고 있다고 생각하도록 속입니다. 이는 JavaScript가 원하는 방식으로 실행 맥락을 설정할 수 있는 방식 덕분에 작동합니다.

js
const obj = {
  length: 0,

  addElem(elem) {
    // obj.length는 요소가 추가 될때마다
    // 자동으로 증가합니다.
    [].push.call(this, elem);
  },
};

// 설명을 위해 빈 객체를 몇 개 추가해 보겠습니다.
obj.addElem({});
obj.addElem({});
console.log(obj.length); // 2

obj가 배열이 아님에도, 실제 배열을 다루는 것 처럼 push 메서드가 성공적으로 obj의 length 속성을 증가시킨 것을 주목하시기 바랍니다.

명세서

Specification
ECMAScript Language Specification
# sec-array.prototype.push

브라우저 호환성

BCD tables only load in the browser

같이 보기