JavaScript - iterable

Yoon·2024년 11월 19일

iterable

  • JavaScript에서 반복 가능한 특성을 가진 객체 즉, for...of 루프나 전개 연산자(...) 등을 사용해 내부의 각 요소를 순회할 수 있는 객체입니다.

📌키워드

  • for...of, ...(spread 전개구문), destructing(구조분해할당)
  • String, Array, Map, Set ...

iterable object

for...of

  • for...of 명령문은 반복가능한 객체 (Array, Map, Set, String, TypedArray, arguments 객체 등을 포함)에 대해서 반복하고 각 개별 속성값에 대해 실행되는 문이 있는 사용자 정의 반복 후크를 호출하는 루프를 생성합니다.

구문

for (variable of iterable) {
  statement;
}

String에 대한 반복

// String
const text = new String("Hello~ JavaScript~!!!");
for (let element of text) {
  console.log(`element = ${element}`);
}

Array 대한 반복

// Array
const number = [1, 2, 3, 4, 5];
for (let element of number) {
  console.log(`element = ${element}`);
}

Number는 iteralble가 아닙니다

// Number 클래스 생성 및 실행
const numberClass = new Number(12345);
// for (n of numberClass) console.log(n);
// TypeError: numberClass is not iterable

for, for...of, forEach 비교

배열의 요소를 교체하는 함수를 정의

for...of
function replace(array, origin, target) {
  let resultArray = Array.from(array);
     let index = 0;
     for (let element of resultArray) {
       // for of 에선 index를 가져오지 않음
       if (element === origin) {
         resultArray.splice(index, 1, target);
       }
       index++;
     }
  return resultArray;
}
for
function replace(array, origin, target) {
     for (let i = 0; i < resultArray.length; i++) {
       let element = resultArray[i];
       if (element === origin) {
         // resultArray[i] = target;
         resultArray.splice(i, 1, target);
       }
     }
  return resultArray;
}
forEach
function replace(array, origin, target) {
  // for
  array.forEach((element, index) => {
    if (element === origin) resultArray.splice(index, 1, target);
  });
  return resultArray;
}
output
// 빨간사과를 청사과로 교체
let fruits = ["🍎", "🍊", "🍋", "🍎", "🍏", "🍎"];
let result = replace(fruits, "🍎", "🍏");
console.log(result);
// [ "🍏", "🍊", "🍋", "🍏", "🍏", "🍏" ]

// 2를 7로 교체
let numbers = [1, 2, 3, 4, 2, 2, 5, 2];
let result2 = replace(numbers, 2, 7);
console.log(result2);
// [1, 7, 3, 4, 7, 7, 5, 7]
  • 이 예문에서는 forEach문이 코드가 알뜰하다.

0개의 댓글