Array.prototype.unshift()
사용법
unshift()
함수는
배열의 시작 부분에(unshift, 위치 변경 없이 앞에서) 하나 이상의 요소를 추가하는 함수입니다.
배열의 새로운 길이를 반환합니다.
const arr = [1, 2, 3];
// 배열 시작 부분에 하나의 요소를 추가합니다.
arr.unshift(4);
console.log(arr); // 출력: [4, 1, 2, 3]
// 배열 시작 부분에 여러 개의 요소를 추가합니다.
arr.unshift(5, 6, 7);
console.log(arr) // 출력: [5, 6, 7, 4, 1, 2, 3]
unshift()
함수의 형식은 다음과 같습니다.
구문
arr.unshift(element1[, ...[, elementN]])
arr
은 unshift()
함수를 적용할 배열입니다.
매개변수
element1 , elementN |
배열 시작 부분에 추가할 요소(들)입니다.
배열에 추가할 하나 이상의 값을 지정할 수 있습니다. |
---|
반환 값
반환 값은 배열에 요소가 추가된 후의 총 요소 개수를 나타냅니다. 이 값은 정수(예: 1, 2, 3, ...)로 반환됩니다.
const arr = [1, 2, 3];
// 배열 시작 부분에 하나의 요소를 추가하고 반환 값 저장
const totalElements = arr.unshift(4);
console.log(totalElements); // 출력: 4
예제
예제로 살펴보겠습니다.
하나의 요소 추가
const fruits = ["apple", "banana", "cherry"];
// 배열 시작 부분에 하나의 요소 추가
fruits.unshift("date");
// 배열의 내용 확인
console.log(fruits); // 출력: ['date', 'apple', 'banana', 'cherry']
여러 개의 요소 추가
여러 개의 요소를 추가하려면 unshift()
함수에 추가하려는 요소들을 쉼표(,
)로 구분해서 순서대로 나열하면 됩니다.
const fruits = ["apple", "banana", "cherry"];
// 배열 시작 부분에 여러 개의 요소 추가
fruits.unshift("date", "elderberry");
// 배열의 내용 확인
console.log(fruits); // 출력: ['date', 'elderberry', 'apple', 'banana', 'cherry']
unshift()
함수를 사용한 배열 요소의 역순 배열
배열의 요소들을 역순으로 변경하고자 할 때 unshift()
함수를 사용할 수 있습니다.
const numbers = [1, 2, 3, 4, 5];
const reversedNumbers = [];
numbers.forEach(number => {
reversedNumbers.unshift(number);
});
console.log(reversedNumbers); // 출력: [5, 4, 3, 2, 1]
코드 부연설명
forEach()
함수는 배열을 순회해서 각 요소를 콜백 함수로 처리하기 위한 함수입니다. 배열의 각 요소에 대해 주어진 콜백 함수를 적용해서 순서대로 한 번씩 실행합니다.
- 먼저,
numbers
라는 배열을 정의하고 초깃값으로[1, 2, 3, 4, 5]
를 가지고 있습니다. reversedNumbers
라는 빈 배열을 생성합니다. 이 배열은 나중에 역순으로 변경된 요소들을 저장할 용도로 사용됩니다.forEach()
함수를 사용하여numbers
배열의 각 요소를 반복적으로 처리합니다. 반복문의 각 반복에서 현재 요소를number
변수에 저장합니다.unshift(number)
함수를 사용하여reversedNumbers
배열의 시작 부분에 현재 요소인number
를 추가합니다. 이 과정을 반복하면서 요소들이 역순으로reversedNumbers
배열에 추가됩니다.
이 결과로 reversedNumbers
배열은 numbers
배열의 역순으로 요소가 저장되며, 역순된 순서대로 [5, 4, 3, 2, 1]
과 같은 값을 가지게 됩니다.
이 코드를 실행하면 numbers
배열의 순서가 뒤집혀서 reversedNumbers
배열에 저장되는 것을 확인할 수 있습니다. 이와 같은 방식으로 배열을 역순으로 정렬할 수 있습니다.
명세서
명세서 사양 | |
---|---|
unshift()
|
ECMAScript Language Specification #sec-array.prototype.unshift |
브라우저 호환성
메서드 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
---|---|---|---|---|
unshift()
|
1 | 12 | 1 | 1 |