중첩 코드는 프로그래밍 언어의 일반적인 기능입니다. 몇 가지 장점이 있지만 주로 안티 패턴으로 간주됩니다. 코드를 중첩할 때 여러 가지 문제가 있습니다.

코드를 읽기 어렵습니다.

문맥이 이해하기 어렵다

유지 관리가 어렵지만 개발자는 이를 피하려고 합니다.

중첩 조건을 반전하고 코드 작업을 더 쉽게 만드는 다양한 방법을 살펴보겠습니다.

기능 실행

반전 조건

다음 예제 코드를 고려하십시오.

function payBill(user = { isLoggedIn: false }, amount = 0) {
  if (user) {
    if (user.isLoggedIn) {
      if (amount > 0) {
        // pay the bill
      } else {
        throw new Error("Invalid amount");
      }
    } else {
      throw new Error("User needs to login");
    }
  } else {
    throw new Error("User doesnt exist");
  }
}

이 코드의 중첩 깊이는 3이며 다른 검증 시나리오를 다루어야 하는 경우 계속될 것입니다. 간단히 조건을 반전하여 다음과 같이 중첩 깊이를 1로 줄일 수 있습니다.

function payBill(user = { isLoggedIn: false }, amount = 0) {
  if (!user) {
    throw new Error("User doesnt exist");
  }

  if (!user.isLoggedIn) {
    throw new Error("User needs to login");
  }

  if (amount <= 0) {
    throw new Error("Invalid amount");
  }

  // Pay bill
}

이 코드는 첫 번째 예제와 정확히 같은 방식으로 작동합니다. 유일한 차이점은 읽기, 이해 및 유지 관리가 더 쉽다는 것입니다.

조기 귀국

이것은 함수를 실행하기 전에 가드 절로 함수에서 사용할 수 있는 또 다른 솔루션입니다.

예를 들어 다음과 같은 조건으로 모든 것을 래핑하는 대신:

function doSomething(myParam) {
  if(myParam){
    // Do something here
  }
}

조건을 되돌리고 조건이 충족되지 않으면 함수 실행을 중지할 수 있습니다.

function doSomething(myParam) {
  if(!myParam){
    return;
  }

  // Do something here
}

루프

루프 내에서 사용자 정의 로직을 구축하는 것은 우리 모두가 공통적으로 하는 일입니다. 중첩 조건을 줄임으로써 루프를 실행하는 방식을 확실히 개선할 수 있습니다.

다음은 중첩 조건의 예입니다.

const myList = ["one", "two", null, "four", "", "six"];
for (let i = 0; i < myList.length; i++) {
  const item = myList[i];
  if (item !== null) {
    if (item !== "") {
      // Do something with current item
      console.log(item);
    }
  }
}

다음은 개선된 버전입니다.

const myList = ["one", "two", null, "four", "", "six"];
for (let i = 0; i < myList.length; i++) {
  const item = myList[i];
  if (item === null) {
    continue;
  }

  if (item === "") {
    continue;
  }

  // Do something with current item
  console.log(item);
}

continue 문을 사용하여 루프는 루프의 현재 반복을 중지하고 다음 반복을 계속합니다. 이것은 중첩된 조건을 중지하고 흐름을 보다 선형으로 만들어 블록 아래로 더 내려가거나 다음 항목을 계속하기 위해 반복을 중지합니다.
.forEach 루프에서도 마찬가지입니다.

const myList = ["one", "two", null, "four", "", "six"];
myList.forEach((item) => {
  if (item === null) {
    return;
  }

  if (item === "") {
    return;
  }

  // Do something with current item
  console.log(item);
});

return 문은 continue 루프에서 for 문과 같은 역할을 합니다.

결론

중첩을 최소화하고 이러한 간단한 트릭을 적용하면 삶이 훨씬 쉬워집니다. 코드를 더 읽기 쉽고 이해하기 쉽게 만들 뿐만 아니라 코딩 스타일도 개선합니다. 나중에 팀원들이 고마워할 것입니다.