반복 가능 객체, 유사 배열 객체

많은 프로그래밍 언어에 있듯, javaScript에도 iterable 객체와 iterator객체의 개념이 존재한다. ❗️여기서 iterable 객체란 반복 가능 개체를 의미하며, iterator객체란 해당 iterable 객체에서 각 요소를 반복하기 위해 사용하는 객체를 의미한다.

Iterable 객체 (=반복 가능 객체)

1-1 Iterable 객체의 조건

iterable 객체란 for...of 등의 문법을 이용하여 각 요소를 반복할 수 있는 객체를 의미한다. 배열 array 객체는 내장 iterable 객체이기 때문에 for..of 문법을 이용하여 각 요소를 반복할 수 있었던 것. 또한 String 객체, Map 객체, Set객체도 내장 iterable 객체이다. 그렇다면 iterable 객체이기 위한 조건은 무엇일까?🤔
1.) 이름이 Symbol.iterator인 메서드를 정의해아 한다.
2.) 해당 메서드는 인자가 없으며, iterator객체를 반환해야 한다.

1-2 iterator 객체의 조건

iterable 객체가 되기 위한 조건이 iterator 객체를 반환하는 메서드를 정의하는 것이라고 했다.
그렇다면 iterator 객체이기 위한 조건은 무엇일까?🤔
iterable 객체의 Symbol.iterator 메서드가 반환하는 객체는 다음과 같은 조건을 만족할 때 iterator 객체가 된다.
1.) next()메서드를 정의해야 한다.
2.) 해당 메서드는 인자가 없으며, done프로퍼티와 value 프로퍼티를 가지는 객체를 반환해야 한다.
2-1.) done 프로퍼티: 반복이 끝났다면 true, 아니라면 false
2-2) value 프로퍼티: 반복이 끝났다면 undefined, 아니라면 현재 위치의 요소 값

❗️결국 특정 iterable 객체에 대하여 반복을 수행한다는 것은 그 iterable객체의 Symbol.iterator 메서드를 호출하여 iterator객체를 얻고, 그 iterator 객체의 next()메서드를 호출하여 요소를 하나씩 꺼내는 것을 의미

1-3 iterable 객체를 이용하는 javascript 문법

//1
let arr=[2,4,6];
for(let value of arr){
  console.log(value)
}
//2
let iterator = arr[Symbol.iterator]();
while(true){
    let data = iterator.next();
    if(data.done) break;
    else console.log(data.value);
}
2번 같은 경우 iterable 객체와 iterator 객체를 이용하여 구현해본 코드이다.

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

javaScript 에서 유사 배열 객체란 배열 같이 생겼지만 엄밀히 말하면 배열은 아닌 객체를 의미한다.
그렇다면 유사 배열 객체이기 위한 조건은 무엇일까?🤔
1.) 숫자 값을 가지는 length 프로퍼티를 가지고 있어야 한다.
2.) 숫자 값 기반의 인덱싱이 가능해야 한다.

 let arr={
    0: '1',
    1: '2',
    length: 2,
}

Array.from() 메서드

iterable 객체 혹은 유사 배열 객체를 진짜 배열로 변환시켜주는 메서드 이다. 정확히 말하면, 각 요소에 대해 얕은 복사를 진행하여 새로운 배열 객체를 생성하여 반환하는 메서드이다.

var iterable1 ='andy';
var test= Array.from(iterable1);
console.log(test); //['a','n','d','y'];

두 번째 인자에 맵핑 함수(Mapping Function)를 넘겨줄 수도 있다. 이는 새로 생성하는 배열 객체의 각 요소에 대해 실행된다.

var arr =['andy','tom','steve'];
var test= Array.from(arr, function(x){
    console.log(x[0]); // a,t,s 출력
});