[Javascript] 배열 추가와 삭제 정리

[Javascript] 배열 추가와 삭제 정리

 

배열에 추가하는 함수는 push, unshift 가 있고, 배열에서 원소를 삭제하는 함수는 pop, shift 가 있다. 배열을 추가하고 삭제하는 함수는 splice 가 있다. 그 외에 slice와 filter를 통해 특정 원소들을 삭제할 수 있다. 

 

(맨 뒤) 배열 추가 : push

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

//맨끝에 한개값 추가
const arr = ['1', '2', '3'];
const new_length = arr.push('4');

console.log(new_length) //새로운 배열의 길이 : 4
console.log(arr); // ['1', '2', '3', '4']

//맨끝에 여러값 추가
arr.push('5', '6', '7');

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

 

(맨 앞) 배열 추가 : unshift

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

const arr = [1, 2, 3]
const new_length = arr.unshift(-1, 0) //-1 과 0을 맨 앞에 추가

console.log(new_length); // 새로운 배열의 길이 : 5
console.log(arr); // [-1, 0, 1, 2, 3]

arr.unshift(...[-4, -3, -2]); // -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']

 

배열 변경 (추가 / 삭제 / 교체) : splice 

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

 

형식) Array.splice( 시작 인덱스, 삭제할 개수, 추가할 값 )

• splice( 시작 인덱스, 0, 추가할 값 ) : 삭제할 값이 없고 시작 인덱스에 값을 추가할 값들을 추가
• splice( 시작 인덱스, 2, 추가할 값 2개 ) : 2개를 삭제하고 2개를 추가하는 것으로 교체 ( 삭제할 개수와 추가할 값의 개수가 동일한 경우 )
• splice( 시작 인덱스, 2 ) : 추가할 값이 없고 시작 인덱스에서 2개를 삭제  (삭제할 값이 없다면 모두 삭제)

 

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']

 

배열 변환 (자르기) : 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']