iterable 객체

RHUK2Β·2021λ…„ 6μ›” 22일
0

Javascript

λͺ©λ‘ 보기
22/56
post-custom-banner

πŸ“’ 22/05/31 볡슡


πŸ“š Reference


javascript.info, https://ko.javascript.info/iterable

μ°Έκ³  μ‚¬μ΄νŠΈμ— λ‚΄μš©μ„ 개인적으둜 λ³΅μŠ΅ν•˜κΈ° νŽΈν•˜λ„λ‘ μž¬κ΅¬μ„±ν•œ κΈ€μž…λ‹ˆλ‹€.
μžμ„Έν•œ μ„€λͺ…은 μ°Έκ³  μ‚¬μ΄νŠΈλ₯Ό μ‚΄νŽ΄λ³΄μ‹œκΈ° λ°”λžλ‹ˆλ‹€.

반볡 κ°€λŠ₯ν•œ(iterable, μ΄ν„°λŸ¬λΈ”) κ°μ²΄λŠ” 배열을 μΌλ°˜ν™”ν•œ κ°μ²΄μž…λ‹ˆλ‹€. μ΄ν„°λŸ¬λΈ” μ΄λΌλŠ” κ°œλ…μ„ μ‚¬μš©ν•˜λ©΄ μ–΄λ–€ 객체에든 for..of λ°˜λ³΅λ¬Έμ„ μ μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

배열은 λŒ€ν‘œμ μΈ μ΄ν„°λŸ¬λΈ”μž…λ‹ˆλ‹€. λ°°μ—΄ 외에도 λ‹€μˆ˜μ˜ λ‚΄μž₯ 객체가 반볡 κ°€λŠ₯ν•©λ‹ˆλ‹€. λ¬Έμžμ—΄ μ—­μ‹œ μ΄ν„°λŸ¬λΈ”μ˜ μ˜ˆμž…λ‹ˆλ‹€.

배열이 μ•„λ‹Œ 객체가 μžˆλŠ”λ°, 이 객체가 μ–΄λ–€ κ²ƒλ“€μ˜ μ»¬λ ‰μ…˜(λͺ©λ‘, 집합 λ“±)을 λ‚˜νƒ€λ‚΄κ³  μžˆλŠ” 경우, for..of 문법을 μ μš©ν•  수만 μžˆλ‹€λ©΄ μ»¬λ ‰μ…˜μ„ μˆœνšŒν•˜λŠ”λ° μœ μš©ν•  κ²λ‹ˆλ‹€. 이게 κ°€λŠ₯ν•˜λ„λ‘ ν•΄λ΄…μ‹œλ‹€.


Symbol.iterator


직접 μ΄ν„°λŸ¬λΈ” 객체λ₯Ό λ§Œλ“€μ–΄ μ΄ν„°λŸ¬λΈ”μ΄λΌλŠ” κ°œλ…μ„ 이해해 보도둝 ν•©μ‹œλ‹€.

for..ofλ₯Ό μ μš©ν•˜κΈ°μ— 적합해 λ³΄μ΄λŠ” 배열이 μ•„λ‹Œ 객체λ₯Ό λ§Œλ“€κ² μŠ΅λ‹ˆλ‹€.

μ˜ˆμ‹œμ˜ 객체 rangeλŠ” 숫자 간격을 λ‚˜νƒ€λ‚΄κ³  μžˆμŠ΅λ‹ˆλ‹€.

let range = {
  from: 1,
  to: 5
};

// μ•„λž˜μ™€ 같이 for..ofκ°€ λ™μž‘ν•  수 μžˆλ„λ‘ ν•˜λŠ” 게 λͺ©ν‘œμž…λ‹ˆλ‹€.
// for(let num of range) ... num=1,2,3,4,5

rangeλ₯Ό μ΄ν„°λŸ¬λΈ”λ‘œ λ§Œλ“€λ €λ©΄(for..ofκ°€ λ™μž‘ν•˜λ„λ‘ ν•˜λ €λ©΄) 객체에 Symbol.iterator(특수 λ‚΄μž₯ 심볼)λΌλŠ” λ©”μ„œλ“œλ₯Ό μΆ”κ°€ν•΄ μ•„λž˜μ™€ 같은 일이 λ²Œμ–΄μ§€λ„λ‘ ν•΄μ•Ό ν•©λ‹ˆλ‹€.

