자바스크립트를 다시 생각해보세요. 부분적 적용, 참조 투명성, 지연 연산-JS 튜토리얼-php.cn

Rethinking JavaScript. Partial Application, Referential Transparency, and Lazy Operations

안녕하세요 여러분! 얼마 전 최신 TC39 제안을 검색하던 중 우연히 나를 흥분시키고 약간 회의적으로 만드는 제안을 발견했습니다. JavaScript의 부분 응용 프로그램 구문에 관한 것입니다. 언뜻 보기에 이는 많은 일반적인 코딩 문제에 대한 완벽한 해결책처럼 보이지만 곰곰이 생각해 보니 마음에 드는 부분도 많고 개선할 여지도 있다는 것을 깨달았습니다.

더 좋은 점은 이러한 우려가 JavaScript를 더욱 강력하게 만들 수 있는 완전히 새로운 아이디어를 촉발했다는 것입니다. 이러한 기능이 일상적인 코딩 방식을 어떻게 변화시킬 수 있는지에 대한 현실적인 예를 통해 여러분을 이 여정으로 안내하겠습니다.

TLDR: 기사는 내 이전 호에서 제안서로 나왔습니다: https://github.com/tc39/proposal-partial-application/issues/53

제안

부분 적용을 사용하면 함수의 일부 인수를 "사전 설정"하여 나중에 사용할 수 있도록 새 함수를 반환할 수 있습니다. 현재 코드는 다음과 같습니다.

const fetchWithAuth = (path: string) => fetch(
  { headers: { Authorization: "Bearer token" } },
  path,
);
fetchWithAuth("/users");
fetchWithAuth("/posts");

로그인 후 복사

이 제안에서는 ~() 구문을 도입합니다.

const fetchWithAuth = fetch~({ headers: { Authorization: "Bearer token" } }, ?);
fetchWithAuth("/users");
fetchWithAuth("/posts");

로그인 후 복사

무슨 일이 일어나고 있는지 보시겠어요? fetchWithAuth 함수는 헤더 인수를 미리 채우므로 URL만 제공하면 됩니다. .bind()와 비슷하지만 더 유연하고 읽기 쉽습니다.

이 제안에서는 ? 채워지지 않은 인수에 대한 자리 표시자와 나머지 매개변수에 대한 ...입니다. 예:

const sendEmail = send~(user.email, ?, ...);
sendEmail("Welcome!", "Hello and thanks for signing up!");
sendEmail("Reminder", "Don't forget to confirm your email.");

로그인 후 복사

가장 마음에 드는 부분은 유형 주석을 복제할 필요가 없다는 점입니다!

유용할 것 같죠? 하지만 풀어야 할 것이 더 많습니다.

참조 투명성의 사례

실질적인 문제점부터 시작해 보겠습니다. 함수 클로저 및 오래된 변수 참조

알림을 예약한다고 가정해 보겠습니다. 다음과 같이 작성할 수도 있습니다.

function notify(state: { data?: Data }) {
  if (state.data) {
      setTimeout(() => alert(state.data), 1000)
  }
}

로그인 후 복사

이미 문제를 확인하셨나요? 시간 초과 중에 "데이터" 속성이 변경될 수 있으며 경고에는 아무 것도 표시되지 않습니다! 이 문제를 해결하려면 값 참조를 명시적으로 전달해야 합니다. "setTimeout"은 이를 콜백에 전달하기 위해 추가 인수를 허용합니다.

function notify(state: { data?: Data }) {
  if (state.data) {
      setTimeout((data) => alert(data), 1000, state.data)
  }
}

로그인 후 복사

나쁘지는 않지만 API 전체에서 널리 지원되지는 않습니다. 부분적으로 적용하면 이 패턴을 훨씬 더 보편적으로 만들 수 있습니다.

function notify(state: { data?: Data }) {
  if (state.data) {
      setTimeout(alert~(state.data), 1000)
  }
}

로그인 후 복사

함수 생성 시 state.data를 잠그면 오래된 참조로 인한 예상치 못한 버그를 방지할 수 있습니다.

반복 계산 줄이기

부분 적용의 또 다른 실질적인 이점은 대규모 데이터 세트를 처리할 때 중복되는 작업을 제거한다는 것입니다.

예를 들어 각 반복 단계에 대해 추가 데이터를 계산해야 하는 매핑 논리가 있다고 가정해 보겠습니다.

const fetchWithAuth = (path: string) => fetch(
  { headers: { Authorization: "Bearer token" } },
  path,
);
fetchWithAuth("/users");
fetchWithAuth("/posts");

로그인 후 복사

문제는 this.some.another에 대한 프록시 액세스에 있습니다. 각 반복 단계를 호출하는 것은 꽤 어렵습니다. 이 코드를 다음과 같이 리팩터링하는 것이 더 좋습니다.

const fetchWithAuth = fetch~({ headers: { Authorization: "Bearer token" } }, ?);
fetchWithAuth("/users");
fetchWithAuth("/posts");

로그인 후 복사

부분 적용을 사용하면 덜 장황하게 처리할 수 있습니다.

const sendEmail = send~(user.email, ?, ...);
sendEmail("Welcome!", "Hello and thanks for signing up!");
sendEmail("Reminder", "Don't forget to confirm your email.");

로그인 후 복사

