Search
💬

레벨1 공통 피드백

공통 피드백

1. keyCode 대신에 Key

현재 MDN 문서를 보시면 keyCode는 depreacted 되었기 때문에 key를 참고하시고 사용하시면 좋을 것 같아요

2. for문 대신에 배열의 내장 메서드 사용하기

for (let i = 0; i < list.length; i++) { todoList.removeChild(list[i]); }
JavaScript
for문은 변수 선언에서 조건문과 증감식까지 휴먼 에러가 발생할 확률이 높아서, 실무에서는 지양하는 방법인데요. 배열의 내장 메서드인 forEachmap을 사용하시면 더 깔끔하고, 심플하게 작성하실 수 있을 것 같아요~
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