for..ofκ°€ μ‹œμž‘λ˜μžλ§ˆμž for..ofλŠ” Symbol.iteratorλ₯Ό ν˜ΈμΆœν•©λ‹ˆλ‹€(Symbol.iteratorκ°€ μ—†μœΌλ©΄ μ—λŸ¬κ°€ λ°œμƒν•©λ‹ˆλ‹€). Symbol.iteratorλŠ” λ°˜λ“œμ‹œ μ΄ν„°λ ˆμ΄ν„°(iterator, λ©”μ„œλ“œ nextκ°€ μžˆλŠ” 객체) λ₯Ό λ°˜ν™˜ν•΄μ•Ό ν•©λ‹ˆλ‹€.
이후 for..ofλŠ” λ°˜ν™˜λœ 객체(μ΄ν„°λ ˆμ΄ν„°)λ§Œμ„ λŒ€μƒμœΌλ‘œ λ™μž‘ν•©λ‹ˆλ‹€.
for..of에 λ‹€μŒ 값이 ν•„μš”ν•˜λ©΄, for..ofλŠ” μ΄ν„°λ ˆμ΄ν„°μ˜ next()λ©”μ„œλ“œλ₯Ό ν˜ΈμΆœν•©λ‹ˆλ‹€.
next()의 λ°˜ν™˜ 값은 {done: Boolean, value: any}와 같은 ν˜•νƒœμ΄μ–΄μ•Ό ν•©λ‹ˆλ‹€. done=trueλŠ” 반볡이 μ’…λ£Œλ˜μ—ˆμŒμ„ μ˜λ―Έν•©λ‹ˆλ‹€. done=false일땐 value에 λ‹€μŒ 값이 μ €μž₯λ©λ‹ˆλ‹€.
rangeλ₯Ό 반볡 κ°€λŠ₯ν•œ 객체둜 λ§Œλ“€μ–΄μ£ΌλŠ” μ½”λ“œλŠ” λ‹€μŒκ³Ό κ°™μŠ΅λ‹ˆλ‹€.

let range = {
  from: 1,
  to: 5
};

// 1. for..of 졜초 호좜 μ‹œ, Symbol.iteratorκ°€ ν˜ΈμΆœλ©λ‹ˆλ‹€.
range[Symbol.iterator] = function() {

  // Symbol.iteratorλŠ” μ΄ν„°λ ˆμ΄ν„° 객체λ₯Ό λ°˜ν™˜ν•©λ‹ˆλ‹€.
  // 2. 이후 for..ofλŠ” λ°˜ν™˜λœ μ΄ν„°λ ˆμ΄ν„° κ°μ²΄λ§Œμ„ λŒ€μƒμœΌλ‘œ λ™μž‘ν•˜λŠ”λ°, μ΄λ•Œ λ‹€μŒ 값도 μ •ν•΄μ§‘λ‹ˆλ‹€.
  return {
    current: this.from,
    last: this.to,

    // 3. for..of λ°˜λ³΅λ¬Έμ— μ˜ν•΄ λ°˜λ³΅λ§ˆλ‹€ next()κ°€ ν˜ΈμΆœλ©λ‹ˆλ‹€.
    next() {
      // 4. next()λŠ” 값을 객체 {done:.., value :...}ν˜•νƒœλ‘œ λ°˜ν™˜ν•΄μ•Ό ν•©λ‹ˆλ‹€.
      if (this.current <= this.last) {
        return { done: false, value: this.current++ };
      } else {
        return { done: true };
      }
    }
  };
};

// 이제 μ˜λ„ν•œ λŒ€λ‘œ λ™μž‘ν•©λ‹ˆλ‹€!
for (let num of range) {
  alert(num); // 1, then 2, 3, 4, 5
}

μ΄ν„°λŸ¬λΈ” 객체의 핡심은 "κ΄€μ‹¬μ‚¬μ˜ 뢄리(Separation of concern, SoC)"에 μžˆμŠ΅λ‹ˆλ‹€.

