자바스크립트 unshift() 함수 – 배열 시작 부분에 요소 추가하기

`Array.prototype.unshift()` 사용법

unshift() 함수는
배열의 시작 부분에(unshift, 위치 변경 없이 앞에서) 하나 이상의 요소를 추가하는 함수입니다.
배열의 새로운 길이를 반환합니다.

JavaScript

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() 함수를 적용할 배열입니다.

매개변수

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

반환 값

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

JavaScript

const arr = [1, 2, 3];

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

예제

예제로 살펴보겠습니다.

하나의 요소 추가

JavaScript

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

// 배열 시작 부분에 하나의 요소 추가
fruits.unshift("date");

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

여러 개의 요소 추가

여러 개의 요소를 추가하려면 unshift() 함수에 추가하려는 요소들을 쉼표(,)로 구분해서 순서대로 나열하면 됩니다.

JavaScript

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

// 배열 시작 부분에 여러 개의 요소 추가
fruits.unshift("date", "elderberry");

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

`unshift()` 함수를 사용한 배열 요소의 역순 배열

배열의 요소들을 역순으로 변경하고자 할 때 unshift() 함수를 사용할 수 있습니다.

JavaScript

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 배열에 추가됩니다.