공유 계산을 베이킹하면 성능 저하 없이 코드를 더 간결하고 따라하기 쉽게 만들 수 있습니다.

새로운 구문을 추가하는 이유는 무엇입니까?

이제부터 머리를 긁기 시작했습니다. 제안된 구문은 우아하지만 JavaScript에는 이미 많은 연산자가 있습니다. 특히 물음표 연산자 ?. ~()를 추가하면 언어를 배우고 구문 분석하기가 더 어려워질 수 있습니다.

새로운 구문을 도입하지 않고도 동일한 기능을 달성할 수 있다면 어떨까요?

방법 기반 대안

Function.prototype을 연결 메서드로 확장한다고 상상해 보세요.

function notify(state: { data?: Data }) {
  if (state.data) {
      setTimeout(() => alert(state.data), 1000)
  }
}

로그인 후 복사

좀 더 장황하지만 완전히 새로운 연산자를 도입하지는 않습니다. 자리 표시자에 추가 특수 기호를 사용하여 물음표를 대체할 수 있습니다.

function notify(state: { data?: Data }) {
  if (state.data) {
      setTimeout((data) => alert(data), 1000, state.data)
  }
}

로그인 후 복사

추가적인 빌드타임 복잡도 없이 완벽하게 폴리파일링이 됩니다!

function notify(state: { data?: Data }) {
  if (state.data) {
      setTimeout(alert~(state.data), 1000)
  }
}

로그인 후 복사

하지만 이는 빙산의 일각일 뿐입니다. 이를 통해 자리 표시자 개념을 다양한 API에서 재사용할 수 있습니다.

게으른 작업: 더 나아가기

여기서 정말 흥미로운 일이 발생합니다. 느린 연산이 가능하도록 기호 개념을 확장하면 어떨까요?

예제 1: .filter() 및 .map() 결합

전자상거래 사이트의 제품 목록을 처리한다고 가정해 보겠습니다. 가격이 반올림되어 할인된 품목만 표시하려고 합니다. 일반적으로 다음과 같이 작성합니다.

class Store  {
  data: { list: [], some: { another: 42 } }
  get computedList() {
    return this.list.map((el) => computeElement(el, this.some.another))
  }
  contructor() {
    makeAutoObservable(this)
  }
}

로그인 후 복사

그러나 이를 위해서는 배열을 두 번 반복해야 합니다. 지연 작업을 사용하면 두 단계를 하나의 패스로 결합할 수 있습니다.

class Store  {
  data: { list: [], some: { another: 42 } }
  get computedList() {
    const { another } = this.some
    return this.list.map((el) => computeElement(el, another))
  }
  contructor() {
    makeAutoObservable(this)
  }
}

로그인 후 복사

Symbol.skip은 최종 배열에서 항목을 제외하도록 엔진에 지시하여 작업을 효율적이고 표현력 있게 만듭니다!

예 2: .reduce()의 조기 종료

처음 5개 판매의 총 수익을 계산한다고 상상해 보세요. 일반적으로 .reduce() 내부에서 조건을 사용합니다:

class Store  {
  data: { list: [], some: { another: 42 } }
  get computedList() {
    return this.list.map(computeElement~(?, this.some.another))
  }
  contructor() {
    makeAutoObservable(this)
  }
}

로그인 후 복사

이 방법은 작동하지만 여전히 배열의 모든 항목을 처리합니다. 지연 감소를 사용하면 조기 종료 신호를 보낼 수 있습니다.

function notify(state: { data?: Data }) {
  if (state.data) {
      setTimeout(alert.tie(state.data), 1000)
  }
}

로그인 후 복사

Symbol.skip이 있으면 조건이 충족되자마자 엔진에 반복을 중지하여 귀중한 사이클을 절약할 수 있습니다.

이것이 중요한 이유

부분적 적용, 참조 투명성, 지연 연산 등의 아이디어는 단순한 학문적 개념이 아닙니다. 실제 문제를 해결합니다.

클리너 API 사용: 인수를 미리 잠그고 오래된 참조를 방지하세요.
향상된 성능: 중복 계산을 제거하고 보다 효율적인 반복을 가능하게 합니다.
더욱 뛰어난 표현력: 읽고 유지하기 쉬운 간결하고 선언적인 코드를 작성하세요.

~()를 고수하든 Tie 및 Symbol.skip과 같은 대안을 탐색하든 기본 원칙은 JavaScript 작성 방법을 한 단계 더 발전시킬 수 있는 엄청난 잠재력을 가지고 있습니다.

나는 폴리필이 쉽고 다양한 용도로 사용되는 기호 접근 방식에 투표합니다.

다음은 무엇입니까?

궁금해요. 어떻게 생각하시나요? ~() 올바른 방향입니까, 아니면 메소드 기반 접근 방식을 탐구해야 합니까? 그리고 지연 작업이 작업 흐름에 어떤 영향을 미칠까요? 댓글로 토론해보자!

JavaScript의 아름다움은 커뮤니티 중심의 발전에 있습니다. 아이디어를 공유하고 토론함으로써 우리는 모두에게 더 나은 언어를 만들 수 있습니다. 대화를 계속 이어가자!

위 내용은 자바스크립트를 다시 생각해보세요. 부분적 적용, 참조 투명성, 지연 연산의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!