자바스크립트 배열 메서드

[2편] 배열 요소 추가 메서드

📋 원본 배열을 수정! 불변성 깨트림 💔

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

예제

let array = [100, 200, 300, 400 ,500];
array.push('600');  

console.log(array);  // [ 100, 200, 300, 400, 500, '600' ]
console.log(array.length);  // 6

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

예제

let array = [100, 200, 300, 400 ,500];
array.unshift('안녕');  

console.log(array);  // [ '안녕', 100, 200, 300, 400, 500 ]
console.log(array.length);  // 6

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

array.splice(startIndex, deleteCount, item1, item2, ...); 

☑️ startIndex (배열의 변경을 시작할 인덱스)
☑️ deleteCount (배열에서 제거할 요소의 수 / 옵션 요소)
☑️ item1, item2, ... (배열에 추가할 요소 / 옵션 요소)

배열의 첫 번째 요소 값 추가

splice(0, 0, Item1, item2, ... );

예제

let array = [100, 200, 300, 400, 500];

array.splice(0, 0, 150);
 
console.log(array);  // [ 150, 100, 200, 300, 400, 500 ]
console.log(array.length);  // 6

배열의 마지막 요소 값 추가

splice(array.length, 0, Item1, item2, ... );

예제

let array = [100, 200, 300, 400, 500];

array.splice(5, 0, 600, '안녕');
 
console.log(array);  // [ 100, 200, 300, 400, 500, 600, '안녕' ]
console.log(array.length);  // 7

참고 및 출처 : https://developer.mozilla.org/ko/