[JavaScript] slice vs splice vs split 차이점

s..pl..i..t..ce?

맨날 쓰면서도 이름이 비슷해서 그런가 저 세 메서드가 정리가 안되고 헷갈려서 이 참에 한번 시원하게 정리해보자~!

---

1. slice

Array.prototype.slice() 또는 String.prototype.slice()

`slice()` 메서드는 문자열 또는 배열에서 특정 범위의 요소들을 복사하여 새로운 문자열 또는 배열을 반환한다.

• Array

// 예제 출처: MDN web docs - Array.prototype.slice()

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));
// Expected output: Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// Expected output: Array ["camel", "duck"]

console.log(animals.slice(1, 5));
// Expected output: Array ["bison", "camel", "duck", "elephant"]

console.log(animals.slice(-2));
// Expected output: Array ["duck", "elephant"]

console.log(animals.slice(2, -1));
// Expected output: Array ["camel", "duck"]

console.log(animals.slice());
// Expected output: Array ["ant", "bison", "camel", "duck", "elephant"]

 

• String

// 예제 출처: MDN web docs - String.prototype.slice()

const str = 'The quick brown fox jumps over the lazy dog.';

console.log(str.slice(31));
// Expected output: "the lazy dog."

console.log(str.slice(4, 19));
// Expected output: "quick brown fox"

console.log(str.slice(-4));
// Expected output: "dog."

console.log(str.slice(-9, -5));
// Expected output: "lazy"

 

 

---

2. splice

Array.prototype.splice() 

`splice()` 메서드는 배열에서 특정 범위의 요소들을 제거하거나 교체하며, 필요한 경우 새 요소를 추가할 수 있다.

// 예제 출처: MDN web docs - Array.prototype.splice()

const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// Inserts at index 1
console.log(months);
// Expected output: Array ["Jan", "Feb", "March", "April", "June"]

months.splice(4, 1, 'May');
// Replaces 1 element at index 4
console.log(months);
// Expected output: Array ["Jan", "Feb", "March", "April", "May"]

 

 

---

3. split

String.prototype.split()

`split()` 메서드는 문자열을 특정 구분자를 기준으로 분할하여 배열로 반환한다.

// 예제 출처: MDN web docs - String.prototype.split()

const str = 'The quick brown fox jumps over the lazy dog.';

const words = str.split(' ');
console.log(words[3]);
// Expected output: "fox"

const chars = str.split('');
console.log(chars[8]);
// Expected output: "k"

const strCopy = str.split();
console.log(strCopy);
// Expected output: Array ["The quick brown fox jumps over the lazy dog."]

 

 

---

4. 그래서 차이점이 뭔데?

• slice()는 문자열과 배열 모두에서 사용할 수 있다. 요소를 복사하여 반환하며, 원본은 변경되지 않는다.
• splice()는 배열에서 요소를 제거하거나 교체하며, 원본 배열이 변경된다.
• split()은 문자열에서 사용하며, 구분자를 기준으로 분할하여 새로운 배열로 반환한다.
• 세 메서드는 모두 원본 데이터에 영향을 미치는 방식과 반환하는 값의 형태에서 차이가 있다.
  • slice()와 split()은 반환된 값이 새로운 데이터로 기존 데이터에 영향을 주지 않아 다루기 쉽다는 장점이 있다.
  • 반면, splice()는 원본 배열을 직접 수정하기 때문에 주의해서 사용해야 한다.

 

구글링하다가 단번에 이해가 가는 그림이 있어서 함께 첨부!

출처 https://medium.com/@jeanpan/javascript-splice-slice-split-745b1c1c05d2