JavaScript - 배열 맨 앞에 요소 추가/제거, 2가지 방법

By JS | Last updated: May 01, 2022

Javascriptexamples

자바스크립트에서 shift(), splice()를 사용하여 배열의 맨 앞에 요소를 추가/제거하는 방법을 소개합니다.

1. unshift() : 배열 맨 앞에 요소 추가

unshift(element)는 배열의 맨 앞에 element를 추가합니다. 참고로, push(element)는 배열 맨 뒤에 요소를 추가합니다.

const arr = [1, 2, 3];

arr.unshift('A');
console.log(arr);

arr.unshift('B');
console.log(arr);

arr.unshift('C');
console.log(arr);

Output:

[ 'A', 1, 2, 3 ]
[ 'B', 'A', 1, 2, 3 ]
[ 'C', 'B', 'A', 1, 2, 3 ]

1.1 unshift()로 여러 요소를 배열에 추가

unshift()는 1개 이상의 요소를 배열의 맨 앞에 추가할 수도 있습니다. 아래와 같이 인자로 여러 요소를 전달하면 됩니다.

const arr = [1, 2, 3];

arr.unshift('A', 'B', 'C');
console.log(arr);

Output:

[ 'A', 'B', 'C', 1, 2, 3 ]

2. shift() : 배열 맨 앞의 요소 제거

shift()는 배열 맨 앞의 요소 1개를 제거하며, 배열에서 제거된 요소의 값을 리턴합니다. 참고로, pop()은 배열의 맨 마지막 요소를 제거합니다.

const arr = [ 'C', 'B', 'A', 1, 2, 3 ];

let removed = arr.shift()
console.log("removed: " + removed);
console.log(arr);

removed = arr.shift()
console.log("removed: " + removed);
console.log(arr);

removed = arr.shift()
console.log("removed: " + removed);
console.log(arr);

Output:

removed: C
[ 'B', 'A', 1, 2, 3 ]
removed: B
[ 'A', 1, 2, 3 ]
removed: A
[ 1, 2, 3 ]

3. splice() : 배열 맨 앞에 요소 추가

splice()를 이용하여 배열의 맨 앞에 요소를 추가하거나 삭제할 수도 있습니다.

splice()의 Syntax를 먼저 보면, 배열의 startIndex에서 deleteCount 개수만큼 요소를 삭제합니다. 그리고 item1, item2 등, 인자로 전달된 요소를 추가합니다. 예를 들어, splice(0, 0, 'A')는 배열의 Index 0에서 0개 요소를 삭제하고, A를 추가합니다. 즉, 배열 맨 앞에 A를 추가합니다.

array.splice(startIndex, deleteCount, item1, item2, ...)

위에서 설명한 것처럼 splice(0, 0, element)는 배열 맨 앞에 요소를 추가합니다.

const arr = [1, 2, 3];

arr.splice(0, 0, 'A');
console.log(arr);

arr.splice(0, 0, 'B');
console.log(arr);

arr.splice(0, 0, 'C');
console.log(arr);

Output:

[ 'A', 1, 2, 3 ]
[ 'B', 'A', 1, 2, 3 ]
[ 'C', 'B', 'A', 1, 2, 3 ]

3.1 splice()로 여러 요소를 배열에 추가

다음과 같이 splice()로 배열에 여러 요소를 한번에 추가할 수 있습니다.

const arr = [1, 2, 3];

arr.splice(0, 0, 'A', 'B', 'C');
console.log(arr);

Output:

[ 'A', 'B', 'C', 1, 2, 3 ]

4. splice() : 배열 맨 앞의 요소 제거

splice(0, 1)은 배열의 Index 0에서 요소 1개를 삭제합니다. 따라서, 아래와 같이 배열 맨 앞의 요소 1개를 제거하는 코드를 구현할 수 있습니다.

const arr = [ 'C', 'B', 'A', 1, 2, 3 ];

let removed = arr.splice(0, 1);
console.log("removed: " + removed);
console.log(arr);

removed = arr.splice(0, 1);
console.log("removed: " + removed);
console.log(arr);

removed = arr.splice(0, 1);
console.log("removed: " + removed);
console.log(arr);

Output:

removed: C
[ 'B', 'A', 1, 2, 3 ]
removed: B
[ 'A', 1, 2, 3 ]
removed: A
[ 1, 2, 3 ]

4.1 splice()로 배열에서 여러 요소를 한번에 삭제

아래와 같이 배열의 앞에서 여러 요소를 한번에 삭제할 수 있습니다.

const arr = [ 'C', 'B', 'A', 1, 2, 3 ];

let removed = arr.splice(0, 3);
console.log("removed: " + removed);
console.log(arr);

Output:

removed: C,B,A
[ 1, 2, 3 ]
javascript
Loading script...

Related Posts

codechachaCopyright ©2019 codechacha