[Javascript] 배열 추가 / 삭제 정리 (push, unshift, pop, shift, slice, filter, splice, length)

배열 추가 (맨 뒤) - push

 

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

 

const arr = ['1', '2', '3'];

const count = arr.push('4');

console.log(count); // 4
console.log(arr); // ['1', '2', '3', '4']


arr.push('5', '6', '7');

console.log(arr); // ['1', '2', '3', '4', '5', '6', '7']


Array.prototype.push.apply(arr, ['8', '9', '10']);

console.log(arr); // ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']

 

 

배열 추가 (맨 앞) - unshift

 

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

 

const arr = [1, 2, 3];

const count = arr.unshift(-1, 0);

console.log(count); // 5
console.log(arr); // [-1, 0, 1, 2, 3]


arr.unshift(...[-4, -3, -2]);

console.log(arr); // [-4, -3, -2, -1, 0, 1, 2, 3]

 

 

---

 

배열 삭제 (맨 뒤) - pop

 

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

 

const arr = ['1', '2', '3', '4'];

let deleted = arr.pop();

console.log(deleted); // '4'
console.log(arr); // ['1', '2', '3']


deleted = arr.pop('3');

console.log(deleted); // '3'
console.log(arr); // ['1', '2']

 

배열 삭제 (맨 앞) - shift

 

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

 

const arr = ['1', '2', '3', '4'];

let deleted = arr.shift();

console.log(deleted); // '1'
console.log(arr); // ['2', '3', '4']


deleted = arr.shift('2');

console.log(deleted); // '2'
console.log(arr); // ['3', '4']

 

배열 삭제(해당 구간) - slice

 

어떤 배열의 begin부터 end까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환한다. 원본 배열은 바뀌지 않는다.

 

const arr = ['1', '2', '3', '4', '5'];

// 2번 인덱스 부터 끝까지
console.log(arr.slice(2)); // ['3', '4', '5']


// 1번 인덱스 부터 3번 인덱스 미만까지
console.log(arr.slice(1, 3)); // ['2', '3']


// 0번 인덱스 부터 뒤에서 첫 번째 인덱스 미만 까지 추출
console.log(arr.slice(0, -1)); // ['1', '2', '3', '4']

 

배열 삭제(해당 요소) - filter

 

해당 요소만 제외한 배열을 반환한다.

 

let arr = ['1', '2', '2', '3'];

// 원소 '2' 삭제
let filtered = arr.filter((element) => element !== '2');

console.log(arr); // ['1', '2', '2', '3']
console.log(filtered); // ['1', '3']

 

---

 

배열 추가 / 삭제 - splice

 

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

 

const arr = ['1', '2', '3', '4'];

// 1번 인덱스 부터 0개를 지우고 '1.5'를 넣어라.
// 반환값은 지운 요소의 배열
let deletedArr = arr.splice(1, 0, '1.5');
console.log(deletedArr); // []
console.log(arr); // ['1', '1.5', '2', '3', '4']


// 4번 인덱스 부터 1개를 지우고 '3.5'를 넣어라.
deletedArr = arr.splice(4, 1, '3.5');
console.log(deletedArr); // ['4']
console.log(arr); // ['1', '1.5', '2', '3', '3.5']


// 3번 인덱스 부터 1개를 지워라.
deletedArr = arr.splice(3, 1);
console.log(deletedArr); // ['3']
console.log(arr); // ['1', '1.5', '2', '3.5']


// 3번 인덱스 부터 0개를 지우고 '2.5', '3'을 넣어라.
deletedArr = arr.splice(3, 0, '2.5', '3');
console.log(deletedArr); // []
console.log(arr); // ['1', '1.5', '2', '2.5', '3', '3.5']


// 1번 인덱스 부터 3개를 지우고 '2'를 넣어라.
deletedArr = arr.splice(1, 3, '2');
console.log(deletedArr); // ['1.5', '2', '2.5']
console.log(arr); // ['1', '2', '3', '3.5']


// 뒤에서 첫 번째 인덱스 부터 1개를 지우고 '4'를 넣어라.
deletedArr = arr.splice(-1, 1, '4');
console.log(deletedArr); // ['3.5']
console.log(arr); // ['1', '2', '3', '4']


// 1번 인덱스 부터 모두 지워라.
deletedArr = arr.splice(1);
console.log(deletedArr); // ['2', '3', '4']
console.log(arr); // ['1']

 

배열 추가 / 삭제 - arr.length

 

배열의 길이를 변경하여 요소를 추가 / 삭제 할 수 있다.

 

let arr = ['1', '2', '3', '4'];

arr[arr.length] = '5';
console.log(arr); // ['1', '2', '3', '4', '5']


arr.length -= 1;
console.log(arr); // ['1', '2', '3', '4']


arr[5] = '6';
console.log(arr); // ['1', '2', '3', '4', undefined, '6']


let arr2 = arr;

arr = []; // arr는 새로운 비어있는 객체를 할당, arr2는 원래 배열을 참조

console.log(arr); // []
console.log(arr2); // ['1', '2', '3', '4', undefined, '6']


arr = ['1', '2', '3', '4'];
arr2 = arr;

arr.length = 0; // 원래 배열의 length를 0으로 변경

console.log(arr); // []
console.log(arr2); // []

 

 

References

---

 

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/push

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

gent.tistory.com/295

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/shift

hianna.tistory.com/489

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/pop

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/slice