13-1. Array 오브젝트(ES3 기준) / Array 오브젝트 개요, 배열 생성 방법, 엘리먼트 작성 방법, 배열 차원

이번장은 빌트인 Array 오브젝트입니다.
이제 비기너 과정의 마지막 단계입니다.

빌트인 Array 오브젝트 과정은 ES3와 ES5로 나뉘어져있습니다.

ES3가 프로그램 언어에 있어 배열의 기본을 다룬다고 한다면,
ES5는 활용하는 측면이 강합니다.

Array 오브젝트 개요

빌트인 오브젝트
Array(배열) 형태
- [123, “ABC”, “가나다”]
- 대괄호 안에 콤마로 구분하여 값 작성

배열 엘리먼트(Element)
- [123, “ABC”]에서 123, “ABC” 각각을 엘리먼트 또는 요소라고 부름
- 강좌에서는 엘리먼트로 표기
- 2의 32승(4,294,967,296) - 1개

엘리먼트와 요소 : 약간의 뉘앙스 차이가 있습니다.
그래서 강좌에선 엘리먼트로 표기합니다.

배열에서 쓰일 수 있는 엘리먼트 수는 2의 32승 -1 개입니다.
대략 42억개 정도 됩니다.

인덱스(Index)
- 엘리먼트 위치를 인덱스라고 부름
- 왼쪽부터 0번 인덱스, 1번 인덱스

배열 특징
- 엘리먼트 작성이 순서를 갖고 있음
- 배열 전체를 작성한 순서로 읽거나
- 인덱스로 값을 추출할 수 있음

엘리먼트 작성이 순서를 갖습니다.
이거 의미가 굉장히 큽니다.

[123, “ABC”, “가나다”]

이렇게 작성한 것이 순서를 갖는다는 것이죠.
배열에선 순서가 매우 중요한 의미를 갖습니다.
이 순서에 access하는 것이 index입니다.

배열 생성 방법

new Array()로 생성
- var book = new Array();

Array()로 생성
- var book = Array();

new Array()로 배열을 만들 수도 있고, Array() 함수로도 만들 수 있습니다.
각각 배열 인스턴스를 만듭니다.
다만 new 연산자를 사용하고 안하고의 차이입니다.

대괄호로 생성
- var book = [];
- 일반적으로 이 형태를 사용

이와같이 [] 대괄호로도 배열 인스턴스를 만들 수 있습니다.
이 대괄호를 배열 리터럴이라고 부릅니다.
우리과 중괄호{} - 오브젝트 리터럴로 오브젝트 인스턴스를 만든 것과 같은 개념입니다.

자바스크립트 개발자들은 일반적으로 배열리터럴[]을 많이 사용합니다.
위에 new Array()와 Array()도 나름대로의 특징이 있습니다. 배열 리터럴 [] 대괄호와 차이가 있습니다.
이것은 나중에 다루도록 하겠습니다.

엘리먼트 작성 방법

var book = [“책1”, “책2”];
대괄호 안에 콤마로 구분하여 다수 작성 가능
String 타입은 큰 따옴표, 작은 따옴표 모두 가능
JS의 모든 타입의 값, 오브젝트 사용 가능 (인스턴스도 작성할 수 있습니다.)
값을 작성하지 않고 콤마만 작성하면 undefined가 설정됨
```
  var arr = [ , , , , , ];
  console.log(arr[0]); // undefined
```
값을 작성하지 않았다, 정의하지 않았다. 이런 뉘앙스입니다.

배열 차원

1차원 배열
- 대괄호 하나에 엘리먼트 작성
- [12, 34, 56] 형태
```
  var list = [12, 34, 56];
  for (var k = 0; k < list.length; k++) {
      console.log(list[k]);
  }
  // 12
  // 34
  // 56
```
[12, 34, 56] - Array 인스턴스를 만들어 list 변수에 할당합니다.
그런데 new 연산자를 사용 안했으므로 우리는 이것을 오브젝트라고 부르겠다는 것입니다.
즉 배열 오브젝트입니다.
배열은 순서를 가지고 있습니다.
그래서 이 순서애도 읽는 것이 중요합니다.
그리고 배열은 전체를 읽는 경우가 대부분입니다.
물론 홀수번째만 읽거나, 짝수번째만 읽거나, 또는 특정 조건을 부여해서 읽을 수도 있습니다만은, 어쨌든 그런 개념을 배열은 갖고 있습니다.
String 오브젝트에서 length는 문자 수였습니다.
위 코드에서 length는 배열 엘리먼트의 수입니다.
length는 1부터 시작하기 때문에 위 list의 length를 구하면 3
index는 0, 1, 2
배열은 index 개념으로 값을 추출하게되고, 물론 값을 추가할 수도 있고, 변경할 수도 있습니다.

2차원 배열

배열 안에 1차원 배열을 작성
[[12, 34, 56]]

  var list = [[12, 34, 56]];
  for (var k = 0; k < list.length; k++) {
      var one = list[k];
      for (var m = 0; m <one.length; m++) {
          console.log(one[m])
      }
  }
  // 12
  // 34
  // 56

3차원 배열
- 배열 안에 2차원 배열을 작성
- [[[12, 34, 56]]]

var list = [[[12, 34, 56]]];
for (var k = 0; k < list.length; k++) {
    var one = list[k];
    for (var m = 0; m < one.length; m++) {
        var two = one[m];
        for (var p = 0; p < two.length; p++) {
            console.log(two[p]);
        }
    }
}
// 12
// 34
// 56

위 코드는 그렇게 좋은 모습이 아닙니다.
3단계까지 내려가는 것은 좀 가독성이 많이 떨어지죠?
그래서 저는 3단계까지 내려가게되면 3단계 부분을 함수로 떼어냅니다.

그래서 함수를 호출하면서 위의 one[m] 값을 파라미터로 넘겨줍니다.
그렇게하면 가독성이 좋아질 것입니다.

또 다른 방법은 서버 개발자와 최대한 2차원 배열까지 데이터를 만들어달라고 협의하는 것입니다.
왜냐하면 되도록이면 1차원이 좋습니다만, 2차원은.. 배열 형태, row column이 있죠?

행과 열.

이는 어쩔 수 없는 2차원입니다.
그렇기 때문에 2차원까진 하는 것입니다.

어쩔수 없이 3차원이 온다고하면, 저 같은 경우는 for문에 들어가기 전에 2차원으로 정리하는 처리를 합니다.
배열을 두개로 나누는 방법.. 즉, 오브젝트와 프로퍼티죠?

프로퍼티와 배열로 나누는 형태로 분리를 시켜서 되도록이면 for 문이 3개가 중첩되는 것을 피합니다.
나름대로의 제 스타일이라 이것이 반드시 옳다라고 얘기하기엔 그렇지만, 저는 그렇게합니다.

LHJ

13-1. Array 오브젝트(ES3 기준) / Array 오브젝트 개요, 배열 생성 방법, 엘리먼트 작성 방법, 배열 차원