[javascript] 배열 내장 함수 - push, splice, slice, pop, shift, unshift

웹컴파일러는 IDEONE.COM을 사용했습니다.

거의 모든 현존 언어를 바로바로 실행하고 결과를 볼 수 있어 좋은 사이트입니다.

 

배열 내장 함수를 테스트 하기 위해 간단한 요소 5개짜리 배열을 생성합니다.

---

 

1. push

push 내장함수는 배열의 끝에 하나 이상의 요소를 추가하고, 리턴값으로 제일 최근 길이를 반환한다.

push는 원본 배열을 바꿀 수 있는 함수이다.

 

터미널에 push함수로 array2 변수에 저장합니다. array와 array2 둘 다 찍어보니

array는 배열 끝단에 제가 추가한 문자열에 추가되고 array2는 6을 반환합니다.

 

2. splice

splice는 배열의 기존 요소를 삭제 또는 교체하거나 추가하여 배열을 변경합니다.

원본 배열을 바꾸고, 이 때 삭제시킨 요소를 다시 반환합니다.

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

 

세 개의 파라미터를 사용했습니다.

array.splice(3,1,"가")로 array2에 저장했더니 4번째 grapes부터 1번째인 grapes만 삭제되어

array2에 저장되고 그 자리에 "가"라는 문자열이 추가되어 array에 저장되었습니다.

물론 이후로 문자열을 추가한다고 해도 상관없이 그대로 들어갑니다.

3번째 이후 부터 1번째를 제거하고 "가"와 "나"를 넣으라고 명령했는데

잘 실행되었습니다.

3. slice

slice는 배열의 요소를 추출합니다. 

추출을 위해 start index, end index값을 파라미터로 받아 해당 값만큼 새로운 배열을

반환합니다. 이 파라미터를 생략한다면, 똑같은 배열을 생성합니다.

end index만 생략한 경우에는 start index부터 마지막 index까지 요소를 추출합니다.

slice는 원본 배열을 바꾸지 않습니다.

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

 

파라미터를 모두 생략하고 slice 만으로 array2를 만들었더니 array와 똑같은 배열이 생성됩니다.

 

4. pop

pop은 배열의 마지막 요소를 제거하고 그 요소를 반환합니다.

원본 배열을 바꾸는 함수입니다.

빈 배열에서 pop을 쓰게 되면 undefined가 반환됩니다.

 

pop을 써서 array2에 저장했더니 마지막 index인 pearl이 삭제되고 array2에 저장되었습니다.

 

5. shift

shift는 배열의 요소를 제거하고, 제거된 요소를 반환합니다.

마치 pop과 유사하지만 차이점은 pop은 마지막 index를 제거한 후 반환한다면

shift는 첫 번째 요소를 제거합니다. 물론 이 함수도 원본 배열을 바꿉니다.

 

컴파일러에 넣고 실행했더니 첫 번째 index인 apple이 제거되고 array2에 반환됩니다.

 

6. unshift

push처럼 배열의 요소를 추가하고, 그 새로운 길이를 반환합니다.

하지만 맨 앞 요소를 추가한다는 것이 차이점입니다. 물론 원본 배열을 바꿉니다.

 

원래 길이가 5였던 array에 문자열을 추가했더니 맨 앞 index에 추가되고 array2에 6이 반환됩니다.

 

 

---

총 6개 정도의 배열 내장 함수를 알아보았는데, 각 함수의 기능이 간단해서 어렵지 않았는데, splice는 파라미터가 여러가지라 좀 더 살펴보아야 할 것 같습니다. 글 봐주셔서 감사합니다

 

 

소스 참조

https://artistjay.tistory.com/8