slice, splice, split 메소드

# slice (배열의 일부분, 부분 배열을 얕게 복사하여 반환)

: 원본 배열은 수정되지 않는다 즉, immutable(배열이 변하지 않음) 이다

문법 : slice(start[, end])

start : 추출을 시작하는 인덱스

• undefined 인 경우 : 0번째 인덱스부터 slice
• 음수를 지정한 경우 : 배열의 끝에서부터의 길이를 나타낸다. Ex) slice(-2)이면 배열의 마지막 2개의 요소를 추출
• 배열의 길이와 같거나 큰 수를 지정한 경우 : 빈 배열을 반환

end : 추출을 종료 인덱스(end의 바로 앞자리 요소까지만 추출)

• 지정하지 않을 경우 : 배열의 끝까지 slice
• 음수를 지정한 경우 : 배열의 끝에서부터의 길이를 나타낸다. Ex) slice(2,-1)를 하면 세번째부터 끝에서 두번째 까지 추출출
• 배열의 길이와 같거나 큰 수를 지정한 경우 : 빈 배열을 반환

반환값 : 추출한 요소들을 새로운 배열로 반환

 

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

let arr1 = arr.slice(3, 5); 		// [4, 5]
// 3번 인덱스부터 ~ 5번 인덱스 이전의 요소까지 추출
let arr2 = arr.slice(undefined, 5); 	// [1, 2, 3, 4, 5]
// 0번 인덱스부터 ~ 5번 인덱스 이전의 요소까지 추출
let arr3 = arr.slice(-3); 		// [8, 9, 10]
// 배열의 끝에서부터 3개 요소 추출
let arr4 = arr.slice(-3, 9); 		// [8, 9]
// 배열 끝에서부터 3번째 숫자인 8부터 앞에서부터 9번째 숫자(10) 이전의 요소까지 추출 즉, 8과 9 추출
let arr5 = arr.slice(10); 		// []
// 10번 인덱스부터 추출하면 요소가 없으므로 빈 배열을 리턴
let arr6 = arr.slice(4); 		// [5, 6, 7, 8, 9, 10]
// 4번 인덱스부터 ~ 끝까지 추출
let arr7 = arr.slice(undefined); 	// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
// undefined는 0번 인덱스부터 ~ 끝의 요소까지 추출
let arr8 = arr.slice(5, -4); 		// [6]
// 5번 인덱스부터 ~ 배열의 끝에서 4번째인 숫자(7) 이전의 요소까지 추출 즉, 6을 추출
let arr9 = arr.slice(2, 15); 		// [3, 4, 5, 6, 7, 8, 9, 10]
// 2번 인덱스부터 ~ 15번 인덱스 전의 요소까지 끝까지 추출이지만 초과하므로 끝까지를 의미

 

let str1 = 'The morning is upon us.', // length : 23
str2 = str1.slice(1, 8); // he morn
// 1번 인덱스부터 ~ 8번 인덱스 이전까지 추출
str3 = str1.slice(4, -2); // morning is upon u
// 4번 인덱스부터 ~ 배열 끝에서부터 2번째 요소인(문자=s) 이전까지 추출 
str4 = str1.slice(12); // is upon us.
// 12번 인덱스부터 ~ 끝까지 추출
str5 = str1.slice(30); // ""
// 30번 인덱스는 없으므로 빈 문자열 추출
let str = 'The morning is upon us.';
str.slice(-3);     // us.
// 배열 끝에서부터 3번째 요소인(문자=u)부터 ~ end없으므로 끝까지 추출
str.slice(-3, -1); // us
// 배열 끝에서부터 3번째 요소인(문자=u)부터 ~ 배열 끝에서 1번째 요소인(문자=.)이전까지 추출
str.slice(0, -1);  // The morning is upon us
// 0번 인덱스부터 ~ 배열 끝에서 1번째 요소인(문자=.) 이전까지 추출

---

# splice (배열의 기존 요소를 삭제 or 새 요소를 추가하여 배열의 내용 변경)

: 원본 배열 자체를 수정하므로 mutable(배열이 변함) 이다

문법 : splice(start[, deleteCount][, item1[, item2[, ...]]]])

start : 추출을 시작하는 인덱스

• 음수를 지정한 경우 : 배열의 끝에서부터 요소를 센다.
• 배열의 길이보다 큰 수를 지정한 경우 : 실제 시작 인덱스는 배열의 길이로 설정
• 절대값이 배열의 길이보다 큰 경우 : 0으로 세팅

deleteCount : 배열에서 제거할 요소의 수

• 생략 / 값이 array.length-start보다 큰 경우 : start부터의 모든 요소를 제거
• 0 이하의 수를 지정 : 어떤 요소도 제거되지 않는다 

item1, item2, ... : 배열에 추가할 요소

• 지정하지 않을 경우 : 배열의 끝까지 slice

반환값 : 추출한 요소들을 새로운 배열로 반환

• 아무 값도 제거하지 않았으면 빈 배열을 반환

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];

let arr1 = arr.splice(10, 2, 'a', 'b', 'c'); 
// 10번 인덱스부터, 배열에 2개의 요소(11,12)를 삭제하고, 'a','b','c'를 배열에 요소로 추가