rangeμ—” λ©”μ„œλ“œ next()κ°€ μ—†μŠ΅λ‹ˆλ‹€.
λŒ€μ‹  range[Symbol.iterator]()λ₯Ό ν˜ΈμΆœν•΄μ„œ λ§Œλ“  "μ΄ν„°λ ˆμ΄ν„°" 객체와 이 객체의 λ©”μ„œλ“œ next()μ—μ„œ λ°˜λ³΅μ— μ‚¬μš©λ  값을 λ§Œλ“€μ–΄λƒ…λ‹ˆλ‹€.
μ΄λ ‡κ²Œ ν•˜λ©΄ μ΄ν„°λ ˆμ΄ν„° 객체와 반볡 λŒ€μƒμΈ 객체λ₯Ό 뢄리할 수 μžˆμŠ΅λ‹ˆλ‹€.

μ΄ν„°λ ˆμ΄ν„° 객체와 반볡 λŒ€μƒ 객체λ₯Ό ν•©μ³μ„œ range 자체λ₯Ό μ΄ν„°λ ˆμ΄ν„°λ‘œ λ§Œλ“€λ©΄ μ½”λ“œκ°€ 더 κ°„λ‹¨ν•΄μ§‘λ‹ˆλ‹€.

let range = {
  from: 1,
  to: 5,

  [Symbol.iterator]() {
    this.current = this.from;
    return this;
  },

  next() {
    if (this.current <= this.to) {
      return { done: false, value: this.current++ };
    } else {
      return { done: true };
    }
  }
};

for (let num of range) {
  alert(num); // 1, then 2, 3, 4, 5
}

이제 range[Symbol.iterator]()κ°€ 객체 range 자체λ₯Ό λ°˜ν™˜ν•©λ‹ˆλ‹€. λ°˜ν™˜λœ 객체엔 ν•„μˆ˜ λ©”μ„œλ“œμΈ next()κ°€ 있고 this.current에 반볡이 μ–Όλ§ˆλ‚˜ μ§„ν–‰λ˜μ—ˆλŠ”μ§€λ₯Ό λ‚˜νƒ€λ‚΄λŠ” 값도 μ €μž₯λ˜μ–΄ μžˆμŠ΅λ‹ˆλ‹€. μ½”λ“œλŠ” 더 μ§§μ•„μ‘Œκ³ μš”. μ΄λ ‡κ²Œ μž‘μ„±ν•˜λŠ” 게 쒋을 λ•Œκ°€ μ’…μ’… μžˆμŠ΅λ‹ˆλ‹€.

단점은 두 개의 for..of λ°˜λ³΅λ¬Έμ„ ν•˜λ‚˜μ˜ 객체에 λ™μ‹œμ— μ‚¬μš©ν•  수 μ—†λ‹€λŠ” μ μž…λ‹ˆλ‹€. μ΄ν„°λ ˆμ΄ν„°(객체 μžμ‹ )κ°€ ν•˜λ‚˜λΏμ΄μ–΄μ„œ 두 반볡문이 반볡 μƒνƒœλ₯Ό κ³΅μœ ν•˜κΈ° λ•Œλ¬Έμ΄μ£ . 그런데 λ™μ‹œμ— 두 개의 for..ofλ₯Ό μ‚¬μš©ν•˜λŠ” 것은 비동기 μ²˜λ¦¬μ—μ„œλ„ ν”ν•œ μΌ€μ΄μŠ€λŠ” μ•„λ‹™λ‹ˆλ‹€.


πŸ”₯ λ¬΄ν•œκ°œμ˜ μ΄ν„°λ ˆμ΄ν„°

무수히 λ§Žμ€ μ΄ν„°λ ˆμ΄ν„°λ„ κ°€λŠ₯ν•©λ‹ˆλ‹€. rangeμ—μ„œ range.to에 Infinityλ₯Ό ν• λ‹Ήν•˜λ©΄ rangeκ°€ λ¬΄ν•œλŒ€κ°€ 되죠. 무수히 λ§Žμ€ μ˜μ‚¬ λ‚œμˆ˜(pseudorandom numbers)λ₯Ό μƒμ„±ν•˜λŠ” μ΄ν„°λŸ¬λΈ” 객체λ₯Ό λ§Œλ“œλŠ” 것도 κ°€λŠ₯ν•©λ‹ˆλ‹€. 이 방법이 μœ μš©ν•˜κ²Œ μ“°μ΄λŠ” κ²½μš°λ„ μžˆμŠ΅λ‹ˆλ‹€.

nextμ—” μ œμ•½μ‚¬ν•­μ΄ μ—†μŠ΅λ‹ˆλ‹€. nextκ°€ 값을 계속 λ°˜ν™˜ν•˜λŠ” 것은 정상적인 λ™μž‘μž…λ‹ˆλ‹€.

