클린 코드 시작 위치

최근에 저는 클린 코드를 읽기 시작했습니다. 이 책은 밥 삼촌이 클린 코드라고 생각하는 것, 즉 읽고 유지 관리할 수 있는 간단한 코드를 제공하려고 하는 우리 지역에서 잘 알려진 책입니다.

이 기사에서는 그가 변수와 함수에 대해 이야기하는 책의 처음 세 장에 초점을 맞추고 싶습니다. 하지만 이것은 너무 흔해서 이 두 가지 사항에 주의를 기울이는 것만으로도 내 코드의 품질을 정말로 향상시킬 수 있다고 생각할 수도 있습니다.

변수의 이름에 대해 신중하게 생각하면 그 이름이 명확해지고 거기에 어떤 값이 저장되어 있는지 알려주고 코드에서 무슨 일이 일어나고 있는지 이해하는 데 도움이 될 것입니다.

코드를 더 쉽게 읽고 이해하면 이동할 위치와 변경할 항목을 이해하기 쉬워져 소프트웨어의 유지 관리에도 도움이 됩니다.

잘못된 변수 이름의 예를 참조하십시오.

const fn = "Patrick";
const yb = 2019;
const ln = "Nicezi";

console.log(fn+" "+ ln + " nasceu em" + yb);
// Result Patrick Nicezi was born in 1998

이제 이름이 잘 지정된 변수가 있는 동일한 예를 살펴보겠습니다.

const firstName = "Patrick";
const yearOfBirth = "2019";
const lastName = "Nicezi"; 

console.log(firstName +" "+lastname+" nasceu em" + yearOfBirth);
// Result Patrick Nicezi was born in 1998

보시다시피, 두 번째 변수는 각 변수가 정확히 무엇을 저장하는지 알려주고 다른 변수와 함께 사용될 때 무슨 일이 일어나고 있는지 이해하기 훨씬 쉽기 때문에 훨씬 이해하기 쉽습니다. 그리고 이 이름 선택은 클래스 이름, 함수 등과 같이 개발 중에 이름을 지정하는 모든 항목에 적용됩니다.

그러나 변수에 좋은 이름을 지정하면 명확한 이름 지정 패턴을 제공할 뿐만 아니라 이름 지정 패턴을 만드는 것도 중요하며 코드를 읽는 다음 사람이 코드를 이해하는 데 많은 도움이 됩니다. 예를 들어:

function alterUser(){...};
function changeAddress(){...};
function modifyUserDate(){....};

위의 코드를 읽을 때, 나는 그것들이 모두 객체를 변경하는 함수라는 것을 알고 있지만, 이름이 다르기 때문에 다른 일을 하는 것처럼 느껴지기 때문에 동일한 목적을 가지고 있는지 여전히 궁금합니다.

function updateUser(){...}
function updateAddress(){...}
function updateUserDate(){...}

이제 명명 패턴이 있는 코드에서 함수 이름을 읽는 것만으로도 함수의 목적이 무엇인지, 유사한 목적인지 명확하게 알 수 있습니다. 이 패턴을 사용하면 코드를 읽지 않은 사람이 어떤 함수가 업데이트로 시작합니다.

함수에 대해 말하자면, 우리는 함수를 만들 때 집중해야 할 매우 중요한 사항이 있습니다. 첫 번째는 함수가 한 가지만 수행해야 하고 두 번째는 너무 크지 않아야 합니다. 큰 것은 아마도 한 가지 이상의 일을 할 것입니다.

이에 대한 예를 참조하십시오.

function returnFormatedProducts(products){
    products.map(product =>{
    let amountOfPassengers;
        let adults = 0;
     let childrens = 0;

    if(product.type === 'CRUISE'){
        adults = cruiser.persons.adults;
        childrens = cruiser.persons.children + cruiser.persons.infants;
            amountOfPassengers = {adults,childrens};
    }else if(product.type === 'HOTEL'){
     const passengersPerRoom = hotel.rooms.map(room => {
                let childrensInRoom = 0;
        let adultsInRoom = 0;
         passengers.forEach(passenger => {
              if (passenger.type === 'ADULT') {
                adults++;
              } else {
                childrens++;
              }

          return {adults,childrens};
        });

        amountOfPassengers = passengersPerRoom.reduce(
          (totalPassengers, passengersInRoom) => {
            return {
              adults: (totalPassengers.adults += passengersInRoom.adults),
              childrens: (totalPassengers.childrens += passengersInRoom.childrens),
            };
          },
          { adults: 0, childrens: 0 },
        );
    }else{
        passengers.forEach(passenger => {
          if (passenger.type === 'ADULT') {
            adults++;
          } else {
            childrens++;
          }
        });
      amountOfPassengers = {adults,childrens};
    }

    return{
          sellDate:product.sellDate,
      route: product.route,
      startDate: product.startDate,
      endDate: product.endDate,
      price: product.price.replace('$', 'R$ '),
      paxChd: `${amountOfPassengers.adults} / ${amountOfPassengers.childrens}`,
    }
  });
}

이 코드는 우리가 이 큰 함수를 더 작은 함수로 분리할 때 훨씬 더 명확해지며 각각의 책임은 함수 이름을 읽는 것만으로도 함수가 무엇을 하는지 명확해집니다.

function returnFormatedProducts(products){
    products.map(product =>{
    const amountOfPassengers = this.getPassengersAmount(product);

    return{
          sellDate:product.sellDate,
      route: product.route,
      startDate: product.startDate,
      endDate: product.endDate,
      price: product.price.replace('$', 'R$ '),
      paxChd: `${amountOfPassengers.adults} / ${amountOfPassengers.childrens}`,
    }
  });
}

function getPassengersAmount(product) {
    if (product.type === "CRUISE") {
      return getPassengersFromCruiser(product);
    }

    if (product.type === "HOTEL") {
      return getPassengersFromHotel(product);
    }
    return countPassengers(product.passengers);
  }

function getPassengersFromCruiser(cruiser) {
    const adults = cruiser.persons.adults;
    const childrens = cruiser.persons.children + cruiser.persons.infants;
    return {
      adults,
      childrens,
    };
  }

  function getPassengersFromHotel(hotel) {
    const passengersPerRoom = hotel.rooms.map(room => {
      return this.countPassengers(room.passengers);
    });

    const amountOfPassengers = passengersPerRoom.reduce(
      (totalPassengers, passengersInRoom) => {
        return {
          adults: (totalPassengers.adults += passengersInRoom.adults),
          childrens: (totalPassengers.childrens += passengersInRoom.childrens),
        };
      },
      { adults: 0, childrens: 0 },
    );
    return amountOfPassengers;
  }

이 작은 코드 리팩토링을 통해 우리는 그것을 더 매끄럽게 읽을 수 있습니다. returnFormatedProduct 함수를 볼 때 우리는 그것이 무엇을 하는지 이해할 수 있고 승객 수에 대한 자세한 정보가 필요한 경우 그에 대한 특정 함수를 볼 수 있습니다.

그리고 새 모양을 추가하거나 기존 모양을 변경해야 하는 경우 전체 코드에 영향을 주지 않으며 쉽게 변경할 수 있습니다.

결론

깨끗한 코드를 작성하는 것은 연습, 교육 및 작은 세부 사항에 주의를 기울이는 문제입니다. 진행 중인 프로세스이므로 코드를 리팩터링하고 더 나은 이름을 찾으면 이름을 바꾸는 것을 두려워하지 마십시오.