Javascript에서 배관을 사용해 보셨습니까?

이런 식으로 자신을 잡은 적이 있습니까?

문제: 모든 학생의 이름에 문자 'J'가 포함된 클래스를 가져오려면:

const studentsByClass = {
  class_1: ['john', 'mark', 'josh'],
  class_2: ['jeash', 'jack', 'jean']
}

const result = Object.fromEntries(Object.entries(studentsByClass)
  .filter(([className, students]) => {
    return students.every(studentName => studentName.includes('j'))
  }))


꽤 길죠? 읽기도 꽤 어렵습니다.

최근에 이것을 읽을 수 있는 방법을 찾았습니다. freecodecamp.org 기능에 대한 이 기사를 pipe에서 찾았습니다.

다음과 같이 진행됩니다.

const pipe = (...fns) => (x) => fns.reduce((v, f) => f(v), x);

const toEntries = val => Object.entries(val)

const filterClass = entries => {
  return entries.filter(([className, students]) => {
    return students.every(studentName => studentName.includes('j'))
  })
}

const fromEntries = entries => Object.fromEntries(val)

pipe(
  toEntries,
  filterClass,
  fromEntries,
)(studentsByClass);


이것은 긴 코드 줄을 처리하는 데 정말 도움이 되었습니다. 그러나 나는 아직 기능적인 자바스크립트에 익숙하지 않다. 그래서 나는 내 자신의 버전을 만들었습니다.

const pipe = (initial, fns) => fns.reduce((v, f) => f(v), initial)


사용 방법:

const pipe = (initial, fns) => fns.reduce((v, f) => f(v), initial)

const toEntries = val => Object.entries(val)

const filterClass = entries => {
  return entries.filter(([className, students]) => {
    return students.every(studentName => studentName.includes('j'))
  })
}

const fromEntries = entries => Object.fromEntries(val)

pipe(studentsByClass, [
  toEntries,
  filterClass,
  fromEntries,
]);


하지만 난 보통 코드베이스가 어수선해지는 것을 피하기 위해 이렇게 합니다.

const pipe = (initial, fns) => fns.reduce((v, f) => f(v), initial)

const filterClass = entries => {
  return entries.filter(([className, students]) => {
    return students.every(studentName => studentName.includes('j'))
  })
}

pipe(studentsByClass, [
  val => Object.entries(val),
  val => filterClass(val),
  val => Object.fromEntries(val)
]);


소스/읽기
freecodecamp
github

좋은 웹페이지 즐겨찾기