λ¬Όλ‘  μœ„μ™€ 같은 μ΄ν„°λŸ¬λΈ”μ— for..of λ°˜λ³΅λ¬Έμ„ μ‚¬μš©ν•˜λ©΄ 끝이 없을 κ²λ‹ˆλ‹€. κ·Έλ ‡λ‹€ ν•˜λ”λΌλ„ breakλ₯Ό μ‚¬μš©ν•˜λ©΄ μ–Έμ œλ“ μ§€ λ°˜λ³΅μ„ 멈좜 수 μžˆμŠ΅λ‹ˆλ‹€.


λ¬Έμžμ—΄μ€ μ΄ν„°λŸ¬λΈ”μž…λ‹ˆλ‹€


λ°°μ—΄κ³Ό λ¬Έμžμ—΄μ€ κ°€μž₯ κ΄‘λ²”μœ„ν•˜κ²Œ μ“°μ΄λŠ” λ‚΄μž₯ μ΄ν„°λŸ¬λΈ”μž…λ‹ˆλ‹€.

for..ofλŠ” λ¬Έμžμ—΄μ˜ 각 κΈ€μžλ₯Ό μˆœνšŒν•©λ‹ˆλ‹€.

for (let char of "test") {
  // κΈ€μž ν•˜λ‚˜λ‹Ή ν•œ 번 μ‹€ν–‰λ©λ‹ˆλ‹€(4회 호좜).
  alert( char ); // t, e, s, tκ°€ μ°¨λ‘€λŒ€λ‘œ 좜λ ₯됨
}

μ„œλ‘œκ²Œμ΄νŠΈ 쌍(surrogate pair)에도 잘 λ™μž‘ν•©λ‹ˆλ‹€.

let str = "π’³πŸ˜‚";
for (let char of str) {
    alert( char ); // 𝒳와 πŸ˜‚κ°€ μ°¨λ‘€λŒ€λ‘œ 좜λ ₯됨
}

μ΄ν„°λ ˆμ΄ν„°λ₯Ό λͺ…μ‹œμ μœΌλ‘œ ν˜ΈμΆœν•˜κΈ°


μ΄ν„°λ ˆμ΄ν„°λ₯Ό μ–΄λ–»κ²Œ λͺ…μ‹œμ μœΌλ‘œ μ‚¬μš©ν•  수 μžˆλŠ”μ§€ μ‚΄νŽ΄λ³΄λ©΄μ„œ μ’€ 더 깊게 μ΄ν•΄ν•΄λ΄…μ‹œλ‹€.

for..ofλ₯Ό μ‚¬μš©ν–ˆμ„ λ•Œμ™€ λ™μΌν•œ λ°©λ²•μœΌλ‘œ λ¬Έμžμ—΄μ„ μˆœνšŒν•  건데, μ΄λ²ˆμ—” 직접 ν˜ΈμΆœμ„ ν†΅ν•΄μ„œ μˆœνšŒν•΄λ³΄κ² μŠ΅λ‹ˆλ‹€. λ‹€μŒ μ½”λ“œλŠ” λ¬Έμžμ—΄ μ΄ν„°λ ˆμ΄ν„°λ₯Ό λ§Œλ“€κ³ , μ—¬κΈ°μ„œ 값을 "μˆ˜λ™μœΌλ‘œ" κ°€μ Έμ˜΅λ‹ˆλ‹€.

let str = "Hello";

// for..ofλ₯Ό μ‚¬μš©ν•œ 것과 λ™μΌν•œ μž‘μ—…μ„ ν•©λ‹ˆλ‹€.
// for (let char of str) alert(char);

let iterator = str[Symbol.iterator]();

while (true) {
  let result = iterator.next();
  if (result.done) break;
  alert(result.value); // κΈ€μžκ°€ ν•˜λ‚˜μ”© 좜λ ₯λ©λ‹ˆλ‹€.
}

