하루에 0.01%라도 성장하자

Develop/Javascript

배열

뚠님 2019. 4. 30. 11:07
반응형

메소드 

설명 

 push(object)

배열의 끝에 요소 추가 

 pop()

배열의 끝 요소 제거 

 unshift()

배열의 제일 앞에 요소 추가 

 shift()

배열의 제일 앞에 요소 제거 

 splice(index, removeCount, [object])

여러 개의 객체를 요소로 추가, 제거 

 slice(index, copyCount)

여러 개의 요소를 잘라내여 새로운 배열 객체 생성 

 

자료 구조에서 Stack, Queue 라는 개념이 있는데, 

 

Stack은 계속 쌓이는 형태로 제일 FILO (First In Last Out) 형태를 갖는다.

Que는 버스 줄을 생각 하면 되는데 FIFO (First In First Out) 형태를 갖는다.

 

그래서 우리는 주로 누적 하는 것을 'Stack을 쌓는다' 라고 표현한다. ( 게임에서도 사용함 크크..)

 

이 이야기를 왜 했냐면 push(), pop() 이 Stack, unshift(), shift() 가 Queue 구조를 잡는데 사용 되기 때문이다.

 

우선 이 메소드를 이용해서 테스트 코드를 작성 했다.

 

Test Code

var test = [
{name : '코코넛', age : '29'},
{name : '뚠뚠', age : '29'},
{name : '응애에요', age : '60'},
{name : '할말이 없다..', age :'100'}];
console.dir(test);
console.log('test 길이 : ', test.length);
console.log('PUSH');
test.push({name: '추가', age: '1'});
console.dir(test);
console.log('test 길이 :', test.length);
console.log('POP');
test.pop()
console.dir(test);
console.log('test 길이 :', test.length);
console.log('UNSHIFT');
test.unshift({name : '추가', age : '1'});
console.dir(test);
console.log('test 길이 :', test.length);
console.log('SHIFT');
test.shift()
console.dir(test);
console.log('test 길이 :', test.length);

Result

 

 

앞도, 끝도 아닌 중간의 배열 값을 제거 하려면 어떻게 해야 할까 ?

 

앞에서 설명하지 않은 'delete' 라는 키워드가 있다. 해당 키워드를 이용하면 index 를 이용해서 배열의 특정에 있는 '내용' 을 삭제 할 수 있다.

 

우선 코드로 보자.

 

Test Code

var test = [

{name : '코코넛', age : '29'}, 

{name : '뚠뚠', age : '29'}, 

{name : '응애에요', age : '60'}, 

{name : '할말이 없다..', age :'100'}];







console.log('test 길이 : ', test.length);



console.log('DELETE');



delete test[1];



console.log('test 길이 : ', test.length);

console.dir(test);

 

Result

 

결과를 보면 'delete' 키워드를 사용 하여 제거 하였지만 길이는 그대로 이다.

왜냐하면 'delete' 키워드는 배열의 index를 통해 접근 하여 안에 '내용' 만 삭제 하기 때문이다. 

추가 : '내용'만 삭제 한다고 볼 수 도 있고, 삭제후 length 갱신을 해주지 않는다 라고 볼 수 도 있다. 무엇이 맞는지는.. 더 공부해야 알 것 같은데..

 

따라서 '공간' 까지 삭제를 해줘야 하는데, 삭제를 해줄때는 splice() 를 사용한다.

 

Test Code

var test = [

{name : '코코넛', age : '29'},

{name : '뚠뚠', age : '29'},

{name : '응애에요', age : '60'},

{name : '할말이 없다..', age :'100'}];







console.log('test 길이 : ', test.length);







console.log('SPLICE 요소 삭제');

test.splice(2, 1);

console.log('test 길이 : ', test.length);

console.dir(test);







console.log('SPLICE 요소 추가');

test.splice(1, 0, {name:'추가 데이터', age :'1000'});

console.log('test 길이 : ', test.length);

console.dir(test);

 

Result

 

이렇게 splice()를 이용해서 삭제 하면 공간까지 삭제가 된다.

 

 

slice() 의 경우는 기존 배열의 일부를 가져다가 새로운 배열로 만드는 것인데, 주로 특정 문자열 자르기에 사용된다.

 

Test Code

var test = [

{name : '코코넛', age : '29'},

{name : '뚠뚠', age : '29'},

{name : '응애에요', age : '60'},

{name : '할말이 없다..', age :'100'}];



console.log('원본');

console.dir(test);

console.log('test 길이 : ', test.length);







console.log('SLICE 요소 추출');

var test1 = test.slice(1, 4);

console.log('test 길이 : ', test1.length);

console.dir(test1);





var test2 = test1.slice(0,1);

console.log('test 길이 : ', test2.length);

console.dir(test2);

 

Result

 

반응형