Bleeding edge

클린코드 작성하기 본문

Javascript

클린코드 작성하기

codevil 2022. 7. 10. 23:56

요약:

1. 검색 가능한 이름을 써라

2. 함수명은 반드시 동사를 써라

3. 함수의 인수는 3개 혹은 그 이하로 사용해라

4. Boolean 값을 함수에 인수로 보내는 것을 최대한 방지하자

5.  짧은 변수명이나(아무도 이해못하는) 축약어 쓰는 것을 피하자


출처 : https://www.youtube.com/watch?v=Jz8Sx1XYb04&t=51s 

1. 검색 가능한 이름을 써라

코딩을 하다보면 랜덤하게 값을 추가해야할 때가 있다.

const SECONDS_IN_A_DAY = 86400;
//하루의 시간이 몇 초인가
setInterval(functionName, SECOND_IN_A_DAY)

다른사람 혹은 미래의 내가 읽었을 때 특정 변수가 무엇인지를 알게되며, 그 함수가 무엇을 하는지 이해하기 쉽다.

 

2. 함수명은 반드시 동사를 써라

function userData(){} //Not good
const data = userData()//Not Good
function loadUserData(){}//GOOD
const userData = loadUserData()//GOOD

함수는 딱 한개만 잘해야한다. 동사이름으로 함수 일므을 짓다보면 구분의 필요성을 느끼게 된다.

만일 함수가 불러오는 것 뿐만 아니라 다른 것도 한다면 두개로 쪼개야할 필요가 있다는 것이다!

 

3.  함수의 인수는 3개 혹은 그 이하로 사용해라

함수가 너무 많은 인수를 필요로 하면, 다른사람이 봤을 때 어떤 인수로 어떤일을 하는지 혼란스러울 수 있다. 만일 많은 인수가 필요하다면,  configuration object를 보내는 것을 추천한다.

function ({price, productId, size, quantity, userId}){
//
}
makePayment({
	price:35,
    productId:5,
    size:"xl",
    quantity:2,
    userId:"니꼬"
})

 

4.  Boolean 값을 함수에 인수로 보내는 것을 최대한 방지하자

Boolean값을 받는 함수가 있다면, 함수안에 if와 else가 있다는 뜻이기에, 이 경우엔 함수를 한개로 만들 것이 아니라 두개로 찢을 것

function sendMessage(text, isPrivate){
	if(irPrivate){
    "is private"
    } else{
    "is public"
    }
}
sendMessage("hello", false)
sendMessage("shhH!", true)

이렇게 if문으로 되어 있는 것을

function sendPrivateMessage(text){
}
function sendPublicMessage(text){
}
sendPrivateMessage("sh!!!")
sendPublicMessage("hi")

 

5.  짧은 변수명이나(아무도 이해못하는) 축약어 쓰는 것을 피하자

같은 팀원이 읽고 이게 무엇인지 파악하는데 시간이 걸린다

allUsers.forEach((u, i)=>{
	sendEmail(u)
    addToCount(i)
})
//no!!
allUsers.forEach((user, currentNumber)=>{
	sendEmail(user)
    addToCount(currentNumber)
})
//yes!!

 

단, 처음에 코딩을 할 때는 무아지경으로 생각나는 것을 빠르게 쓰기 때문에 처음부터 예쁘게 만드는 것이 어려울 수 있다. 그리고 뭐가 어떻게 쓰일지 아직 모를 수 있다.첨부터 클린코드를 만들 필요 없고 마지막에 만들 것.

코딩 쓰는데 들인 시간 만큼 코딩 대청소에도 시간을 쓸 것!