[JAY⌨️JS] 가독성을 높이자! if문을 대체하는 조건문 작성 대안 3가지.

 ⚠️  일반적인 조건부 로직으로 사용되는 if문을 다른 작성 패턴으로 대체하는 이유?

• if문 조건이 한 번에 너무 많은 요소를 비교할 경우 중첩(nested) 조건이 많아지므로 가독성이 떨어진다.
• 조건식에서 동일한 코드가 반복되는 경우 소스코드가 너무 길어지고 비효율적이다.
• 특정 부분의 변경이 필요하면 모든 조건을 살펴봐야 하기 때문에 유지보수가 어렵다.
• 위와 같은 이유로 if, else 문과 같은 조건문을 남발하면 가독성을 해치는 코드를 작성하게 된다. 
  아래에 이어서 문제를 해결할 수 있는 대안을 소개하고자 한다.

if (user) {
    if (user.accessLevel) {
        if (user.accessLevel === 'admin') {
            console.log("관리자님 안녕하세요.");
        } else if (user.accessLevel === 'vip') {
            console.log("VIP 회원님 안녕하세요.");
        } else {
            console.log("일반회원은 이용할 수 없습니다.");
        }
    } else {
        console.log("회원가입 대기 중입니다.");
    }
} else {
    console.log("가입 후 이용하세요.");
}

 

 

 

 1️⃣ 삼항 조건 연산자

• 삼항 조건 연산자를 사용하면 'if' 조건문 보다 코드가 더 간결해지며 읽기 쉬워진다.
• 여러 번 중첩 사용이 가능하지만 복잡한 로직에서는 가독성이 떨어지므로 단순하고 간단한 조건일 때만 사용하는 것이 좋다.
• 조건문 ? 조건문이 true일때 실행할 코드 : false일 때 실행할 코드 구조를 가진다.

let accessStatus = user && user.accessLevel 
    ? (user.accessLevel === 'admin' 
        ? "관리자님 안녕하세요." 
        : (user.accessLevel === 'vip' 
            ? "VIP 회원님 안녕하세요." 
            : "일반회원은 이용할 수 없습니다")
        ) 
    : "가입 후 이용하세요.";

 

 

 

 2️⃣ '&&', '||' 논리 연산자를 통한 단락 회로 평가

• 왼쪽에서 오른쪽으로 평가를 진행하는 && (논리곱), || (논리합) 연산자는 평가 중간에 결과가 나오면 값을 바로 return 한다.
• 이런 순서별 return 결과를 이용해서 뒤에 위치한 피연산자는 볼 필요 없이 연산을 끝내버리는 문법을
  short circuit evaluation, 단락회로평가(단축평가)라고 한다.
• &&(논리곱) 연산자는 비교하는 값이 모두 true여야 true를 반환하기 때문에 첫 번째 값이 false라면 다음 피연산자는 무조건 false.
  (&&로 연결된 값들은 처음 등장하는 falsy 값을 찾아주고 그게 아니면 마지막값을 남겨준다고 외우면 편하다!)
• ||(논리합) 연산자는 비교하는 값 중 하나만 true여도 무조건 true이므로 해당하는 값을 바로 return한다.
• if, else 문과 &&, || 연산자를 활용한 단락회로평가와의 코드 비교. 실행 결과는 동일하다.

 

1. &&(논리곱) 연산자의 단락 회로 평가
true && false    // false (왼쪽이 true면, 오른쪽까지 탐색하고 false를 반환)
true && true.    // true. (왼쪽이 true면, 오른쪽까지 탐색하고 true를 반환)
false && true;   // false (오른쪽은 볼것도 없이, 왼쪽의 false를 반환)
false && false;  // false (오른쪽은 볼것도 없이, 왼쪽의 false를 반환)


2. ||(논리합) 연산자의 단락 회로 평가
true  || false;  // true(오른쪽의 false는 볼 것도 없이, 왼쪽의 true 반환)
true  || true;   // true(오른쪽의 true는 볼 것도 없이, 왼쪽의 true 반환)
false || true;   // true(왼쪽의 false를 탐색하고, 오른쪽의 true 반환 )
false || false;  // false(왼쪽에서 오른쪽까지 false임을 탐색하고 마지막으로 탐색한 오른쪽 false 반환)

// 회원이면서 회원등급을 충족한다면 안내 문구 표시
if (user && user.accessLevel) {
    console.log("열람 가능합니다.");
} else {
    console.log("일반 회원은 이용할 수 없습니다.");
}

// 회원등급이 있다면 회원 등급표시, 아니라면 안내 문구 표시
let accessLevel = user.accessLevel || "가입 후 이용하세요.";
console.log(accessLevel);

 

 

 

3️⃣ 객체 리터럴

• 객체의 key 값에 조건을 넣고 value 값은 조건이 이행될 때 보여줄 값을 넣어주면 가독성을 높인 효율적인 코드를 작성할 수 있다.
• 조건값의 집합으로 이루어진 객체를 만들고 삼항연산자나, 단락회로 평가를 통해 조건식을 실행한다.

const accessLevels = {
    admin: "관리자님 안녕하세요.",
    vip: "VIP회원님 안녕하세요.",
    notDefined: "가입 후 이용하세요."
};

let accessStatus = user?.accessLevel 
    ? (accessLevels[user.accessLevel] 
        ? accessLevels[user.accessLevel] 
        : "일반회원은 이용할 수 없습니다.") 
    : accessLevels.notDefined;

console.log(accessStatus);

 

 

🙋🏻‍♀️ 요약!

• 일반적으로 사용되는 if 조건문을 대체해서 더 명확하고 읽기 쉬운 코드를 작성하기 위한 대안이 존재한다.
• 복잡한 논리를 처리할 때는 깊게 중첩된 if문이 필요할 수 있지만 삼항 연산자는 간단한 조건식을 실행할 때 적합하다.
• 논리연산자를 이용한 단락회로 평가를 통해 코드  한 줄로 여러 조건을 확인할 수 있다.
• 객체 리터럴을 이용하면 조건 집합을 만들어서 관리할 수 있으며 유지보수에 적합하다는 장점이 있다.