220706 TIL

Parker.Park·2022년 7월 6일

TIL

목록 보기

28/39

220706 TIL

프로젝트가 끝난시점에 부족했던 알고리즘과 CS지식을 커버하려고 했다. 그 다음 남은 시간에는 프로젝트 복습과 필요한 것을 더욱 공부하면 되겠다 싶었는뎅... CS지식도...자바스크립트 공부도 생각보다 시간이 많이 투자된다. 항상 긍정적으로 좋게만 생각할 뿐이다.

Array.from()

Array.from()은 배열이라는 것을 만들 때 종종 봐왔던 메소드인데, 사용하는 이유가 좀 애매했다. 좀 더 면밀하게 살펴 볼 필요가 있다고 생각했다.

정의

Array.from() 은 유사 배열 객체(array-like object)나 반복 가능한 객체(iterable object)를 얕게 복사해 새로운 배열을 객체로 만드는 메서드라고 한다.

구문

Array.from(arrayLike[, mapFn[, thisArg]])

arrayLike
배열로 변환하고자 하는 유사 배열 객체나 반복 가능한 객체.
mapFn(optional)
배열의 모든 요소에 대해 호출할 매핑 함수.
thisArg(optional)
mapFn 실해 시 사용 하는 this 값.

반환값

새로운 array 인스턴스

예시

위에서도 정의하였으나, 다음과 같은 경우에 Array 인스턴스로 반환이 가능하다.

유사 배열 객체(Array-like object)
순회 가능한 객체

let abc = Array.from('abc')
console.log(abc) //[ 'a', 'b', 'c' ]

Array

여기까지 봤을 때 Array.from()은 배열을 생성하는 거구나 싶었다. 배열은 생성한다? 엄밀히 얘기하면 배열은 Array 타입의 객체이며 프로토타입의 객체는 Array.prototype이라는 것이다. 그리고 Array.prototype의 프로토타입 객체는 Object.prototype이라고 한다. 결국 Array 또한 속성은 Object라고 할 수 있다.

let abc = new Array('a','b','c')
console.log(typeof abc) //'object'

Array-like objects(유사 배열 객체)?

당연한 말일 수도 있겠으나, 배열의 타입이 Object라고 Object와 Array가 같은 것은 아니다. 배열이라는 prototype함수를 사용 가능한 객체 정도 볼 수 있을 것이다. 객체에 length라는 속성을 추가한 객체를 배열처럼 인식하는 것도 가능할 것이다. 그렇다면 유사 배열 객체는 무엇을까?

let abc1 = ['a', 'b', 'c']
let abc2 = {"0" : 'a' , "1" : 'b', "2" : 'c', "length" : 3}

let arr1 = Array.from('abc')
let arr2 = Array.from(abc2)

console.log(arr1) //[ 'a', 'b', 'c' ]
console.log(arr2) //[ 'a', 'b', 'c' ]

예시에서 arr1에 있는 'abc' 또한 프로토타입 체인에 의해서 length값을 갖고 있는 객체로 변환되었기 때문이다.
프로토타입? : 원시-타입primitive-data-type의-확장

Array-like objects 의 특징

배열처럼 인덱스로 접근이 가능하고, length 속성을 갖고 있다.
배열 메소드를 사용할 수 없다.(ex. push(), indexOf(), forEach())

예시

배열과 같게 인식하기 때문에 Array.from()를 사용가능하다.

let arr1 = Array.from({"length":3})

console.log(arr1) //[ undefined, undefined, undefined ]

순회 가능한 객체?

순회 가능한 객체라하면 iterable object를 의미하는 것이다. 즉, iteration protocols를 따르는 객체를 의미하는 것이다.
iteration protocols?

Array.from에서 가장 궁금한 것을 풀어보았다. Array.from에 대해서는 여기까지 알아보도록 하려고 한다. 사용법은 아래 참조란을 참조 하기 바란다.

Array 생성자 함수

Array.from()과 Array 생성자 함수와 차이점이 궁금해진다.

let abc = new Array('a','b','c')
console.log(abc) //[ 'a', 'b', 'c' ]

생성자함수 Array는 직접 elements를 입력해야 하는 번거로움과 단일 매개변수를 사용할 경우 길이만 갖는 빈배열을 반환한다는 것이다.

let abc = new Array(5)
console.log(abc) //[ <5 empty items> ]
console.log(abc.length) //5

console.log(abc[1]) //undefined

그런데 MDN에서는 Array생성자로 생성한 빈배열의 초기값은 'undefined'라고 한다. 그렇다고 undefined로 채워지는 것은 아니라고 한다. 다만 빈슬롯만 생성되는 것으로 알고 있다. 그런데 왜... undefined가 뜨는지...??
empty는 비어있는 상태이고, undefined는 값이 없다는 것을 명시적으로 나타내는 값으로 해석된다. 다만 empty는 forEach나 for...of와 같은 순회 함수들에게는 작동하지 않는다 하지만 undefined는 작동한다. 관련된 예시가 있다.

let abc1 = new Array(5)
console.log(abc1) //[ <5 empty items> ]
console.log(abc1.length) //5

abc1.forEach(el => console.log(el)) //empty이기 때문에 작동하지 않는다.

//하지만 초기값을 지정하여 나타내면 출력이 된다.
for(let i = 0; i < abc1.length; i++){
  console.log(abc1[i])
}
//undefined
//undefined
//undefined
//undefined
//undefined