[javascript] 배열에 추가하기 push() / 제거하기 pop() : Programming Story

Java에서 ArrayList에 값을 추가하기 위해서 add()라는 메소드를 사용한다면,

javascript에서는 배열에 값을 추가하기 위해서 push()를 사용한다.

java에서는 배열의 크기를 처음에 할당해주기 때문에 값을 추가해준다는 개념이 없다. 그러려면 배열의 사이즈를 하나 더 늘린채로 다시 할당해준 뒤 원래 값을 다 옮겨넣어주어야 한다.

하지만 javascript에서는 배열의 뒤에 값을 추가해주어 배열의 크기를 늘리는 것이 가능하다. 굉장히 유연하다라는 이야기이다. 아래 코드를 보면 한번에 이해할 수 있을 것이다.

var fruit = ['apple', 'peach', 'grape'];
 
fruit.push('watermelon', 'lemon');
 
console.log(fruit); 
// Output: ['apple', 'peach', 'grape', 'watermelon', 'lemon'];

push()는 심지어 배열이 const로 선언되어 있을 때도 가능하다.

const fruit = ['apple', 'peach', 'grape'];
 
fruit.push('watermelon', 'lemon');
 
console.log(fruit); 
// Output: ['apple', 'peach', 'grape', 'watermelon', 'lemon'];

이렇게 push()를 하면 배열의 마지막에 원소가 추가된다. 그렇다면 마지막에 추가된 원소를 꺼내 제거하고 싶다면 어떻게 하면 될까? 바로 pop() 메서드를 사용해주면 된다. pop() 메서드를 사용해주면 배열의 마지막 원소가 return 되고 배열에서는 해당 값이 사라지게 된다. 위와 똑같은 배열 예시를 사용해 살펴보겠다.

const fruit = ['apple', 'peach', 'grape'];
 
fruit.push('watermelon', 'lemon');

const removed=fruit.pop(); //lemon
console.log(fruit); 
// Output: ['apple', 'peach', 'grape', 'watermelon'];

이런식으로 pop() 을 하게 되면 배열의 마지막 원소가 return 되고 배열에서는 lemon 원소가 사라진 것을 알 수 있다.

push() 의 경우 여러개를 동시에 push 할 수 있었지만 pop()의 경우에는 한번에 한개씩만 제거되는 것을 알 수 있다.

push()와 pop()을 보면, 가장 마지막에 넣은 원소가 가장 먼저 나오는 Last In First out의 구조를 띄고 있다는 것을 알 수 있다. 이는 우리에게 익숙한 자료구조 Stack의 구현과 유사하다는 것을 단번에 알 수 있을 것이다.