오늘은 배열 안의 요소들을 제거하거나 추가할 때 자주 쓰이는 Array 함수들 5개 pop(), shift(), unshift(), slice(), splice() 와 예시를 소개하겠습니다.
자주 쓰이는 자바스크립트 Array 함수 1탄은 아래의 링크에서 확인해 주세요!
[JavaScript] 자주 쓰이는 자바스크립트 Array 함수 5개 1탄 (push, forEach, filter, map, reduce)
1. pop()
1) 배열의
마지막 요소를 제거합니다.
2) 제거 된 요소를 리턴합니다.
- 기존 배열과 length 자체를 수정하는 메서드입니다.
- 빈 배열에 pop()메서드를 사용했을 때는
undefined를 리턴하며 배열의 length는 0이 됩니다.
예시1) 배열 중 마지막 요소를 뽑아내고 삭제하기
const fruits = ['apple', 'banana', 'orange', 'mango'];
const poppedFruit = fruits.pop();
console.log(poppedFruit); // Output: 'mango'
console.log(fruits); // Output: ['apple', 'banana', 'orange']예시2) 배열 내 요소의 반대 순서로 출력하기
const numbers = [10, 20, 30, 40, 50];
while(numbers.length > 0) {
const lastNumber = numbers.pop();
console.log(lastNumber);
}
// Output: 50 40 30 20 10
2. shift()
1) 배열의
첫번째 요소를 제거합니다.
2) 제거 된 요소를 리턴합니다.
- 기존 배열과 length 자체를 수정하는 메서드입니다.
- 빈 배열에 pop()메서드를 사용했을 때는
undefined를 리턴하며 배열의 length는 0이 됩니다.
예시1) 배열 중 첫번째 요소를 뽑아내고 삭제하기
const fruits = ['apple', 'banana', 'orange', 'mango'];
const shiftedFruit = fruits.shift();
console.log(shiftedFruit); // Output: 'apple'
console.log(fruits); // Output: [ 'banana', 'orange', 'mango']예시2) 데이터 순으로 기능 작동하기
const students = ["Alice", "Bob", "Charlie", "David", "Eve"];
while (students.length > 0) {
const currentStudent = students.shift();
console.log(`Processing ${currentStudent}...`);
}
console.log("All students processed.");
// Output:
// Processing Alice...
// Processing Bob...
// Processing Charlie...
// Processing David...
// Processing Eve...
// All students processed.
3. unshift()
1) 배열의 맨앞에 요소를 추가 합니다.
- 기존 배열과 length 자체를 수정하는 메서드입니다.
예시1) 배열 맨 앞에 한 개의 요소 추가하기
const arr = [1, 2, 3];
arr.unshift(0);
console.log(arr); // output: [0, 1, 2, 3]예시2) 배열 맨 앞에 두 개 이상의 요소 추가하기
const arr = [4, 5, 6];
arr.unshift(1, 2, 3);
console.log(arr); // output: [1, 2, 3, 4, 5, 6]
예시3) 배열 맨 앞에 스프레드 연산자로 다른 배열 추가하기
onst arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
arr1.unshift(...arr2);
console.log(arr1); //output: [4, 5, 6, 1, 2, 3]
4. slice()
1) 시작 인덱스와 마지막 인덱스를 매개변수로 입력받습니다.
2)시작 인덱스에 위치한 요소부터마지막 인덱스의 바로 앞의 요소까지를 배열로 리턴합니다.
- 기존 배열은 변하지 않습니다.
예시1) 시작 인덱스와 마지막 인덱스를 입력하여 새로운 배열 만들기
const arr = ['김감자', '박고구마', '이당근', '심상추', '나달걀'];
const newArr = arr.slice(1, 4);
console.log(newArr); // output: ['박고구마', '이당근', '심상추']예시2) 음수를 입력하여 배열의 뒤에 위치한 요소 추출하기
const arr = ['김감자', '박고구마', '이당근', '심상추', '나달걀'];
const lastTwo = arr.slice(-2);
console.log(lastTwo); // output: ['심상추', '나달걀']
예시3) 슬라이스로 배열 복사하기
const arr1 = ['김감자', '박고구마', '이당근', '심상추', '나달걀'];
const arr2 = arr1.slice();
console.log(arr2); // output: ['김감자', '박고구마', '이당근', '심상추', '나달걀'];
5. splice()
1) 배열의 요소를 추가하거나 삭제할 수 있습니다.
2) 이 때 매개변수로시작 인덱스,삭제할 요소의 개수,추가할 요소를 받습니다.
- 기존 배열과 length 자체를 수정하는 메서드입니다.
시작 인덱스는 필수 인자이며삭제할 요소의 개수,추가할 요소는 선택사항입니다.
예시1) 배열 내 요소 지우기, 추가하기, 대체하기
const arr = [1, 2, 3, 4, 5];
// 배열 내 요소 지우기
arr.splice(2, 1); // arr 안의 index 2 인 3 값 지우기
console.log(arr); //output: [1, 2, 4, 5]
// 배열 내 요소 추가하기
arr.splice(2, 0, 'a', 'b'); // index 2에 'a', 'b' 추가하기
console.log(arr); //output: [1, 2, 'a', 'b', 4, 5]
// 배열 내 요소 대체하기
arr.splice(4, 1, 'c', 'd'); // index 4의 4 값을 'c'와 'd'로 대체하기
console.log(arr); //output: [1, 2, 'a', 'b', 'c', 'd', 5]예시2) 배열의 length를 이용하여 빈 배열 만들기
const arr = [1, 2, 3, 4, 5];
arr.splice(0, arr.length);
console.log(arr); // output: []
예시3) 배열의 length를 이용하여 배열의 마지막 자리에 요소 추가하기
const arr = [1, 2, 3];
arr.splice(arr.length, 0, 4, 5);
console.log(arr); // output: [1, 2, 3, 4, 5]
여기까지 자주 쓰이는 Array 함수 5가지 설명 2탄을 마치고 3탄에서는 indexOf(), join(), concat(), sort(), reverse() 설명으로 돌아오겠습니다.
혹, 이해가 어려운 예시나 틀린 예시가 있다면 댓글로 알려주시면 감사드리겠습니다.
