[JS/Method] slice(), splice(), split() 에 대해 알아보자.

코딩 테스트 문제들을 풀면서 slice(), splice(), split() 메서드를 자주 접했을 겁니다.

근데 저는 이 메서드들이 다 비슷비슷해서 자세히 보지 않는 한 큰 차이가 없어보이더라구요.

그래서 이 번 포스팅에서 확실히 다뤄 보려합니다.

 

• slice(), splice() 메서드는 배열을 다룰 때 자주 사용하는 함수

slice()	splice()
원본 배열은 수정되지 않는다	원본 배열 자체를 수정한다.

 

• split()는 문자열을 특정 문자를 기준으로 나눠, 배열로 바꿀 때 사용하는 함수

 

---

Array​.prototype​.slice()

slice()는 begin부터 end 전까지의 복사본을 새로운 배열 객체로 반환한다.

즉, 원본 배열은 수정되지 않는다.

arr.slice([begin[, end]])

 

begin: 추출 시작점에 대한 인덱스를 의미

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

 

end: 추출을 종료할 기준 인덱스. (end를 제외하고 그 전까지의 요소만 추출한다.)

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

 

출력결과

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

console.log(arr.slice(0)); // [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]
console.log(arr.slice(-2)); // [ 9, 10 ]
console.log(arr.slice(2)); // [ 2, 3, 4, 5, 6, 7, 8, 9, 10 ]
console.log(arr.slice(2, 5)); // [ 2, 3, 4 ]
console.log(arr.slice(2, -1)); // [ 2, 3, 4, 5, 6, 7, 8, 9 ]
console.log(arr.slice(-2, -1)); // [ 9 ]

 

---

Array​.prototype​.splice()

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

즉, 원본 배열 자체를 수정한다.

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

 

start : 배열의 변경을 시작할 인덱스

• 배열의 길이보다 큰 값일 경우 : 실제 시작 인덱스는 배열의 길이로 설정됩니다.
• 음수인 경우 : 배열의 끝에서부터 요소를 세어나갑니다(원점 -1, 즉 -n이면 요소 끝의 n번째 요소를 가리키며 array.length - n번째 인덱스와 같음).
• 값의 절대값이 배열의 길이 보다 큰 경우 : 0으로 설정됩니다.

 

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

• deleteCount를 생략하거나 값이 array.length - start보다 크면 start부터의 모든 요소를 제거합니다. 
• deleteCount가 0 이하라면 어떤 요소도 제거하지 않습니다. 이 때는 최소한 하나의 새로운 요소를 지정해야 합니다.

 

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

• 아무 요소도 지정하지 않으면 splice()는 요소를 제거하기만 합니다.

 

출력결과

console.log(arr.splice()) 로 splice 한 결과를 출력할 시 삭제된 요소가 출력됩니다.

const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let a = arr.splice(3);

console.log(a); // 삭제된 요소 [ 3, 4, 5, 6, 7, 8, 9, 10 ]
console.log(arr); // splice 후 arr [ 0, 1, 2 ]

 

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

console.log(arr.splice(3, 6,"A", "B", "C")); // [ 3, 4, 5, 6, 7, 8 ]
console.log(arr); // [ 0, 1, 2, 'A', 'B', 'C', 9, 10 ]

 

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


console.log(arr.splice(0)); // [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]
console.log(arr.splice(2)); // [ 2, 3, 4, 5, 6, 7, 8, 9, 10 ]
console.log(arr.splice(0, 3)); // [ 0, 1, 2 ]
console.log(arr.splice(2, 5)); // [ 2, 3, 4, 5, 6 ]
console.log(arr.splice(1, 4)); // [ 1, 2, 3, 4 ]
console.log(arr.splice(11)); // [] 
console.log(arr.splice(-2)); // [ 9, 10 ] 
console.log(arr.splice(1, 11)); //  [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]
console.log(arr.splice(3, -4)); // []

 

---

String.prototype.split()

split() 는 String 객체를 지정한 구분자를 이용하여 여러 개의 문자열로 나누어 배열(Array)에 저장하여 반환합니다.

split(separator, limit)

 

인자명	데이터형식	필수/옵션	설명
separator	string	옵션	원본 문자열을 끊어야 할 부분을 나타내는 문자열
limit	number	옵션	끊어진 문자열의 최대 개수를 나타내는 정수

 

 

출력결과

const str = 'A, B, C, D, E, F, G, H, I, J, K';
const str2 = '0123456789';
const str3 = 'this|is|a|Test'


/* 쉼표를 기준으로 문자열을 나누어 배열로 만들기 */
console.log(str.split(','))   // [ 'A', ' B', ' C', ' D', ' E', ' F', ' G', ' H', ' I', ' J', ' K' ]

    // 쉼표가 없으므로 배열에는 문자열이 하나만 들어감
console.log(str2.split(',')) // [ '0123456789' ]
console.log(str3.split(',')) // [ 'this|is|a|Test' ]


/* 특정 문자를 기준으로 문자열을 나누어 배열로 만들기 */
console.log(str3.split('|')) // [ 'this', 'is', 'a', 'Test' ]

/* 한 문자 씩 배열로 만들기 */
console.log(str2.split('')) // [ '0', '1', '2', '3', '4', '5', '6', '7', '8', '9' ]
console.log(str3.split('')) // [ 't', 'h', 'i', 's', '|', 'i', 's', '|', 'a', '|', 'T', 'e', 's', 't' ]


/* limit 옵션 사용 */
    // limit : 3 으로 지정하면 배열의 길이가 3이 됨
console.log(str2.split('', 3)) // [ '0', '1', '2' ]

    // limit : 0 으로 지정하면 빈 배열이 됨
console.log(str2.split('', 0)) // []