[Javascript] 배열이란?

배열은 여러개의 값을 순차적으로 나열한 자료구조이다.
자바스크립트는 배열을 다루기 위한 유용한 메서드를 다수 제공한다.

다음 배열은 배열 리터럴을 통해 생성한 것이다.

const arr = ['apple', 'banana', 'lemon'];

배열이 가지고 있는 값을 요소(element)라고 부른다. 배열의 요소는 배열에서
자신의 위치를 나타내는 0이상의 정수인 인덱스(index)를 갖는다.

위 예제의 배열 arr은 3개의 요소 ‘apple’, ‘banana’, ‘lemon’로 구성되어있다.
요소에 접근할 때는 대괄호( [ ] ) 표기법을 사용한다.
대괄호 내에는 접근하고 싶은 요소의 인덱스를 지정한다.

arr[0] // console로 출력하게 되면 arr[0]은 'apple'이 출력된다.
arr[1] // console로 출력하게 되면 arr[1]은 'banana'가 출력된다.
arr[2] // console로 출력하게 되면 arr[2]은 'lemon'이 출력된다.

---

배열은 길이를 나타내는 length 프로퍼티를 갖는다.

arr.length // -> 3

---

📌  자바스크립트에 배열이라는 타입은 존재하지 않는다. 배열은 객체 타입이다.

자료구조에서 말하는 배열(동일한 크기의 메모리 공간이 빈틈없이 연속적으로 나열된 자료구조를 말한다.)
자바스크립트는 희소배열이 존재하고 자료구조에서 말하는 배열과는 다르다.

typeof arr // -> object

---

✍  배열 생성 방법

1. 배열 리터럴
2. Array 생성자 함수
3. Array.of 메서드
4. Array.from 메서드

1. 배열 리터럴

var arr = [1, 2, 3];
console.log(arr.length); // 3

var arr = [];
console.log(arr.length); // 0

var arr = [1, , 3]; // 희소 배열
console.log(arr.length); // 3
console.log(arr); // [1, ,3]
console.log(arr[1]); // undefined

2. Array 생성자 함수

/* Object 생성자 함수를 통해 객체를 생성할 수 있듯이 Array 생성자 함수를 통해 
배열을 생성할 수도 있다. 전달된 인수가 1개이고 숫자인 경우 length 프로퍼티 값이 
인수인 배열을 생성한다. */
const arr = new Array(10);
console.log(arr.length); // 10
console.log(arr); // [empty * 10]

/* 전달된 인수가 없는 경우 빈 배열을 생성한다. */
new Array(); // [ ]

/* 전달된 인수가 2개 이상이거나 숫자가 아닌 경우 인수를 요소로 갖는 배열을 생성한다. */
new Array(1, 2, 3); // -> [1, 2, 3]
new Array({ }); // -> [{}]

/* ** Array 생성자 함수는 new 연산자와 함께 호출하지 않아도 된다. 
Array 생성자 함수 내부에서 new.target을 확인하기 때문이다. */
Array(1, 2, 3); // -> [1, 2, 3]

3. Array.of 메서드

/* ES6에서 도입되었으며 전달된 인수를 요소로 갖는 배열을 생성한다.
전달된 인수가 1개이고 숫자이더라도 인수를 요소로 갖는 배열을 생성한다. */

Array.of(1); // -> [1]
Array.of(1, 2, 3); // -> [1, 2, 3]
Array.of(‘string’); // -> [‘string’]

4. Array.from 메서드

/* ES6에서 도입되었으며, 유사 배열 객체 또는 이터러블 객체를 인수로 전달받아 배열로 변환하여 반환한다. */

// 유사 배열 객체를 반환하여 배열 생성 
Array.from({ length: 2, 0: ’a’, 1: ‘b’}); // [‘a’, ‘b’]

// 이터러블을 변환하여 배열을 생성한다. 문자열은 이터러블이다.
Array.from(‘Hello’); // [‘H’, ‘e’, ‘l’, ‘l’, ‘o’]