JS 배열 값 추가, 삭제하기

https://hianna.tistory.com/395

unshift()

배열의 맨 앞에 값을 추가하고, 값이 추가된 배열의 길이를 리턴한다.

const arr = ['apple', 'banana'];
const length = arr.unshift('zero');
console.log(length, arr); // 3, ["zero", "apple", "banana"]

shift()

배열의 가장 첫 요소를 삭제하고 그 값을 리턴한다.

const arr = ['apple', 'banana', 'cheese'];
const element = arr.shift();
console.log(element, arr); // "apple", ["banana", "cheese"]

push()

배열의 맨 뒤에 값을 추가하고, 값이 추가된 배열의 길이를 리턴한다.

const arr = ['apple', 'banana'];
const length = arr.push('cheese');
console.log(length, arr); //3, ["apple", "banana", "cheese"]

pop()

배열의 가장 마지막 요소를 삭제하고 그 값을 리턴한다.

const arr = ['apple', 'banana', 'cheese'];
const element = arr.pop();
console.log(element, arr); // "cheese", ["apple", "banana"]

splice()

splice(startIndex, [deleteCount], [item]) 의 형태로 파라미터를 전달받는다.

startIndex엔 변경을 시작할 배열의 시작 index를 입력한다.

deleteCount는 입력된 개수만큼 원소를 삭제하고 생략된 경우 startIndex 이후의 모든 값을 삭제한다.

item은 startIndex에 추가할 값을 입력한다.

변경 후 삭제된 요소의 배열을 리턴한다.

const arr = [1,2,3,4,5];
let element = arr.splice(0, 1);
console.log("arr : " + arr, "element : " + element); // "arr : 2,3,4,5", "element : 1"

startIndex를 0, deleteCount를 1로 주니 0번 인덱스에 있는 요소 '1'을 삭제하고 그것을 리턴한다.

const arr = [1,2,3,4,5];
let element = arr.splice(0, 1, 'one');
console.log("arr : " + arr, "element : " + element); // "arr : one,2,3,4,5", "element : 1"

item으로 'one'을 추가하니 0번 인덱스에 1이 삭제되고 'one'이 들어가게 된다.

const arr = [1,2,3,4,5];
let element = arr.splice(arr.length, 0, 'last');
console.log("arr : " + arr, "element : " + element); // "arr : 1,2,3,4,5,last", "element : "

배열의 마지막에서 값을 변경하고 싶을 때는 arr.length를 startIndex에 입력해주면 된다.

const arr = [1,2,3,4,5];
let element = arr.splice(0);
console.log("arr : " + arr, "element : " + element); // "arr : ", "element : 1,2,3,4,5"

deleteCount와 item을 모두 생략하고 startIndex만 작성하게 되면 startIndex부터의 모든 요소를 삭제한다.

 

 

 

출처

[Javascript] 배열 앞, 뒤에 값 추가, 삭제하기 (1)