[JS][값] Array

배열, 문자열, 숫자는 모든 프로그램의 가장 기본적인 구성 요소지만 자바스크립트에서는 독특한 특성을 갖고있어 개발자를 웃게도, 울게도 만든다. 자바스크립트에 내장된 값타입과 작동방식을 살펴보고 정확하게 사용할 수 있도록 완전히 이해하자.

배열

자바스크립트 배열은 타입이 엄격한 다른 언어와 달리 문자열 숫자 객체 심지어 다른 배열이나 어떤 타입의 값이라도 담을 수 있는 그릇이다.

 

var a - [1, "2", [3]];

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

 

배열 크기는 미리 정하지 않고도 선언할 수 있으며 원하는 값을 추가하면 된다.

 

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

a.length; //3

 

배열 값에 delete 연산자를 적용하면 슬롯을 제거할 수 있지만, 만지막 원소 까지 제거해도 length 프ㅗ퍼티 값까지 바뀌지 않는 다는 점을 주의하자.

 

빈 배열을 다룰 때는 조심해야 한다.

 

var a = [];

a[0] = 1;
a[2] = [3];

a[1]; // undefined

a.length; //3

 

실행은 되지만 이런 코드에서 중간에 건너뛴 인덱스는 혼란을 부추길 수 있다. a[1] 슬롯 값은 응당 undefined가 될 것 같지만. 명시적으로 a[1] = undefined 세팅한 것과 똑같지는 않다. 그런데 키로 넣은 문자열 값이 표준 10진수 숫자로 타입이 바뀌면, 마치 문자열 키가 아닌 숫자 키를 사용한 것 같은 결과가 초래된다.

 

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

 

일반적으로 배열에 문자열 타입의 키/프로퍼티를 두는 건 추천하지 않는다. 그러헥 해야 한다면 객체를 대용하고 배열 원소의 인덱스는 확실히 숫자만 사용하자.

 

유사배열

유사 배열 값을 진짜 배열로 바꾸고 싶을 때가 있다. 이럴때는 배열 유틸리티 함수(inedxOf(), concat(), forEach() 등)를 사용하여 해결하는 것이 일반적이다.

 

예를들어 DOM 쿼리 작업을 수행하면 비록 배열은 아니지만 변환 용도로는 충분한, 유사배열 형태의 DOM원소 리스트가 반환된다. 다른 예로 함수에서 arguments객체를 사용하여 인자를 리스트로 가져오는것도 마찬가지이다. 이런 변환은 slice() 함수의 기능을 차용하는 방법을 많이 사용한다.

 

function foo() {
  var arr = Array.prototype.slice.call(arguments);
  arr.push("bam");
  console.log(arr);
}

foo("bar", "baz"); // ["bar", "baz", "bam"]

 

slice()함수에 인자가 없으면 기본 인자 값으로 구성된 배열을 복사한다.

 

Array.prototype.slice.call(arguments)는 `Array.prototype.slice.call(arguments, 0)`과 같습니다. 첫번째 원소부터 끝까지 잘라내므로 배열을 복사하는 것과 다르지 않습니다.

 

---

 

- 한빛 미디어 : You Don't Know JS : 타입과 문법, 스코프와 클로저