[JS] 자바스크립트의 배열(Array)은 배열이 아니다.

술은 마셨는데 음주는 안했다니까요?

 

arr['a'] = 1;

위 코드가 먹힌다는 사실이 제목을 설명해준다.

자바스크립트의 배열은 엄밀히 말해서 배열이 아니다.
바로 객체이다.

아주아주 엄밀히 말하자면, 'JS의 배열은 희소 배열이기 때문에, 일반적으로 의미하는 밀집 배열이 아니다' 라고 말할 수 있겠다.

밀집 배열(협의의 배열)이란, 메모리 공간이 동일한 한 가지 자료형으로만 구성되어 자료가 서로 연속하여 나열된 자료구조이다.
희소 배열(광의의 배열)이란, 하나 이상의 자료형을 허락하는 배열이여서 한 자료가 차지하는 메모리 공간이 불규칙할 수 있고, 그 때문에 서로 연속적으로 나열되어 있지 않을 수도 있는 자료구조이다.

여담이지만, JS 배열은 희소 배열이기 때문에 배열 요소를 인덱스로 접근하려는 경우 밀집 배열인 다른 언어에 비해 상대적으로 느리다는 단점이 있다. (메모리 공간이 상이할 수 있고 연속적이지 않기 때문이다.)
다만, 바로 그 점 때문에 요소를 삽입, 삭제할 때는 다른 언어에 비해 성능이 뛰어나다.

다시 돌아와서, 자바스크립트의 배열은 그저 Key = Index인 객체일 뿐이다.
따라서 배열에 (Index가 될 수 없는) 숫자 외의 Type을 Key로 전달하여 Value를 할당하게 되면, 배열 안에 Key - Value 자료형이 생기게 된다.
그래서 위에서 arr['a'] = 1 이라는 코드가 에러 없이 처리된 것이다.

어쨌거나 자바스크립트의 배열에는 JS의 모든 자료형이 올 수 있다는게 핵심이다.

아니 진짜라니까

 

300x250

 

참고로 이터러블을 처리하는 메서드나 구문은 배열 요소만을 대상으로 작동한다는 특징이 있다. length 메서드에서도 배열 요소가 아닌 프로퍼티는 인식되지 않으니 주의하자.

또한, 배열 요소에 값을 할당할 때는 배열 Index를 지정해서 참조해줘야만 하기 때문에 반드시 숫자형으로 Index를 표기해야한다. 그렇기 때문에 기본적으로 배열 요소를 지정하는 문법인 [ ] 에 숫자형을 써줘서 배열 요소를 참조하는 방식을 쓴다. 물론 [ ]에는 String 타입으로 숫자를 전달하더라도 JS가 알아서 숫자형으로 변환하여 인식하기는 한다. 하지만 이런 방식은 좋은 방법이 아니라고 생각한다.

반면,  프로퍼티를 할당하는 문법인 .을 써서는 배열 요소를 할당할 수 없다. 제 아무리 .뒤에 Index랍시고 숫자형을 써줘도 에러가 뜰 뿐이다. 
그리고 프로퍼티를 할당할 때는 .뒤에 프로퍼티 Key를 전달해도 되고, [ ]에 숫자가 아닌 문자로써 String 타입으로 전달해줘도 된다.

헷갈릴 수도 있겠지만 가볍게 정리가 가능하다.
프로퍼티가 배열 요소보다 더 넓은 개념이라는게 핵심이다.
따라서 배열 요소를 할당하는 방식으로 프로퍼티를 선언할 수는 있지만 프로퍼티를 선언하는 방식으로는 배열 요소를 선언할 수 없다.
벤 다이어그램으로 구조화 시켜보자면, 배열 요소이면 전부 프로퍼티이지만, 프로퍼티이면서 배열 요소가 아닌 경우가 존재하기 때문이다.

const arr = [1, 2, 3];

//배열요소 선언
arr[3] = 4;
arr['4'] = 5; //arr[4] = 5; 와 같음

//배열 프로퍼티 선언
arr['5th'] = 6;
arr.6th = 7;

//에러
arr.7 = 8;

 

만약 위 스샷의 forEach, for ... in 문, for ... of 문이 궁금하다면 아래 포스팅을 참조하자.

[JS/반복문] 반복문 및 반복문을 대체할 수 있는 기능 6가지 총 정리 : for 문, while 문, do ... while 문,