[JavaScript] 비슷하게 생긴 메서드 slice, splice, split 비교하기

What

자바스크립트의 수많은 메서드를 공부하다 보면, 가끔 비슷하게 생겨서 이게 저거였는지 저게 이거였는지 헷갈리는 경우가 종종 발생한다. 나같은 경우는 slice, splice, split 이 삼총사가 헷갈렸다. 따라서 이번 기회에 포스팅함으로써 이 셋의 차이점을 제대로 기억하고자 한다.

 

How

slice() : Array, String

const arr = [1, 2, 3, 4, 5];

arr.slice(3); // [4, 5]
arr.slice(2, 3); // [3]
arr.slice(-1); // [5]
arr.slice(-4, -1); // [2, 3, 4]

slice()는 배열 메서드로 괄호 안에 인덱스를 인자로 넣으면, 그 인덱스에 해당하는 값부터 배열 끝까지 반환된다.

slice()의 인자를 1개 혹은 2개 넣을 수 있는데, 1개를 넣는 경우 해당하는 인덱스의 값부터 배열 끝까지 반환되고 2개를 넣는 경우 해당하는 인덱스의 값부터 다음 인덱스의 -1번까지 반환된다. 예를 들어 slice(2, 3)의 경우 인덱스 2번부터 인덱스 (3-1)번까지 반환되므로 인덱스 2번에 해당하는 값인 '3'이 반환되는 것이다.

 

음수를 넣는 경우는 일반적인 왼쪽(앞)부터 시작이 아닌 오른쪽(뒤)부터 인덱스를 세겠다는 뜻이다.

따라서 slice(-1)의 경우 제일 끝 인덱스의 값인 '5'가 반환된다.

 

slice()의 인자를 넣을 때는 규칙이 있는데, 첫 번째 인자가 두 번째 인자보다 크기가 작아야한다는 것이다.

slice(a, b)의 경우 a인덱스부터 b인덱스까지라는 뜻인데, 만약 a가 b보다 클 경우 계산이 역행하므로 아무것도 반환되지 않는다. 

 

slice()로 배열의 일부 값을 반환하고, 다시 console.log(arr)을 해보면 [1, 2, 3, 4, 5] 그대로 나오는 걸 볼 수 있다.

즉, slice()는 원본 배열을 건드리지 않는다.

 

splice() : Array

const arr = [1, 2, 3, 4, 5];

arr.splice(0, 1);
console.log(arr); // [2, 3, 4, 5];

arr.splice(0, 0, 1);
console.log(arr); // [1, 2, 3, 4, 5];

arr.splice(2, 1, 'a', 'b');
console.log(arr); // [1, 2, 'a', 'b', 4, 5];

splice()는 배열 메서드로 특정 인덱스를 기준으로 n개 삭제하고, 그 자리에 새로운 값을 추가할 수 있는 메서드이다.

또한, splice()는 원본 배열의 수정이 가능하다. 따라서 slice()처럼 단순히 배열의 값을 추출하는 게 아닌 배열 자체를 추가/삭제/변경하고 싶을 때 사용한다. splice(a, b, c1, c2)라고 하면 a는 인덱스, b는 삭제할 갯수, c는 추가할 값이다.

예를 들어 splice(2, 1, 'a', 'b')라면 2번 인덱스를 기준으로 1개의 값을 삭제하고 그 자리에 'a'와 'b'를 추가시킨다.

 

split() : String

const str1 = "I have a pen";
const res1 = str1.split(" ");
console.log(res1); ["I", "have", "a", "pen"];

const str2 = "I-have-a-pineapple";
const res2 = str2.split("-");
console.log(res2); ["I", "have", "a", "pineapple"];

split()은 배열이 아닌 문자 메서드로 특정 문자를 기준으로 문자를 원소화시켜 배열로 만드는 메서드이다.

사용법은 위의 코드에서 전부 보여주고 있으므로 딱히 설명하지 않겠다.

 

1. slice()는 원본은 안 건드리고 A인덱스부터 B인덱스까지 추출할 때 사용.
2. splice()는 원본에 값을 추가하거나 삭제하거나 수정할 때 사용.
3. split()은 문자열을 특정 문자 기준으로 배열화시키는 String 타입 메서드.