[JavaScript] splice 메서드, slice 메서드, split 메서드 비교

splice 메서드, slice 메서드, split 메서드 비교

들어가며

• 자바스크립트의 @splice@ 메서드와 @slice@ 메서드, @split@ 메서드를 비교해보고 차이점을 알아보자.

ⓒ Medium

 

@splice@ 메서드

설명

• 배열의 요소를 제거하거나 삽입할 수 있다.

 

사용법

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

 

• @start@ : 변경을 시작할 인덱스
• @deleteCount@ : 제거할 요소의 개수
• @item1, item2, ...@ : 추가할 요소 [선택 사항]

 

사용 예

let array = [1, 2, 3, 4, 5];
array.splice(2, 1);              // 인덱스 2에서 1개의 요소 제거 -> [1, 2, 4, 5]
array.splice(1, 0, 6, 7);        // 인덱스 1에 6과 7을 추가 -> [1, 6, 7, 2, 4, 5]

 

• @deleteCount@에 @0@을 넣고, @item1, item2, ...@ 항목에 요소를 넣으면 해당 @start@ 위치에 @item1, item2, ...@를 삽입한다.

 

@slice@ 메서드

설명

• 배열의 일부분을 선택하여 새로운 배열을 반환한다.
• 원본 배열은 변경되지 않는다.

 

사용법

array.slice(start[, end])

 

• @start@ : 잘라낼 시작 인덱스 (포함)
• @end@ : 잘라낼 끝 인덱스 (제외) [선택 사항]

 

사용 예

let array = [1, 2, 3, 4, 5];
let slicedArray = array.slice(1, 4);     // 인덱스 1부터 3까지의 요소를 잘라냄 -> [2, 3, 4]

 

 

(참고) @split@ 메서드

설명

• 문자열을 지정된 구분자를 기준으로 여러 개의 하위 문자열로 나누어 배열로 반환한다.
• 이 함수를 사용하여 문자열을 쪼개거나 분할할 수 있다.

 

사용법

string.split(separator[, limit])

 

 

• @string@: 원본 문자열
• @separator@
  • 문자열을 나눌 때 사용할 기준 (구분자)
  • 이를 기반으로 문자열이 쪼개진다.
  • 이 값이 없으면 전체 문자열이 단일 요소인 배열로 반환된다.
• @limit@: 반환할 배열의 최대 길이 [선택 사항]

 

사용 예

let sentence = "JavaScript is a powerful programming language";
let words = sentence.split(" ");     // 공백을 기준으로 문자열을 분할하여 배열로 반환
console.log(words);      // ["JavaScript", "is", "a", "powerful", "programming", "language"]

let data = "apple,orange,banana,grape";
let fruits = data.split(",");     // 쉼표를 기준으로 문자열을 분할하여 배열로 반환
console.log(fruits);     // ["apple", "orange", "banana", "grape"]

let longString = "1234567890";
let chunks = longString.split("", 5);     // 각 숫자를 요소로 갖는 배열을 반환 (제한된 개수)
console.log(chunks);      // ["1", "2", "3", "4", "5"]

 

 

splice()는 원본 배열을 변경하고, 요소를 추가하거나 제거할 수 있으며, slice()는 원본 배열을 변경하지 않고 새로운 배열을 반환하며 잘라낸 부분을 선택할 수 있다. split()은 문자열을 구분자를 기반으로 나누어 배열로 반환한다.

 

참고 사이트

Array.prototype.splice() - JavaScript | MDN

Array.prototype.slice() - JavaScript | MDN

String.prototype.split() - JavaScript | MDN