μ΄ν„°λ ˆμ΄ν„°λ₯Ό λͺ…μ‹œμ μœΌλ‘œ ν˜ΈμΆœν•˜λŠ” κ²½μš°λŠ” 거의 μ—†λŠ”λ°, 이 방법을 μ‚¬μš©ν•˜λ©΄ for..ofλ₯Ό μ‚¬μš©ν•˜λŠ” 것보닀 반볡 과정을 더 잘 ν†΅μ œν•  수 μžˆλ‹€λŠ” μž₯점이 μžˆμŠ΅λ‹ˆλ‹€. λ°˜λ³΅μ„ μ‹œμž‘ν–ˆλ‹€κ°€ μž μ‹œ 멈좰 λ‹€λ₯Έ μž‘μ—…μ„ ν•˜λ‹€κ°€ λ‹€μ‹œ λ°˜λ³΅μ„ μ‹œμž‘ν•˜λŠ” 것과 같이 반볡 과정을 μ—¬λŸ¬ 개둜 μͺΌκ°œλŠ” 것이 κ°€λŠ₯ν•©λ‹ˆλ‹€.


μ΄ν„°λŸ¬λΈ”κ³Ό μœ μ‚¬ λ°°μ—΄


λΉ„μŠ·ν•΄ λ³΄μ΄μ§€λ§Œ μ•„μ£Ό λ‹€λ₯Έ μš©μ–΄ 두 가지가 μžˆμŠ΅λ‹ˆλ‹€. ν—·κ°ˆλ¦¬μ§€ μ•ŠμœΌλ €λ©΄ 두 μš©μ–΄λ₯Ό 잘 μ΄ν•΄ν•˜κ³  μžˆμ–΄μ•Ό ν•©λ‹ˆλ‹€.

μ΄ν„°λŸ¬λΈ”(iterable) 은 μœ„μ—μ„œ μ„€λͺ…ν•œ 바와 같이 λ©”μ„œλ“œ Symbol.iteratorκ°€ κ΅¬ν˜„λœ κ°μ²΄μž…λ‹ˆλ‹€.
μœ μ‚¬ λ°°μ—΄(array-like) 은 μΈλ±μŠ€μ™€ length ν”„λ‘œνΌν‹°κ°€ μžˆμ–΄μ„œ λ°°μ—΄μ²˜λŸΌ λ³΄μ΄λŠ” κ°μ²΄μž…λ‹ˆλ‹€.
λΈŒλΌμš°μ €λ‚˜ λ“±μ˜ 호슀트 ν™˜κ²½μ—μ„œ μžλ°”μŠ€ν¬λ¦½νŠΈλ₯Ό μ‚¬μš©ν•΄ 문제λ₯Ό ν•΄κ²°ν•  λ•Œ μ΄ν„°λŸ¬λΈ” κ°μ²΄λ‚˜ μœ μ‚¬ λ°°μ—΄ 객체 ν˜Ήμ€ λ‘˜ 닀인 객체λ₯Ό λ§Œλ‚  수 μžˆμŠ΅λ‹ˆλ‹€.

μ΄ν„°λŸ¬λΈ” 객체(for..of λ₯Ό μ‚¬μš©ν•  수 있음)μ΄λ©΄μ„œ μœ μ‚¬λ°°μ—΄ 객체(숫자 μΈλ±μŠ€μ™€ length ν”„λ‘œνΌν‹°κ°€ 있음)인 λ¬Έμžμ—΄μ΄ λŒ€ν‘œμ μΈ μ˜ˆμž…λ‹ˆλ‹€.

μ΄ν„°λŸ¬λΈ” 객체라고 ν•΄μ„œ μœ μ‚¬ λ°°μ—΄ κ°μ²΄λŠ” μ•„λ‹™λ‹ˆλ‹€. μœ μ‚¬ λ°°μ—΄ 객체라고 ν•΄μ„œ μ΄ν„°λŸ¬λΈ” 객체인 것도 μ•„λ‹™λ‹ˆλ‹€.

μœ„ μ˜ˆμ‹œμ˜ rangeλŠ” μ΄ν„°λŸ¬λΈ” 객체이긴 ν•˜μ§€λ§Œ μΈλ±μŠ€λ„ μ—†κ³  length ν”„λ‘œνΌν‹°λ„ μ—†μœΌλ―€λ‘œ μœ μ‚¬ λ°°μ—΄ 객체가 μ•„λ‹™λ‹ˆλ‹€.

μ•„λž˜ μ˜ˆμ‹œμ˜ κ°μ²΄λŠ” μœ μ‚¬ λ°°μ—΄ 객체이긴 ν•˜μ§€λ§Œ μ΄ν„°λŸ¬λΈ” 객체가 μ•„λ‹™λ‹ˆλ‹€.

