#31 자바스크립트(JavaScript) - splice

안녕하세요 여러분! 에이블디입니다!

 

이번 시간에는 지난 시간에 이어서 함수에서 사용할 수 있는 함수중 하나인 splice에 대해 알아보겠습니다!

 

지난 시간에 배웠던, push, unshift, pop, shift 함수들은 배열의 맨 앞이나 맨 뒤에 데이터를 추가하거나 추출하는 함수였던 것 기억하시죠?

 

그렇다면 배열의 중간 부분에 데이터를 추가하거나 삭제하고 싶을 때가 있겠죠?

그리고 2개 이상의 데이터를 추가하거나 삭제하고 싶을 때도 있을 겁니다.

이럴 때 사용하는 것이 splice 함수입니다!

 

splice 함수는 () 괄호 안에 들어 있는 인수에 따라 일정 구간의 데이터를 삭제하고 새로운 데이터를 추가하는 함수인데요, splice 함수를 실행하면 삭제한 구간의 요소들로 이루어진 새로운 배열이 만들어집니다.

 

그럼 지금부터 splice에 대해 알아볼까요?

 

먼저 splice 함수의 ()괄호 안에 인수가 하나인 경우부터 알아보도록 할게요!

괄호 안의 인수는 배열의 인덱스 값을 가리키는데요, 이때 splice 함수는 인수가 가리키는 인덱스의 요소부터 배열의 끝 요소까지 삭제합니다.

 

코드를 작성하여 실습하면서 학습해 볼게요!

 

지난 시간에 사용했던 hyundai 배열을 그대로 사용해 보도록 하겠습니다!

var hyundai = ["avante", "sonata", "grandeur"];

위와 같은 hyundai 배열에 splice 함수를 사용해 볼 건데요, splice() 괄호 안에 1이라는 인수를 넣어보도록 하겠습니다.

hyundai.splice(1);

위의 코드는 인덱스가 1인 데이터부터 끝에 있는 데이터까지 모두 삭제해 버리는데요, 배열의 주소 값은 0부터 시작하는 것 잊지 않으셨죠?

그럼 위의 코드를 실행하면 주소 값이 1인 "sonata" 데이터부터 끝에 있는 데이터까지 모두 삭제해 버려 "avante" 데이터만 배열에 남게 되겠죠?

코드를 실행시켜 보겠습니다!

 

 

splice로 추출되어 삭제된 데이터는 "sonata"와 "grandeur"이라는 걸 확인할 수 있고, 두 데이터가 삭제되고 난 이후 hyundai 배열에는 "avante" 값만 남아있는걸 확인 할 수 있습니다!

 

그럼 splice 함수에 인수가 2개일 경우를 알아보도록 할게요!

인수가 2개일 경우 첫 번째 인수는 배열의 인덱스 값이고 두 번째 인수는 삭제할 데이터의 개수입니다.

아래의 코드처럼 정리할 수 있을 것 같아요!

splice(배열의 인덱스 주소, 삭제할 데이터의 갯수);

코드를 작성하여 실습해 볼까요?

아까와 같이 hyundai 배열에 splice함수를 사용해 볼 텐데요, 이번엔 인수를 하나 더 추가해 보도록 하겠습니다!

hyundai.splice(1, 1);

1번째 주소 값에 있는 데이터부터 1개의 데이터를 삭제하라고 요청했으니 "sonata" 데이터만 삭제되겠죠?

바로 코드를 실행시켜 확인해 보도록 할게요!

 

 

배열의 1번 주소에 있던 데이터 "sonata"가 추출되었고, "sonata" 데이터가 삭제되고 "avante"와 "grandeur" 데이터만 남아있는 hyundai 배열을 확인할 수 있습니다!

 

그럼 splice 함수에 인수가 3개일 경우도 알아보도록 하죠!

세 번째 인수부터는 앞서 데이터를 삭제한 위치에 새로 추가할 데이터를 작성해 주시면 됩니다!

 

직전에 실습한 splice 코드의 세번째 인수에 "sonata N line"이라는 값을 추가해 볼게요!

hyundai.splice(1, 1, "sonata N Line");

코드를 실행해 보면,

 

 

"sonata" 데이터가 추출된 자리에 "sonata N Line" 데이터가 추가된 것을 확인할 수 있습니다!

 

그럼 기존 배열의 데이터를 꼭 삭제해야 다른 데이터를 추가할 수 있을까요?

아닙니다. 기존 배열의 데이터를 삭제하지 않고 새로운 데이터를 추가하고 싶다면 삭제할 개수를 지정하는 두 번째 인수에 0을 넣으면 됩니다.

 

직전에 실습한 코드의 두 번째 인수를 0으로 수정한 뒤 다시 실행해 볼게요!

hyundai.splice(1, 0, "sonata N Line");

주소 값 1에 기존의 데이터를 삭제하지 않고 새로운 데이터가 추가되어 "sonata N Line" 데이터가 주소값 1에 추가된 것을 확인할 수 있습니다!

 

그럼 여러 개의 데이터를 추가하고 싶을 때는 어떻게 할까요?

이때는 추가하고 싶은 데이터를 세 번째 인수부터 차례대로 나열하여 작성하면 됩니다!

직전 코드의 세 번째 인수부터 수정하여 여러 개의 데이터를 추가해 보도록 하겠습니다!

hyundai.splice(1, 0, "avante N Line", "avante N", "sonata N Line");

위의 코드를 실행해 보면,

 

 

역시 기존의 데이터를 삭제하지 않고 배열 1번 주소부터 "avante N Line", "avante N", "sonata N Line" 데이터가 차례대로 추가된 것을 확인할 수 있습니다!

 

이번 시간에는 splice 함수에 대해 알아보았습니다!

 

다음 시간에 또 다른 array에서 사용할 수 있는 함수를 배워보도록 할게요!