JavaScript 기초 : 배열 2. 배열 메소드- splice사용법

 

2. 배열 메소드

 

배열을 좀 더 안전하고 효과적으로 다루기 위해서는 배열의 메소드를 이용하는 것이 좋다. 

 

우선 배열의 요소를 삭제하는 코드를 보자!

 

javascript

닫기 줄바꿈

let members = ['유재석', '박명수', '정준하', '정형돈', '하하', '노홍철'];

//요소 삭제
delete members[4];
console.log(members); //완벽히 삭제가 안된다. 

members 값의 개수가 그대로 6이다.

이 경우 하하가 삭제되긴 했는데 empty라고 뜨고 인덱스도 6 그대로이다. 

 

그럼 이제 splice메소드를 사용해서 요소를 삭제해보자. 

 

 

2-1. splice를 사용하여 요소를 삭제

 

splice메소드는 

배열.splice(index번호) 

이렇게 작성하는데 

TIP 대괄호가 아니라 ( ) 그냥 괄호를 쓴다!

(헷갈림 주의)

 

그런데! 

그냥 index번호만 적으면 

적은 index번호 부터 그 뒤의 값들까지 다 지워버린다. 

예시를 살펴보자 

javascript

닫기 줄바꿈

let members = ['유재석', '박명수', '정준하', '정형돈', '하하', '노홍철'];

//요소 삭제
delete members[4];
console.log(members); //완벽히 삭제가 안된다. 

//splice
members.splice(5);
console.log(members);

//index번호 이후의 값 모두 지워버림
members.splice(1);
console.log(members);

이 경우

노홍철 지워지고 박명수부터도 다 지워짐.

members.splice(1) 을 썼더니 index1부터 그 이후의 값들은 모두 사라졌다.

 

소오름...

삭제할 값의 개수를 넣어주지 않으면 이후 모든 값들이 사라진다. 

 

이러한 문제를 해결하려면

splice(index번호, 사라지게할 값의 개수)

이렇게 적어주어야 한다. 

 

 

예시로 다시 살펴보자. 

javascript

닫기 줄바꿈

let members = ['유재석', '박명수', '정준하', '정형돈', '하하', '노홍철'];

//splice(startIndex,deleteCount)
members.splice(4,2);
console.log(members);

4번 5번 인덱스 값이 사라졌다. 

즉 이렇게 index4번부터 2개의 값이 사라졌다!

 

 

2-2. splice메소드로 삭제한 후 새로운 값 추가하기

 

splice 메소드를 사용하면

삭제 뿐만 아니라 추가도 가능하다!

세번째 파라미터로 추가하고 싶은 값을 넣어주면 끝이다!

그럼 삭제한 자리에 추가가 된다! 

 

자 index2인 정준하부터 시작해서 2개의 요소를 삭제하고

광희와 전진을 그 자리에 넣어보자. 

javascript

닫기 줄바꿈

let members = ['유재석', '박명수', '정준하', '정형돈', '하하', '노홍철'];

//splice(startIndex,deleteCount, item)
members.splice(2,2,'광희','전진');
console.log(members);

나머지 값들은 순서가 밀린다! 

splice매서드가 참 유용하다는 것을 느낄 수 있다.

 

index2번 값인 정준하는 사라졌고 2개를 빼라고 했으니 정형돈도 사라짐...

그 다음

광희과 전진을 추가하였고 

하하와 노홍철은 순서가 뒤로 밀린다. 

index넘버가 변하게 된 것이다.

 

 

2-3. splice메소드로 새로운 값 추가, 수정, 삭제

 

splice(삭제할 인덱스번호, 삭제할개수,추가할값)

이렇게 파라미터를 3개 써준다.

 

splice메소드의 파라미터를 이용해서 

배열 값을 추가, 수정(대체), 삭제 등을 할 수 있다. 

 

 

예시를 보자. 

처음에는 index 1번인 박명수이후 아무것도 지우지 않을거다. 

그리고 광희와 전진만 추가할 것이다. 

 

다음으로

index3번을 포함해 그 다음 값 까지해서 2개의 값을 지울거다. 

그리고 그 자리에 홍진경과 황제성을 넣을거다.

(뜬금포 홍진경과 황제성 ㅋㅋㅋ)

javascript

닫기 줄바꿈

let members = ['유재석', '박명수', '정준하', '정형돈', '하하', '노홍철'];

//splice(startIndex,deleteCount, item)
//삭제할 개수를 0으로 해서 단순히 요소를 추가해보기
members.splice(1,0,'광희','전진');
console.log(members);

