lodash

• A modern JavaScript utility library delivering modularity, performance, & extras

https://github.com/lodash/lodash

좋은 util함수 짜는 것은 너무 힘들다. 물론 돌아가는 코드를 구현할 수는 있지만.. 최적화 된 함수인지 구분하기도 어렵고.. 또 좋은 함수인지 구분하기도 아직은 힘든거 같다 😰

이때 추천받은 lodash 🤗

유용하게 사용가능 한 유틸 함수 오픈 라이브러리로 코드를 잘 짜는 사람들이 간결하게 만들어 놓은 함수의 예시를 직접 사용할 수 있다! 나의 경우는 하나하나 뜯어보며 사람들이 유틸함수를 어떻게 만들었는지 자바스크립트 문법을 집어가는 공부를 해보려 한다!

• lodash함수 안에 또 lodash함수를 import 해서 사용하는 것처럼 코드가 짜여져 있어서 차근차근 적어볼까 한다.

1.chunk

• 2개의 인자(배열과 숫자) 를 받는 함수이고, 숫자 길이 만큼 배열을 자르고, 나머지가 있다면 한배열에 묶어서 보여준다.
  아래 주석에도 자세히 나와있지만 즉

chunk(['a', 'b', 'c', 'd'], 2) // 이렇게 호출하면 
=> [['a', 'b'], ['c', 'd']] // 요렇게 각각 두개씩 묶은 배열을 보여준다. 

chunk(['a', 'b', 'c', 'd'], 3) // 이렇게 호출하면 
=> [['a', 'b', 'c'], ['d']] // 3개까지 한배열에 묶고 나머지는 한 배열에 넣어서 보여준다. 

전체코드💜

import slice from './slice.js'
import toInteger from './toInteger.js'

function chunk(array, size = 1) {
  size = Math.max(toInteger(size), 0)
  const length = array == null ? 0 : array.length
  if (!length || size < 1) {
    return []
  }
  let index = 0
  let resIndex = 0
  const result = new Array(Math.ceil(length / size))

  while (index < length) {
    result[resIndex++] = slice(array, index, (index += size))
  }
  return result
}

export default chunk

코드 뜯어보기 💜

• chunk 함수를 구현하기 위해 아래와 같이 import해준다. slice와 toInteger는 이름에서 알 수 있 듯 각각 slice하는 함수, 정수로 만드는 함수 라고 볼 수 있다

import slice from './slice.js'
import toInteger from './toInteger.js'

• 함수에 자세히 설명된 주석(실제 프로젝트에도 @params로 넘기는 파라미터 정보를 자세히 적어두는것이 협업시 서로의 코드를 이해하는데 큰 도움이 된다! 🤗

/**
 * Creates an array of elements split into groups the length of `size`.
 * If `array` can't be split evenly, the final chunk will be the remaining
 * elements.
 *
 * @since 3.0.0
 * @category Array
 * @param {Array} array The array to process. <- 첫번째 파라미터 
 * @param {number} [size=1] The length of each chunk <- 두번째 파라미터 
 * @returns {Array} Returns the new array of chunks. <- 리턴 값
*/

• 드디어 chunk 함수 들여다 보기🤓

// defaualt parameter로 두번째 인자를 1로 받고 있다 즉 인자를 하나만 넘길때는 자동으로 하나로 지정되어 있다는 뜻 
function chunk(array, size = 1) {
  
// 받은 숫자가 정수가 아닐경우, toInteger() 에 넣어 정수로 만들고 음의 정수일 경우 , 0을 넘겨주어 나누지 않거나, 0보다 큰수로 나누어 주는 역할을 한다. 
  size = Math.max(toInteger(size), 0)
  
// array의 length를 구하는 함수이고, array가 비어서 입력되어 null 값이 들어오면 length는 0, 아니면 array.length를 통해 구해준다.
  const length = array == null ? 0 : array.length

// length 로 0 이 들어와서 false이거나, size 에 음수가 들어와서 0 인 경우에는 chunk 함수가 제대로 작동하지 않는 상황이므로 빈 array를 리턴한다. 
// 즉 chunk([],2) 혹은 chunk([1,2,3],0) 이 들어오면 다 []를 리턴하는 구조이다. 
  if (!length || size < 1) {
    return []
  }
 
  
// 실제 chunk를 구하는 함수 
// 첫 index 값과 배열의 배열안에 우리가 원하는 chunk를 넣을 수 있는 result index의 index 값을 0으로 셋팅 해준다.  
  let index = 0  
  let resIndex = 0
  
  
// chunck 배열안에 들어갈 배열의 길이를 구해주는 코드 new 생성자 함수로 배열의 길이를 원하는 사이즈만큼 구해서 올림해주면 우리가 원하는 배열의 길이만큼의 이중 배열이 만들어 진다. 
  
// 즉 예를 들어 chunck([1,2,3,4,5],2) 를 했다면 
  const result = new Array(Math.ceil(length / size))

// const result = new Array(Math.ceil(5/2))
// const result = new Array(3)
// const result = [empty × 3]  ->  길이가 3 인 배열이 만들어 지고 아래의 while문을 돌면서 result의 각각 index에 원하는 값을 넣어준다. 

  while (index < length) {
    
// 여기서 slice함수는 일반 슬라이스와 다르게 인자를 3개 받을 수 있고, 첫번째 인자로 slice하고자 하는 배열을 넣어주고 나머지는 start, end인 기본 slice함수와 같다고 생각하면 된다. 
   
    result[resIndex++] = slice(array, index, (index += size))
  }
// 즉 while 문을 돌때마다 첫번째 index, 두번째 index 세번째 index에 아래와 같이 넣어주면 
//result[0] = slice([1,2,3,4,5],0,2) [1,2]
//result[1] = slice([1,2,3,4,5],2,4 )[3,4]
//result[2] = slice([1,2,3,4,5],4,6 ) [5]

//전체 result는 [[1,2],[3,4],[5]] 가 된다. 
  return result
}

export default chunk

chunk 함수 오픈소스 뜯어보기 끄읕!