[JavaScript, TypeScript] 유사 배열, 이터러블 객체, Array.from()

갠프하면서 Array.from()을 쓸일이 꽤 많이 생겼는데, 이거 설명을 듣자니 진짜 무슨소린지 모르겠어서 정리한다.

 

1. 정의

Array.from()은 '이터러블 객체나 유사 배열 객체를 새로운 배열로 변환하여 반환하는 함수'라고 하는데, 그럼 여기서 이터러블 객체와 유사 배열 객체가 무엇인지 알아야 한다.

 

(1) 이터러블 객체

'차례대로 하나씩 꺼낼 수 있는 것'을 이터러블 객체라고 한다.

🍬 지피티의 예시 👽

• 네가 사탕이 5개 들어 있는 봉지를 들고 있어.
• 봉지를 뜯어서 하나씩 꺼낼 수 있지?
• 이 봉지 = 이터러블 객체
• 사탕 하나씩 꺼내는 과정 = 반복(iteration)

즉, 이터러블 객체는 ‘반복할 수 있는 자료’ 라는 뜻이야.

그러므로 자바스크립트에서 이터러블 객체라 하면

• 문자열(String) : "hello"를 하나씩 꺼내면 h, e, l, l, o
• 배열(Array) : [1, 2, 3] 하나씩 꺼내면 1, 2, 3
• Set, Map같은 자료구조들
• NodeList : document.querySelectorAll()의 결과
• arguments : 함수에 전달된 인자 모음

이 친구들이라 생각하면 될 것이다. 

이 친구들은 특정한 순회 규칙을 따르는데, 그 규칙을 순회 규약(Iteration Protocols)라고 한다.

순회 규약에 따라 이터러블들은 for ... of 문으로 순회할 수 있다. 자세한건 뒤에서!

(2) 순회 규약 

위 이터러블 객체들이 따르기도 하고, 순회를 표준화하기 위한 규칙(protocols)라고 생각하면 된다. 

 

1️⃣ Iterable interface

👉 "이 객체는 반복할 수 있다"는 규칙

객체가 순회 가능한지 여부를 정의하는 인터페이스

• 객체에 @@iterator(즉 [Symbol.iterator] 메소드)가 있어야 한다. → @@iterator = "이 객체의 반복 메서드 키는 Symbol.iterator예요" 라는 의미. 실제 코드에선 무조건 Symbol.iterator를 써야 한다.
  • Symbol.iterator메소드가 호출되면 Iterator 객체를 반환해야 한다.,
• for ... of 문으로 순회할 수 있다. 

 

2️⃣ Iterator interface

👉 "어떻게 하나씩 꺼낼 것인가"에 대한 규칙

순회 가능한 객체를 실제로 순회할 때 사용하는 인터페이스를 정의

• 객체가 next() 메소드를 구현해야 한다.
• 이 때 next()는 {value, done}을 반환해야 한다. 

솔직히 글로만 보면 무슨 소린지 절대 모르니까 코드 예시를 봐야 할 것 같다.

const arr = [10, 20, 30]
const iterator = arr[Symbol.iterator]()

console.log(iterator.next()) // { value: 10, done: false }
console.log(iterator.next()) // { value: 20, done: false }
console.log(iterator.next()) // { value: 30, done: false }
console.log(iterator.next()) // { value: undefined, done: true }

1️⃣ 여기서 arr[Symbols.iterator] → 이터레이터를 만드는 기계

= 배열 안의 값(10, 20, 30)을 하나씩 꺼낼 수 있도록 이터레이터 객체를 만들어 주는 역할.

arr은 이미 Iterable이고(배열이니까), arr[Symbol.iterator]()을 호출하면 그 내부에서 Iterator을 뽑아야 한다.

 

2️⃣ iterator.next() → 기계를 돌려서 값 하나씩 꺼내기

next()는 항상 { value, done } 객체를 반환해야 하는데,

• value: 현재 값
• done: 끝났는지 여부 (true면 순회 종료)

이다.

 

(3) 유사 배열 객체

진짜 배열은 아니지만 배열처럼 인덱스로 여러 항목에 접근할 수 있고 length속성도 가지고 있는 객체. 

대표적으로

