[TYPES & GRAMMAR] 챕터 2 : VALUES - Array

 

Github에 공개되어있는 내용 중 TYPES & GRAMMAR의 챕터 2 : VALUES 의 Array 내용을 개인적으로 번역한 것입니다.

원문 : https://github.com/getify/You-Dont-Know-JS/blob/master/types%20%26%20grammar/ch2.md

getify/You-Dont-Know-JS

---

챕터 2 : VALUES

array, string, number는 어느 프로그램에서건 가장 기초가 되지만, JavaScript에서는 이 타입들이 당신을 당황하게 할 수 있는 특징들을 가지고있다.

 

JavaScript에 내장된 여러 타입들을 살펴보고 이들의 동작과 이점이 무엇인지 알아본다.

 

---

Arrays

다른 정적 타입의 언어들과 대조적으로, JavaScript의 array는 string부터 number, object 심지어 array까지 모든 타입의 값을 포함할 수 있는 컨테이너이다.

 

var a = [ 1, "2", [3] ];
a.length;    // 3
a[0] === 1;    // true
a[2][0] === 3;    // true

 

array는 선언 시 길이를 미리 지정할 필요가 없으며, 선언 이후 값을 추가하기만 하면 된다.

 

var a = [];
a.length;    // 0
 
a[0] = 1;
a[1] = "2";
a[2] = [3];
a.length;    // 3

 

주의 : array의 값에 delete 연산자를 사용하면 array의 요소를 비우게 된다. 다만, array의 요소를 비우더라도 length는 변하지 않으므로 주의해야한다.

 

array의 요소가 연속되지 않는 array를 사용할 때 특히 주의하도록 한다.

 

var a = [];
 
// a[1]은 값을 넣어주지 않음
a[0] = 1;
a[2] = [3];
 
a[1];    // undefined
a.length;    // 3

 

위 코드에서 다른 요소들 사이의 빈 공간(a[1])은 혼란을 야기할 수 있다. 그 빈 공간이 undefined 값을 가지고 있는 것 처럼 보이지만 실제로 undefined 값을 지정한 것(a[1] = undefined)과 동일하게 동작하지는 않기 때문이다.

 

array가 숫자로 인덱싱이 될 것이라고 생각하겠지만, array 또한 object이기 때문에 문자열 키와 속성을 추가할 수 있다.

(그러나 이것은 array의 length를 증가시키지는 않는다.)

 

var a = [];
 
a[0] = 1;
a["foobar"] = 2;
 
a.length;    // 1
 
a["foobar"];    // 2
a.foobar;    // 2

 

하지만 알아둬야할 것은, 키 값으로서 문자열 값은 키를 문자열이 아닌 숫자 인덱스로 사용하길 원한다면 10진수로 강제될 수 있다는 것이다.

 

var a = [];
 
a["13"] = 42;
 
a.length;    // 14

 

일반적으로 array에 문자열 키나 속성을 추가하는 것은 좋은 생각은 아니며, 키-값 형태는 object를, array에는 숫자 인덱스만을 사용하는 것이 바람직하다.

 

Array-Likes

array-like 객체에 array의 네이티브 함수(indexOf, concat, forEach ...)를 사용하기 위해서는 반드시 array로의 변환이 필요하다.

 

예를 들어, 여러 DOM 연산자는 DOM 요소의 리스트를 리턴하는데 이 DOM 요소는 array가 아닌 array-like 이다. 다른 예로는 함수가 arguments를 추출할 때 전달 인자들이 array-like로 리턴되는데, array로서 사용하기 위해서는 변환이 필요하다.

 

function foo ()
{
    var arr = Array.prototype.slice.call(arguments);
    arr.push("bam");
    console.log(arr);
}
 
foo("bar", "baz");    // ["bar", "baz", "bam"]

 

ES6에서는 Array.from() 이 내장 함수로 추가되어 위 코드와 같이 array-like를 array로 변환할 수 있다.

 

function foo ()
{
    var arr = Array.from(arguments);
}

 

---

추가

Array-Like는 유사배열객체라고도 부르는데, 배열처럼 보이는데 타입은 Object인 객체를 말한다.

 

array-like는 아래 코드와 같이 만들 수 있는데, 조건이 있다.

첫째, 반드시 length가 필요하며 값이 변경될 경우 갱신해줘야한다.

둘째, 인덱스 번호가 0부터 시작해 1씩 증가해야만 한다.

 

let arrayLike = {
      0 : "Array"
    , 1 : "Like"
    , length : 2
};

 

이러한 array-like는 타입이 object이므로 배열처럼 보이지만 Array의 내장 함수를 사용할 수 없는데, ES5에서는 call 방식으로 배열로 변환하고 ES6부터는 위 설명과 같이 Array.from으로 변환할 수 있다.

 

앞으로 배열같이 생겼는데 타입이 object이면 array-like 인지도 확인해봐야겠다... 어려운 자바스크립트....