Array.splice 사용법
JavaScript 내장 함수
JavaScript에는 여러가지 함수가 내장되어있다.
다양한 기능들을 직접 구현하기보다, 기본 제공해주는 함수를 알고 사용한다면 매우 경제적일 것이다.
따라서 JavaScript가 제공해주는 유용한 함수들을 공부해서, 필요할 때에 사용하도록 하자.
이번에는 Array (=배열) 형태에 사용할 수 있는 함수 중에서,
배열.splice() 를 알아보자
우공이산 (愚公移山)
「우공(愚公)이 산을 옮긴다.」는 말로,
남이 보기엔 어리석은 일처럼 보이지만 한 가지 일을 끝까지 밀고 나가면,
언젠가는 목적(目的)을 달성(達成)할 수 있다는 뜻.
하나씩 함수를 알아가보자!
외울 필요도 없다. splice()가 필요한 때에 지금 이 노트를 기억해서, 필요한 곳에 적용하기만 하면 된다.
Array.splice()
역할 : 배열의 뒷부분부터 하나씩 구성원을 제거해주는 함수!
사용법 1 :
▶︎ Array.splice( 원하는위치부터_원하는위치포함 , 제거하고싶은숫자만큼, 추가하고싶은것 )
1) 원하는위치부터_원하는위치포함 :
(1) 0은 첫번째, 1은 두번째, 2는 세번째, ... 위치를 의미함.
(2) 만약 음수를 넣으면, 배열의 뒷부분부터 역방향으로 0번째, 1번째, 2번째 위치를 선택함.
2) 제거하고싶은숫자만큼 :
(1) 아무것도 적지 않으면, "1) 원하는위치부터_원하는위치포함"만 남긴 배열을 반환한다. (나머지 모든 것이 삭제)
(2) "양수"를 적으면, "1) 원하는위치부터_원하는위치포함 ~ 제거하고싶은숫자만큼"을 지우고 남은 배열을 반환한다.
(3) "음수" or "0" 을 적으면, 아무것도 제거되지 않는다.
3) 추가하고싶은거 :
(1) 아무것도 적지 않으면, 아무것도 추가하지 않음.
(2) number, string, object, array 등 넣고싶은거 아무거나 넣으면 됨.
사용 예시
ex) Array.splice( 1 ) : 원본의 1의 위치에 있는 것만 남기고, 나머지는 모두 제거해줘~
ex) Array.splice( 2, 4 ) : 원본의 2의 위치부터, 4개 만큼 지워줘
ex) Array.splice( 3, 0, "여기 적은 내용이 추가됨 ㅋ" ) :
1) 원본의 3의 위치에서(0, 1, 2, 3 즉 4번째 자리에),
2) 0개 만큼 지울래 (= 한개도 안 지울래),
3) "여기 적은 내용이 추가됨 ㅋ" 를 추가할래
?? 0의 위치가 무슨말이야
우리나라 친구들은 "하나~, 두울~, 세엣~, ... " 이라고 숫자를 세는데 (서수)
외국 친구들은 "0~, 1~, 2~, ..." 이렇게 숫자를 센다고 한다.
그러니까 0번째는 첫번째 자리를 의미함!
* 연습을 위해 2가지 배열을 만들어보자.
const 배열1 = [1, 2, 3]
const 배열2 = ['하나', '두울', '세엣'];
▶ 1. 배열 그 자체를 console.log 찍어보기
console.log(배열1)
// 기대되는 결과 : [ 1, 2, 3 ]
console.log(배열2)
// 기대되는 결과 : [ '하나', '두울', '세엣' ]
▶ 2. 그런데 배열의 내용을 원하는위치에서, 원하는만큼 지우거나, 추가하고 싶다면~?
😎이때 사용하는 것이 바로 .splice() !!
1. 원하는 위치에,
2. 원하는 만큼 배열을 지울 수 있고,
3. 원하는 내용을 추가할 수 있다!
4. splice한 결과로 새로 배열을 생성되지 않고, 원본 배열 자체를 수정된다.
즉, const 배열1 = [ 1, 2, 3 ] 이 있을 때,
배열1.splice( 원하는위치부터_원하는위치포함 , 제거하고싶은숫자만큼 , 추가하고싶은것 ) 를 작동시키고 나면
원본 const 배열1 = [ 1, 2, 3 ] 자체가 값이 수정됨을 주의하자!▶︎ splice()가 어떻게 동작하는지 확인하자. 그리고 원본이 바뀐다는 것도 확인해보자.
console.log(배열1)
// 기대되는 결과 : [ 1, 2, 3 ]
배열1.splice(3, 0, 4)
// TMI :
// 1) 3번째위치부터_3번째위치포함 (= 0번째, 1번째, 2번째, 3번째) : 즉 우리말로 4번째부터
// 2) 0개만큼지우고 (= 하나도 안 지운다는 소리)
// 3) 숫자 4를 추가할래
console.log(배열1)
// 기대되는 결과 : [ 1, 2, 3, 4 ]
console.log(배열2)
// 기대되는 결과 : [ '하나', '두울', '세엣' ]
배열2.splice(1, 1, "둘! 오타극혐 ㅡㅡ")
// TMI :
// 1) 1번째위치부터_1번째위치포함 (= 0번째, 1번째) : 즉 우리말로 2번째부터
// 2) 1개만큼지우고 (= 우리말로 2번째에 있는 걸 지운다는 소리)
// 3) "둘! 오타극혐 ㅡㅡ" 이라는 내용을 추가할래 (우리말로 2번째 자리에)
console.log(배열2)
// 기대되는 결과 : [ '하나', '둘! 오타극혐 ㅡㅡ', '세엣' ]
🥸 본인도 처음 문법을 공부할 때, 0번째가 이해가 안되서 정말 헷갈리고 어려웠던거 같당...
여러분들도 index니, 색인이니 뭐니 하는 것들에 대해서
단어를 너무 어렵게 생각하지말공
"색인 = 순서"
"첫번째를 외국에서는 0번째라고, 한국에서는 1번째라고 부른다~"
나중에 공부가 더해지면 더 큰 의미를 이해하더라도,
처음에는 요렇게 쉽게 생각해보는 것은 어떨까?
* 결국 splice() 함수는, 배열의 내용을
1) 원하는 위치에서,
2) 원하는 개수만큼 지우거나
3) 원하는 내용을 추가할 수 있고
4) 새로운 배열을 만들어내는 방식이 아니라, 원본 그 자체를 바꿔버리는 방식으로
작동하는 함수이다!