[JavaScript] 배열 추가 / 삭제

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

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

배열 요소 추가하기

1. Array.push()

• 배열의 끝에 요소를 추가하는 방법이다.

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

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

2. Array.unshift()

• 배열의 앞쪽에 요소를 추가하는 방법이다.

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

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

3. Array.splice()

• 원하는 위치에 하나 이상의 요소를 추가할 수 있는 방법이다.
• .splice(추가 할 인덱스 위치, 0, 추가할 문자);
• 두번째 인덱스에 0을 입력하는 이유는 추가한다는 의미를 입력하는 것이다. 1이나 2를 입력하게 되면, 시작 인덱스로부터 1개의 문자를 삭제한다는 의미로 사용하게 된다.

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

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

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

배열 요소 삭제하기

1. Array.pop()

• 배열의 마지막 요소를 제거하는 방법이다.
• 이때, 제거한 요소를 반환받아 재사용할 수 있다.

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

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

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

// popped = 'e'

2. Array.shift()

• 배열의 첫번째 요소를 제거하는 방법이다.
• pop과 마찬가지로 제거한 요소를 반환받아 재사용할 수 있다.

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

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

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

// shifted = 'b'

3. Array.splice()

• 해당 메서드를 이용해 배열에 요소를 추가할 수도 있었지만, 제거할때도 사용할 수 있다. 제거할 때는 매개변수 2개 array.splice("시작위치", "제거건수") 를 넘겨준다.
• 배열에서 요소를 제거하는 모든 메서드를 이용할때 제거한 요소를 반환받아 재사용 할 수 있다.

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

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

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

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

// removed = 'f'

4. delete ??

• 추가적으로 delete를 이용해서 요소를 삭제할 수 있다.
• 하지만, delete는 요소의 값만 삭제한다. 즉 해당 배열 자리는 그대로 남아있는 것이다. 아래의 예제를 보며 완벽하게 이해하자.

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

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