(JS) Array와 push, pop, shift, unshift (배열 자료구조)

https://ko.javascript.info/array

배열

 

순서가 있는 컬렉션을 다뤄야 할 때 객체를 사용하면 순서와 관련된 메서드가 없어 불편하다.

객체는 태생이 순서를 고려하지 않고 만들어진 자료구조이기 때문에

객체를 이용하면 새로운 프로퍼티를 기존 프로퍼티 사이에 끼워 넣는것도 불가능하다.

이럴땐 순서가 있는 컬렉션을 저장할 때 쓰는 자료구조인 배열을 사용할 수 있다.

 

 

배열 선언

let array = new Array(3);
console.log(array);

`3개의 빈 공간이 있는 배열이 생성되었다.

let fruits = ['사과', '오렌지', '자두'];

console.log(fruits[0]);
console.log(fruits[1]);
console.log(fruits[2]);

배열 선언과 동시에 인덱스게 값을 초기화하였다.

 

배열 수정/추가

let fruits = ['사과', '오렌지', '자두'];
fruits[2] = '앵두';
fruits[4] = '대포알';

console.log(fruits);

인덱스가 2까지있던 배열에다 인덱스 4에 데이터를 선언하니 인덱스 3은 빈 채로 출력되었다

 

배열 요소의 자료형에는 제약이 없다!!

let fruits = ['사과', {name : '이덕춘'}, true, function() {console.log('안녕하세요');}];
console.log(fruits);
console.log(fruits.zz);
console.log(fruits[1].name);
fruits[3]();

 

 

또한 배열 선언시 객체처럼 길게 늘어뜨려 마지막에 쉼표를 추가해도 상관없다.

let fruits = [
    '사과',
    '참외',
    '수박',
]

---

pop·push와 shift·unshift

스택(Stack)

큐(Queue)

배열을 사용해 만들 수 있는 대표적인 자료구조는 스택과 큐가 있다.

배열과 마찬가지로 순서가 있는 컬렉션을 저장하는데 사용한다.

 

스택과 큐에 사용되는 주요 연산은 push와 pop, shift와 unshift가 있다.

 

push와 pop부터 알아보자면...

• push : 맨 끝에 요소를 추가한다.
• pop : 맨 끝에 요소를 빼고 그 값을 반환한다.

스택(stack)의 구조와 닮아있다. 아니 똑같다.

push와 pop은 해당 배열의 맨 끝 요소들을 컨트롤하는 자료구조이다.

스택을 사용하면 가장 나중에 집어넣은 요소가 먼저 나온다. 이런 특징을 줄여서 후입선출(Last-In-First-Out, LIFO)이라고 한다.

 

pop

let fruits = [
    '사과',
    '참외',
    '수박',
]
pop = fruits.pop()
console.log(fruits);
console.log(pop);

변수 pop에 fruits.pop()의 값을 반환받은 후 배열 fruits와 pop을 콘솔에 띄워보았다. 변수 pop에는 배열의 마지막 요소인 수박이 반환되었고, 배열 fruits에는 수박이 빠졌다.

 

push

let fruits = [
    '사과',
    '참외',
    '수박',
]
console.log(fruits);
push = fruits.push('배');
console.log(fruits);
console.log(push);
console.log(fruits.length);

push 메서드는 해당 배열의 맨 끝에 입력한 자료를 출력해준다.

그리고 그 배열의 길이가 반환된다.

(push의 출력값과 fruits.length의 출력값이 똑같다.)

---

shift와 unshift는 배열 앞에 무엇인가를 해주는 메서드이다

• shift : 배열 앞에 요소를 제거하고 제거한 요소를 반환한다.
• unshift : 배열 앞의 요소를 추가한다.

 

shift

let fruits = [
    '사과',
    '참외',
    '수박',
]
console.log(fruits); // '사과', '참외', '수박' 출력
shift = fruits.shift(); // 사과 제거 후 변수 shift에 반환
console.log(fruits); // '참외', '수박' 출력
console.log(shift); // '사과' 출력
console.log(fruits.length); // 배열 길이 : 2

shift는 배열에서 맨 앞의 요소를 당겨와서 빼고 그 빠진 값을 반환한다.

 

 

unshift

let fruits = [
    '사과',
    '참외',
    '수박',
]
console.log(fruits); // '사과', '참외', '수박' 출력
unshift = fruits.unshift('복숭아'); // 배열에 '복숭아' 추가 후 변수 unshift에 배열 길이 반환
console.log(fruits); // '사과', '참외', '수박', '복숭아' 출력
console.log(unshift); // 배열길이 : 4

unshift는 배열의 맨 앞에 어떤 요소를 추가할 수 있다.

unshift 메서드는 배열에 어떠한 값을 추가한 후 배열의 길이를 반환한다.

 

---

요약

자바스크립트에서 배열은 특수한 형태의 객체이며

순서가 있는 자료를 저장하고 관리하는 용도에 최적화된 자료구조이다.

let arr = [item1, item2]; // 가장 많이 쓰임

let arrn = new Array(number); // 잘 쓰이지 않음
let arri = new Array(item1, item2); // 잘 쓰이지 않음

• push(...items) - items를 배열 끝에 더해주고 배열의 길이를 반환한다.
• pop() - 배열 끝 요소를 제거하고 제거한 요소를 반환한다.
• shift() - 배열 처음 요소를 제거하고 제거한 요소를 반환한다.
• unshift(...items) - items를 배열 처음에 더해주고 배열의 길이를 반환한다.