let arrayLike = { // μΈλ±μŠ€μ™€ lengthν”„λ‘œνΌν‹°κ°€ 있음 => μœ μ‚¬ λ°°μ—΄
  0: "Hello",
  1: "World",
  length: 2
};

// Symbol.iteratorκ°€ μ—†μœΌλ―€λ‘œ μ—λŸ¬ λ°œμƒ
for (let item of arrayLike) {}

μ΄ν„°λŸ¬λΈ”κ³Ό μœ μ‚¬ 배열은 λŒ€κ°œ 배열이 μ•„λ‹ˆκΈ° λ•Œλ¬Έμ— push, pop λ“±μ˜ λ©”μ„œλ“œλ₯Ό μ§€μ›ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€. μ΄ν„°λŸ¬λΈ”κ³Ό μœ μ‚¬ 배열을 λ°°μ—΄μ²˜λŸΌ 닀루고 싢을 λ•Œ 이런 νŠΉμ§•μ€ λΆˆνŽΈν•¨μ„ μ΄ˆλž˜ν•©λ‹ˆλ‹€. range에 λ°°μ—΄ λ©”μ„œλ“œλ₯Ό μ‚¬μš©ν•΄ 무언가λ₯Ό ν•˜κ³  싢을 λ•Œμ²˜λŸΌ 말이죠. μ–΄λ–»κ²Œ ν•˜λ©΄ μ΄ν„°λŸ¬λΈ”κ³Ό μœ μ‚¬ 배열에 λ°°μ—΄ λ©”μ„œλ“œλ₯Ό μ μš©ν•  수 μžˆμ„κΉŒμš”?


Array.from


λ²”μš© λ©”μ„œλ“œ Array.fromλŠ” μ΄ν„°λŸ¬λΈ”μ΄λ‚˜ μœ μ‚¬ 배열을 λ°›μ•„ "μ§„μ§œ" Arrayλ₯Ό λ§Œλ“€μ–΄μ€λ‹ˆλ‹€. 이 과정을 거치면 μ΄ν„°λŸ¬λΈ”μ΄λ‚˜ μœ μ‚¬ 배열에 λ°°μ—΄ λ©”μ„œλ“œλ₯Ό μ‚¬μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

let arrayLike = {
  0: "Hello",
  1: "World",
  length: 2,
};

let arr = Array.from(arrayLike); // (*)
alert(arr.pop()); // World (λ©”μ„œλ“œκ°€ μ œλŒ€λ‘œ λ™μž‘ν•©λ‹ˆλ‹€.)

(*)둜 ν‘œμ‹œν•œ 쀄에 μžˆλŠ” Array.from은 객체λ₯Ό λ°›μ•„ μ΄ν„°λŸ¬λΈ”μ΄λ‚˜ μœ μ‚¬ 배열인지 μ‘°μ‚¬ν•©λ‹ˆλ‹€. λ„˜κ²¨ 받은 μΈμˆ˜κ°€ μ΄ν„°λŸ¬λΈ”μ΄λ‚˜ μœ μ‚¬ 배열인 경우, μƒˆλ‘œμš΄ 배열을 λ§Œλ“€κ³  객체의 λͺ¨λ“  μš”μ†Œλ₯Ό μƒˆλ‘­κ²Œ λ§Œλ“  λ°°μ—΄λ‘œ λ³΅μ‚¬ν•©λ‹ˆλ‹€.

// rangeλŠ” 챕터 μœ„μͺ½ μ˜ˆμ‹œμ—μ„œ κ·ΈλŒ€λ‘œ κ°€μ Έμ™”λ‹€κ³  κ°€μ •ν•©μ‹œλ‹€.
let arr = Array.from(range);
alert(arr); // 1,2,3,4,5 (λ°°μ—΄-λ¬Έμžμ—΄ ν˜• λ³€ν™˜μ΄ μ œλŒ€λ‘œ λ™μž‘ν•©λ‹ˆλ‹€.)

Array.fromμ—” "맀핑(mapping)" ν•¨μˆ˜λ₯Ό μ„ νƒμ μœΌλ‘œ λ„˜κ²¨μ€„ 수 μžˆμŠ΅λ‹ˆλ‹€.

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

