(JavaScript) 자바스크립트 배열 추가 & 삭제 방법 (push, pop, splice)

자바스크립트 배열 추가, 삭제 함수

배열 추가 : Array.push(), Array.unshift(), Array.splice()
배열 삭제 : Array.pop(), Array.shift(), Array.splice()

배열 요소를 추가하는 방법

var arr = ['a', 'b', 'c'];

// arr = ['a', 'b', 'c', 'd']
arr.push('d'); // 배열의 끝에 요소를 추가

var arr = ['a', 'b', 'c'];

// arr = ['d', 'a', 'b', 'c']
arr.unshift('d'); // 배열의 앞쪽에 요소를 추가

var arr = ['a', 'b', 'c'];

// arr = ['a', 'b', 'd', 'c']
arr.splice(2, 0, 'd'); // index 2 ('c')의 위치에 요소를 추가

// arr = ['a', 'b', 'd', 'c', 'e', 'f']
arr.splice(4, 0, 'e', 'f'); // index 4의 위치에 2개의 요소를 추가

배열 요소를 삭제하는 방법

var arr = ['a', 'b', 'c', 'e', 'f'];

// arr = ['a', 'b', 'c', 'e']
arr.pop(); // 배열의 마지막 요소를 제거

// arr = ['a', 'b', 'c']
var popped = arr.pop(); // 제거한 요소를 반환 받을 수 있음

// popped = 'e'

var arr = ['a', 'b', 'c', 'e', 'f'];

// arr = ['b', 'c', 'e', 'f']
arr.shift(); // 배열의 첫번째 요소를 제거

// arr = ['c', 'e', 'f']
var shifted = arr.shift(); // 제거한 요소를 반환 받을 수 있음

// shifted = 'b'

var arr = ['a', 'b', 'c', 'e', 'f'];

// arr = ['a', 'b', 'e', 'f']
arr.splice(2, 1); // index 2 부터 1개의 요소('c')를 제거

// arr = ['a', 'f']
arr.splice(1, 2); // index 1 부터 2개의 요소('b', 'e')를 제거

// arr = ['a']
removed = arr.splice(1, 1); // 제거한 요소를 반환 받을 수 있음

// removed = 'f'

var arr = ['a', 'b', 'c', 'e', 'f'];

// arr = ["a", undefined, "c", "e", "f"]
delete arr[1]; // delete로 배열을 삭제할 경우 요소는 그대로 존재하며 값만 삭제 됨

array.splice("시작위치", "제거건수")

splice 함수는 원하는 위치에서 하나 이상의 요소를 제거 할 수 있다.

 

array.splice("시작위치", "제거건수", ["요소1", "요소2" ... ])

splice 함수는 요소를 제거 후 해당 위치에 새로운 요소를 추가할 수 있다.

함수를 사용하지 않고 추가, 삭제 하는 방법

자바스크립트는 배열의 길이를 동적으로 변경할 수 있다

var arr = ['a', 'b', 'c'];

// arr = ['a', 'b', 'c', 'e'];
arr[arr.length] = 'e'; // 배열의 끝에 요소를 추가 

// arr = ['a', 'b', 'c']
arr.length = arr.length - 1; // 배열의 크기를 하나 줄인다

// arr = ["a", "b", "c", undefined, undefined, "g"]
arr[5] = 'g'; // index 5 에 요소를 추가, 빈요소([3],[4])는 undefined

배열 중간의 요소를 추가 하거나, 삭제할 경우 함수를 사용하는 것이 편리하다.