라인 저장을 중지하십시오!

소개

이 기사에서는 소프트웨어를 개발할 때 더 많은 코드를 작성해야 하는 이유에 대해 논할 것입니다. 우선, 내가 말하려는 것이 무엇인지 명확히 하는 것이 좋습니다.

다른 파일을 사용하여 프로젝트를 모듈로 나누는 것은 기대해야 할 일입니다. 책임별로 코드를 나누면 명확성이 향상되고 프로젝트 유지 관리가 더 쉬워집니다. 그건 그렇고, 여기서 목표는 코드를 더 길게 하기 위해 줄을 추가하는 것이 아니라 가독성을 우선시하는 것입니다.

세 개 한 벌

많은 언어, 특히 JavaScript는 멋진 기능을 많이 제공하므로 더 적거나 더 명확한 코드로 동일한 알고리즘을 사용할 수 있습니다. 좋은 예는 if/else 문의 불필요한 줄을 여러 번 절약해 주는 삼항 연산자입니다.

// before
if (condition) {
  variable = 3;
} else {
  variable = 2;
}

// then
variable = condition ? 3 : 2;

그렇다면 왜, 언제 라인 저장을 피해야 할까요? 삼항 예제에 따라 중첩 삼항이 있으면 어떻게 될까요?

variable = condition ? (condition2 ? 3 : 1) : 2;

여전히 명확합니까? 여전히 한 줄로 쓸 가치가 있습니까? 나는 그렇게 생각하지 않는다.

// before
variable = condition ? (condition2 ? 3 : 1) : 2;

// then
if (condition) {
  variable = condition2 ? 3 : 1;
} else {
  variable = 2;
}

예, 코드가 훨씬 길어졌지만 항상 코드를 통해 이해하려고 노력하십시오. 나중에 읽기 어려울 것 같으면 팀원을 상상해 보세요.

변수

삼항 예제에서와 같이 때로는 같은 줄에 모든 표현식을 추가하는 것을 거부하기 힘들지만 약간 혼란스러울 수 있습니다. 현재 상황을 설명하는 변수를 생성하면 나중에 다른 엔지니어가 코드를 읽을 때 도움이 됩니다.

// before
const getRandomInteger = (min, max) => Math.trunc(Math.random() * (max - min + 1)) + min;

// then
const getRandomInteger = (min, max) => {
  const randomDecimal = Math.random();
  const numberOfPossibilities = max - min + 1;

  const randomIntegerFromZero = Math.trunc(randomDecimal * numberOfPossibilities);
  const randomIntegerFromMin = randomIntegerFromZero + min;

  return randomIntegerFromMin;
};

코드가 커졌지만 코드에 무슨 일이 일어나고 있는지 이해하기가 얼마나 쉬워졌는지 살펴보세요.
1 - 임의의 소수점을 얻습니다.
2 - 당신이 가진 가능성의 수를 계산
3 - 0에서 가능성의 수까지 임의의 정수를 생성합니다.
4 - 임의의 정수가 올바른 범위에 있도록 최소값을 오프셋으로 사용합니다.

당신이 이 팀의 엔지니어라면 어떤 코드를 이해하고 리팩토링해야 할까요?

라벨 기능

함수가 존재한다고 말하는 이유는 전체를 다시 작성하는 대신 코드를 재사용하기 위해서입니다. 그러나 그것이 그들의 유일한 목적은 아닙니다. 현명한 움직임은 함수를 사용하여 코드 블록의 이름을 지정하고 가독성을 높이는 것입니다.

동일한 예를 사용하여 프로그래머를 배열로 필터링하고 그 중 하나를 무작위로 선택하여 상품을 받는 함수가 있다고 가정해 보겠습니다. 어느 것이 읽기 쉬운지 봅시다.

// before
const getRandomProgrammer = (people) => {
  const programmers = people.filter(({ job }) => job === 'programmer');

  const min = 0;
  const max = programmers.length - 1;

  const randomDecimal = Math.random();
  const numberOfPossibilities = max - min + 1;

  const randomIntegerFromZero = Math.trunc(randomDecimal * numberOfPossibilities);
  const randomIntegerFromMin = randomIntegerFromZero + min;

  const winner = programmers[randomIntegerFromMin];

  return winner;
};

