배열에 요소 추가, 삭제

자바스크립트에서 배열에 요소를 추가하는 방법

추가 - push() / unshift() / splice() / 배열이름[n]

 

push()

• 배열의 끝에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환한다.

문법 : arr.push(element1[, ...[, elementN]])

const array = ['A', 'B', 'C']

const add = array.push('D');
console.log(array) // ["A","B","C","D"]

//여러개 추가할 경우
const array = ['A', 'B', 'C']

const add = array.push('D', 'E', 'F');
console.log(array) // ["A","B","C","D","E","F"]

 

unshift()

• 새로운 요소를 배열의 맨 앞쪽에 추가하고, 새로운 길이를 반환한다.

문법 : arr.unshift([...elementN]);

const array = ['A', 'B', 'C']

const add = array.unshift('D');
console.log(array) // ["D","A","B","C"]

 

splice()

• 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경한다.

문법 : array.splice(start[, deleteCount[, item1[, item2[, ...]]]]) (Optional는 deleteCount, items1, item2)

start : 배열의 변경을 시작할 인덱스

deleteCount : 0 이하라면 어떤 요소도 제거하지 않는다. ( 추가하고 싶을 때 0 기입 )

그래서 제거하지 않고 원하는 위치에 요소를 추가 할 수 있다.

const array = ['A', 'B', 'C']

const add = array.splice(2, 0, 'D');
console.log(array) 
// ["A","B","D","C"] index 2 ('C')위치에 'D' 추가 ["A","B","D","C"]

 

배열이름[n]

• 특정 위치에 요소를 추가하는 방법

const array = ['A', 'B', 'C', 'D', 'E']

array[6] = 'H'
console.log(array)
// ["A","B","C","D","E", undefined,"H"]

 

삭제 - pop() / 배열이름.length -1 / shift() / splice() / delete

pop()

• 배열에서 마지막 요소를 제거하고 그 요소를 반환한다.

문법 : arr.pop();

const array = ['A', 'B', 'C']

const out = array.pop();
console.log(array) // ["A","B"]

 

배열이름.length -1

• 배열의 마지막 요소를 제거하는 방법

const array = ['A', 'B', 'C', 'D', 'E']

array.length = array.length -1;
console.log(array)
// ["A","B","C","D"]

 

 

shift()

• 배열에서 첫 번째 요소를 제거하고, 제거된 요소를 반환한다.

문법 : arr.shift();

const array = ['A', 'B', 'C']

const out = array.shift();
console.log(array) // ["B","C"]

 

splice()

• 특정 위치에서 부터 원하는 만큼 삭제
• splice('위치 값n', '제거할 요소의 갯수')

const array = ['A', 'B', 'C', 'D', 'E']

const out = array.splice(2, 1); 
// ["A","B","D","E"] index 2 부터 1개의 요소('C')를 제거

const out = array.splice(2, 2); 
// ["A","B","E"] index 2 부터 2개의 요소('C', 'D')를 제거

 

 

delete

• 배열의 요소는 그대로 두고 값만 삭제하는 방법
• 배열의 length 속성에 영향을 주지 않는다.

const array = ['A', 'B', 'C', 'D', 'E']

delete array[1];
console.log(array)
// ["A",undefined,"C","D","E"]

 

 

참고

Array.prototype.push() - JavaScript | MDN

 

Array.prototype.unshift() - JavaScript | MDN

 

Array.prototype.splice() - JavaScript | MDN

 

Array.prototype.pop() - JavaScript | MDN

 

Array.prototype.shift() - JavaScript | MDN