mapFn을 두 번째 인수둜 λ„˜κ²¨μ£Όλ©΄ μƒˆλ‘œμš΄ 배열에 obj의 μš”μ†Œλ₯Ό μΆ”κ°€ν•˜κΈ° 전에 각 μš”μ†Œλ₯Ό λŒ€μƒμœΌλ‘œ mapFn을 μ μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€. μƒˆλ‘œμš΄ λ°°μ—΄μ—” mapFn을 μ μš©ν•˜κ³  λ°˜ν™˜λœ 값이 μΆ”κ°€λ©λ‹ˆλ‹€. μ„Έ 번째 인수 thisArgλŠ” 각 μš”μ†Œμ˜ thisλ₯Ό 지정할 수 μžˆλ„λ‘ ν•΄μ€λ‹ˆλ‹€.

// rangeλŠ” 챕터 μœ„μͺ½ μ˜ˆμ‹œμ—μ„œ κ·ΈλŒ€λ‘œ κ°€μ Έμ™”λ‹€κ³  κ°€μ •ν•©μ‹œλ‹€.

// 각 숫자λ₯Ό 제곱
let arr = Array.from(range, num => num * num);

alert(arr); // 1,4,9,16,25

μ•„λž˜ μ˜ˆμ‹œμ—μ„  Array.fromλ₯Ό μ‚¬μš©ν•΄ λ¬Έμžμ—΄μ„ λ°°μ—΄λ‘œ λ§Œλ“€μ–΄λ³΄μ•˜μŠ΅λ‹ˆλ‹€.

let str = "π’³πŸ˜‚";

// strλ₯Ό λΆ„ν•΄ν•΄ κΈ€μžκ°€ λ‹΄κΈ΄ λ°°μ—΄λ‘œ λ§Œλ“¦
let chars = Array.from(str);

alert(chars[0]); // 𝒳
alert(chars[1]); // πŸ˜‚
alert(chars.length); // 2

Array.from은 str.splitκ³Ό 달리, λ¬Έμžμ—΄ μžμ²΄κ°€ 가진 μ΄ν„°λŸ¬λΈ” 속성을 μ΄μš©ν•΄ λ™μž‘ν•©λ‹ˆλ‹€. λ”°λΌμ„œ for..of처럼 μ„œλ‘œκ²Œμ΄νŠΈ μŒμ—λ„ μ œλŒ€λ‘œ μ μš©λ©λ‹ˆλ‹€.

μœ„ μ˜ˆμ‹œλŠ” 기술적으둜 μ•„λž˜ μ˜ˆμ‹œμ™€ λ™μΌν•˜κ²Œ λ™μž‘ν•œλ‹€κ³  λ³΄μ‹œλ©΄ λ©λ‹ˆλ‹€.

let str = "π’³πŸ˜‚";

let chars = []; // Array.from 내뢀에선 μ•„λž˜μ™€ λ™μΌν•œ 반볡문이 λŒμ•„κ°‘λ‹ˆλ‹€.
for (let char of str) {
  chars.push(char);
}

alert(chars);

μ–΄μ¨Œλ“  Array.from을 μ‚¬μš©ν•œ μ˜ˆμ‹œκ°€ 더 μ§§μŠ΅λ‹ˆλ‹€.

Array.from을 μ‚¬μš©ν•˜λ©΄ μ„œλ‘œκ²Œμ΄νŠΈ μŒμ„ μ²˜λ¦¬ν•  수 μžˆλŠ” sliceλ₯Ό 직접 κ΅¬ν˜„ν•  μˆ˜λ„ μžˆμŠ΅λ‹ˆλ‹€.

function slice(str, start, end) {
  return Array.from(str).slice(start, end).join("");
}

let str = "π’³πŸ˜‚π©·Ά";

alert( slice(str, 1, 3) ); // πŸ˜‚π©·Ά

// λ‚΄μž₯ 순수 λ©”μ„œλ“œλŠ” μ„œλ‘œκ²Œμ΄νŠΈ μŒμ„ μ§€μ›ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.
alert( str.slice(1, 3) ); // μ“°λ ˆκΉƒκ°’ 좜λ ₯ (μ˜μ—­μ΄ λ‹€λ₯Έ 특수 κ°’)
profile
생각 많이 ν•˜μ§€ μ•ŠκΈ° 😎
post-custom-banner

0개의 λŒ“κΈ€