29. 자료구조 - 배열

순서가 있는 컬렉션을 다뤄야할 때 사용하는 데이터 타입이 배열이다.

---

선언

배열의 선언은 두가지 방법이 있다.

let arr = new Array();
let arr = [];

또한 원시타입처럼 선언과 할당을 동시에 할 수 있다.

let animal = ["cat", "dog", "shark"];
console.log(animal[0]); // cat
console.log(animal[1]); // dog
console.log(animal[2]); // shark

배열의 요소는 인덱스로 접근할 수 있다.
배열의 요소는 순서를 가지며, 이 인덱스는 해당 값의 키에 해당된다.
또한 배열은 가변형 데이터이기 때문에 요소를 수정 추가 제거를 할 수 있다.

// 수정
console.log(animal[1]); // dog
let animal[1] = 'horse';
console.log(animal[1]); // horse

// 추가
let animal[3] = 'duck';
console.log(animal[3]); //duck

length프로퍼티를 사용하여 배열의 길이도 구할 수 있다.

let arr = ['a', 'b', 'c'];
console.log(arr.length); // 3

---

pop(), push() & shift(), unshift()

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

Firtst In First Out

• push - 배열의 끝에 요소를 추가한다.
• shift - 배열의 맨 처음 요소를 꺼내주고 남아있는 요소들을 앞으로 당겨준다.
  
  화면에 순차적으로 띄울 메시지를 담을 자료구조를 큐로 사용한다.
  실무에서 상당히 자주 쓰인다고 한다.

또한 배열은 stack이라는 자료구조를 표현할 때도 사요한다.

Last In First Out

• push - 배열의 끝에 요소를 추가한다.
• pop - 배열의 끝 요소를 꺼내준다.
  
  스택을 사용하면 가장 나중에 집어넣은 요소가 먼저 나온다.
  보통 우리가 메서드를 호출할 때 사용되는 방식 중 하나라고 알고 있다.

배열을 요소를 다루는 메서드중 끝의 요소를 다루는게

pop()

-> 배열 끝 요소를 제거하고, 제거한 요소를 반환한다.

push()

-> 배열의 끝에 요소를 추가하고, 그 길이를 반환한다.

그리고 배열의 첫번째 요소를 다루는 게

shift()

-> 배열의 첫 번째 요소를 제거하고, 해당 요소를 반환 한다.

unshift()

-> 배열의 첫 번째에 요소를 추가하고 해당 배열의 길이를 리턴한다.

---

배열의 내부 동작 원리

배열은 특별한 종류의 객체다.
대괄호를 이용하여 요소에 접근하는 방식은 객체 문법에서 왔다.
다만 배열의 키는 인덱스라는 점이 다르다.
인덱스를 키로 사용함으로써 순서가 있는 오브젝트라고 할 수 있다.
즉 배열의 본질은 객체이고, 배열은 원시타입 데이터들과 다르게 객체처럼 작동한다.

let animal = ['duck'];
let arr = animal;

console.log(arr === animal); // true

arr[0] = 'chicken';
console.log(animal[0]); //chicken

배열을 배열답게 만들어주는 것은 특수 내부 표현방식이다.
요소를 인접한 메모리 공간에 차례로 저장해 연산 속도를 높이는데,
만약에 배열을 순서가 있는 자료로 다루지 않고 일반 객체처럼 다루면 제대로 작동하지 않는다.

// 예를 들어
let animal = []; // 빈 배열 생성
animal[999] = 'quakka'; // 배열의 길이보다 훨씬 긴 인덱스에 데이터를 넣을 경우
animal.name = 'quakka'; // 배열을 일반 객체처럼 다룰 때

배열 자체는 객체이므로 위의 예시처럼 다루더라도 에러가 발생하진 않는다.
다만, 자바스크립트 엔진이 배열을 일반 객체처럼 다루기 때문에 배열을 사용함으로써 얻는 이점이 사라진다.

---

성능

push와 pop보다 shift와 unshift가 더 느리다.
그 이유는 끝의 요소를 다룰 때는 그냥 넣어주고 빼주면 끝이지만,
앞의 요소를 다룰때는 빼거나 추가할 때 배열 전체요소를 미루거나 당겨야한다.
즉, 배열의 요소가 많으면 이동하는 요소가 많아져 메모리 연산도 길어진다

---

for of

배열에 적용할 수 있는 다른 반복문으로 for ... of가 있다.

let animals = ['quakka', 'dog', 'cat'];
for(let animal of animals) {
  console.log(animal);
}

animal이란 변수에 요소 하나하나가 반복되어 담기게 된다.
배열 또한 객체이기 때문에 for...in을 사용할 수 있지만,
유사 배열에서 인덱스만이 아닌 특별한 프로퍼티가 존재할 수 있다.
이러한 것들이 모두 반복의 대상이 되기 때문에 문제가 생길 수 있다.
그리고 중요한것은 배열에 for...in을 사용하면 느리다...

---

length 프로퍼티

배열의 요소를 조작하면 length라는 프로퍼티가 자동으로 갱신 된다.
다만, length프로퍼티는 배열의 갯수를 저장하는 것이 아닌 제일 큰 인덱스에 +1을 해준 값이다.
즉 아래와 같다면 length 프로퍼티도 아주 커진다

let arr = [];
arr[9999] = 10;
console.log(arr.length); // 10000

이렇게 배열을 사용하는 것은 좋지 않다.

또 다른 특이점이라고 한다면 length프로퍼티의 값을
수동으로 핸들링 할 수 있다.

예를들어 length프로퍼티의 값을 늘리면 아무런 변화가 없지만, 값을 감소시킨다면 배열이 짤려서 데이터 손실이 일어난다.
한번 짧아진 배열은 복구가 불가능 하다.

---

new Array()

배열의 또다른 선언법인 new Array()문법이 있다.

let animals = new Array('quakka', 'horse');

보통 리터럴 방식인 []를 많이 사용한다.
문법도 더 짧기도 하지만 new Array는 다루기 까다로운 기능들이 있다.
예를 들어 아래와 같은 상황이다.

let arr = new Array(5); // 이렇게 만들면 길이가 5인 빈 배열이 만들어진다.
console.log(arr[0]. arr[1]); // undefined, undefined
console.log(arr.length); // 5

new Array(number)을 사용하여 배열을 만들면 배열의 요소는 모두 undefined가 된다.

---

배열 속에 배열 다차원 배열

배열의 요소로 또 다른 배열이 올 수 있다. 이것을 2차원 배열이라 하며 이것이 계속 중첩이 가능하여 이러한 것을 다차원 배열이라고 한다.
보통 다차원 배열은 행렬을 저장하는 용도로 사용 된다.

let matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

console.log(matrix[2][2]); // 9

---

toString

배열에는 toString메서드가 구현되어 있다.
배열에서 이 메서드를 호출하면 요소들이 ,로 구분되어 문자열오 반환된다.

let arr = [1, 2, 3];
alert(arr); // 1, 2, 3