📌 변수
모든 의미를 변수에 담기보다 함축적인 어휘를 사용
getUserInfo(), getClienDate()를 getUser()로 사용하는 것이 더 좋다.
검색이 가능한 이름을 사용
ms값을 넘겨주기 위해서 86400을 그대로 전달하기보다 검색할 때 용이하도록
const SECONDS_IN_A_DAY = 86400으로 선언해주는 것이 좋다.
작성된 값의 의도를 표출하라
const address = ["korea", "seoul", 60600]
coutries.include(address[0])이렇게 사용하기 보다
const [country, city, zipcode] = address로 값의 의도를 명시해줘야 한다.
default parameter를 활용
function createAddress(address = "korea"){}undefined일 때만 적용이 가능합니다. null, "" 등 falsy한 값은 적용하지 않는다.
📌 함수
2개 이하의 인자를 사용
매개변수의 개수를 제한해서 테스팅을 쉽게 만들어준다.
많은 인자가 필요하다면 객체를 만들어 전달한다.
function createMenu(title, body, buttonText, cancellable) {} 위 코드보다 아래처럼 객체를 활용하여 인자의 개수를 2개 이하로 맞춰주는 것이 좋다.
function createMenu({title, body, buttonText, cancellable}) {}함수는 하나의 행동만 한다.
함수가 여러개의 행동을 수행하면 작성도 문제지만 테스트하는 과정이 번거로워 지고 코드를 읽는 사람도 이해하기 어려워진다.
이것을 지키려면 꽤 복잡하다. 함수가 최종적으로 목표하는 행동을 수행한다고 해서 이 규칙을 지켰다고 볼 수 없다. 하지만 코드를 작성하다보면 다른 행동을 하는 코드를 함께 작성했는지 구분을 못할 때가 있다. 다음과 같은 코드가 그 예이다.
function updateHeartCnt(storyId) {
const url = backendURL + "/story/heart/" + storyId;
const response = await fetchGetApiWithToken(url);
const { heartCnt } = await response.json();
redHeartCnt.innerText = heartCnt;
whiteHeartCnt.innerText = heartCnt;
}위 코드는 좋아요 부분을 업데이트하는 코드이다. 이 함수는 업데이트를 위해서 api서버에게 해당 게시물의 좋아요 정보를 요청해서 받은 응답으로 좋아요 상태를 업데이트했다.
언뜻 봤을 때 업데이트를 위한 하나의 행동을 한 것 같지만, 업데이트 이외의 요청을 한뒤 받은 응답을 파싱하는 행동도 함께 수행했다.
함수는 단일 행동을 추상화해야 한다.
추상화 한 함수의 이름이 여러의미를 내포한다고 생각되면 함수를 쪼개는것이 좋다.
중복된 코드를 작성하지 않도록 최선을 다해야 한다.
중복된 코드가 있다는 것은 로직을 수정해야 할 때 수정 할 코드가 여러개가 된다는 것이다.
매개변수가 부울조건문에 사용되는 것을 피해야 한다.
boolean 기반으로 함수가 실행되는 코드가 나뉜다면 함수를 분리해야 한다.
//나쁜 예
function createStory(id,temp) {
if (temp) {
fs.mkdir(`story_${id}`);
} else {
fs.mkdir(`/temp/story_${id}`)
}
}//좋은 예
function createStory(id) {
fs.mkdir(`story_${id}`);
}
function createTempStory(id){
fs.mkdir(`/temp/story_${id}`)
}입력받은 객체를 직접 수정하지 않는다.
함수가 입력받은 인자를 수정하고 싶다면 복제하고 수정하여 복제본을 반환해서 사용한다. 왜냐하면 이 데이터를 참조하거나 보유하고 있는 다른 함수에 발생하는 사이드 이펙트를 방지하기 위해서이다.
//나쁜 예
const addUserIdToStory(story, userId){
story.push({userId})
}//좋은 예
const addUserIdToStory(stroy, userId){
return {...story, userId}
}함수형 프로그래밍을 지향하자.
단순히 for문을 사용해서 새로운 배열을 반환하기보다 map 메소드를 사용해서 배열을 반환하면 더 깔끔하고 테스트하기도 쉽다.
조건문을 캡슐화하라
// 나쁜 예
if(check1 && check2){}//좋은 예
function check(check1, check2){
return check1 && check2
}
if(check(check1, check2)){
//...
}