3가지 간단한 자바스크립트 변경

코드를 개선할 수 있는 3가지 간단한 JavaScript 변경 사항을 보여 드리겠습니다.

1. 순수 함수

이것이 무엇을 의미합니까? 엄격한 순수 함수 정의는 아니지만 제가 목표로 삼고 싶은 것은 다음과 같습니다. 인수를 받아 값을 반환하는 함수. 이상적으로는 순수 함수의 부작용이 없어야 하지만 때로는 그렇게 하기가 쉽지 않습니다.

///trivial example
function add(a,b){
  return a+b;
}

이 예는 매우 간단합니다. 두 개의 값을 가져와 값을 반환합니다. 정말 간단합니다.

//Don't do this
function badProcessPerson(person){
  person.fullName = `${person.firstName} ${person.lastName}`;
  person.shoeSize = person.showSize || 7;
}

이것은 일반적인 문제이며 하나의 불변성도 해결을 목표로 하지만 그것은 다른 날의 주제입니다. 참조 유형을 전달하면 개체에 대한 모든 변경 사항이 함수 외부에 반영됩니다. 그러나 수정된 ​​객체를 명시적으로 반환하면 함수 소비자는 필요한 변경 사항이 있음을 확신할 것입니다.

//Do this
function goodProcessPerson(person){
  person.fullName = `${person.firstName} ${person.lastName}`;
  person.shoeSize = person.showSize || 7;
  return person
}

//but ideally this
function goodProcessPerson(person){
  return {
    ...person,
    fullName: `${person.firstName} ${person.lastName}`,
    shoeSize:person.showSize || 7
  }
}

복수 반품?

여러 값을 반환해야 하는 경우 개체를 사용하여 값을 캡슐화하는 것이 좋습니다. 객체 구조 분해를 사용하면 결과를 훨씬 더 쉽게 사용할 수 있습니다.

const {total, avg} = getTotalAndAverage(scores);

2. 매개변수 순서

함수를 만들 때 나는 항상 마지막 인수에 작용하는 데이터를 만들려고 노력합니다.

// Don't do this
function setAge(user, age){....

// Do this
function setAge(age,user){

이 관행은 실제로 아래의 몇 가지 예에 적합합니다.

3. 카레

커링을 사용하면 함수를 부분적으로 적용할 수 있으며 모든 인수를 받은 후에만 실행할 수 있습니다. 커링 기능이 있는 많은 프레임워크가 있지만 이 작은 gem으로도 비슷한 결과를 얻을 수 있습니다.

const setAge = (age) => (user) => {....

setAge(24)(currentUser);

화살표 함수 만세!!

이제 이것이 진정한 커링은 아니지만 부분적으로 적용할 수 있는 함수를 빠르게 만들 수 있음을 분명히 하겠습니다.

함께 묶어

배열 함수

배열 함수는 훌륭하지만 다음 예제를 살펴보십시오.

const users = [...];
const olderThan = (user,age) => user.age > age;
const over18 = users.filter(x => olderThan(x, 18));

이 코드는 매개변수를 재정렬하고 함수를 커링함으로써 괜찮지만 훨씬 더 읽기 쉬워집니다.

const users = [...];
const olderThan = age => user => user.age > age;
const over18 = users.filter(olderThan(18));

약속

배열 함수가 멋지게 정렬된 매개변수가 있는 커리화된 순수 함수의 이점을 누리는 것처럼 Promise도 마찬가지입니다. 이전 코드에서 함수를 가져와서 빌드해 보겠습니다.

const olderThan = age => user => user.age > age;
const filterUsers = filterFn => users => users.filter(filterFn);
const over18 = getUsers().then(filterUsers(olderThan(18)));

결론

이러한 변화가 획기적인 것은 아니지만 몇 가지 중요한 이점이 있다고 생각합니다. 순수 함수는 테스트하기가 매우 쉽고 항상 값을 반환하면 실수로 참조 유형을 업데이트하는 것을 완화하는 데 도움이 됩니다. 이를 커링 및 우수한 매개변수 순서와 결합하면 배열 및 약속과 상호 작용할 때 코드를 더 쉽게 읽을 수 있는 함수가 생성됩니다.

코드 기반에 큰 영향을 미친다고 생각하는 간단한 코드 변경은 무엇입니까?