자바스크립트에서 push()와 unshift()는 모두 배열에 새로운 요소를 추가하는 메서드입니다. 두 메서드의 유일한 차이점은 요소가 추가되는 위치입니다. unshift()는 배열의 맨 앞에 요소를 추가하고, push()는 배열의 맨 뒤에 요소를 추가합니다.
1) push() 메서드
Array.push() 메서드는 큐(queue)처럼 배열의 맨 끝에 요소를 추가할 때 사용합니다. 아래 예제는 push() 메서드를 사용해 배열에 요소를 추가하는 방법을 보여줍니다.
예제
<html>
<body>
<script>
var cars = ["Benz", "Lamborghini", "Tata safari"];
cars.push("Ferrari");
document.write(cars);
</script>
</body>
</html>출력 결과
Benz,Lamborghini,Tata safari,Ferrari
실행 결과를 보면 "Ferrari"가 기존 배열 요소들 뒤에 추가된 것을 확인할 수 있습니다.
2) unshift() 메서드
Array.unshift() 메서드는 배열의 맨 앞에 요소를 추가할 때 사용합니다.
예제
<html>
<body>
<script>
var cars = ["Benz", "Lamborghini", "Tata safari"];
cars.unshift("Ferrari");
document.write(cars);
</script>
</body>
</html>출력 결과
Ferrari,Benz,Lamborghini,Tata safari
이번에는 "Ferrari"가 배열의 가장 앞쪽에 추가되어 첫 번째 요소가 된 것을 볼 수 있습니다.
두 메서드 비교 정리
| 메서드 | 추가 위치 | 반환값 |
|---|---|---|
| push() | 배열의 끝 | 요소가 추가된 후의 배열 길이 |
| unshift() | 배열의 시작 | 요소가 추가된 후의 배열 길이 |
참고로 두 메서드 모두 여러 개의 요소를 한 번에 추가할 수 있으며, 실행 후 변경된 배열의 길이(length)를 반환합니다. 반대로 배열에서 요소를 제거하려면 끝에서는 pop(), 앞에서는 shift() 메서드를 사용하면 됩니다.