JavaScript slice() 사용 방법

slice 메서드란?

slice 메서드는 JavaScript에서 배열이나 문자열에서 특정 범위의 요소를 복사하여 새 배열이나 문자열을 생성하는 메서드이다.
이 메서드는 두 개의 매개변수를 받으며, 각각 시작 인덱스와 끝 인덱스를 의미한다.
끝의 인덱스는 선택 사항이며, 제공하지 않으면 시작 인덱스부터 끝까지의 모든 요소를 포함한다.

slice 메서드 사용법

splice 메서드의 기본 사용법은 다음과 같다.

// 배열
array.slice(start, end)

// 문자열
string.slice(start, end)

• start : 복사를 시작할 인덱스 (포함)
• end : 복사를 끝낼 인덱스 (포함되지 않음, 선택사항)

slice 메서드는 실무에서 언제 사용하는가?

2-1) 데이터 복사

배열이나 문자열의 일부를 복사하여 새로운 배열이나 문자를 생성할 때 유용하다.
예) 쇼핑몰 장바구니에서 옵션을 변경할 때, 기존 데이터에서 변경할 옵션만 변경

let cartItem = ['item1', 'item2', 'item3'],
    cartItemCopy = cartItem.slice(); // 전체 배열을 복사

cartItemCopy.push('item4'); // ['item1', 'item2', 'item3', 'item4']
console.log(cartItem); // ['item1', 'item2', 'item3']
console.log(cartItemCopy); // ['item1', 'item2', 'item3', 'item4']

2-2) 문자열 처리

게시물의 컨텐츠가 리스트에서 미리 노출되어야 할 경우 사용하면 좋을 것 같다.
예) 게시물의 상세 페이지에서 텍스트를 가져와서 미리 보여주는 형식

let postText = "welcome rarrit blog ....................",
    postTextSlice = postText.slice(0,19); 

console.log(postText); // "Welcome rarrit blog"

slice 메서드 예제

3-1) 배열에서 사용

변수 name의 원본 배열을 변경하지 않고 인덱스 0부터 3까지의 배열을 출력한다.

let name = ["r", "a", "r", "r", "i", "t"],
    nameSlice = name(0,4);

console.log(nameSlice); // ["r", "a", "r", "r"]
console.log(name); // ["r", "a", "r", "r", "i", "t"]

3-2) 문자열에서 사용

변수 msg 의 값 중 “blog!”를 추출하여 출력한다.

let msg = "rarrit, blog!",
    msgSlice = msg.slice(7, 13);

console.log(msg); // "blog!"

3-2) 끝 인덱스를 생략

인덱스 3부터 끝까지의 모든 요소를 추출한다.

let numbers = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15],
    numberSlice = numbers.slice(3);

console.log(numberSlice); // [4,5,6,7,8,9,10,11,12,13,14,15]
console.log(mumbers); // [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]
    

마무리

slice 메서드는 배열과 문자열에서 특정 범위 요소를 추출하여 새로운 배열이나 문자열을 생성하는데 편리한 메서드다.
원본 데이터를 변경하지 않고 필요한 부분만 수정할 수 있어서 다양하게 활용될 것 같다.
프로그래머스 코딩 테스트에서도 사용할 기회가 있으면 좋겠다.