August 14, 2022
개발을 하다가 여러가지 input값들을 한번에 관리하는 경우가 생겼고, 각 input이 모두 비어있는지를 체크하고 싶었습니다. 활용할만한 라이브러리를 찾아보다가 lodash collection의 flatMapDeep을 활용하면 쉽게 해결할 수 있었습니다.
콘솔창을 보시면 모든 input value값들을 펼쳐서 배열에 저장할 수 있었고 문제를 해결할 수 있었습니다 :)
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는 사용하지 않는데, 설명만 읽고서는 어떤 역할인지 이해가 잘 안되네요.