13-3. Array 오브젝트(ES3 기준) / Array 인스턴스 생성, length 프로퍼티

new Array()

Array 인스턴스 생성, 반환
배열 생성 기준 (Array 인스턴스 또는 Array 오브젝트 생성 기준입니다.)
- 파라미터에 따라 배열 생성 기준이 다름
- 파라미터를 작성하지 않으면 빈 배열
```
  var obj = new Array();
  console.log(typeof obj); // object
  console.log(obj.length); // 0
```
  1. new Array()로 생성한 인스턴스 타입은 object
  2. length는 배열의 엘리먼트 수를 나타내며 엘리먼트가 없으므로 0 출력
  typeof에서 object가 나오면 인스턴스라는 의미입니다.
  여기서 length는 String 오브젝트에서 length가 문자의 수를 의미하듯 여기선 배열의 엘리먼트 수를 의미합니다.
- 작성한 순서로 엘리먼트에 설정
```
  var one = new Array(10, 20);
  console.log(one); // [10, 20]
        
  var two = new Array([30, 40]);
  console.log(two); // [[30, 40]]
```
  1. 값을 콤마로 구분하여 다수 작성
    작성한 순서대로 엘리먼트 값으로 설정
  2. 배열로 작성하면 1차원을 더한 차원이 됩니다.
- new Array(3)처럼 파라미터에 숫자를 작성하면 3개의 엘리먼트 생성
```
  var obj = new Array(3);
  console.log(obj); // [undefined, undefined, undefined]
```
  1. 숫자 하나를 작성하면 엘리먼트 수가 되어 3개의 엘리먼트를 가진 배열이 됩니다.
  2. 엘리먼트에는 undefined가 설정됩니다.

new Array(3)

이렇게 배열을 만드는 이유가 뭘까?

예시 시나리오를 생각해봅시다.
맨 처음에 배열의 엘리먼트를 하나도 작성하지 않았습니다.
그리고 몇개의 코드를 처리한 다음에 1, 2, 3을 넣었습니다.
그럼 배열의 값이 1,2,3으로 변하겠죠.

그런데 우리가 시스템적인 측면에서 생각을 해봅시다.
배열을 만들면 메모리 어딘가에 저장이 되겠죠?
그것의 이름을 위 코드에선 var obj로 했던 겁니다.
그렇겠죠?
왜냐하면 우리가 메모리의 address를 알 수 없으니깐 우리는 그 메모리 주소를 obj로 사용하는 거죠.
그런데 처음엔 엘리먼트가 없었죠.

그리고나서 그 다음 코드를 실행하게되면 그 뒤에 엘리먼트를 넣는다구요.
그럼 이 메모리 주소가 100번이라고 했을 때, 다음에 붙인 것들이 예를 들어 1000번까지 붙였다고 칩시다.
그 다음에 1, 2, 3을 넣으면 메모리 주소가 1001번부터라고 가정을 하겠습니다.
앞의 배열과 연결된 뭔가를 알고 있어야 for문을 돌렸을 때 순서대로 읽을 수 있겠죠?

이러한 것들이 chain 개념으로 계속 연결되어있다면, 처리할 때 부담이 됩니다.
하나로 쫙 만들어져 있으면 통째로 읽으면 되는데, 산발적으로 물건이 흩어져있다고 하면, 쫓아다니면서 다 거둬와야될거아니에요.
바로 그런 개념입니다.

new Array(3)

바로 위 개념이 그겁니다.
처음에 비록 내용이 하나도 없다고 하더라도 자리를 미리 잡아놓는 것입니다.
3을 넣었다는 것은 엘리먼트를 3개 안에서 사용하겠다는 의도가 강한거죠.
그러나

new Array(10, 20)

이것은 앞으로 어떻게될지 모른다라는 뉘앙스가 담겨있죠.
왜냐하면 앞으로 어떻게될지 알고 있다면

new Array(3)

이렇게 작성하고 값을 인덱스를 활용해 집어넣으면 산발적으로 여기저기 퍼져있는 그런 모습은 안되잖아요.
컴퓨터를 처음에 만들 때는 이러한 것들이 굉장히 부담이 됐습니다.
왜냐면 그때는 컴퓨터 사양도 안좋고 프로그램 처리 속도도 빠르지 않았고 그래서 자릿수를 먼저 잡아놓는 그런 개념의 이론이 나왔던 거죠.

