정의 및 사용 방법

push() 함수는
배열의 끝에 하나 이상의 요소를 추가(push, 뒤에서 밀어 넣기)하는데 사용됩니다.
이때 추가된 요소만큼 배열의 길이도 늘어납니다.

이 함수는 새로운 배열을 반환하지 않고, 원본 배열 자체를 직접 수정합니다.
또한, 추가된 후의 배열 길이를 정수로 반환합니다.

기본 예제

JavaScript 
const arr = [1, 2, 3];

// 배열 끝에 하나의 요소를 추가합니다.
arr.push(4);
console.log(arr); // 출력: [1, 2, 3, 4]

// 배열 끝에 여러 개의 요소를 추가합니다.
arr.push(5, 6, 7);
console.log(arr); // 출력: [1, 2, 3, 4, 5, 6, 7]

구문

JavaScript 
arr.push(element1)
arr.push(element1, element2)
arr.push(element1, element2, /* …, */ elementN)

arr은 push() 함수를 적용할 배열 객체입니다.

매개변수

push() 함수의 매개변수 설명
element1, elementN 배열 끝에 추가할 요소(들)입니다.
배열에 추가할 하나 이상의 값을 지정할 수 있습니다.

반환 값

반환 값은 배열에 요소가 추가된 후의 총 요소 개수를 나타냅니다. 이 값은 정수(예: 1, 2, 3, ...)로 반환됩니다.

JavaScript push() 함수의 반환 값 
const arr = [1, 2, 3];

// 배열 끝에 하나의 요소를 추가하고 반환 값 저장
const totalElements = arr.push(4);
console.log(totalElements); // 출력: 4

활용 예제

다음은 push() 함수를 사용하는 예제입니다.

하나의 요소 추가

단일한 요소를 추가하려면 push() 함수에 추가하려는 요소를 매개변수로 지정하면 됩니다.

JavaScript 
const fruits = ["apple", "banana", "cherry"];

// 배열 끝에 하나의 요소 추가
fruits.push("date");

// 배열의 내용 확인
console.log(fruits); // 출력: ['apple', 'banana', 'cherry', 'date']

여러 개의 요소 추가

여러 개의 요소를 추가하려면 push() 함수에 추가하려는 요소들을 쉼표(,)로 구분해서 순서대로 나열하면 됩니다. 아래의 예제를 통해 확인할 수 있습니다.

JavaScript 
const fruits = ["apple", "banana", "cherry"];

// 배열 끝에 여러 개의 요소 추가
fruits.push("date", "elderberry");

// 배열의 내용 확인
console.log(fruits); // 출력: ['apple', 'banana', 'cherry', 'date', 'elderberry']

객체 추가

push() 함수에 일반 요소를 추가하듯이 객체(object)를 추가하면 됩니다. 아래의 예제를 통해 확인할 수 있습니다.

JavaScript 
const myArray = []; // 빈 배열 생성

const object1 = {name: "John", age: 30};
const object2 = {name: "Jane", age: 25};

myArray.push(object1); // 배열의 끝에 객체 추가
myArray.push(object2);

console.log(myArray); // 출력: [{name: 'John', age: 30}, {name: 'Jane', age: 25}]

push() 함수를 사용하지 않고 배열의 끝에 값 추가하는 방법

자바스크립트에서 배열 끝에 요소를 추가하는 가장 일반적이고 편리한 방법은 push() 함수를 사용하는 것이지만, 다른 방법도 있습니다. 몇 가지 대안적인 방법을 아래에 나열해 보겠습니다.

concat() 함수 사용

배열의 concat() 함수를 사용해서 새로운 배열을 만들고 추가 요소를 포함시킬 수 있습니다. 이렇게 하면 기존 배열을 수정하지 않고 새로운 배열을 반환합니다.

JavaScript 
const arr = [1, 2, 3];
const newArr = arr.concat(4);
console.log(newArr); // 출력: [1, 2, 3, 4]

코드 부연설명
배열의 concat() 함수는 두 개 이상의 배열을 순서대로 하나씩 연결하여 새로운 배열을 반환하는 함수입니다. 매개변수가 배열이 아닌 값일 경우 호출한 배열 객체의 마지막에 값을 추가합니다.

스프레드 구문 사용

스프레드 구문을 사용해서 요소를 배열에 추가할 수 있습니다.

JavaScript 
const arr = [1, 2, 3];
const newItem = 4;
const newArr = [...arr, newItem];
console.log(newArr); // 출력: [1, 2, 3, 4]

코드 부연설명
스프레드 구문은 ...(점 세 개) 뒤에 배열 객체를 붙이면 해당 요소들을 간단하게 개별적으로 펼쳐서 나열하는 자바스크립트 문법입니다.

length 속성을 이용

배열의 length 속성을 사용하여 배열의 끝에 요소를 추가할 수 있습니다. 이 방법은 배열의 현재 길이를 이용해 다음 인덱스에 값을 할당하는 방식(arr[arr.length] = value;)입니다.

JavaScript 
const arr = [1, 2, 3];
arr[arr.length] = 4;
console.log(arr); // 출력: [1, 2, 3, 4]

이 방식은 하나의 요소를 추가하는 데에는 간결하지만, 여러 요소를 추가하려면 반복문을 사용해야 하는 등 불편할 수 있습니다.

명세서

push() 함수에 대한 명세서 사양
명세서 사양
push() ECMAScript Language Specification
#sec-array.prototype.push

브라우저 호환성

push() 함수에 대한 브라우저 호환성
메서드
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
push() 1 12 1 1

참고문헌

같이 보기