[1] 클린코드 Rule

1. 식별자에 의미를 부여하라.

     1-1. 식별자 이름을 줄여쓰지 말아라.

     1-2. boolean 타입의 변수는 접두사(prefix)를 사용해라. "isLoggedIn", hasFollowers" etc...

     1-3. 함수는 동사를 넣어 사용해라."get, set, reset, fetch, add, remove, update, delete, etc...

2. 기본 매개변수(default parameter)를 사용해라.

3. 인수/인자를 3개로 제한해라. 만약 더 필요하다면 객체에 담아라.

4. 함수의 매개변수로 boolean 타입을 사용하지 마라. 함수의 기능을 쪼개어 따로 관리해라.

5. 조건문을 캡슐화해 함수로 사용하라.

 

---

[1] 식별자에 의미를 부여하라. 

[1] example

if(password.length < 8){
    // Do something
}

for(i = 0; i < 7; i++){
    // Do something
    console.log("i: ", i);
}

setTimeout(() => {
    // Do something
}, 1000);

 

[1] solution

const MIN_PASSWORD_LENGTH = 8;
if(password.length < MIN_PASSWORD_LENGTH){
    // Do something
}

const DAYS_IN_A_WEEK = 7;
for(i = 0; i < DAYS_IN_A_WEEK; i++){
    // Do something
    console.log("i: ", i);
}

const SECONDS_IN_A_DAY = 86400;
setTimeout(() => {
    // Do something
}, SECONDS_IN_A_DAY);

 

[1-1] 식별자 이름을 줄여쓰지 말아라.

[1-1] example

// before
const curColor = "blue";
const snNotif = () => {};
const onBtnClk = () => {};

// after
const currentColor = "blue";
const sendNotification = () => {};
const onButtonClick = () => {};

 

[1-2] boolean 타입의 변수는 접두사(prefix)를 사용해라. "isLoggedIn", hasFollowers" etc...

[1-3] 함수는 동사를 넣어 사용해라. "get, set, reset, fetch, add, remove, update, delete, etc...

 

[2] 기본 매개변수(default parameter)를 사용해라. 

[2] example

// before
const caculateDiscount = (discount) => {
    const minDiscount = discount || 10;
    // Do something
}

// after
const caculateDiscount = (discount = 10) => {
    const minDiscount = discount;
    // Do something
}

 

[3] 인수/인자를 3개로 제한해라. 만약 더 필요하다면 객체에 담아라.

[3] example

const defaultOptions = {
    duration    :   0,
    style       :   "",
    className   :   "",
    icon        :   ""
}
const options = {
    duration    :   1,
    style       :   "color: #ffffff",
    className   :   "item",
    icon        :   ""
}
const newFunc = (options = defaultOptions) => {
    const {duration, style, className, icon} = options;
    // Do something
    console.log("options: ", options);
}
newFunc(options);

 

[4] 함수의 매개변수로 boolean 타입을 사용하지 마라. 함수의 기능을 쪼개어 따로 관리해라.

[4] example

// before
const getItemCost = (itemCost, isMember) => {
    const MEMBER_DISCOUNT = 0.30;
    const NORMAL_DISCOUNT = 0.10;
    const cost = itemCost ? itemCost : "please insert item of cost";

    if(isMember){
        cost = itemCost * (1 - MEMBER_DISCOUNT);
    }else{
        cost = itemCost * (1 - NORMAL_DISCOUNT);
    }

    return cost;
}

getItemCost(10, true);

// after
const getItemCostForNormal = (itemCost) => {
    const NORMAL_DISCOUNT = 0.10;
    cost = itemCost * (1 - NORMAL_DISCOUNT);
    
    return cost;
}

const getItemCostForMember = (itemCost) => {
    const MEMBER_DISCOUNT = 0.30;
    cost = itemCost * (1 - MEMBER_DISCOUNT);

    return cost;
}

 

[5] 조건문을 캡슐화해 함수로 사용하라.

[5] example

// before
if(status === "loading" && isEmpty(productList)){
    // Rest of the code
}

//after
const shouldDisplayLoader = (status, productList) => {
    return status === "loading" && isEmpty(productList);
}

if(shouldDisplayLoader(requestStatus, productList)){
    // Rest of the code
}