[TIL] slice, splice, split 메서드의 차이!

SammyJung·2021년 9월 26일

알고리즘 k번째 수 문제를 오랫만에 다시 풀어보면서 그동안 헷갈렸던😵‍💫

스시리즈 메서드 삼대장 splice slice split를 한번 정리해봐야겠다는 생각이 들었따!

들어가면서)

오랫만에 MDN을 정독하면서 메서드를 꼼꼼히 살펴봤다.
정리를 그다지 깔끔하게는 하지 못했지만 MDN의 예제와 매개변수들을 차근차근 보는 것을 추천한다. 사실 내 글보다 MDN이 더 잘 정리 되어있고, 내 글에서는 색깔로 표시한 부분과 예제 몇개만 참고 하면 좋을것 같다.

자! 그러면 slice splice split의 차이점을 살펴보자!✍

1) 시작과 끝 인덱스 번호 (뿌셔!)

1) Slice

from Mozilla MDN의 설명과 예시를 참고했다

slice() 메서드는 어떤 배열의 begin부터 end까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환한다.

slice 는 end 인덱스를 제외하고 추출한다는 점을 다시 한 번 기억하자!

아래 예시를 보면 start인덱스인 2번 펭수는 포함하고 end 인덱스 짱구 4번 은 포함이 안되는 점을 주의 해야한다.

예시)

const animals = ['새미0', '재원1', '펭수2', '둘리3', '짱구4'];

console.log(animals.slice(2));
// expected output: Array ["펭수2", "둘리3", "짱구4"]

console.log(animals.slice(2, 4));
// expected output: Array ["펭수2", "둘리3"]

음수 인덱스는 배열의 끝에서부터의 길이를 나타냅니다. 
예를들어 slice(2,-1) 는 세번째부터 끝에서 두번째 요소까지 추출합니다.

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

console.log(animals.slice(2, -1));
// expected output: Array ["camel", "duck"]

end가 생략되면 slice()는 배열의 끝까지(arr.length) 추출합니다.
만약 end 값이 배열의 길이보다 크다면, silce()는 배열의 끝까지(arr.length) 추출

시작은 기억하고 끝은 기억을 못하는 슬라이스좌..! 건망증이 심한 아이로 기억해보려고 한다!ㅎㅎㅎ

2) Splice

splice() 메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경합니다.

예시)

const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// inserts at index 1
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "June"]

months.splice(4, 1, 'May');
// replaces 1 element at index 4
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "May"]

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

매개변수로 start,deleteCount,, item1[, item2[, ...]이렇게 크게 세가지를 받을 수 있다

요소를 제거하고 삽입하는 예제) (자주 쓰지는 않아서 참고만 하면 좋을 것 같다)

하나도 제거하지 않고, 2번 인덱스에 "drum" 추가
var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
var removed = myFish.splice(2, 0, 'drum');

// myFish is ["angel", "clown", "drum", "mandarin", "sturgeon"]
// removed is [], no elements removed
Copy to Clipboard
하나도 제거하지 않고, 2번 인덱스에 "drum"과 "guitar" 추가
var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
var removed = myFish.splice(2, 0, 'drum', 'guitar');

// myFish is ["angel", "clown", "drum", "guitar", "mandarin", "sturgeon"]
// removed is [], no elements removed
Copy to Clipboard
3번 인덱스에서 한 개 요소 제거
var myFish = ['angel', 'clown', 'drum', 'mandarin', 'sturgeon'];
var removed = myFish.splice(3, 1);

// removed is ["mandarin"]
// myFish is ["angel", "clown", "drum", "sturgeon"]
Copy to Clipboard
2번 인덱스에서 한 개 요소 제거하고 "trumpet" 추가
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는 원본 배열의 복사본을 가지고 수정한뒤 반환한다!
splice는 원본 배열 자체를 수정해버린다. 요소를 추가 하거나 삭제!

결론은!

배열을 자르기만 하거나 할 때는 slice를!
요소를 인덱스를 기준으로 추가 삭제할 때 splice를 쓰자!

3) Split(문자열을 배열로 변환)

split은 공백제거나 정규식 표현에서 활용할 수 있는 메서드이다!
문자열을 잘라서 하나씩 담아서 배열로 반환할수 있다는 점을 기억하자!

String.prototype.split()
split() 메서드는 String 객체를 지정한 구분자를 이용하여 여러 개의 문자열로 나눈다.

문자열을 'separator'로 잘라서,
'limit' 크기 이하의 배열에 잘라진 문자열을 저장하여 리턴합니다.
separator(구분자)
문자열을 잘라 줄 구분자 (문자열 또는 정규식)
필수 아닌 선택!=> 값이 입력되지 않으면 문자열 전체를 배열에 담아서 리턴합니다.
limit(최대 분할 갯수)

예제)

function splitString(stringToSplit, separator) {
  var arrayOfStrings = stringToSplit.split(separator);
}

var tempestString = 'Oh brave new world that has such people in it.';
var monthString = 'Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec';

var space = ' ';
var comma = ',';

splitString(tempestString, space);
splitString(tempestString);
splitString(monthString, comma);

위 예제의 출력

원본: "Oh brave new world that has such people in it."
구분자: " "
10개의 요소를가진 배열: Oh / brave / new / world / that / has / such / people / in / it.

원본: "Oh brave new world that has such people in it."
구분자: "undefined"
1개의 요소를가진 배열: Oh brave new world that has such people in it.

원본: "Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec"
구분자: ","
12개의 요소를가진 배열: Jan / Feb / Mar / Apr / May / Jun / Jul / Aug / Sep / Oct / Nov / Dec

문자열에서 공백 제거하는 예제

문자열에서 공백 제거하기

다음 예제에서 split()은 세미콜론 앞뒤에 각각 0개 이상의 공백이 있는 부분 문자열을 찾고, 있을 경우 문자열에서 세미콜론과 공백을 제거합니다. split()의 결과로 반환된 배열은  nameList에 저장됩니다.

var names = 'Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ;Chris Hand ';

console.log(names);

var re = /\s*(?:;|$)\s*/;
var nameList = names.split(re);

console.log(nameList);

Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ;Chris Hand
[ "Harry Trump", "Fred Barney", "Helen Rigby", "Bill Abel", "Chris Hand", "" ]
split에 대한 자세한 내용과 더 많은 예제는 MDN을 참고하자~

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/split