강의로 돌아가기
JaanMun

.slice가 아닌 .splice 메서드를 사용한 경우

.splice 메서드를 사용한 경우에도 똑같은 결과값이 반환되는데
풀이 점수가 60점인 이유가 궁금합니다.

  • 이한결

    저도 그런 현상이 생겨서 궁금합니다...

    이한결―2022.10.26 20:01
  • 안재하

    저런..

    안재하―2022.11.04 16:00
1 개의 답변
choeseoggyu

안녕하세요 올해 화공계열 전공에서 컴퓨터공학과로 전과를 하여 3학년 재학중인 학생입니다.

질문 올리신 내용에 대해 우선 splice 메소드와 slice 메소드가 갖는 파라미터값이 어떤 의미인지를 살펴보시면 될 것 같습니다. 먼저 splice와 slice 메소드 두가지 모두 첫번째 파라미터는 start로 잘라낼 인덱스의 시작점을 의미합니다.
문제는 두번째 파라미터입니다.

splice의 내부를 살펴보자면 splice(start, deleteCount) 로 구성되어있습니다. (splice 메소드의 3번째 파라미터부터는 추가할 요소이므로 생략하겠습니다.)
그리고 slice 메소드는 slice(begin, end)로 구성되어있습니다.

여기까지만 보셔도 아 ..! 라는 반응을 보이실텐데 조금 더 설명을 드리자면

slice(start : 추출을 시작할 인덱스, end: 추출을 끝낼 인덱스)
splice( start : 자르기 시작할 인덱스, deleteCount : start부터 어디까지 삭제할지에 대한 int 값)
다시말해 splice 메소드의 deleteCount 파라미터는 start부터 n개를 삭제하겠다에 대한 값입니다.
주의하실점은 end 파라미터는 지정된 인덱스를 포함하여 끝내지않고 지정된 인덱스 앞에서 추출을 끝냅니다.

예시로 보여드리자면

var numArray = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

var slice = numArray.slice(3, 4 + 1); // numArray[3]부터 numArray[4]까지 **추출**
var splice = numArray.splice(3, 4); // numArray[3]부터 4개의 인덱스 값 **삭제**

slice => [3, 4] // 추출된 요소들이 새로운 배열에 담겨 반환
splice => [3, 4, 5, 6] // 제거된 요소들 반환

마지막으로 논외이지만 splice 메소드는 기존 배열에 영향을 주지만 slice 메소드는 기존 배열에 영향을 주지않습니다 !
따라서 splice가 slice보다 먼저 호출된다면 결과값은 이렇게 바뀌게 됩니다.

var numArray = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

var splice = numArray.splice(3, 4); // numArray[3]부터 4개의 인덱스 값 **삭제**
// numArray 배열이 [0, 1, 2, 7, 8, 9]로 수정됩니다.

var slice = numArray.slice(3, 4 + 1); // numArray[3]부터 numArray[4]까지 **추출**

slice => [7, 8] // 추출된 요소들이 새로운 배열에 담겨 반환
splice => [3, 4, 5, 6] // 제거된 요소들 반환

혹시라도 틀린 부분이 있다면 말씀해주주세요. 감사히 듣고 더 열심히 공부하겠습니다 !

아래는 splice와 slice에 대한 MDN 설명 링크입니다 .

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

  • 정호중

    감사합니다 덕분에 이해했습니다. 문제에서는 자르기를 시작 지점(인덱스)과 자르기를 끝낼 지점(인덱스)를 지정해준다고 설명했는데, splice는 시작 지점 부터 몇개를 자를건지 지정하기 때문에 return numbers.splice(num1, num2)가 안되는거였군요

    정호중―2023.09.14 00:17
  • JaanMun

    알림을 지금에서야 확인했네요.. 죄송합니다. 이해하기 쉽게 설명해주신 덕분에 각 메서드의 핵심이 무엇인지 그리고 어떤 동작 원리로 동작하는지 제대로 이해할 수 있게 되었어요. 긴 글 상세히 남겨주셔서 정말 감사합니다 !!

    JaanMun―2023.11.15 15:02
답변 쓰기
이 입력폼은 마크다운 문법을 지원합니다. 마크다운 가이드 를 참고하세요.