slice()

원본배열은 변경하지 않고 배열의 일부분을 추출하여 새로운 배열을 만든다.
매개변수로 값을 하나만 받을 수도 있고, 두 개를 받을 수도 있다.

아래와 같은 배열이 있다고 치자.

// 매개변수로 하나의 값을 받는 경우

let fruit = ["apple", "banana", "cherry", "orange"]

// 변경된 배열을 반환한다.
console.log(fruit.slice(2) // ["cherry", "orange"]

// fruit를 출력하면 원본배열이 반환됨
console.log(fruit) // ["apple", "banana", "cherry", "orange"]

원본 배열을 변경하지 않고 값이 잘리는 시작점(index)을 포함한 나머지 배열을 반환한다.

// 매개변수로 두개의 값을 받는 경우

let fruit = ["apple", "banana", "cherry", "orange"]

fruit.slice(1,3)
console.log(fruit) // ["banana", "cherry"]

예시 코드에서 매개변수로 받은 값은 1번째 요소부터 3번째 요소 이전까지만 잘라낸 배열을 반환하게 된다. 여기서 3번째 요소는 배열에 포함되지 않는다.

splice()

배열의 특정 위치에서 요소를 제거하는 데에 사용하는 메서드이다.
매개변수로 변경을 시작하는 인덱스 번호와 개수를 받는다.

let fruit = ["apple", "banana", "cherry", "orange"]

fruit.splice(2,1) 

// 이 메서드는 원본배열을 변경시킨다
console.log(fruit) // ["apple", "banana", "orange"]

매개변수로 받은 2는 값을 변경하고 싶은 인덱스, 1은 변경할 아이템의 개수이다.

그리고 splice() 메서드는 제거한 아이템을 대체할 아이템을 매개변수로 받기도 한다.

let fruit = ["apple", "banana", "cherry", "orange"]

// 기존 아이템을 삭제하고 다른 아이템으로 대체하기
fruit.splice(2,1,"grape")
console.log(fruit) // ["apple", "banana", "grape", "orange"]

대체할 아이템을 매개변수에 입력하면 기존 배열에서 삭제한 아이템 위치에 대체된 아이템이 들어간다. 마찬가지로 원본 배열을 변경하기 때문에 fruit 배열을 출력하면 변경된 원본배열이 출력된다.

• splice() 매개변수를 하나만 받는 경우

let fruit = ["apple", "banana", "cherry", "orange"]

fruit.splice(2) 
console.log(fruit) // ["apple", "banana"]

2번째 인덱스에 해당하는 "cherry"부터 이후의 모든 값이 잘려나간다.

• slice와 다른 점이 있다.

console.log(fruit.splice(2)) // ["cherry", "orange"]

잘려나간 배열이 반환되게 되기 때문에 꼭! 코드를 따로 분리 시켜줘야 한다.