// then
const getRandomInteger = (min, max) => {
  const randomDecimal = Math.random();
  const numberOfPossibilities = max - min + 1;

  const randomIntegerFromZero = Math.trunc(randomDecimal * numberOfPossibilities);
  const randomIntegerFromMin = randomIntegerFromZero + min;

  return randomIntegerFromMin;
};

const getRandomProgrammer = (people) => {
  const programmers = people.filter(({ job }) => job === 'programmer');

  const winnerIndex = getRandomInteger(0, programmers.length - 1);

  const winner = programmers[winnerIndex];

  return winner;
};

이제 더 많은 코드 라인이 있지만 이제 함수를 선언하고 있으므로 getRandomProgrammer가 얼마나 더 깨끗하고 읽기 쉬운지 확인하십시오. 실제로 알고리즘의 각 단계를 읽는 대신 이제 설명 레이블(이 경우 getRandomInteger )을 읽고 그것이 무엇을 하는지 정확히 알 수 있습니다. 그리고 getRandomInteger 를 이해하고 싶다면 논리가 중괄호 사이에 제한되어 있다는 것을 알면 읽을 수 있습니다.

추신: 해당 블록 앞에 // getting random number를 남기지 않고 더 우아한 방식으로 주석을 대체하는 방법을 확인하십시오.

줄바꿈

줄 바꿈은 올바르게 수행된 경우 코드 가독성도 향상시킵니다. 우리의 눈이 패턴을 식별하는 데 도움이 되는 방법을 생각해 봅시다. 아래 예제에서 각 메서드를 한 줄로 두지 않고 자체 줄에서 시작하면 어떻게 될까요?

// before
const ages = people.filter(({ job }) => job === 'programmer').sort((a, b) => (a.name < b.name ? -1 : 1)).map((programmer) => programmer.age);

// then
const ages = people
  .filter(({ job }) => job === 'programmer')
  .sort((a, b) => (a.name < b.name ? -1 : 1))
  .map((programmer) => programmer.age);

그리고 각 조건에 자체 라인을 지정하면 어떻게 될까요?

// before
if (job === programmer && age >= 18 && index !== winnerIndex && name.length !== 0) {
  giveConsolationPrize();
}

// then
if (
  job === programmer
  && age >= 18
  && index !== winnerIndex
  && name.length !== 0
) {
  giveConsolationPrize();
}

그리고 마지막 줄 바꿈 팁으로 코드 사이에 빈 줄을 추가하여 가독성을 높이세요! 생각할 수 있는 모든 범주로 나눌 수 있습니다. 임의의 정수 코드 예제를 다시 살펴보겠습니다.

// before
const getRandomInteger = (min, max) => {
  const randomDecimal = Math.random();
  const numberOfPossibilities = max - min + 1;
  const randomIntegerFromZero = Math.trunc(randomDecimal * numberOfPossibilities);
  const randomIntegerFromMin = randomIntegerFromZero + min;
  return randomIntegerFromMin;
};

// then
const getRandomInteger = (min, max) => {
  const randomDecimal = Math.random();
  const numberOfPossibilities = max - min + 1;

  const randomIntegerFromZero = Math.trunc(randomDecimal * numberOfPossibilities);
  const randomIntegerFromMin = randomIntegerFromZero + min;

  return randomIntegerFromMin;
};

두 번째 예의 줄에서 자신을 잃어버리는 것이 얼마나 더 어려워지는지 주목하십시오. 이제 매번 특정 코드 블록에 집중하는 것이 더 간단해졌습니다.

결론

몇 가지 범주와 예를 생각해 보았지만 중요한 부분은 내가 표현하려는 개념입니다. 코드를 다시 살펴보는 습관을 기르고 더 표현력이 있는지 스스로에게 물어보십시오. 물론 극단주의자가 되어서는 안 되며 장단점을 고려하고 코드 복잡성과 같은 요소를 평가해야 합니다.