[정리끝] splice VS slice (JavaScript)

🦊 공통점

둘다 원본 배열의 부분을 추출하는 메쏘드

인자를 하나만 입력했을 때는 똑같이 작용함

array.splice(n);
array.slice(n);

• 둘다 n번째 인덱스부터의 추출을 의미함

[5, 4, 3, 2, 1].splice(2);
> [3, 2, 1] //2번째 인덱스인 3이후로 전부 추출
[5, 4, 3, 2, 1].slice(2);
> [3, 2, 1] //2번째 인덱스인 3이후로 전부 추출

🦊 차이점

1. 원본배열에 영향 유뮤

• splice는 추출한 만큼 원본배열의 원소가 사라짐
• slice는 원본 배열의 변화 없음

-------------splice----------
a: [ 5, 4, 3, 2, 1 ]
a.splice(1): [ 4, 3, 2, 1 ]
a: [ 5 ] //추출한 4,3,2,1이 원본배열에서 사라짐

-------------slice----------
b: [ 5, 4, 3, 2, 1 ]
b.slice(1): [ 4, 3, 2, 1 ]
b: [ 5, 4, 3, 2, 1 ] //원본배열 변화없음

코드

let a = [5, 4, 3, 2, 1]
console.log('a:', a)
console.log('a.splice(1):', a.splice(1))
console.log('a:', a)

let b = [5, 4, 3, 2, 1]
console.log('b:', b)
console.log('b.slice(1):', b.slice(1))
console.log('b:', b)

2. 메쏘드의 인자를 2개 넣은경우 '끝' 인덱스의 계산방법 차이

• splice, slice둘다 추출할 배열의 처음과 끝 인덱스를 지정가능
• 예) array.splice(1, 3);, array.slice(1, 3);
• 위의 예의 경우
  • splice는 1번 인덱스부터 '총 3개' 추출함
  • splice는 1번 인덱스부터 3번 인덱스'직전까지' 추출함(총 2개)

-------------splice----------
a: [ 5, 4, 3, 2, 1 ]
a.splice(1, 2): [ 4, 3 ]
a: [ 5, 2, 1 ]

-------------slice----------
b: [ 5, 4, 3, 2, 1 ]
b.slice(1, 2): [ 4 ]
b: [ 5, 4, 3, 2, 1 ]

코드

-------------splice----------
let a = [5, 4, 3, 2, 1]
console.log('a:', a)
console.log('a.splice(1, 2):', a.splice(1, 2))
console.log('a:', a)

let b = [5, 4, 3, 2, 1]
console.log('b:', b)
console.log('b.slice(1, 2):', b.slice(1, 2))
console.log('b:', b)

3. 추출한 부분을 다른 원소로 바꿔치기 가능

• splice는 원본배열에서 추출한 만큼 원소가 사라지는데 해당 부분을 다른 원소로 끼워넣기가 가능함

a: [ 5, 4, 3, 2, 1 ]
a.splice(1, 2, "hi"): [ 4, 3 ] // 3번째 인자로 끼워넣을 인자를 입력함
a: [ 5, 'hi', 2, 1 ]

-------------slice----------
b: [ 5, 4, 3, 2, 1 ]
b.slice(1, 2, "hi"): [ 4 ] // slice의 경우 3번째 인자를 넣어도 에러는 없지만 원본배열의 영향 없음
b: [ 5, 4, 3, 2, 1 ]

코드

a = [5, 4, 3, 2, 1]
console.log('a:', a)
console.log('a.splice(1, 2, "hi"):', a.splice(1, 2, "hi"))
console.log('a:', a)

let b = [5, 4, 3, 2, 1]
console.log('b:', b)
console.log('b.slice(1, 2, "hi"):', b.slice(1, 2, "hi"))
console.log('b:', b)