갈푸라떼
갈푸라떼는 개발중
갈푸라떼
전체 방문자
오늘
어제
  • 분류 전체보기 (232)
    • CS (0)
      • CSinfo (0)
    • Frontend (15)
      • HTML,CSS (1)
      • Javascript (2)
      • React (0)
      • React Hook (12)
    • Backend (0)
      • Python (0)
      • Node.js (0)
      • php (0)
    • DB (2)
      • MySQL (2)
      • BigQuery (0)
      • Mongodb (0)
    • Study (186)
      • JavaScript (72)
      • JavaScript(Clean code) (50)
      • Node.js (11)
      • HTML,CSS (13)
      • React (30)
      • TypeScript (10)
      • React-Native (0)
    • Error (2)
      • error (2)
    • Git (22)
      • Git (22)
    • Help Coding (4)
      • Useful websites (3)

블로그 메뉴

  • 홈
  • 태그
  • 방명록
  • Github

공지사항

인기 글

태그

  • symbol
  • 자바스크립트엔진
  • 싱글스레드
  • function
  • 프로토타입
  • Arrow
  • 객체타입
  • 이터러블
  • 오버라이딩
  • this
  • 네이밍
  • 정적 레벨
  • 인터프리터
  • 상속
  • PM2
  • 원시타입
  • 호이스팅
  • structure
  • SPREAD
  • nodemon
  • 스코프 체인
  • 심볼
  • 실행 컨텍스트
  • prototype
  • 함수
  • ECMAScript
  • 컴파일러
  • Babel
  • class
  • 렉시컬 환경

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
갈푸라떼

갈푸라떼는 개발중

Study/JavaScript(Clean code)

[JavaScript][clean-code] else if & else피하기

2022. 5. 29. 18:50

* else if 피하기

  • else if 를 promise의 then chaning처럼 생각하는 경우가 있다.
  • 따라서 else if가 늘어질 경우 switch문으로 대처하는게 맞다.
  • else if를 이용하는것보다 명확하게 조건을 구분하는것이 더 좋다.

* else if는 파이프라인처럼 흐르는게 아닌 else처리를 하고 한번 더 if문이 동작하는 것이다.

  • 두 코드는 완전히 동일하게 동작하는 코드이다.
count x = 1;
if (x >=0) {
  'x는 0과 같거나 크다';
} else if (x > 0) {
  'x는 0보다 크다';
}
if (x >=0) {
  console.log('x는 0과 같거나 크다');
} else {
  if (x > 0) {
    console.log('x는 0보다 크다.');
  }
}

* else if를 이용하는것보다 명확하게 조건을 구분하는것이 더 좋다.

if (x >= 0) {
  console.log('x는 0과 같거나 크다');
}

if (x > 0) {
  console.log('x는 0보다 크다');
}

* else 피하기

// else를 사용하지 않고 코드 사용하기
function getActiveUserName(user) {
  if (user.name) {
    return user.name;
  } else {
    return '이름없음';
  }
}

function getActiveUserName(user) {
  if (user.name) {
    return user.name;
  }

  return '이름없음';
}
  • else를 사용하지 않고 위와 같이 작성할 수 있다.
  • if else는 참 일때와 거짓일때가 명백하게 짜여져있는 로직이다.
  • else를 사용하면 논리적으로 로직이 반전된 기능을 사용하게 된다.
    • 문제점이 발생한다.(아래의 예시)

* 따라서 이럴때 발생할 수 있는 문제점이 있다.

- 만약 하나의 함수가 두가지 역할을 할 때 문제가 생긴다.
(하나의 함수가 2개의 역할을 할 때 else를 사용하게 되면 문제가 생긴다.)

// age가 20 미만시 특수 함수 실행
// BAD CODE
function getHelloCustomer(user) {
  if (user.age < 20) {
    report(user);
  } else {
    return '안녕하세요';
  }
}

// GOOD CODE
function getHelloCustomer(user) {
  if (user.age < 20) {
    report(user);
  }
  return '안녕하세요';
}

- BAD CODE

  • 함수를 분리하지 않고 맹목적으로 else를 사용하여 잘못된 사례이다.
  • 매개변수로 다른조건이 와도 '안녕하세요' 로직은 계속 실행이 되어야한다.
  • 하지만 report함수의 조건에 걸리게 되어 else까지 오지 않는다.
  • 함수가 하나의 역할만 하여야 하는데 2개의 역할로 통합시켜버려서 분리를 못하였기 때문이다.
  • 애초에 else문을 안쓰면 된다.
  • 항상 else문을 사용하지 않아도 된다.

- GOOD CODE

  • 조건이 맞을때만 report함수를 호출하고 '안녕하세요'를 반환하는 목적은 계속 수행한다.

'Study > JavaScript(Clean code)' 카테고리의 다른 글

[JavaScript][clean-code] 부정 조건문 지양하기  (0) 2022.05.30
[JavaScript][clean-code] Early Return  (0) 2022.05.30
[JavaScript][clean-code] 단축평가(short-circuit evaluation)  (0) 2022.05.29
[JavaScript][clean-code] Truthy & Falsy  (0) 2022.05.29
[JavaScript][clean-code] 삼항연산자  (0) 2022.05.29
    'Study/JavaScript(Clean code)' 카테고리의 다른 글
    • [JavaScript][clean-code] 부정 조건문 지양하기
    • [JavaScript][clean-code] Early Return
    • [JavaScript][clean-code] 단축평가(short-circuit evaluation)
    • [JavaScript][clean-code] Truthy & Falsy
    갈푸라떼
    갈푸라떼

    티스토리툴바