● 유사 배열 객체
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 등 애들 래퍼객체로 변환돼서 메서드 다 쓸수 잇는거임ㅋ 뭔말이냐구요?
여기 있는 래퍼객체파트를 보면 이해할 수 있다~
따라서 아래와 같이 래퍼객체로 변환되고,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]