lodash collection flatMapDeep 활용

개발을 하다가 여러가지 input값들을 한번에 관리하는 경우가 생겼고, 각 input이 모두 비어있는지를 체크하고 싶었습니다. 활용할만한 라이브러리를 찾아보다가 lodash collection의 flatMapDeep을 활용하면 쉽게 해결할 수 있었습니다.

코드 확인하기

콘솔창을 보시면 모든 input value값들을 펼쳐서 배열에 저장할 수 있었고 문제를 해결할 수 있었습니다 :) image

flatMapDepth의 내부구현은 어떻게 되어 있을지 궁금해서 찾아봤습니다.

import baseFlatten from './.internal/baseFlatten.js'
import map from './map.js'

/**
 * This method is like `flatMap` except that it recursively flattens the
 * mapped results up to `depth` times.
 *
 * @since 4.7.0
 * @category Collection
 * @param {Array|Object} collection The collection to iterate over.
 * @param {Function} iteratee The function invoked per iteration.
 * @param {number} [depth=1] The maximum recursion depth.
 * @returns {Array} Returns the new flattened array.
 * @see flatMap, flatMapDeep, flatten, flattenDeep, flattenDepth, map, mapKeys, mapValues
 * @example
 *
 * function duplicate(n) {
 *   return [[[n, n]]]
 * }
 *
 * flatMapDepth([1, 2], duplicate, 2)
 * // => [[1, 1], [2, 2]]
 */
function flatMapDepth(collection, iteratee, depth) {
  depth = depth === undefined ? 1 : +depth
  return baseFlatten(map(collection, iteratee), depth)
}

export default flatMapDepth
import isFlattenable from './isFlattenable.js'

/**
 * The base implementation of `flatten` with support for restricting flattening.
 *
 * @private
 * @param {Array} array The array to flatten.
 * @param {number} depth The maximum recursion depth.
 * @param {boolean} [predicate=isFlattenable] The function invoked per iteration.
 * @param {boolean} [isStrict] Restrict to values that pass `predicate` checks.
 * @param {Array} [result=[]] The initial result value.
 * @returns {Array} Returns the new flattened array.
 */
function baseFlatten(array, depth, predicate, isStrict, result) {
  predicate || (predicate = isFlattenable)
  result || (result = [])

  if (array == null) {
    return result
  }

  for (const value of array) {
    if (depth > 0 && predicate(value)) {
      if (depth > 1) {
        // Recursively flatten arrays (susceptible to call stack limits).
        baseFlatten(value, depth - 1, predicate, isStrict, result)
      } else {
        result.push(...value)
      }
    } else if (!isStrict) {
      result[result.length] = value
    }
  }
  return result
}

export default baseFlatten

collection의 요소들을 iteratee에 넣고 돌린 결과들을 가지고 baseFlatten 함수에 전달하네요. 그러면 depth만큼 재귀적으로 함수를 반복한 결과를 반환합니다. 생각보다 단순합니다.

여기에서 나머지 인자 predicate, isStrict는 사용하지 않는데, 설명만 읽고서는 어떤 역할인지 이해가 잘 안되네요.


Written by@Donghoon Song
사람들의 꿈을 이어주는 코멘토에서 일하고 있습니다.

InstagramGitHubTwitterLinkedIn