[자바스크립트] slice, splice, split 의 차이

[자바스크립트] slice() vs splice() vs split()

 

 

 

 

 

자바스크립트에서 제공하는 배열에 관련된 함수들로,

이름이 비슷하여 맨날 헷갈리는 친구들인데, 맨날 찾지말고 정리해보자

 

 

 

 

 

간단히,

• Slice(startIdx, endIdx) : 원본은 건들지 않고 배열 자르기
• Splice(startIdx, number, elementToAdd) : 원본을 자르거나 추가하기
• Split(separator, limit) : 문자열을 잘라서 배열로 변환 (문자열 => 배열)

 

 

 

 

 

 

 

 

---

 

 

 

 

 

 

1) slice() : 원본을 건들지않고, 복사된 array를 return!

 

 

 

array.slice(startingIndex, endIndex);

 

• startingIndex : 시작 index 
• endIndex : 끝 index (끝 index 는 포함 X)

 

 

---

예시)

 

var origArray = [1, 2, 3, 4, Apple, Mac];

var newArray = array.slice(0,4);



//결과값
//origArray = [1, 2, 3, 4, Apple, Mac];   //원본은 변하지 않지!
//newArray = [1, 2, 3, 4];

 

=> origArray 는 그대로 있고, 복사된 배열이 newArray 에 리턴된다!

 

---

 

 

 

 

 

 

 

 

 

 

2) splice() : 원본 배열을 remove or add

 

 

 

array.splice(startingIndex, number of elements);

 

• startingIndex : 시작 index
• number of elements : 시작 index 부터 몇개나?

 

 

---

예시 1)

 

var origArray = [1, 2, 3, 4, Apple, Mac];

var newArray1 = array.splice(2);


//origArray = [1, 2];   //index(2) 이후로는 사라짐
//newArray1 = [3, 4, Apple, Mac];

 

 

 

 

 

예시 2)

 

var origArray = [1, 2, 3, 4, Apple, Mac];

var newArray2 = array.splice(2, 1);


//origArray = [1, 2, 4, Apple, Mac];   //원본에서 3이 사라짐
//newArray2 = [3];  //잘려져 나온 3

 

 

 

 

 

 

예시 3)

 

var origArray = [1, 2, 3, 4, Apple, Mac];

//index(0) 부터 0개 remove 하고, 뒤의 요소 add
var newArray3 = array.splice(0, 0, 'Samsung', 'Galaxy');


//'Samsung', 'Galaxy' 가 맨앞에 추가됨
//origArray = ['Samsung', 'Galaxy', 1, 2, 3, 4, Apple, Mac];
//newArray3 = [ ];

 

---

 

 

 

 

 

 

 

 

 

 

 

3) Split() : 문자열을 잘라서 배열로 변환

 

 

 

"string".split(separator, limit);

 

• Separator : 문자열을 자르는 기준
• Limit : 문자열을 자를 횟수 제한(숫자)

 

---

예시)

 

var string = "하나, 둘, 셋, 넷, 다섯여섯일곱";

var newArray = string.split(",", 3);


//결과값:
//newArray = ["하나", "둘", "셋"];

 

=> 콤마로 나누고, 3개까지 제한하므로 "하나", "둘", "셋" 까지만 변환됨!

 

---

 

 

 

 

 

 

 

 

 

Don't stop!