TIL 25 - JavaScript Method

crystaleeΒ·2021λ…„ 7μ›” 28일
0

JavaScript

λͺ©λ‘ 보기
10/15
post-thumbnail

πŸ“– Method

μžλ°”μŠ€ν¬λ¦½νŠΈ λ‘œμ§μ—μ„œ 자주 μ‚¬μš©ν•˜λŠ” method에 λŒ€ν•΄ μ •λ¦¬ν•΄λ³΄μžβ—οΈ

✍️ reduce()

reduce() λ©”μ„œλ“œλŠ” λ°°μ—΄μ˜ 각 μš”μ†Œμ— λŒ€ν•΄ 주어진 λ¦¬λ“€μ„œ(reducer) ν•¨μˆ˜λ₯Ό μ‹€ν–‰ν•˜κ³ , ν•˜λ‚˜μ˜ 결과값을 λ°˜ν™˜ν•©λ‹ˆλ‹€.

arr.reduce(callback[, initialValue])

λ¦¬λ“€μ„œ ν•¨μˆ˜λŠ” λ„€ 개의 인자λ₯Ό κ°€μ§‘λ‹ˆλ‹€.

  • λˆ„μ‚°κΈ°accumulator (acc)
  • ν˜„μž¬ κ°’ (cur)
  • ν˜„μž¬ 인덱슀 (idx)
  • 원본 λ°°μ—΄ (src)
    πŸ‘‰ λ¦¬λ“€μ„œ ν•¨μˆ˜μ˜ λ°˜ν™˜ 값은 λˆ„μ‚°κΈ°μ— ν• λ‹Ήλ˜κ³ , λˆ„μ‚°κΈ°λŠ” 순회 쀑 μœ μ§€λ˜λ―€λ‘œ κ²°κ΅­ μ΅œμ’… κ²°κ³ΌλŠ” ν•˜λ‚˜μ˜ 값이 λ©λ‹ˆλ‹€.
const firstName = ["Lee", "Kim", "Park", "Park", "Lee", "Kim", "Park"];
const reducer = function(accumulator, value, index, array) {
  if (accumulator.hasOwnProperty(value)) {
    accumulator[val] = accumulator[val] + 1;
  } else {
    accumulator[val] = 1;
  }
  return accumulator;
}
const initialValue = {};
const result = votes.reduce(reducer, initialValue);
console.log(result); // { Kim: 2, Park: 3, Lee: 2 }

상기 μ½”λ“œλŠ” firstName 배열에 μžˆλŠ” 값듀을 μˆœνšŒν•˜λ©΄μ„œ μ΅œμ’…μ μœΌλ‘œ 각각의 값듀이 λͺ‡ 번 λ‚˜μ˜€λŠ”μ§€ count ν•˜λŠ” λ‘œμ§μž…λ‹ˆλ‹€. reduce λ©”μ„œλ“œμ˜ 첫 번째 μΈμžλ‘œλŠ” reducer λΌλŠ” ν•¨μˆ˜λ₯Ό, 두 번째 μΈμžλ‘œλŠ” μ΄ˆκΈ°κ°’, intialValue λΌλŠ” 빈 object λ₯Ό μ „λ‹¬ν•©λ‹ˆλ‹€.
λ°°μ—΄μ˜ 첫 번째 순회 λ•ŒλŠ” accumulator 의 값은 initialValue, 즉 {} μž…λ‹ˆλ‹€. if μ‘°κ±΄κ²€μ‚¬μ˜ κ²°κ³ΌλŠ” false μ΄λ―€λ‘œ accumulator.kim = 1 이 되고, { β€œkim” : 1 } μ΄λΌλŠ” 값을 return ν•©λ‹ˆλ‹€.
두 번째 순회 λ•ŒλŠ” accumulator 의 값은 μ•žμ—μ„œ 전달받은 { β€œkim” : 1 } 이고, value λŠ” λ°°μ—΄μ˜ 두 번째 κ°’(votes[1])인 β€œhong” μ΄λ―€λ‘œ return ν•˜λŠ” 값은 { β€œkim” : 1, β€œhong” : 1 } μž…λ‹ˆλ‹€. μ΄λ ‡κ²Œ κ³„μ†ν•΄μ„œ λ°°μ—΄μ˜ λκΉŒμ§€ μˆœνšŒν•˜λ©΄ μ΅œμ’…μ μΈ κ²°κ³ΌλŠ” { kim: 1, hong: 3, lee: 3} 와 κ°™μŠ΅λ‹ˆλ‹€.

✍️ map()

map() λ©”μ„œλ“œλŠ” λ°°μ—΄ λ‚΄μ˜ λͺ¨λ“  μš”μ†Œ 각각에 λŒ€ν•˜μ—¬ 주어진 ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•œ κ²°κ³Όλ₯Ό λͺ¨μ•„ μƒˆλ‘œμš΄ 배열을 λ°˜ν™˜ν•©λ‹ˆλ‹€.

arr.map(callback(currentValue[, index[, array]])[, thisArg])