이렇게 배열의 자릿수를 먼저 잡아놓고 그리고 거기다 값을 집어넣는, 그런 언어들도 있습니다.
그러니까 이거는 속도가 굉장히 빠르죠.
비록 엘리먼트를 100개를 만들어놓고 그 중에서 10개만 쓴다고 하더라도 다음에 추가되더라도 100개 안에서는 시스템에 영향을 미치지 않습니다.
자리를 이미 미리 잡아놨으니까요.
그런 개념이 바로 new Array(3) 입니다.

그런데 최근엔 컴퓨터 사양도 좋고요, 특히 브라우저나 모바일은 혼자서 쓰잖아요?
그래서 지금은 이런 개념에 크게 구애를 받지 않아도 되요.
자바스크립트는 사용자적인 측면에서 접근을 한 것이죠.

바로 new Array(10,20) 이거죠.
이런 개념인거죠.
이렇게 만들고 나중에 필요할 때마다 넣으면, 비록 메모리에 산발적으로 저장이 되더라도 시스템 사양이 좋으니까 이런거에 대해서 부담을 안갖는다라는 거죠.

ES6에 가면 typedArray라는 것이 있습니다.
그것은 new Array(3)과 같은 개념을 적용했습니다.
new Array(10, 20) 개념이 없습니다.

Array()

Array 인스턴스 생성, 반환
- new Array()와 생성 방법 및 기능 같음
  Array() 함수도 new Array()와 마찬가지로 Array 인스턴스를 생성하고 반환합니다.

인스턴스 생성 논리
- new Array()는 new 연산자에서 생성자 함수를 호출하여 인스턴스 생성
- Array()는 직접 생성자 함수를 호출하여 인스턴스를 생성

new Array()는 new 연산자가 prototype에 있는 constructor를 호출합니다.
contsructor가 인스턴스를 생성해서 반환합니다.

반면 Array() 함수는 생성자 함수(constructor)를 바로 호출하는 겁니다.
그래서 이것 또한 new Array() 처럼 생성자함수라고 부를 수 있지만 앞에 new 연산자가 없어서 Array() 함수라고 부른 것입니다.

그러나 앞에가 A 대문자죠.
이걸 보면 생성자 함수라고 볼 수 있습니다.
일반적으로 소문자면 그건 메소드나 함수가 되겠는데요, A가 대문자니까 아 이건 생성자 함수구나, 그런데 new 연산자를 사용하지 않았구나. 라는거죠.

length 프로퍼티

배열 [1, 2, 3]에서
- length 값은 3
- Array 오브젝트에 { length: 3 } 형태로 설정
```
  var value = [1, 2, 3];
  console.log(value.length); // 3
```
  1. [1, 2, 3]의 length 값은 3
  2. {length: 3} 형태로 설정되므로 length를 프로퍼티 이름으로 엑세스 할 수 있음
- 처음 인덱스는 0, 마지막 인덱스는 2

열거 / 삭제는 할 수 없지만, 변경은 가능
length 프로퍼티는 열거 / 삭제는 할 수 없지만 변경은 가능합니다.
length 값을 변경하면 배열의 엘리먼트 수가 변경됨
이거 조금 애매합니다.
왜냐하면 length 프로퍼티는 자바스크립트 엔진에서 만드는 거거든요?
그것을 개발자 코드로 변경할 수 있다?
편리해서 좋긴 하지만 변경은 좀 그렇습니다.
length 값을 변경하면 엘리먼트의 수가 변경됩니다.
```
  var value = [1, 2, 3];
  value.length = 5;
  console.log(value); // [1, 2, 3, undefined, undefined]
```
1. 늘어난 엘리먼트 값은 undefined
```
  var value = [1, 2, 3];
  value.length = 2;
  console.log(value); // [1, 2]
```
1. 3에서 2로 줄이면 뒤의 엘리먼트가 삭제됩니다.

이러한 것들은 조금 그렇습니다.
가독성도 많이 떨어지구요, 자세히 봐야되잖아요? 코드를?
이런거는 메소드로 처리하는 것이 더 낫습니다.
물론 이건 제 개인 스타일입니다.
물론 안된다는 거는 아닙니다.

LHJ

13-3. Array 오브젝트(ES3 기준) / Array 인스턴스 생성, length 프로퍼티