You Don't Know JS #2

Chapter 2. 값

배열

자바스크립트의 배열은 어떤 타입의 값이라도 담을 수 있는 그릇이다.
또한, 배열의 크기 또한 정하지 않고 선언할 수 있고, 원하는 값을 추가할 수 있다.

그렇기 때문에, 구멍난(sparse) 배열을 조심해야 한다!

var a = [];
a[0] = 1;
//a[1]을 건너뛰었다!
a[2] = [3];
a[1]; // undefined

a.length; // 3

구멍난 배열은 실행은 되지만, 혼란을 부추길 수 있다. 또한 a[1]의 값은 undefined지만, a[1] = undefined로 정의한 경우와 똑같지는 않기 때문에 주의해야한다.

나의 생각
java나 c를 접했을 때와 달리 python과 javascript에서 가장 만족했던 부분이 바로 배열의 크기를 정하지 않고도 사용할 수 있다는 점이었는데, 이 특징이 코드를 작성할 때에는 장점일 수 있으나, 코드의 실행 과정에서는 치명적인 단점이 될 수도 있겠다는 생각을 했다. 네카라쿠배를 비롯한 프론트엔드 직무의 자격요건 중 하나인 "TDD(테스트 주도 개발)을 활용하거나 경험한 적이 있음" 이 왜 공통적으로 자격요건으로 존재하는지에 대한 근거가 아닐까?

배열 인덱스는 숫자인데, 배열 자체로 하나의 객체이기 때문에 문자열을 추가할 수 있다. 하지만, 배열의 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

문자열

문자열(ex. "foo")와 문자의 배열(ex.["f","o","o"])은 둘 다 length 프로퍼티, indexOf() 메서드 , concat() 메서드와 같은 기능을 사용할 수 있는 유사 배열이다.

하지만 문자열은 불변 값(immutable), 문자의 배열은 가변 값(mutable)이라는 차이점이 있다.

또한, 문자열은 불변 값이므로 문자열 메서드는 그 내용을 바로 변경하지 않고 항상 새로운 문자열을 생성한 후 반환한다. 하지만, 대부분의 배열 메서드는 그 자리에서 곧바로 원소를 수정한다.

그리고! 문자열을 다룰 때 유용한 대부분의 배열 메서드는 문자열에 쓸 수 없지만, 문자열에 대해 불변 배열 메서드를 빌려 쓸 수는 있다.

다음 문자열과 문자의 배열의 순서를 거꾸로 뒤집어 보자

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

배열에는 reverse()라는 가변 메서드가 준비되어 있지만, 문자열은 그렇지 않다. a.reverse()의 결과는 undefined이다.

그렇다면 어떻게 해야할까?

var c = a
// 'a'를 문자의 배열로 분할한다
.split("")
// 문자 배열의 순서를 거꾸로 뒤집는다
.reverse()
// 문자 배열을 다시 합쳐 문자열로 만든다
.join("")

유용한 방법이지만 특수문자, 멀티바이트 문자 등이 섞여있는 문자열의 경우는 해당 방법이 통하지 않는다. 유니코드를 인식하는 정교한 라이브러리 유틸리티가 필요하다.(Esvrerer Github repository 참고)