JavaScript 배열과 배열 생성 방법 / Array

배열 (Array)

---

배열(Array)이란?

한개의 변수에 여러 개의 값을 순차적으로 저장할 때 사용합니다.

// 배열 생성
var arr = new Array();
var arr = [];

 

배열 안에 들어있는 값들을 요소(element, item, etc)라고 합니다.

var arr = [1, '2', true];
// undefined = 아직 할당하지 않은 값
// null = 독일어로 존재하지 않다. 라는 뜻
//	NaN = Not a Number
var arr1 = [ undefined, null, NaN, 1000];

 

배열의 특징

배열은 번호가 메겨진 인덱스(index)를 갖는 특별한 유형의 '객체' 입니다.

(객체이지만 객체와는 접근 방법이 달라요!)

var colors = [ 'red', 'orange', 'yellow' ];
colors[0];	// 결과 : red

var colors = { first : 'red', second : 'orange', third : 'yellow'};
colors.first;	// 결과 : red

 

• 배열 요소(element)는 객체가 될 수 있다.
• 동일한 배열에 다른 유형의 변수를 가질 수 있다.
• 배열에 객체를 가질 수 있다.
• 배열에 함수를 가질 수 있다.
• 베열에 배열을 가질 수 있다. (다차원 배열)

myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myCars;

 

배열과 객체의 차이점

배열에는 숫자 인덱스(index)를 사용합니다.

그리고 객체는 이름으로 된 인덱스를 사용합니다.

 

 배열과 객체의 사용

• JavaScript라는 이름으로 된 인덱스(연관 배열)를 지원하지 않는다.
• 요소 이름이 문자열이 되도록 하려면 객체를 사용해야 한다.
• 요소 이름을 숫자로 하려면 배열을 사용해야 한다.
• 요소들의 정렬이 필요할 경우 배열을 사용한다. 

---

배열 생성 방법

JavaScript에서 배열은

• 베열 리터럴
• Array 생성자 함수
• Array.of 메소드
• Array.from 메소드

를 통해 생성할 수 있습니다.

배열을 생성하는 방법이 4가지나 있기 때문에 각각의 생성 방식과 특징을 제대로 이해해야 목적에 맞는 방법을 선택할 수 있을 거에요!

이 외에도 String.prototype.split 메소드처럼 배열을 반호나하는 빌트인 객체의 메소드도 있습니다.

각각의 배열 생성 방식의 특성을 살펴볼께요 !

---

1. 배열 리터럴

가장 단순하고 직관적인 배열 생성 방식 입니다.

거의 대부분의 브라우저에서 가장 성능이 좋은 배열 생성 방법이에요 !

let a = [];
let b = [1, 2, 3];

 

배열 리터럴 내부에서 Spread Syntax(스프레드 문법)을 사용하여 기존의 배열을 활용한 새로운 배열을 생성할 수 있습니다.

let a = [1, 2, 3];
let b = [4, 5, 6];
let c = [...a, ...b]	// [1, 2, 3, 4, 5, 6]

 

Spread Syntax는 이터러블(iterable)을 대상으로 사용할 수 있으므로, 배열이 아닌 이터러블로 배열을 생성할 수 있습니다.

let a = 'Hello Luca';
let b = [...a]	// ['H', 'e', 'l', 'l', 'o', ' ', 'L', 'u', 'c', 'a']

 

실행 결과

 

JavaScript... 똑똑하네요

---

2. Array 생성자 함수

length값을 인수로 전달받아서 해당 길이의 배열을 생성해줍니다.

//  배열의 길이가 5개인 배열을 생성
let a = new Array(5);

 

length의 값과 상관없이 빈 배열을 생성하며, 전달된 length 프로퍼티 값이 0이라면 빈 배열 리터럴 '[ ]' 과 동일합니다.

 

let a = new Array(10);
let b = new Array(0);
let c = [];
let d = [1, 2, 3];

// a, b, c, d를 모두 console에 찍어보면...
console.log(Object.getOwnPropertyDescriptors(a));

실행 결과

 

인수를 아예 전달하지 않으면 length가 0인 배열을 생성합니다.

이는 new Array(0) 또는 빈 배열 리터럴 '[ ]' 과 동일합니다.

---

인수를 2개 이상 전달하면 Array.of 메소드와 동일하게 동작합니다.

즉, 인수들을 요소로 갖는 배열을 생성합니다.

let a = new Array(1, 2, 3); // [1, 2, 3]과 같다.

console.log(Object.getOwnPropertyDescriptors(a));

실행 결과

()안에 넣은 1, 2, 3이 value로 들어가고,

총 3개를 넣었으니

index(0, 1, 2)위치에 해당 값(value)가 들어간 것을 볼수 있습니다.

---

new 연산자를 사용하지 않고 호출하여도 동일하게 작동해요 !

//  [], a.length = 2
let a = Array(2);

//  [1, 2, 3]
let b = Array(1, 2, 3);

---

3. Array.of 메소드

전달된 인수를 요소로 갖는 배열을 생성합니다.

Array 생성자 함수와의 차이점은 인수가 1개일 때에도 해당 요소를 갖는 배열을 생성한다는 차이점이 있어요 !

let a = Array.of(1, 2, 'abc', {});// [1, 2, 'abc, {}]
let b = Array.of(10);// [10]
let c = new Array(10);// [], c.length = 10

---

4. Array.from 메소드

유사 배열 객체(Array-like object) 또는 이터러블(iterable)을 인수로 전달받아 배열을 생성합니다.

let a = {length:3, 0 : 1, 1 : 2, 2 : 3}; // 유사 배열 객체
let b = Array.from(a); // [1, 2, 3]
let c = Array.from(b); // ['a', 'b', 'c']

 

Array.from의 두번째 인수로 배열의 모든 요소에 대해 호출할 콜백 함수,
세번째 인수로 콜백 함수 내부에서 this에 바인딩할 객체를 전달 받을 수있습니다.

let a = 'Hello Luca';
let b = Array.from(a, b => b.toLowerCase());

실행 결과 - callback 함수

---

요약

1. 배열 리터럴은 성능이 가장 좋은 배열 생성 방법
2. 규칙적인 수들이 나열된 배열을 바로 생성할 때에는 Array 생성자 함수를 사용하자.
3. 유사 배열 객체 또는 이터러블(iterable)로 배열을 생성하고자 할때는 Array.from 메소드를 사용하자.
4. 이터러블로 배열을 생성할 때나 배열을 합칠 때에는 배열리터럴과 Spread 연산자를 사용하자.