console.log(arr); // 원본 배열 arr의 내용이 [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, "a", "b", "c"]로 바뀌었다.(mutable)
console.log(arr1); // 원본 배열에서 삭제된 요소들인 [11, 12]을 arr1 변수에 담는다

 

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];

let arr1 = arr.splice(-6, 4); // 배열의 끝에서 6번째 요소(숫자7)부터 배열에 4개의 요소(7,8,9,10)를 삭제한다

console.log(arr); // 원본 배열 arr의 내용이 [1, 2, 3, 4, 5, 6, 11, 12]로 바뀌었다. (mutable)
console.log(arr1); // 원본 배열에서 삭제된 요소들인 [7,8,9,10]을 arr1 변수에 담는다

 

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];

let arr1 = arr.splice(-13, 1); // 배열의 끝에서 13번째 요소(없음=0)부터 배열에 1개의 요소(1)를 삭제한다

console.log(arr); // 원본 배열 arr의 내용이 [2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]로 바뀌었다. (mutable)
console.log(arr1); // 원본 배열에서 삭제된 요소들 [1]을 arr1 변수에 담긴다

 

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];

let arr1 = arr.splice(3); // 3번 인덱스 요소인(숫자=4)부터 끝까지 모두 제거한다.
// deleteCount가 생략되면, 지정한 start 인덱스부터 끝까지 모두 제거한다.

console.log(arr); // 원본 배열 arr의 내용이 바뀌었다.(mutable) [1, 2, 3] 
console.log(arr1); // 원본 배열에서 삭제된 요소들인 [4, 5, 6, 7, 8, 9, 10, 11, 12]을 arr1 변수에 담는다.



let arr2 = arr1.splice(6, 4); // 6번 인덱스 요소인(숫자=10)부터 끝까지 모두 제거한다.
// deleteCount(4)가 array.length(9)-start(6)의 값(3)보다 큰 경우 
// 지정한 start 인덱스 요소인(숫자=10)부터 끝까지 모두 제거한다.

console.log(arr1); // 원본 배열 arr1의 내용이 [4, 5, 6, 7, 8, 9]로 바뀌었다. (mutable) 
console.log(arr2); // arr1 배열에서 삭제된 요소들인 [10, 11, 12]을 arr2 변수에 담는다

 

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];

let arr1 = arr.splice(5, 0, 'add');
// 5번 인덱스 요소부터 ~ 배열에 0개의 삭제하고, 'add' 요소를 추가한다.
// deleteCount가 0이거나 0보다 작으면 어떤 요소도 삭제되지 않는다.

console.log(arr); // 원본 배열 arr의 내용이 [1, 2, 3, 4, 5, "add", 6, 7, 8, 9, 10, 11, 12]로 바뀌었다. (mutable)
console.log(arr1); // 원본 배열에서 삭제된 요소들 []을 arr1 변수에 담는다.

 

# split (기준이 되는 문자로 문자열을 잘라 배열로 반환)

: 원본 배열 건들이지 않는다.

문법 : slice(separator[, limit])

separator : 원본 문자열을 끊어야 할 부분을 나타내는 문자열을 나타낸다.

• 빈 문자열일 경우 : str의 각각의 문자가 배열의 원소 하나씩으로 변환된다.
• 생략되거나 str에 없는것을 넣을 경우 : 원본 문자열을 유일한 원소로 가진다.
• 두 글자 이상으로 끊으려하는 경우 : 끊으려는 부분 문자열 전체가 일치해야 끊어진다

let str = "123,456,789";
str.split('');	// 빈 문자열일 경우 ["1", "2", "3", ",", "4", "5", "6", ",", "7", "8", "9"]

let str = "123,456,789";
str.split();	// 생략되었을 경우 ["123,456,789"]

let str = "123,456,789";
str.split('z');	// srt에 없는것을 넣을 경우 ["123,456,789"]

let message = "Still waters run deep.";
message.split(" "); // 공백을 기준으로 문자열을 쪼갠다. ["Still", "waters", "run", "deep."]

let wordOfTwo = "applemint applejuice applebread applePhone";
wordOfTwo.split('apple'); // 두 글자 이상일 경우 ["", "mint ", "juice ", "bread ", "Phone"]

 

limit : 끊어진 문자열의 최대 개수를 나타내는 정수이다.

• 문자열의 갯수보다 많거나 지정하지 않거나 음수거나 undefined 일 경우: 전체를 반환(왜냐하면 정수이기때문에)

let message = "Still waters run deep.";
message.split(" ", 2); // 공백을 기준으로 2개를 문자열을 쪼갠다. ["Still", "waters"]

let message = "Still waters run deep.";
message.split(" ", 10); // 공백을 기준으로 2개를 문자열을 쪼갠다. ["Still", "waters", "run", "deep."]
message.split(" ", -50); // 공백을 기준으로 2개를 문자열을 쪼갠다. ["Still", "waters", "run", "deep."]
message.split(" ", undefined); // 공백을 기준으로 2개를 문자열을 쪼갠다. ["Still", "waters", "run", "deep."]
message.split(" ", null); // []

 

반환값 : 추출한 요소들을 새로운 배열로 반환