프로그래머스 배열 자르기 자바스크립트 | Array.prototype.slice() | splice()와 차이

Chaeyeon Lee·2023년 5월 19일
0

🔅 1. 아이디어

파이썬 공부하다가 배열을 자르는 유용한 방법이 있었는데 자바스크립트에도 역시 있어서 편하게 그걸 썼다.

🧑‍💻 2. 내 코드

function solution(numbers, num1, num2) {
    var answer = numbers.slice(num1, num2+1);
    return answer;
}

🐣 3. 개념

📌 Array.prototype.slice()

위 메서드는 어떤 '배열'의 begin부터 end까지(end미포함)에 대한 '새로운 배열 객체'로 반환한다. 원본배열은 안 바뀜

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));
// Expected output: Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// Expected output: Array ["camel", "duck"]
//인덱스 4 전까지!

console.log(animals.slice(1, 5));
// Expected output: Array ["bison", "camel", "duck", "elephant"]

console.log(animals.slice(-2));
// Expected output: Array ["duck", "elephant"]
//배열 뒤에서부터 인덱스는 -1부터 시작한다. 즉 위 코드는 begin이 -2기 때문에 duck부터 끝까지 자름

console.log(animals.slice(2, -1));
// Expected output: Array ["camel", "duck"]
//인덱스 -1 전까지만 자름

console.log(animals.slice());
// Expected output: Array ["ant", "bison", "camel", "duck", "elephant"]
//begin, end가 설정 안 되어 있으면 원본배열을 얕은 복사해서 그냥 반환
arr.slice([begin[, end]])

begin(opt) : 음수인덱스일 경우 끝에서부터의 길이를 나타냄. 정의되지 않은 경우 0번 인덱스부터 slice. 배열의 길이보다 길 경우 빈 배열 반환
end(opt) : end인덱스를 제외하고 그 전까지만 slice한다. 생략될 경우 혹은 배열 길이보다 길 경우 배열 끝까지 추출

📌 Array.prototype.splice()

위 메서드는 slice()와 굉장히 비슷한 이름을 가졌다. 배열의 기존 요소를 삭제/교체하거나 새 요소를 추가하여 원본배열의 내용을 변경한다. 그리고 제거한 요소를 담은 배열을 반환함. 제거된 요소를 제외한 배열이 반환되는 것이 아니다!

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

start: 배열의 변경을 시작할 인덱스. 배열의 길이보다 큰 값이면 실제 시작 인덱스는 배열의 길이로 설정된다.
deleteCount(opt): 배열에서 제거할 요소의 수. 생략하면 start부터 끝까지 제거한다.
item(opt): 배열에 추가할 요소. 지정하지 않으면 splice()는 모든 요소를 제거하기만 한다.

var myFish = ['angel', 'clown', 'drum', 'mandarin', 'sturgeon'];
var removed = myFish.splice(3, 1);

// removed is ["mandarin"]
// myFish is ["angel", "clown", "drum", "sturgeon"]
var myFish = ['angel', 'clown', 'drum', 'sturgeon'];
var removed = myFish.splice(2, 1, 'trumpet');

// myFish is ["angel", "clown", "trumpet", "sturgeon"]
// removed is ["drum"]


slice()와 splice()는 이름만 닮은 게 아니라 실제로 비슷한 역할을 한다.
자세히 본다면, slice는 begin인덱스부터 end인덱스 전까지의 요소를 담은 새로운 배열을 반환하고, 원본변경 안 한다.
splice()는 start인덱스부터 deleteCount개수만큼의 요소를 삭제하고, 그 자리에 새로운 요소를 추가할 수도 있다. 원본변경한다. 그리고 반환값은 제거된 요소들이 담긴 배열임!
이 차이를 이용해서 문제에 따라 다른 메서드를 사용할 수 있겠다.

👌다른 사람 풀이

function solution(numbers, num1, num2) {
    var answer = [];

    for (let i = num1; i < num2+1; i++) {
        answer.push(numbers[i])
    }

    return answer;
}

난 이런 풀이도 굉장히 좋아한다. for문을 자주 써서 그런지 i를 설정하는 것에 매력을 느끼는 듯 ㅋㅋ


출처
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/slice
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

profile
프론트엔드 개발자 지망생

0개의 댓글