🍏Slice vs Splice vs Split의 차이점

자바스크립트를 공부하다가 slice,splice,split의 차이가 너~무 헷갈리는 것이다. 영어단어도 비슷하게 생겨가지규..😭
그래서 이번에 정리해서 머릿속에 집어 넣어야겠다~~!! 오늘은 인도 개발자의 도움을 받았다! 글로벌한 개발자 세계><

우선 method type으로 이 셋을 나눌 수 있다.

Array method: Slice() and Splice()
String method: Split()

Slice()

slice()는 배열 메서드로 원하는 부분을 복사하고 새로운 배열로 리턴한다.
배열을 변경하지 않는 것이 핵심이다.
아래 예시를 살펴보자.

//loaf3과 loaf5를 새 배열에 복사하고 싶어욧..

let bread=['loaf1','loaf2','loaf3','loaf4','loaf5','loaf6'];
newArr=bread.slice(2,5);
//output:["loaf3", "loaf4", "loaf5"]

Splice()

Splice() 또한 배열 메서드로 배열에 원하는 엘리먼트 갯수를 추가하거나 제거할 수 있다. 이는 기존 배열에 변이를 준다.

1. 제거만 할 경우

let bread = ['loaf1','loaf2','loaf3','loaf4','loaf5','loaf6'];
bread.splice(1, 3);
["loaf2", "loaf3", "loaf4"]
//output:["loaf1", "loaf5", "loaf6"]

2.제거하고 새로운 엘리먼트를 추가하는 경우

let bread = ['loaf1','loaf2','loaf3','loaf4','loaf5','loaf6'];
bread.splice(1, 3, 'newLoaf1', 'newLoaf2');
console.log(bread);
//output:["loaf1", "newLoaf1", "newLoaf2", "loaf5", "loaf6"]

3.추가만 하는 경우

let bread = ['loaf1','loaf2','loaf3','loaf4','loaf5','loaf6'];
bread.splice(3, 0, 'newLoaf1', 'newLoaf2');
console.log(bread);
//output:["loaf1", "loaf2", "loaf3", "newLoaf1", "newLoaf2", "loaf4", "loaf5", "loaf6"]

Split()

Split()은 string 메서드지만 배열을 리턴한다. 문자열을 배열로 전환할 때 매우 유용하다.
예시를 살펴보장!

let myString = "the quick brown fox jumps over the lazy dog";
//For a comma separated array use " ":
myString.split(" ");
//output: ["the", "quick", "brown", "fox", "jumps", "over", "the", "lazy", "dog"]
//For each alphabet as element of array use "":
myString.split("");
//output: ["t", "h", "e", " ", "q", "u", "i", "c", "k", " ", "b", "r", "o", "w", "n", " ", "f", "o", "x", " ", "j", "u", "m", "p", "s", " ", "o", "v", "e", "r", " ", "t", "h", "e", " ", "l", "a", "z", "y", " ", "d", "o", "g"]

💖 알아두면 좋은 팁

1. 배열에 split()을 적용하기 위해 .toString()을 사용하여 string으로 전환해라.

var myString = array.toString();

2.string을 배열로 전환하기위해 ("")와 함께 split을 사용해라

myString.split(" ");

결론
많이 써봐야 다시 확실하게 차이점을 익힐 수 있을 것 같다!
정리를 하니까 더 이해가 되는군~!

참고:https://medium.com/@anupamroy8/slice-vs-splice-vs-split-in-javascript-344c41cb94a5