JavaScript: Array.slice() vs Array.splice()

Sangmin Na·2021년 6월 4일

목록 보기

3/7

개선을 위한 정보 혹은 틀린 정보가 있다면 자유롭게 코멘트를 작성해주세요 :D

Array에 관한 Method가 너무 많아 항상 헷갈린다. 한국어가 아닌 영어로 되어있는 언어를 공부하다 보니까 더욱 그런 생각이 든다. 그 중에서 아주 비숫하게 생긴 slice와 splice Method에 대하여 정리를 해야 겠다는 생각이 들어 이 글을 작성하게 되었다.

Array.slice()

👉 Slice, 단어를 직역하면 야채를 썰듯이 무언가를 썬다는 뜻이다. Array에 관련된 Method이니 Array를 Slice(썰어서) 무언가를 만든다고 생각하자.

👉 언제나처럼 예시를 먼저 보는게 가장 이해가 빠르다고 생각한다.

array.slice(start, end)

start에서 시작하여 end-1에서 끝남

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

const newAnimals = animals.slice();


console.log(newAnimals);
// expected output: Array ['ant', 'bison', 'camel', 'duck', 'elephant']

console.log(animals.slice(2));
// expected output: Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// expected output: Array ["camel", "duck"]

animals.slice()은 Shallow Copy라고도 표현한다. 직역하면 얕은 복사이다. 즉, Original Array 변형시키지 않고 Array를 복사할 수 있다.
(Original Array의 데이터가 변경되면 Shallow Copy도 변형됨)
animals.slice(2)은 Array의 Index Start(2)부터 끝까지 slice(썰어서) 값을 Return 한다.
animals.slice(2, 4)은 Array Index Start(2번)부터 End(4 - 1 = 3번)까지 slice(썰어서) 값을 Return 한다.
배열의 Index는 항상 0부터 시작한다는 것을 명심해야 한다.

Array.splice()

👉 Splice를 네이버에서 검색하면 (밧줄의 두 끝을 함께 꼬아서) 잇다, (필름테이프 등의 두 끝을) 붙이다[잇다] 라는 뜻이 나온다. 필름테이프가 Array라고 생각하고 Array의 Element를 빼고 다른 값을 붙여 넣는다? 에서 오지않았을까 생각을 한다.

👉 Splice는 3가지 기능을 할 수 있다.

1) Orginal Array에서 원하는 Element을 Delete만하여 그 값을 Return 하는 기능

2) Array에서 원하는 Elements을 Delete하고 원하는 Value를 삽입하는 기능 

3) 그리고 Delete는 하지 않고 원하는 값을 원하는 위치에 삽입만 하는 기능이다.

👉 여기서 중요한 점은 splice()는 삭제된 Array을 Return한다는 것이다.

👉 Slice와 다르게 Splice는 Orginal Array에 영향을 준다.

Syntax
splice(start)
splice(start, deleteCount)
splice(start, deleteCount, item1)
splice(start, deleteCount, item1, item2, itemN)

1. Orginal Array에서 원하는 Element을 Delete하여 그 값을 Return

/* splice(start) */

let originalNumber = ['1', '2', '3', '4']
let removedNumber = myFish.splice(2)

// originalNumber is ["1", "2"]
// removedNumber is ["3", "4"]

/* splice(start, deleteCount)*/

let originalNumber = ['1', '2', '3', '4']
let removedNumber = myFish.splice(1, 3)

// originalNumber is ['1']
// removedNumber is ['2', '3', '4']

2. Array에서 원하는 Elements을 Delete하고 원하는 Value를 삽입하는 기능 - Delete된 값은 Return 한다.


/* splice(start, deleteCount, item1, item2, itemN..)*/

let originalLetters = ['a','b','h','z', 'e']
let removedLetters = originalLetters.splice(2, 2, 'c', 'd')

// originalLetters is ['a','b','c','d', 'e']
// removedLetters is ['h', 'z']

3. Delete는 하지 않고 원하는 값을 원하는 위치에 삽입만 하는 기능


/* splice(start, deleteCount, item1, item2, itemN..)*/

let originalLetters = ['a','b','d','e']
let removedLetters = originalLetters.splice(2, 0, 'c')

// originalLetters is ['a','b','c','d', 'e']
// removedLetters is [];