//삭제할 요소를 2개로 두고 2개의 요소를 수정해보기
members.splice(3,2,'홍진경', '황제성')
console.log(members);

결과는 위 그림처럼 나온다. 

박명수 앞에 광희랑 전진이 추가되었고 박명수는 뒤로 밀렸다. 

 

자 바뀐 members에서

index 3인 박명수랑 정준하는 지우자.

그 자리에 홍진경과 황제성을 끼워넣는다.

무한도전 멤버가 뭔가 재미있게 바뀌었다. ㅋㅋㅋ

 

 

splice를 좀 더 연습해보자.

내가 좋아하는 딸기당근수박참외메론게임을 가져왔다. 

fruits 배열

ages배열

numbers 배열을 만들었다. 

javascript

닫기 줄바꿈

let fruits = ['딸기', '당근', '수박', '참외', '메론'];
let ages = [10, 20, 30, 40, 50, 60];
let numbers = [];

// fruits 배열에 '당근'를 삭제하고 그 자리에 '사과', '레몬' 를 추가.

fruits.splice(1,1,'사과', '레몬');

// fruits 배열의 첫 번째 요소를 삭제.

fruits.splice(0,1);

// ages 배열에 마지막 요소를 삭제.

ages.splice(ages.length-1,1);

// ages 배열의 2번, 3번 인덱스를 25, 29로 변경.

ages.splice(2,2,25,25);

// numbers 배열에 1, 2, 3, 5, 8, 9를 순서대로 추가.

numbers.splice(0,0,1,2,3,5,8,9);

// 반복문을 활용해서 numbers 배열의 요소들 중 짝수를 모두 삭제..

for (let i = 0; i < numbers.length; i++) {
​​if (numbers[i] % 2 == 0) {
​​​​numbers.splice(i,1);
​​​​i--;
​​};
​};

// 테스트 
console.log(fruits[1]);
console.log(fruits[0]);
console.log(ages[ages.length - 1]);
console.log(ages[3]);
console.log(numbers[3]);
console.log(numbers);

 

여기서 문제가 되는 부분은

numbers 배열에 1,2,3,5,8,9를 순서대로 추가하는 것

 

그 다음에 반복문으로 numbers배열의 요소들 중 짝수를 모두 삭제하는 것이다. 

 

이 부분만 코드를 다시 보자!

javascript

닫기 줄바꿈

let numbers = [];

// numbers 배열에 1, 2, 3, 5, 8, 9를 순서대로 추가.
numbers.splice(0,0,1,2,3,5,8,9);

// 반복문을 활용해서 numbers 배열의 요소들 중 짝수를 모두 삭제.

for (let i = 0; i < numbers.length; i++) {
​​if (numbers[i] % 2 == 0) {
​​​​numbers.splice(i,1);
​​​​i--;
​​};
​};

일단 추가는 잘 되었다. 

0번 인덱스에서부터 0개를 지우고 그 자리에 1,2,3,5,8,9를 넣어주면 된다. 

 

그 다음 1,2,3,5,8,9에서 짝수를 모두 삭제해보자. 

 

for 반복문  if 의 수행 부분을 보자!

일단 splice로 요소가 삭제되면 index가 앞으로 한 칸씩 당겨진다.

그래서 요소의 인덱스값이 다시 다 변한다.

 

이걸 간과하면 단순히 for문을 쓰게 된다. 

처음에는 단순 for문을 썼는데 

결과가 잘 안나왔다. 

 

중요한 부분!!!!!

요소 값이 짝수면 삭제해주고 삭제된 부분으로 값이 다시 당겨지니 index넘버는 그대로 두어야 한다. 

그래서 if numbers[i] % 2 == 0이라면 인덱스 i 값을 -1해줘서 인덱스 넘버는 그냥 그대로 두는 것이다!!

 

이 부분을 while문으로도 작성할 수 있는데 while의 경우 이해가 더 빨랐다. 

 

javascript

닫기 줄바꿈

let numbers = [];
numbers.splice(0,0,1,2,3,5,8,9);

//whlile문 사용해보기 
let i = 0;
while (i < numbers.length) {
​​if (numbers[i] % 2 == 0) {
​​​​numbers.splice(i, 1);
​​} else {
​​​​​​​​i++;
​​​​}
}

 즉, 이렇게 짝수라면 i값을 그대로 두고, 홀수라면 i값을 증가시키는 것이다. 

 

배열 메소드는 splice말고도 다양한 것들이 있다. 

 

다음 글에서는 shift, pop, unshift, push에 대해 정리해보겠다!!