hoon's bLog

Javascript 자바스크립트 코딩의 기술 4장 조건문을 깔끔하게 작성하라 본문

IT/Javascript

Javascript 자바스크립트 코딩의 기술 4장 조건문을 깔끔하게 작성하라

개발한기발자 2024. 1. 18. 10:24
반응형


4장 조건문을 깔끔하게 작성하라

tip17. 거짓 값이 있는 조건문을 축약하라

  • 불 자료형(boolean type)이라고 부르는 원시값 true, false 와 참(truthy) 또는 거짓(falsy) 값이라고 부르는 것들에 대한 차이를 살펴보자. 
Falsy keyword
0 숫자
-0 음수
0n BigInt
"" 빈 문자열
null 아무 값도 없음
undefined 원시값
NaN 숫자가 아님
  • 배열과 객체의 경우 비어있더라도 항상 값이 참이다.(ex. [], {})
  • 객체 또는 배열이 비어있는지 확인하려면 [].length 또는 Object.keys({}).length 등으로 확인해야 한다.
  • 정의되지 않은 키의 값을 가져오면 undefined 이다.
1 == '1'
// true 동등 : 자료형이 다른 값을 비교할때 == 이용해서 동등인지 확인 가능

1 === '1'
// false 일치 : 동일한 값 또는 엄격히 일치하는 값이란 값뿐만 아니라 자료형도 같은것
  • 간단하게 == 는 값은 같지만 자료형이 같지 않는 상태고, === 는 값과 자료형이 모두 같은 상태!!!

tip18. 삼항 연산자로 빠르게 데이터를 확인하라

  • 삼항 연산자를 사용해야 하는 이유는 단순하기만 한 것이 아니라 더 예측 가능하며, 변수의 재할당을 줄일 수 있다.
  • 삼항 연산자는 코드를 단순화할 수 있어서 사용할 만한 가치가 있는 경우에만 쓴다.
  • 사용할 만한 가치가 없다고 생각되면 if 문으로 돌아가는것이 좋다.
  •  여러 줄로 작성해야 하는 경우에는 분리해서 독립적인 함수 로 이동시키는 것이 좋다.
if (active) {
    var display = 'bold'
} else {
    var display = 'normal'
}

// 삼항연산자로 개선한 코드
let display = active ? 'bold' : 'normal';

tip19. 단락 평가를 이용해 효율성을 극대화하라

  • 단락 평가(short circuiting) : 가장 타당한 정보를 먼저 위치시켜서 정보 확인을 건너뛰는 것
  • || 으로 작성하는 OR연산자는 선택 가능한 값 중 하나라도 true 이면 true 반환
const name = 'joe' || 'I have no name';
console.log(name);
// 'joe'
  • && 으로 작성하는 AND 연산자는 거짓값이 발생하는 즉시 중단
const name = false && 'I have no name';
console.log(name);
// false
  • 이번엔 예제 코드를 통해 알아보도록 하자!
function getIconPath(icon) {
    const path = icon.path ? icon.path : 'uploads/defaults.png';
    return `https://assets.foo.com/${path}`
}

const icon = {
    path: 'acme/bar.png'
}

getIconPath(icon);
// "https://assets.foo.com/acme/bar.png"

// 단락평가로 개선 된 코드
function getIconPath(icon) {
    const path = icon.path || 'uploads/defaults.png';
    return `https://assets.foo.com/${path}`
}
  • 단락 평가의 장점은 간결해질 뿐 아니라, 표현식 끝에 기본값을 추가할 수 있고, 오류를 예방 할 수 있다.
  • 조건문을 나열 또는 삼항연산자로 사용할때 상황을 잘 구분하자.
  • 코드를 줄이는 것도 좋지만 가장 중요한건 코드를 통한 소통과 가독성임을 잊지 말자.

Reference

자바스크립트 코딩의 기술 요약 / 정리

728x90
반응형