Contents
1. else if 피하기
else if문이 마치 파이프라인처럼 앞의 if문과 연결되어 차례대로 실행된다? 이렇게 생각하면 안된다.
- else if 문은 else 문 처리가 한 번 되고 if문 동작이 되는 것과 같다.
→ 즉 else가 처리된 후에 if문을 다시 실행한다고 생각하면 될듯?…
let x = 1; if (x >= 1) { console.log('x는 1과 같거나 크다.'); } else if (x > 1) { console.log('x는 1보다 크다.'); } // x는 1과 같거나 크다.
위의 코드를 그럼 위에 설명과 같이 바꾸면?
let x = 1; if (x >= 1) { console.log('x는 1과 같거나 크다.'); } else { if (x > 1) { console.log('x는 1보다 크다.'); } } // x는 1과 같거나 크다.
만약 이럴 경우는 if를 두번 쓰는게 더 명확하다고한다.
let x = 1; if (x >= 1) { console.log('x는 1과 같거나 크다.'); } if (x > 1) { console.log('x는 1보다 크다.'); } // x는 1과 같거나 크다.
2. else 피하기
나는 이부분을 알면서도 모르고 지나쳤다.
→ else를 쓰지 않아도 조건이 논리적으로 분기된다.
const getActiveUserName = (user) => { if (user === 'Youn') { return user; } else { return '이름 없음'; } } // 위 코드는 아래처럼 쓸 수 있다. const getActiveUserName = (user) => { if (user === 'Youn') { return user; } return '이름 없음'; }
else를 쓰지 않아야 하는 이유는 스타일상의 문제뿐 아니라
반전된 로직을 작성하게 되는 논리적인 위험이 있기 때문이라고한다.
→ 하나의 함수가 두 가지 이상의 기능을 할 때 else를 무분별하게 사용하면, 아래와 같은 문제가 발생할 수 있다.
// age가 20 미만시 report라는 특수 함수를 실행하며, // 손님에게 인사를 하는 로직을 작성하려고 한다. const getInputLastItem = (user) => { if (user< 20) { report(user); } else { return '안녕하세요'; } } // 이 코드에서는 else 때문에, 20세 미만에게만 인사를 하지 않는 의도하지 않은 결과가 발생한다.
위에 함수가 결국 의도하지 않은 결과를 발생시켰다.
이유가 무엇일까? if에 걸치면 결국 조건문이 실행되고 else는 건너뛰기 때문이다. 이럴 경우 아래와 같이 변경해줘야한다.
const getInputLastItem = (user) => { if (user< 20) { report(user); } return '안녕하세요'; }
3. Early Return
Early Return이란? 조건문에서 먼저 Return할 수 있는 부분은 분리하여 우선 if문 내에서 Return하여 함수를 미리 종료하는 것이다. 이렇게 하면 뒤의 코드로 진입하지 않아 else문을 안타기에 사용하지 않게 된다.
- if else 문이 너무 많을 경우 읽기 어렵다.
- 이럴때는 Early Return으로 코드를 분리하면 로직은 변함이 없으면서 가독성 좋게 리펙토링이 가능하다.
const loginService = (isLogin, user) => { // 1. 로그인 여부 확인 if (!isLogin) { // 2. 토큰 존재 확인 if (checkToken()) { // 3. 가입 여부 재확인 if (!user.nickName) { return registerUser(user); } else { refreshToken(); return '로그인 성공'; } } else { throw new Error('No Token'); } } } // 아래는 리펙토링 한 결과이다. const loginService = (isLogin, user) => { // 1. 로그인 여부 확인 // 여기서 로그인이 되어있다면 바로 리턴시켜버린다. if (isLogin) { return; } // 2. 토큰 존재 확인 if (!checkToken()) { throw new Error('No Token'); } // 3. 가입 여부 재확인 if (!user.nickName) { return registerUser(user); } refreshToken(); return '로그인 성공'; }
즉 이렇게 return문을 넣어 사전에 아래 if문을 타지 않도록하는 방식을 설명하는 것 같다.
또 else if문을 지양하는 이유는 가독성 때문도 있다.
const color = "red"; if (color === "blue") { console.log(1); } else if (color === "black") { console.log(2); } else if (color === "red") { console.log(3); }
자 이건 가장 아래에 콘솔 3이 찍히게 된다.
이것 보다는
const map = new Map(); map.set("blue", 1); map.set("black", 2); map.set("red", 3); console.log(map.get(color));
map을 사용하면 더 작동 원리를 파악하기 쉽다.
조건문이 반복 된다면? includes 메소드를 활용해보자.
const test = (fruit) => { if (fruit == 'apple' || fruit == 'strawberry') { console.log('red'); } } // || or 연산자를 사용하여 코드를 만들어놓은게 보인다. const test = (fruit) => { if ( fruit == "apple" || fruit == "strawberry" || fruit === "cherry" || fruit === "cranberries" ) { console.log("red"); } } // 위와 같은 코드는 지옥이다... || 연산자를 몇개를 붙인건가? const test = (fruit) => { // extract conditions to array const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries']; if (redFruits.includes(fruit)) { console.log('red'); } } // 위 코드는 위에 각 if들과 작동은 똑같지만 원린 다르다. // 그래서 includes를 활용하면 조금 더 적은 코드로 파악이 가능하다.
이렇게 if문을 분석해보았다.
Share article