자바스크립트에서 배열에 새로운 요소를 추가할 때 자주 사용되는 메소드가 바로 push()와 unshift()입니다. 두 메소드 모두 배열에 요소를 추가하지만, 추가되는 위치와 동작 방식에서 중요한 차이가 있습니다.
push() 메소드란?
push() 메소드는 배열의 맨 끝에 새로운 요소를 추가합니다. 요소를 추가한 후에는 변경된 배열의 길이(length)를 반환하며, 원본 배열을 직접 수정한다는 특징이 있습니다.
unshift() 메소드란?
unshift() 메소드는 배열의 맨 앞(0번째 인덱스)에 새로운 요소를 추가합니다. 새 요소가 맨 앞에 삽입되면 기존 요소들은 모두 한 칸씩 뒤로 밀려나며(인덱스가 증가), 이후 배열의 길이를 반환합니다.
예제 코드
let fruits = ['apple', 'mango', 'orange', 'kiwi'];
let fruits2 = ['apple', 'mango', 'orange', 'kiwi'];
console.log(fruits.push("pineapple"));
console.log(fruits2.unshift("pineapple"));
console.log(fruits);
console.log(fruits2);
실행 결과
5
5
[ 'apple', 'mango', 'orange', 'kiwi', 'pineapple' ]
[ 'pineapple', 'apple', 'mango', 'orange', 'kiwi' ]
실행 결과를 보면 두 메소드 모두 반환값으로 배열의 길이인 5를 출력하는 것을 확인할 수 있습니다. 또한 두 경우 모두 원본 배열이 직접 변경되었다는 점에 주목해야 합니다.
핵심 차이점 정리
- 추가 위치:
push()는 배열 끝에,unshift()는 배열 시작 부분에 요소를 추가합니다. - 성능 차이:
unshift()는 첫 번째 위치에 요소를 삽입한 후 기존의 모든 요소를 한 칸씩 뒤로 이동시켜야 하기 때문에,push()보다 상대적으로 느립니다. - 반환값: 두 메소드 모두 새로운 요소가 추가된 배열의 전체 길이를 반환합니다.
따라서 대용량 데이터를 다루거나 성능이 중요한 환경이라면, 특별한 이유가 없는 한 배열 끝에 요소를 추가하는 push()를 사용하는 것이 더 효율적입니다.