#유사배열객체

● 유사 배열 객체

const arr = [10, 11, 12, 13]

우리가 흔히 잘알고 있는 배열은 '유사 배열 객체' 입니다. 이 배열을 콘솔로 찍어보면 콘솔창에서 0, 1, 2, 3 을 프로퍼티로 가지고 있씁니다. 



아니 이런 그럼 배열은 객..객체입니까?

답은 YES! 배열도 객체라고 볼 수 있는 것이죠

const arr = [10, 11, 12, 13]
arr[0] // 10
arr[1] // 11
arr[2] // 12
arr[3] // 13

따라서 [0], [1] .. 등 bracket notation으로 접근할 수 있는 것입니다.

 

않의 뭔 이딴?? 게?? 있죠?

그러게요(?)ㅎ 아무튼 이런 것을 유사 배열 객체라고 합니다.

 

유사배열 객체란?

• 유사 배열 객체는 객체이며 length라는 프로퍼티를 가지고 있으며, 이 값을 정수로 가지고 있는 것을 말한다.



아까 위의 예제처럼 이 array도 length라는 키를 가지고 있으며, 이 키의 값은 4라는 정수를 가지고 있습니다. 따라서 이는 유사배열 객체라고 보는 것입니다.

그렇다면 아래도 유사 배열 객체라고 볼 수 있을까요?

const person = {name : 'daeun', age: 27}

아닙니다. length라는 프로퍼티를 갖고 있지 않기 때문이죠.

그렇다면 아래는 유사 배열 객체일까요?

const person = {name : 'daeun', age: 27}
person.length = 2;
// {name: 'daeun', age: 27, length: 2}

YES! length라는 프로퍼티를 갖고 있기 때문입니다. 

그렇다면 유사배열객체가 되기 위해서는 이 length라는 프로퍼티가 중요한 것 같은데, 왜 중요할까요?

 

● 유사 배열 객체를 배열로 바꾸기

이제는 유사 배열을 객체로 만들어 보겠습니다.

객체를 배열로 만들기 위해선 여러가지 방법이 있습니다.

• for … in 을 통해 객체의 모든 Key값을 가져와서 Key들을 요소로 구성한 새로운 배열을 만들기
• for … in 을 통해 객체의 모든 Key값을 가져와서 객체[Key]로 돌아 새로운 배열을 만들기
• Object.keys 메서드 활용하기
• Object.values 메서드 활용하기
• Object.entries 메서드 활용하기
• Array.from 메서드 활용하기

다른 방식들은 많이 봐오기도했고, Object 자체의 내장 메서드라 활용하기가 쉽습니다. 그렇다면 가장 생소한 Array.from 방식은 어떻게 이뤄지는 걸까요?

 

Array.from()

MDN에서 정의한 Array.from() 메서드의 설명은 다음과 같습니다.

• Array.from() 메서드는 유사 배열 객체(array-like object)나 반복 가능한 객체(iterable object)를 얕게 복사해 새로운Array 객체를 만듭니다.
• 즉, 얕은 복사를 통해 위에서 살펴본 유사 객체를 배열로 만든다는 것입니다. 그렇다면 위에서 유사 배열 객체로 만든 obj를 Array.from() 을 통해 배열로 만들어 보도록하죠.

 

const person = { name: 'daeun', age: 27, length: 2 }
console.log(Array.from(person))
// [ undefined, undefined ]

않의 배열로 만들어준대매. 왜 undefinedㄱ ㅏ 됩니까?

왜냐하면 각각의 키들은 0 , 1, 2, 3 으로 잡아야하고 그 키의 값들로 'daeun', 'age',를 넣어주어야하기때문입니다. 먼말인지 모르겟으니 예제를 봅니다.

const person = { 0: 'daeun', 1: 27, length: 2 }
console.log(Array.from(person))
// [ 'daeun', 27 ]

오.. 이행이 되었습니다. 따라서 배열도 아래와같이 구성을 갖고 있는 것입니다.



그럼 실험을 몇개 해보죠. length가 없다면? 빈배열이 호출된다.

const person = { 0: 'daeun', 1: 27}
console.log(Array.from(person)) // []

따라서 length는 매우 핵심적인 역할이라고 할 수 잇읍니다.

아래를 보면 1번째 요소를 적어주지 않았는데, length라는 값에 맞춰 배열을 생성한 것을 볼 수 잇습니다. 요소가 없으면 걍 undefined 되는거임. length님께서 길이가 3인 배열 만들라 햇으니 그냥 맞추는 겁니다. length 만만세

const person = { 0: 'daeun', 2: 27 , length :3}
console.log(Array.from(person)) // ['daeun', undefined, 27]

const person = { 1: 'daeun', 2: 27 , length :3}
console.log(Array.from(person)) // [undefined, 'daeun', 27]

 

● 문자열을 배열로 바꾸기

생각해보니 우리 문자열도 length라는 메서드가 있지 않았나?

const daeun = 'daeun'
console.log(daeun.length) // 5

우연의 일치일까요? 이색귀는 그럼 유사배열 객체일까요? 않의 문자가 객체라고요? 말이 되는 소리를 입니까? 이는 문자열은 래퍼객체로 변환되기 때문인데요. 실은 number, string 등 애들 래퍼객체로 변환돼서 메서드 다 쓸수 잇는거임ㅋ  뭔말이냐구요?

[21장 빌트인 객체]

여기 있는 래퍼객체파트를 보면 이해할 수 있다~

따라서 아래와 같이 래퍼객체로 변환되고,0, 1, 2,3 이런 정수를 프로퍼티로 갖고 있으며, length라는 프로퍼티도 갖게됩니다. 물론 모두 상속의관계때문이죠 프로토타입까지 들어가면 힘들어지니 여기까지합ㅅㅣ디ㅏ.

const daeun = new String('daeun')

생각해보면 우리는 str[0], str[1] 이런식으로 문자열의 bracket notation으로 접근할 수 있었습니다. 게다가 length 프로퍼티까지 가지고 있다? Array.from 때려보면 아는거아님?

const daeun = 'daeun'
console.log(Array.from(daeun)) // [ 'd', 'a', 'e', 'u', 'n' ]

오 변환됨;; 래퍼객체로 변환되어 사용할 수 있었던 것입니다.

 

● 함수를 배열로 만들기

생각해보니 우리 함수에도 length라는 메서드를 확인할 수 있었습니다.

const func = function foo(){}
console.dir(func)

함수 안에도 length가 있는데요. 이 lenght는 매개변수의 개수를 가르킵니다. 

const func = function foo(){ return arguments }
console.dir(func(10,11,12,13))

함수에서 매개변수를 내뱉게 만들었더니, 매개변수도 객체로 이루어져있네요. lenght도 가지고 있구요.

const func = function foo(){ return arguments}
console.log(Array.from(func(10,11,12,13))) // [10, 11, 12, 13]

따라서 argument들도 유사배열객체로, Array.from 메서드를 활용하면 배열이 되는 것을 볼 수 있습니다. 

const func = function foo(a,b,c){ return arguments}
console.log(Array.from(func)) // [undefined, undefined, undefined]