[노드JS] 배열에 값 추가 및 삭제

배열에 값을 추가하거나 삭제하는 방법을 알아보자.

배열에는 다음과 같은 메소드가 포함되어 있어 그 요소 값을 확인하거나 추가 또는 삭제할 수 있다.

속성/메소드 이름	설명
push(object)	배열의 끝에 요소를 추가한다.
pop()	배열의 끝에 있는 요소를 삭제한다.
unshift()	배열의 앞에 요소를 추가한다.
shift()	배열의 앞에 있는 요소를 삭제한다.
splice(index, removeCount, [Object])	여러 개의 객체를 요소로 추가하거나 삭제한다.
slice(index, copyCount)	여러 개의 요소를 잘라내어 새로운 배열 객체로 만든다.

먼저 배열의 끝에 요소를 추가하거나 삭제할 때는 push()와 pop() 메소드를 사용한다. 배열에 객체를 추가하는 경우가 많기 때문에 push() 메소드는 자주 사용된다. 다음 그림은 push()와 pop() 메소드가 객체를 어떻게 배열에 넣고 빼는지를 알려준다.

▲ push()와 pop() 메소드로 배열의 끝에 요소를 추가하거나 삭제하기

사용자 객체를 배열에 넣었다가 삭제하는 기능을 만들기 위해 ch03_test11.js 파일을 만들고 다음과 같이 입력하자.

var Users = [{name:'소녀시대', age:20}, {name:'걸스데이', age:22}];

console.log('push() 호출 전 배열 요소의 수 : %d', Users.length);

Users.push({name:'티아라', age:23});

console.log('push() 호출 후 배열 요소의 수 : %d', Users.length);

Users.pop();

console.log('pop() 호출 후 배열 요소의 수 : %d', Users.length);

▲ push() 메소드로 객체를 추가했다가 pop() 메소드로 객체를 삭제한 경우의 콘솔 메시지

push()와 pop() 메소드는 배열의 가장 끝부분에 요소를 추가하거나 삭제하지만 unshift()와 shift() 메소드는 가장 앞에 요소를 추가하거나 삭제한다.

▲ unshift()로 배열의 앞부분에 요소를 추가하고 shift() 메소드로 배열의 앞부분에 있는 요소를 삭제하기

배열의 앞쪽에 요소를 추가했다가 삭제하는 기능을 만들기 위해 ch03_test12.js 파일을 만들고 다음과 같이 입력한다.

var Users = [{name : '소녀시대', age:20}, {name : '걸스데이', age:22}];

console.log('unshift() 호출 전 배열 요소의 수 : %d', Users.length);

Users.unshift({name:'티아라', age:23});

console.log('unshift() 호출 후 배열 요소의 수 : %d', Users.length);

Users.shift();

console.log('shift() 호출 후 배열 요소의 수 : %d', Users.length);

Users 변수에 할당된 배열 객체에는 두 개의 요소가 들어 있다. usshift() 메소드를 호출하여 객체를 하나 더 추가했다가 shift() 메소드를 호출하여 삭제한다. 이 파일을 실행하면 콘솔 창에 다음과 같은 메시지가 출력된다.

▲unshift() 메소드로 객체를 추가했다가 shift() 메소드로 삭제한 경우의 콘솔

그런데 배열 중간에 있는 요소를 삭제하고 싶다면 어떻게 해야 할까? delete 키워드를 사용하면 인덱스를 이용해 배열 요소를 삭제할 수 있따. ch03_test13.js 파일을 만들고 다음과 같이 delete 키워드를 이용해 배열 요소를 사제하는 코드를 입력한다.

var Users = [{name:'소녀시대', age:20}, {name:'걸스데이', age:22}, {name:'티아라', age:23}];

console.log('delete 키워드로 배열 요소 삭제 전 배열 요소의 수 : %d', Users.length);

delete Users[1];

console.log('delete 키워드로 배열 요소 삭제 후');

console.dir(Users);

▲ delete 키워드로 배열 요소 한개를 삭제한 경우

그런데 이상하다?

분명 두 번째 요소는 삭제되었는데 배열의 개수는 그대로 3개이다. 이 것은 배열 안에 요소를 담아 둘 수 있는 공간이 그대로 남아있다는 뜻이다. 객체만 삭제되었기 때문이다. 이런 경우에 빈 공간이 undefined로 남아 배열 객체를 다룰 때 혼동을 일으킬 수 이;ㅆ다.

따라서 배열 요소를 담는 공간까지 없애 주는 splice() 메소드를 사용하는 것이 좋다.

splice() 메소드는 배열 요소 여러 개를 한꺼번에 추가하거나 삭제할 수 있는 방법이다.