Front-end/JavaScript
[자바스크립트 코딩의 기술] 4장
byolee
2020. 7. 6. 23:44
<자바스크립트 코딩의 기술>을 읽고 작성합니다.
4장 조건문을 깔끔하게 작성하라
거짓 값이 있는 조건문을 축약하라
Falsy | keyword |
---|---|
0 | 숫자 |
-0 | 음수 |
0n | BigInt |
"" | 빈 문자열 |
null | 아무 값도 없음 |
undefined | 원시값 |
NaN | 숫자가 아님 |
출처 MDN falsy
배열과 객체의 경우 비어있더라도 항상 값이 참이다.
객체 또는 배열이 비어있는지 확인하려면 [].length
또는 Object.keys({}).length
등으로 확인해야 한다.
거짓인지 버그없이 확인하는 방법은 두 가지가 있다.
- 데이터를 조작하지 않도록 함수를 수정하라
- 함수를 수정할 수 없다면
strict equivalency
를 이용하라!
삼항 연산자로 빠르게 데이터를 확인하라
삼항 연산자를 사용해야 하는 이유? 단순하기만 한 것이 아니라 더 예측 가능하며, 변수의 재할당을 줄일 수 있다.
if/else를 사용하는 경우 블록 유효 범위이므로 블록 밖에서는 결과를 알 수 없다.
밖에서도 접근 가능하게 var
로 변수를 선언하거나 let
으로 변수를 선언하고 재할당을 해야 한다.
하지만 이렇게 변수를 선언하면 잠재적인 유효 범위 충돌의 위험성이 존재한다.
다만 삼항 연산자를 여러 개 연결해서 사용하는 것은 가급적 피하는 것이 좋다.
과도하게 사용하는 경우 코드의 가독성이 떨어지기 때문이다.
여러 줄로 작성해야 하는 경우에는 분리해서 독립적인 함수 로 이동시키는 것이 좋다.
단락 평가를 이용해 효율성을 극대화하라
단락 평가(short circuiting) : 가장 타당한 정보를 먼저 위치시켜서 정보 확인을 건너뛰는 것
// before
function getIconPath(icon) {
const path = icon.path ? icon.path : 'uploads/default.png';
return `https://assets.foo.com/${path}`;
}
// after
function getIconPath(icon) {
const path = icon.path || 'uploads/default.png';
return `https://assets.foo.com/${path}`;
}
// before
function getImage(userConfig) {
let img = 'default.png';
if (userConfig.images){
if (userConfig.images.length) {
img = userConfig.images[0];
}
}
retrun img;
}
// after 1
function getImage(userConfig) {
if (userConfig.images && userConfig.images.length){
return userConfig.images[0];
}
retrun 'default.png';
}
// after 2
function getImage(userConfig) {
const images = userConfig.images;
return images && images.length ? images[0] : 'default.png';
}
단순함은 훌륭합니다. 또한 코드를 한 줄로 줄이는 똑똑한 방법을 찾는 것은 즐거운 입니다.
그렇지만 목표는 항상 코드를 통한 의사소통과 가독성입니다. 단락 평가를 사용해 코드를 좀 더 읽기 좋게 만드세요.
그저 코드를 줄이기 위한 용도는 아닙니다.