[Javascript] 배열(Array)관련 함수(push, pop, shift, unshift, splice, slice) 정리

이번 포스팅에서는 자바스크립트 배열 데이터 추가/삭제 관련된 함수를 정리하려고 한다.

너무 간단한 내용이지만, 가끔 헷갈릴 때가 있다.

그리고 포스팅하면서 해당 함수들에 대해서 좀 더 자세히 공부하려는 목적도 있다.

그리고 각 메서드마다 원본 배열을 유지하면서 데이터만 컨트롤하는 게 있고, 원본 배열에 영향을 주는 메서드가 있기 때문에 알아두면 좋을 것 같다.

 

 

 

1. push

push 메서드는 배열의 끝에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환한다.

원본 배열을 바꾼다.

기본 사용법은 아래와 같다.

let arr = [];
arr.push("1");
arr.push(3);
arr.push({"test":"1"});
arr.push("3","4","5");
console.log(arr)
["1", 3, {"test":"1"}, "3", "4", "5"]

let returnValue = arr.push(); // returnValue = 6

push를 사용하여 두 개의 배열을 합치는 방법도 있는데, 사용도 잘 안하는 것 같고 효율성도 떨어지는 것 같다.

사용방법은 아래와 같다.

let arr1 = ["1", "2"];
let arr2 = ["3", "4"];
// arr1.push("3","4") 와 동일하다.
Array.prototype.push.apply(arr1, arr2);
console.log(arr1);
["1","2","3","4"]

 

2. pop

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

원본 배열을 바꾼다.

만약 빈 Array에서 pop을 하게 되면, 반환 값은 undefined이다.

사용방법은 아래와 같다.

let arr = ["1","2","3","4"];
let returnValue = arr.pop();
console.log(arr);
["1","2","3"]
console.log(returnValue)
4

let arr2 = [];
var returnValue2 = arr2.pop();
console.log(returnValue2)
undefined

 

 

 

3. shift

shift 메서드는 배열의 요소를 제거하고, 제거된 요소를 반환한다는 점에서 pop 메서드와 동일하지만,

배열의 마지막 요소가 아닌 첫 번째 요소를 제거한다는 점에서 pop 메서드와 반대이다.

원본 배열을 바꾼다.

pop 메서드와 마찬가지로 빈 Array에서 shift를 하게 되면, 반환 값은 undefined이다.

사용방법은 아래와 같다.

let arr = ["1","2","3","4"];
let returnValue = arr.shift();
console.log(arr)
["2","3","4"]
console.log(returnValue)
1

let arr2 = [];
var returnValue2 = arr2.shift();
console.log(returnValue2)
undefined

 

4. unshift

unshift 메서드는 배열의 요소를 추가하고, 배열의 새로운 길이를 반환한다는 점에서 push 메서드와 동일하지만,

배열의 맨 끝이 아닌 맨 앞에 요소를 추가한다는 점에서 push 메서드와 반대이다.

원본 배열을 바꾼다.

사용방법은 아래와 같다.

let arr = [];
arr.unshift("1");
arr.unshift(3);
arr.unshift({"test":"1"});
arr.unshift("3","4","5");
console.log(arr)
["3", "4", "5", {"test":"1"}, 3, "1"]

let returnValue = arr.push(); // returnValue = 6

 

 

 

5. slice

slice는 배열의 요소를 추출하는 메서드이다.

추출하고자 하는 배열의 start index, end index 값을 넘겨받아서 해당 길이만큼 새로운 배열을 반환한다.
start index와 end index를 모두 생략한 경우, 배열을 똑같이 복제한다.
end index만 생략한 경우, start index부터 마지막 index까지 요소를 추출한다.

원본 배열에 영향을 주지 않는다.

사용방법은 아래와 같다.

let arr = ["1","2","3","4", "5", "6", "7", "8"];
let arr2 = arr.slice();
console.log(arr2); // ["1", "2", "3", "4", "5", "6", "7", "8"]
let arr3 = arr.slice(3);
console.log(arr3); // ["4", "5", "6", "7", "8"]
let arr4 = arr.slice(2, 5);
console.log(arr4); // ["3", "4", "5"]

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

 

6. splice

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

원본 배열을 바꾸고, 이 과정에서 삭제된 요소가 있다면 삭제된 요소를 반환한다.

array.splice(startIndex[, deleteCount[, item1[, item2[, ...]]]])

 

startIndex에 -N(N은 정수)을 넣으면, array.length-N으로 보면된다.

 

글로만 봐서는 무슨 말인지 이해가 안 될 수 있지만, 직접 사용해보면 이해가 쉽다.

이해해 도움이 될 수 있도록 주석으로 설명을 추가하겠다.

let arr = ["1","2","3","4", "5", "6", "7", "8"];

// 파라미터가 없음 => 원본배열 변화없음, 삭제된 요소 없음.
let arr2 = arr.splice();
console.log(arr); // ["1", "2", "3", "4", "5", "6", "7", "8"]
console.log(arr2); // []


// startIndex만 3으로 지정 => 4번째 요소부터 마지막요소까지 모두삭제, 삭제된 요소 return
let arr3 = arr.splice(3);
console.log(arr); // ["1", "2", "3"]
console.log(arr3); // ["4", "5", "6", "7", "8"]


// startIndex 3, deleteCount 2 => 4번째 요소부터 2개의 요소삭제, 삭제된 요소 return
let arr4 = arr.splice(3, 2);
console.log(arr); // ["1", "2", "3", "6", "7", "8"]
console.log(arr4); // ["4", "5"]


// startIndex 4, deleteCount 0 => 삭제된 요소없음, 5번째 index에 "가" 추가
let arr5 = arr.splice(4, 0, "가");
console.log(arr); // ["1", "2", "3", "4", "가", "5", "6", "7", "8"]
console.log(arr5); // []


// startIndex 4, deleteCount 2 => 5번째 요소부터 2개의 요소삭제, 5번째 index에 "가" 추가, 삭제된 요소 return
let arr6 = arr.splice(4, 2, "가");
console.log(arr); // ["1", "2", "3", "4", "가", "7", "8"]
console.log(arr6); // ["5", "6"]


// startIndex 2, deleteCount 2 => 2번째 요소부터 2개의 요소삭제, 2번째 index부터 "가", "나" 순서대로 추가, 삭제된 요소 return
let arr7 = arr.splice(2, 2, "가","나");
console.log(arr); // ["1", "2", "가", "나", "5", "6", "7", "8"]
console.log(arr7); // ["3", "4"]


// startIndex -4, deleteCount 2 => arr.length-4 즉, 뒤에서 4번째부터 2개의 요소삭제, 삭제된 요소 return
let arr8 = arr.splice(-4, 2);
console.log(arr); // ["1", "2", "3", "4", "7", "8"]
console.log(arr8); // ["5", "6"]