공통 피드백
1. keyCode 대신에 Key
2. for문 대신에 배열의 내장 메서드 사용하기
for (let i = 0; i < list.length; i++) {
todoList.removeChild(list[i]);
}
JavaScript
복사
for문은 변수 선언에서 조건문과 증감식까지 휴먼 에러가 발생할 확률이 높아서, 실무에서는 지양하는 방법인데요.
배열의 내장 메서드인 forEach나 map을 사용하시면 더 깔끔하고, 심플하게 작성하실 수 있을 것 같아요~
list.map(item => { })
list.forEach(item => { })
JavaScript
복사
3. 반복되는 document.querySelector 줄여쓰기
const $ = (selector) => document.querySelector(selector)
...
const $filter = $(".filter")
JavaScript
복사
4. 중간 변수 도입: 의미가 명확해진다면 변수명은 길어도 괜찮습니다.
const todos = getTodos();
todos.map(todo => {
if (todo.completed) {
...
}
})
JavaScript
복사
const todos = getTodos();
const completedTodos = todos.filter(todo => todo.completed)
if (completedTodos) {
...
}
JavaScript
복사
5. 빠른 실패
빠른 실패를 하게끔 코드를 구현하면 로직이 더욱 간결해집니다!
if (성공로직) {
...
}
// 아래와 같이 빠른 실패를 하면 코드의 의도와 예외 조건이 명확해지고 나중에 분리하기도 쉽습니다.
if (실패로직) {
return
}
... // 성공 로직
JavaScript
복사
6. 반복문 보다는 파이프
•
반복문 보다는 파이프를 이용한 경우 보다 읽기 좋은 코드가 될 경우가 많습니다.
const completedTodos = [];
for (const todo of todos) {
if (todo.completed) {
completedTodos.push(todo);
}
}
const completedTodos = todos.filter(todo => todo.completed);
JavaScript
복사
7. switch 대신 object literal
function translateStatus(status) {
switch(status) {
case 'all':
console.log('모두')
break
case 'active':
console.log('해야할 일')
break
case 'completed':
console.log('완료한 일')
break
}
}
//아래와 같이 object로 관리하면, 수정 및 관리에 있어서 더욱 간편해집니다.
function translateStatus(status) {
const statusList = {
all: '모두',
active: '해야할 일',
completed: '완료한 일'
};
console.log(statusList[status])
}
JavaScript
복사
8. 배열이나 객체는 forEach보다는 map을 이용해 불변 객체처럼 다루기
불변 객체로 다룬다면 데이터의 변화를 추적하기도 쉽고, 예상치 못한 데이터의 변경을 예방할 수 있습니다. forEach의 경우 기존 배열이나 객체에 변경을 가하는 메서드이기 때문에, forEach를 반드시 써야하는 경우가 아니라면 새로운 배열을 리턴하는 map을 활용해주세요~!
const menus = ['에스프레소', '카페라떼', '프라푸치노', '블랙티'];
menus.forEach((value, index) => {
menus[index] += '디카페인';
});
console.log(menus);
to
const menus = ['에스프레소', '카페라떼', '프라푸치노', '블랙티'];
const decMenus = menus.map((value, index) => menus[index] += '디카페인');
console.log(decMenus);
JavaScript
복사
