JavaScript
-
Arrow Function 을 다시 알기JavaScript 2023. 11. 26. 12:58
전달하는 인자값과 호출하는 것이 같으니까 그냥 함수의 참조값만 전달해줘도 된다. 그게 더 깔끔하다. 아래 코드에서 onFilterChange에 대한 부분을 보도록 하자! Before) const filters = ['all', 'active', 'completed']; function App() { const [filter, setFilter] = useState(filters[0]); return ( setFilter(filter)} /> ); } After) const filters = ['all', 'active', 'completed']; function App() { const [filter, setFilter] = useState(filters[0]); return ( ); }
-
이름짓기 포인트JavaScript/Refactoring 2023. 4. 27. 12:31
변수 저장된 값을 잘 나타낼 수 있는 의미 있는 이름, 구체적일 수록 좋다. 변수(명사)는 무엇을 담고 있는지 잘 나타내야 한다. ex) student, students, apple, greenApple, activatedStudent 함수 특정한 일을 수행하니까 그 관련된 딱 하나의 일을 하는 작은 단위로 만들어 나가자. 주석을 달지 않아도, 함수 이름만으로 코드의 목적이 파악되도록 해야한다. 함수(동사)는 무엇을 하는지 잘 나타내야 한다. ex) calculate, displayPopup, getTotalPrice, totalPrice class 처럼 get 속성을 가지고있다면 getTotalPrice이 아니라 totalPrice로 작성할 수 있다. 무언가를 네트워크상에서 가지고 온다면 fetch를 ..
-
변수명은 의미 있게JavaScript/Refactoring 2023. 4. 27. 12:12
의미 있는 이름 부여, 디버깅이 쉽고 편해진다. 리팩토링 전의 코드는 주석의 내용 없이는 한눈에 보기에 어떤 결과 값을 리턴하는지 알 수 없는 코드다. function price(order) { // 가격(price) = 기본가격 - 수량할인 + 배송비 return ( order.quantity * order.itemPrice - Math.max(0, order.quantity - 500) * order.itemPrice * 0.05 + Math.min(order.quantity * order.itemPrice * 0.1, 100) ); } 의미 있는 이름을 부여하여 변수를 생성하면, 어떤 기능을 하는지 한눈에 보기 편한 코드가 된다. function price(order) { const basePric..