[You Don't Know JS] #02 자바스크립트의 배열

 

 

/* 이 글은 카일 심슨의 You Don't Know JS를 읽으며 배운 것들을 개인적으로 정리하고 기록하기 위한 글입니다. */

 

 

 

자바스크립트의 배열은 어떤 타입의 값이라도 담을 수 있는 그릇이다.

배열 크기는 미리 정하지 않고 선언할 수 있다.

 

배열을 사용할 때는 빈 슬롯이 있는 '구멍 난(sparse)' 배열을 조심해야 한다.

var a = [];

a[0] = 1;
// 'a[1]' 슬롯을 건너뛰었다!
a[2] = [3];

a[1];	// undefined

a.length;	// 3

위와 같은 경우 실행은 되지만 문제가 생길 수 있다. a[1] 슬롯 값은 undefined가 될 것 같지만 명시적으로 a[1] = undefined 한 것과 똑같지는 않다.

 

또 앞전에서 배열은 객체의 하위타입이라고 했다.

따라서 키/프로퍼티 문자열을 추가할 수 있다.

(특이한 점은 이 키/프로퍼티 문자열은 추가해도 배열의 length가 증가하지 않는다.)

var a = [];

a[0] = 1;
a["foobar"] = 2;

a.length;	// 1
a["foobar"];	// 2
a.foobar;	// 2

 

주의할 점은 "foobar"와 같은 문자열이 아닌 숫자가 문자열 타입으로 들어오면 인덱스 값으로 인식된다.

예를 들면 a["13"]은 a 배열의 13번째 인덱스 값을 가리킨다는 얘기이다.

 

웬만하면 배열에 문자열 타입의 키/프로퍼티를 안두는 것이 좋다.

키/프로퍼티가 필요하다면 그냥 객체를 사용하는 것이 좋다.

 

 

 

---

 

 

비록 배열은 아니지만 변환 용도로는 충분한 유사 배열이라는 것이 있다.

DOM 쿼리 작업을 수행하면 반환되는 DOM 원소 리스트, 문자열등이 그렇다.

 

이들을 진짜 배열로 바꾸고 싶다면 배열 유틸리티 함수 (indexOf(), concat(), forEach() 등)을 사용하는 것이 일반적이다.

 

 

위에서 언급한 문자열에 대해 조금 더 살펴보겠다.

문자열은 배열이 아니라 유사 배열이라고 했다.

자바스크립트에서 문자열은 생김새만 비슷할 뿐 문자 배열과 같지 않다.

 

가장 큰 차이점은 문자열은 불변 값(Immutable)이지만 배열은 가변 값(Mutable)이라는 것이다.

따라서 문자열의 메서드는 그 내용을 바로 변경하지 않고 항상 새로운 문자열을 생성한 후 반환한다.

반면에 대부분의 배열 메서드는 그 자리에서 곧바로 원소를 수정한다.

 

그래서 값을 변경시키는 대부분의 배열 메서드는 사실상 문자열에 사용할 수 없다.

var a = "foo";
var b = ["f", "o", "o"];

a.reverse;	// undefined
b.reverse;	// ["o", "o", "f"]

위와 같이 undefined가 반환된다.

 

그럼 문자열의 순서를 거꾸로 뒤집고 싶다면 어떻게 해야할까?

이를 위한 일종의 꼼수, Hack이 있다.

// 'a'를 문자의 배열로 분할하고 reverse로 거꾸로 뒤집고 join으로 합쳐 다시 문자열로 만든다.
var c = a.split("").reverse().join("");

c;	// "oof"

좀 지저분하더라도 빠르게 써먹을 방법이 필요하다면 위 방법도 괜찮다.

 

 

문자열 자체에 어떤 작업을 빈번하게 수행해야하는 경우, 관점을 바꾸어 문자 배열로 취급해 사용하는 것이 좋을 수 있다.

문자열 ↔ 배열 변환을 번거롭게 계속하는 것보다 배열로 두고 사용하다가 문자열이 필요할 때 .join("")메서드를 호출하는 것이다.