JavaScript slice(), splice(), split() 차이

Gaeun·2022년 11월 14일

프로그래머스 문제를 풀 때마다 slice(), splice(), split()을 혼동하여 사용하고 있다. 때문에 매번 콘솔에 찍어가면서 출력되는 값을 확인하고 코드를 작성하고 있으며 이러다 추후에 코딩테스트를 보게 되는 날까지도 헷갈려할 것 같아서 언젠간 한 번은 정리해야겠다 싶었다. 그리고 그게 바로 오늘인 것 같아서 작성해보려고 한다!

'slice splice split javascript'라고 구글에 검색했을 때 가장 상위에 뜨는 두 페이지와 <모던 자바스크립트 Deep Dive>를 토대로 작성할 예정이다.

참고한 페이지는 다음과 같다.

1. Method type

우선 메서드 유형을 알아야 이 메서드들을 정복할 수 있다. 지피지기 백전불태다.

Array method: slice(), splice()
String method: split()

2. Array Method

`slice()`

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

slice() 메서드는 배열의 원하는 부분을 복사한다.
반환 값: 새 배열
원본 배열은 변경되지 않는다.
두 개의 매개변수를 갖는다.
- start: 복사를 시작할 인덱스. 음수인 경우 배열의 끝에서의 인덱스를 나타낸다.
- end: 복사를 종료할 인덱스. 이 인덱스에 해당하는 요소는 복사되지 않는다.
문자열과 배열 모두에 사용할 수 있다.

Example

// loaf3부터 loaf5까지 복사하여 새 배열에 넣고 싶은 경우
let bread = ['loaf1','loaf2','loaf3','loaf4','loaf5','loaf6'];
newArr = bread.slice(2, 5);

console.log(newArr); //output: ["loaf3", "loaf4", "loaf5"]

// 🚨 bread[5]의 값은 복사되지 않는다는 것을 주의!

`splice()`

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

splice() 메서드는 원본 배열을 변경하는 메서드이다.
배열의 요소 추가/삭제/교체에 사용된다.
반환 값: 제거한 요소를 담은 배열
- cf.) 하나의 요소만 제거한 경우 길이가 1인 배열을 반환하고, 아무 값도 제거하지 않은 경우에는 빈 배열을 반환한다.
원본 배열은 변경된다.
세 개의 매개변수를 갖는다.
- start: 원본 배열의 요소를 제거하기 시작할 인덱스
  - start만 지정하면 원본 배열의 start부트 모든 요소를 제거한다.
  - start가 음수인 경우 배열 끝에서의 인덱스를 나타낸다.
- deleteCount: 원본 배열의 요소를 제거하기 시작할 인덱스인 start부터 제거할 요소의 개수
  - deleteCount가 0인 경우 아무 요소도 제거되지 않는다.(옵션)
- items: 제거한 위치에 삽입할 요소들의 목록
  - 생략할 경우 원본 배열에서 요소들을 제거하기만 한다.(옵션)
배열에만 사용할 수 있다.

Examples

// 배열 요소 제거
let bread = ['loaf1','loaf2','loaf3','loaf4','loaf5','loaf6'];

bread.splice(1, 3); // ["loaf2", "loaf3", "loaf4"] 제거함

console.log(bread); //output:["loaf1", "loaf5", "loaf6"]

// 배열 요소 제거 & 추가
let bread = ['loaf1','loaf2','loaf3','loaf4','loaf5','loaf6'];

bread.splice(1, 3, 'newLoaf1', 'newLoaf2');

console.log(bread); //output:["loaf1", "newLoaf1", "newLoaf2", "loaf5", "loaf6"]

// 배열 요소 추가
let bread = ['loaf1','loaf2','loaf3','loaf4','loaf5','loaf6'];

bread.splice(3, 0, 'newLoaf1', 'newLoaf2');

console.log(bread); 
//output:["loaf1", "loaf2", "loaf3", "newLoaf1", "newLoaf2", "loaf4", "loaf5", "loaf6"]

3. String Method

`split()`

split()
split(separator)
split(separator, limit)

split() 메서드는 구분자를 이용하여 여러 개의 문자열로 나눈다.
반환 값: 배열
- 따라서 문자열을 배열로 반환해야할 때 유용하다.
원래 문자열을 변경하지 않는다.
2개의 매개변수를 가지며 둘 다 선택사항이다.
- separator: 원본 문자열을 끊어야 할 부분을 나타내는 문자열
- limit: 끊어진 문자열의 최대 개수를 나타내는 정수
문자열에만 사용할 수 있다.

Example

let myString = "the quick brown fox jumps over the lazy dog";

// 공백으로 구분(단어로 구분) - 구분자: (" ")
myString.split(" ");
//output: ["the", "quick", "brown", "fox", "jumps", "over", "the", "lazy", "dog"]

// 인수로 빈 문자열을 전달하면 각 문자를 모두 분리한다. 
myString.split("");
//output: ["t", "h", "e", " ", "q", "u", "i", "c", "k", " ", "b", "r", "o", "w", "n", " ", "f", "o", "x", " ", "j", "u", "m", "p", "s", " ", "o", "v", "e", "r", " ", "t", "h", "e", " ", "l", "a", "z", "y", " ", "d", "o", "g"]

// 인수를 생략하면 대상 문자열 전체를 단일 요소로 하는 배열을 반환한다.
myString.split();
//output: ["the quick brown fox jumps over the lazy dog"]

Quick tips!

split()을 배열에 적용할 때에는 toString()을 사용하여 문자열로 변환한다.

let myString = array.toString();

문자열을 배열로 변환할 때에는 split(" ")을 구분 기호로 사용한다.

myString.split(" ");

문자열 역순으로 뒤집을 때에는 reverse(), join() 메서드를 함께 사용한다.

function reverseString(str) {
  return str.split('').reverse().join('');
}

reverseString('Hello world!'); 	// '!dlrow olleH'

4. Summary

그동안 너무 어렵게 생각했던 것 같다. 이 메서드들을 사용해야 할 때 영단어 뜻 그대로 메서드가 작동되고 있다고 생각하며 적당한 메서드를 바로 고를 수 있도록 이 포스트를 자주 들여다봐야겠다.

나만의 연상법...🤔💡
slice: (얇게) 썰다 → 배열의 원하는 부분만 똑 떼어내서 복사하여 새 배열로 반환
splice: RNA 스플라이싱 떠올리기 → 배열 요소 추가 / 삭제 / 교체, 원 배열도 변경
split: (작은 부분들로) 나누다 → 문자열 나누기

참고 자료