λ§€κ°œλ³€μˆ˜

  • callback
    μƒˆλ‘œμš΄ λ°°μ—΄ μš”μ†Œλ₯Ό μƒμ„±ν•˜λŠ” ν•¨μˆ˜. λ‹€μŒ μ„Έ 가지 인수λ₯Ό κ°€μ§‘λ‹ˆλ‹€.
  • currentValue
    μ²˜λ¦¬ν•  ν˜„μž¬ μš”μ†Œ.
  • index Optional
    μ²˜λ¦¬ν•  ν˜„μž¬ μš”μ†Œμ˜ 인덱슀.
  • array Optional
    map()을 ν˜ΈμΆœν•œ λ°°μ—΄.
  • thisArg Optional
    callback을 μ‹€ν–‰ν•  λ•Œ this둜 μ‚¬μš©λ˜λŠ” κ°’.
  • λ°˜ν™˜ κ°’
    λ°°μ—΄μ˜ 각 μš”μ†Œμ— λŒ€ν•΄ μ‹€ν–‰ν•œ callback의 κ²°κ³Όλ₯Ό λͺ¨μ€ μƒˆλ‘œμš΄ λ°°μ—΄.

✍️ forEach()

forEach() λ©”μ„œλ“œλŠ” 주어진 ν•¨μˆ˜λ₯Ό λ°°μ—΄ μš”μ†Œ 각각에 λŒ€ν•΄ μ‹€ν–‰ν•©λ‹ˆλ‹€.

arr.forEach(callback(currentvalue[, index[, array]])[, thisArg])

λ§€κ°œλ³€μˆ˜

  • callback
    각 μš”μ†Œμ— λŒ€ν•΄ μ‹€ν–‰ν•  ν•¨μˆ˜. λ‹€μŒ μ„Έ 가지 λ§€κ°œλ³€μˆ˜λ₯Ό λ°›μŠ΅λ‹ˆλ‹€.
  • currentValue
    μ²˜λ¦¬ν•  ν˜„μž¬ μš”μ†Œ.
  • index Optional
    μ²˜λ¦¬ν•  ν˜„μž¬ μš”μ†Œμ˜ 인덱슀.
  • array Optional
    forEach()λ₯Ό ν˜ΈμΆœν•œ λ°°μ—΄.
  • thisArg Optional
    callback을 μ‹€ν–‰ν•  λ•Œ this둜 μ‚¬μš©ν•  κ°’.
  • λ°˜ν™˜ κ°’
    undefined

✍️ forEach() vs map()

forEach 와 map 은 1번째 μ „λ‹¬μΈμžλ‘œ ν•¨μˆ˜λ₯Ό λ°›λŠ”λ‹€. 그리고 κ·Έ ν•¨μˆ˜λŠ” μ„Έ 개의 인자λ₯Ό 가지고 호좜이 λ˜λŠ”λ° 1λ²ˆμ§ΈλŠ” λ°°μ—΄ μ›μ†Œμ˜ κ°’, 2λ²ˆμ§ΈλŠ” κ·Έκ²ƒμ˜ 인덱슀, 3λ²ˆμ§ΈλŠ” λ°°μ—΄ κ·Έ μžμ²΄μž…λ‹ˆλ‹€(보톡 1번만 μ‚¬μš©)

forEach 와 map λ‘˜ λ‹€ 배열을 μˆœνšŒν•˜λ©° 인자둜 μ „λ‹¬ν•œ μ›μ†Œμ˜ 값을 가지고 ν•¨μˆ˜ λ‘œμ§μ„ κ΅¬ν˜„ν•œλ‹€λŠ” κ²ƒμ—μ„œ 곡톡점이 μžˆλ‹€. ν•˜μ§€λ§Œ, 근본적으둜 return 이 쑴재 μœ λ¬΄μ—μ„œ 차이가 μžˆλ‹€.

μ–΄λ–€ 배열이 μžˆμ„ λ•Œ 배열을 μˆœνšŒν•˜λ©° μ›μ†Œμ˜ 값듀을 각각 κ°€κ³΅ν•΄μ„œ μˆ˜μ •λœ/μƒˆλ‘œμš΄ λ°°μ—΄(μ›λž˜ λ°°μ—΄κ³Ό 길이가 λ˜‘κ°™μ€)을 return λ°›κ³ μž ν•œλ‹€λ©΄ map λ©”μ„œλ“œλ₯Ό, 그렇지 μ•Šκ³  μ›μ†Œμ˜ 값듀을 ν™œμš©ν•΄μ„œ μ›μ†Œλ“€μ˜ ν•©μ΄λ‚˜, 평균을 κ΅¬ν•˜κ³ μž ν•œλ‹€λ©΄, 그리고 μ›λž˜ λ°°μ—΄κ³ΌλŠ” 길이가 λ‹€λ₯Έ λ°°μ—΄ κ²°κ³Όλ₯Ό λ°›κ³  μ‹Άλ‹€λ©΄, forEach λ₯Ό μ“°λ©΄ 될 것 κ°™λ‹€

profile
코린이 μ„±μž₯일기

0개의 λŒ“κΈ€