• 함수의 인자로 전달되는 argument 
• DOM 관련 유사 배열 객체(NodeList, HTMLCollection)
  • NodeList : document.querySelectorAll()의 결과. 유사배열 + 이터러블(for...of 가능)
  • HTMLCollection : document.getElementsByTagName(), getElemetsByClassName() 같은 결과, 유사배열은 맞지만 이터러블은 아님(for...of 불가)
• 문자열 String

같은게 있다.

 

✅ argument 예시

function test(a, b, c){
  console.log(arguments) // Arguments(3) [10, 20, 30, callee: ƒ, Symbol(Symbol.iterator): ƒ]
  console.log(arguments[0]) // 10
  console.log(arguments.length) // 3
}

test(10, 20, 30)

✅ NodeList 예시

<ul>
    <li>김밥</li>
    <li>라면</li>
    <li>떡볶이</li>
</ul>

여기서 li에 있는 값들은 유사 배열 객체 중 NodeList 이다.

const liElements = document.querySelectorAll("li")
console.log(liElements) // NodeList(3) [li, li, li]

for (let i = 0; i < liElements.length; i++) {
    console.log(liElements[i].textContent)
    // 출력: "김밥" "라면" "떡볶이"
}

따라서 위와 같이

• length 속성을 가지고 있고
• 인덱스를 통해 접근할 수 있으며(ex. obj[0], obj[1])
• for문으로 반복할 순 있다.

진짜 배열은 아니기 때문에 map(), filter(), push()와 같은 진짜 배열 전용 메소드를 사용할 순 없다.

그렇다면 진짜 배열 메소드를 사용하려면, Array.from()을 사용해야 한다!

 

2. Array.from()이란

이거 설명하려고 앞에 있는 것들 싹 다 설명한거다...

이 함수를 이용하면 실제 배열은 아니지만 배열처럼 보이는 객체들을 진짜 배열로 변환하여 사용할 수 있다.

const str = "Hello" // 문자열, 유사 객체
console.log(Array.from(str)) // 출력: ['H', 'e', 'l', 'l', 'o']

 

Array.from의 생김새는 다음과 같다.

Array.from(arrayLike, mapFn, thisArg)

• arrayLike : 유사 객체 (필수값)
• mapFn : 각 요소에 적용할 함수 (선택)
• thisArg : mapFn 실행 시 this로 사용할 값 (선택)

3. 특징

1️⃣만약 arrayLike 인자가 유사 배열 객체 혹은 이터러블 객체가 아니면 빈 배열[ ]을 반환한다.

const num = 1 // 유사 배열 객체나 이터러블 객체가 아닌 숫자

console.log(Array.from(num)) // [] 출력

 

2️⃣두번째 인자 mapFn에서 각 요소에 대한 변환 작업을 실행할 수 있다.

const numArr = [1, 2, 3, 4, 5]
const double = Array.from(numArr, num -> num * 2)

console.log(double) // [2, 4, 6, 8, 10]

 

[참고 문헌]

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/from

Array.from() - JavaScript | MDN

 

https://codingeverybody.kr/%ec%9e%90%eb%b0%94%ec%8a%a4%ed%81%ac%eb%a6%bd%ed%8a%b8-array-from-%ed%95%a8%ec%88%98/

자바스크립트 Array.from() 함수 – 유사 배열과 이터러블 객체를 배열로 - 코딩에브리바디

https://codingeverybody.kr/%ec%9e%90%eb%b0%94%ec%8a%a4%ed%81%ac%eb%a6%bd%ed%8a%b8-iteration-protocols/

자바스크립트 Iteration Protocols – 이터러블 객체 - 코딩에브리바디

https://codingeverybody.kr/%ec%9e%90%eb%b0%94%ec%8a%a4%ed%81%ac%eb%a6%bd%ed%8a%b8-array-like-objects/

자바스크립트 유사 배열 객체(Array-like Objects) – 개념과 사용 방법 - 코딩에브리바디

https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EC%9D%B4%ED%84%B0%EB%9F%AC%EB%B8%94-%EC%9D%B4%ED%84%B0%EB%A0%88%EC%9D%B4%ED%84%B0-%F0%9F%92%AF%EC%99%84%EB%B2%BD-%EC%9D%B4%ED%95%B4

[JS] 📚 이터러블 & 이터레이터 - 💯완벽 이해