묵혔다 꺼낸 JS - Array

배열 생성

자바스크립트에서 배열을 생성하는 방법은 여러 가지가 존재한다.

 

 

각 언어마다 배열을 생성하는 방법은 비슷하지만 자바스크립트에서는 new (생성자)를 붙이지 않고도 arr2처럼 배열이 생성 가능하다. (new를 붙인 것과 안 붙인 것을 비교하여 처음 자바스크립트를 접하는 사람 입장에서는 매우 헷갈릴 것 같다.)

배열의 이상한 점.

아래의 코드를 보고 한번 결과가 어떻게 나오는지 보자.

 

 

웃긴 게 생성자를 이용해 3이라는 숫자 1개의 슬롯을 가진 배열 하나를 생성하려고 하다 막상 받아본 값을 확인해보니 길이가 3이고 슬롯에는 undefined 3개를 가진 배열 하나를 볼 수 있을 것이다.

 

물론 방금 저 조건을 만족하는 생성 방법은 간단하다.

 

 

이렇게 하는 게 정답이지만 처음 소개한 방법도 생각해보면 가능할 것 같은데 왜 안될까 싶은 의문이 들 것이다.

 

첫 번째에 사용했던 방법은 배열의 길이를 설정하고, 설정한 길이만큼의 슬롯에는 빈 값으로 구성된 배열을 받는 문법이므로 첫 번째와 같은 방법을 이용할 때에는 매우! 주의해야 할 것이다.

(혼란하다 혼란해)

결론은 위와 같은 이상한 이슈를 해결하기 위해 2번째 방법처럼 생성자를 이용하지 않고 배열을 생성하는 것을 권장하고 싶다고 이야기하고 싶다.

빈 배열(empty array)과 undefined로 선언된 배열

빈 배열(empty array)이란 값이 할당되지 않은 빈 요소(empty element)가 배열화 된 것으로 본인은 정의한다.

(일명 구멍 난 배열이라고도 부른다고 한다.)

 

undefined배열은 말 그대로 undefined가 요소로 된 배열이라고 설명할 수 있다.

 

코드를 보며 이해해보도록 하자!

 

 

두 가지 배열이 비슷해 보이겠지만 콘솔에도 나타난 듯이 차이점이 보인다.

 

더 명확히 어떤 차이가 있는지 알아보도록 하자.

 

 

위 코드는 map메서드를 이용하여 배열의 슬롯 값을 배열의 각 인덱스 값으로 치환하기 위한 코드이다.

(map 메서드 설명 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map)

 

실행결과 arr1에는 map함수를 실행하였을 때 전체적인 평가값이 처음과 같지만 undefined로 선언된 arr2와 같은 경우에는 배열의 슬롯에 대한 평가값이 인덱스 값으로 바뀐 것을 확인할 수 있다.

 

이를 통해서 생성자를 통한 빈 배열(empty array)을 생성 시 배열의 슬롯을 가지지 않고 있다는 것을 확인할 수 있었다.

+ 그렇다면 해결방법은 없을까

이러한 이슈를 해결하기 위해서는 다음과 같이 몇 가지 방법이 있다고 한다.

( 참고 https://stackoverflow.com/questions/5501581/javascript-new-arrayn-and-array-prototype-map-weirdness)

 

 

첫 번째 방법은 새로운 배열에 fill(=채우다) 함수를 사용하여 undefined로 배열에 채운 다음(무엇으로 채우든 상관은 없다.) map을 이용하는 방법이다.

 

두 번째 방법은 Array의 내장 함수 apply를 이용하여 첫 번째 인자(Array 생성자 호출 시 제공될 this값 여기서는 this를 사용하지 않으므로 null이나 undefined를 사용하면 됨.)에는 null을 두 번째 인자에는 배열을 넣은 후 map 함수를 실행하여 배열의 슬롯에 인덱스 값을 넣는 방법이다.

(apply 메서드 설명 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/apply)

 

마지막 방법은 전개 연산자를 통해 새로운 배열에 기존 arr3을 전개하여 map함수를 사용한 방법이다.

 

여기서 추가로 빈 배열을 전개 연산자로 나열하면 다음과 같은 결과가 나온다.

 

 

이렇게 전개된 값을 새로운 배열로 감싸면 undefined 10개가 들어있는 배열과 같게 되어 map을 사용하는데 이상이 없다.

정리

정리하자면 new를 사용하여 빈 배열을 만들지 말 것, 그렇다고 해서 undefined 슬롯을 가진 배열도 나중에 어떤 심각한 오류를 일으킬지 모르니 undefined 배열도 사용하지 말 것! (물론 그럴 일은 없겠지만.)

 

이상 배열의 선언 및 숨겨진 특징에 대해서 알아보았다.