위코드 사전 스터디를 듣고 쓰는 글입니다.
수업 내용을 참고/인용하여 작성했습니다.

미루고 미뤘던 배열의 메소드 중 하나, slice()입니다!
지난번에 배열의 구간 선택 삭제를 할 때 splice메소드를 이용했는데, slice는 스펠링이 조금 비슷하지만 완전히 다른 메소드입니다.

개인적으로 slice라고 하면 이런 이미지가 떠올라서, 배가 고파지네요.

Slice?

slice 메서드는 배열 내의 특정한 요소의 index 범위에 따라 새로운 배열을 리턴합니다.
splice 메서드와는 다르게 slice 메서드는 원본 배열을 변형시키지 않습니다.
그렇기 때문에 이 메서드를 사용할 때는 slice 메서드를 적용한 새로운 변수를 선언해주어야 합니다.

splice와의 가장 큰 차이점은 원본 배열을 변형시키지 않는다는 것이네요.

친절하게 이미지로 설명해주셔서 가져왔습니다. 물론 end 지점은 선택적이므로, start 부분만 써줘도 작동하긴 합니다.

• start : 배열의 index의 시작점
• end : 배열의 index의 끝점

표현과 활용

바로 적용해볼까요?

let papers = ['일반지','고급지','특수지','판지','스티커','디지털인쇄']
//일반지에서 특수지까지 건져 봅니다.
papers.slice(0,3);//0번째 인덱스부터 3번째 인덱스 직전까지
//Array(3) [ "일반지", "고급지", "특수지" ]

papers.slice(2);//2번째 인덱스부터 끝까지 전부
//Array(4) [ "특수지", "판지", "스티커", "디지털인쇄" ]

papers.slice(2,3);//2번째 인덱스부터 3번째 인덱스 직전까지
//Array [ "특수지" ] //1개만 선택되었다!

그런데 갑자기 종이의 양이 엄청나게 불어서,

let papers = ['일반지','고급지','특수지','판지',...
              
              //이 사이에 엄청 많은 종이들이 새로 추가됨
                
              '스티커','디지털인쇄']

배열이 한 467546343245개정도로 늘어났다고 해봅시다.
그리고 우리는 여기서 스티커 와 디지털인쇄 종이가 필요한데, 여기서 확실한건 스티커와 디지털인쇄의 종이의 순번은 항상 마지막에서 1번째와 2번째라는 겁니다.
그럼 우리가 467546343245개의 인덱스 수를 다 세어서 slice 해야할까요? 결론부터 말하면 아닙니다.

slice(-2)
//Array [ "스티커", "디지털인쇄" ]

이렇게 음수로 하나만 지정해주면, 맨 끝 index에서부터 2개를 가져올 수 있습니다.
다시 6개짜리 배열로 돌아와서..

이렇게 쓰면 않되!(안돼)

이런 식으로 해보면 어떨까요?

let papers = ['일반지','고급지','특수지','판지','스티커','디지털인쇄']

papers.slice(-1,-3); 
papers.slice(-1,2);

이런.. 빈 array만 나옵니다.
그런데 이렇게 하면,

papers.slice(-3,-1); //Array [ "판지", "스티커" ]
papers.slice(1,-1);//Array(4) [ "고급지", "특수지", "판지", "스티커" ]

이건 됩니다!!!!
윗줄 인자와 아랫줄 인자의 차이는 인자의 start가 end보다 값이 크거나 절대값이 크다는 공통점이 있네요. 인자를 입력해줄때 주의하도록 합시다.

예제

array 감옥에 갇힌 2를 구해주세요.
단, slice 메서드를 사용해야 하며, slice 메서드 괄호 안에는 음수만 들어갈 수 있습니다.

let prisoners = [[0, 1],[1,2],[0,0]];

//정답
function saveNumberTwo(prisoners) {
  let temp = prisoners.slice(-2,-1);
  let answer = temp[0][1]; 
  return answer;
}

saveNumberTwo(prisoners);

갑자기 예제에서부터 다차원 배열이 나와 당황스럽습니다.
당황하지 않고 한줄한줄 해석해볼게요.

function saveNumberTwo(prisoners) {

함수 saveNumberTwo는 prisoners라는 매개변수를 가진 함수입니다.

 let temp = prisoners.slice(-2,-1);

변수 temp는

• 배열prisoners의 끝에서 2번째 요소인 [1,2]부터
• 끝에서 1번째 요소인 [0,0]까지 slice해준 값을

옮겨둘 배열입니다.

let answer = temp[0][1]; 
return answer;

변수 answer은 배열 temp의 0번째 인덱스의 1번째 인덱스입니다.그리고 answer의 값을 반환해줍니다.

해결!

마무리

slice 메소드는 이후에도 쓸 일이 많기 때문에 예제와 같이 조금 길게 글을 썼습니다. 아마 추후에 나올 다른 메소드들도 이런 식으로 예제 문제를 활용해서 써질 것 같네요!