[js] slice vs splice / substr vs substring

 

항상 헷갈렸던 배열, 문자열 관련 메소드들을 싹 정리해보자.

 

배열 메소드(slice는 문자열에서도 사용 가능)

1. slice() 

slice() 메소드는 begin부터 end 전까지의 복사본을 새로운 배열 객체로 반환한다. => 원본 배열은 수정되지 않는다.

slice(start[, end])

start: 추출 시작점에 대한 인덱스

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

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

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

반환값: 추출한 요소를 포함한 새로운 배열

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 
let arr1 = arr.slice(3, 5);			// [4, 5]
let arr2 = arr.slice(undefined, 5);		// [1, 2, 3, 4, 5]
let arr3 = arr.slice(-3);			// [8, 9, 10]
let arr4 = arr.slice(-3, 9);			// [8, 9]
let arr5 = arr.slice(10);			// []
let arr6 = arr.slice(4);			// [5, 6, 7, 8, 9, 10]
let arr7 = arr.slice(undefined);		// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
let arr8 = arr.slice(5, -4);			// [6]
let arr9 = arr.slice(2, 15);			// [3, 4, 5, 6, 7, 8, 9, 10]
 
console.log(arr);	// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
console.log(arr1);	// [4, 5]
console.log(arr2);	// [1, 2, 3, 4, 5]
console.log(arr3);	// [8, 9, 10]
console.log(arr4);	// [8, 9]
console.log(arr5);	// []
console.log(arr6);	// [5, 6, 7, 8, 9, 10]
console.log(arr7);	// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
console.log(arr8);	// [6]
console.log(arr9);	// [3, 4, 5, 6, 7, 8, 9, 10]

 

2. splice()

splice() 메소드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경한다. => 원본 배열 자체를 수정한다.

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

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

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

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

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

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

• 지정하지 않는 경우: splice()는 요소 제거만 수행

반환값: 제거한 요소를 담은 배열

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

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

let arr1 = arr.splice(10, 2, 'a', 'b', 'c');

console.log(arr) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 'a', 'b', 'c'];
console.log(arr1) // [11, 12]

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

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

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
let arr1 = arr.splice(3);
 
console.log(arr);   // [1, 2, 3]
console.log(arr1);  // [4, 5, 6, 7, 8, 9, 10, 11, 12]
 
let arr2 = arr1.splice(6, 4);
 
console.log(arr1);  // [4, 5, 6, 7, 8, 9]
console.log(arr2);  // [10, 11, 12]

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
let arr1 = arr.splice(5, 0, 'add');
 
console.log(arr);   // [1, 2, 3, 4, 5, "add", 6, 7, 8, 9, 10, 11, 12]
console.log(arr1);  // []

 

문자열 메소드

1. substr

substr() 메소드는 문자열에서 특정한 구간의 문자열을 추출한다(추출할 요소의 수 사용). => 원본 문자열 보존

substr(start,length)

start: 탐색 구간의 시작점(index) 

• 양수인 경우: 문자열의 길이 보다 작으면 빈문자열 리턴
• 음수인 경우: 문자열의 뒤에서부터 시작

length: 추출할 요소의 수

• 음수인 경우: 빈 값을 반환

반환 값: 추출한 문자열

let str = 'coding everybody';
console.log(str.substr(7)) // everybody
console.log(str.substr(7,5)) // every
console.log(str.substr(-4)) // body, 음수인 경우 뒤에서부터 카운팅 
console.log(str.substr(-4,2)) // bo

 

2. substring

substring() 메소드는 문자열에서 특정한 구간의 문자열을 추출한다(추출 끝 점 인덱스 사용). => 원본 문자열 보존

substring(from,to)

from: 탐색 구간의 시작점(index) 

• from값이 to값보다 큰 경우: 작은 숫자가 시작위치로 큰숫자가 종료위치로 세팅
• 매개변수 둘 중에 한 개가 음수인 경우: 시작위치 0
• 매개변수 둘 다 음수인 경우: 빈 문자열을 리턴
• from과 to가 같은 경우: 빈 문자열을 리턴

to: 탐색구간이 끝나는 점(to를 제외하고 그 전의 요소까지만 추출)

반환 값: 추출한 문자열

let str = 'coding everybody';
console.log(str.substring(0)) // coding everybody 
console.log(str.substring(0,6)) // coding 
console.log(str.substring(7,0));  // coding 
console.log(str.substring(7,2)); // ding

 

참고한 블로그)

https://im-developer.tistory.com/103

[JS/Array] slice()와 splice()의 차이점

https://webclub.tistory.com/20

substr() vs substring() 메소드