STUDY/[ JavaScript ]

클린코드 : 자바스크립트 편

Lim임 2025. 10. 16. 05:19

들어가기 전에,

코드를 처음보는 사람도 읽기 쉽고 이해하기 쉽게 작성하는 것은 아주 중요합니다.

클린코드란 가능한 가독성 좋고 유지보수하기 쉽게 짜여진 코드를 뜻합니다.

아래에서는 클린코드를 작성하기 위해 지켜야할 것들을 작성해 놓았습니다.

 

내 손으로 정리하여 오래 기억하고 자주 보기위해 해당 글을 작성합니다.

출처: sbyeol3님의 자바스크립트를 위한 클린코드 : 한국어 번역

 

변수명

코드는 읽는 경우가 더 많습니다. 다른 사람이 읽더라도 이해하기 쉬운 단어로 작성하세요.

1. 의미가 명확하고 발음 가능한 변수 이름을 사용하세요. 

 

2. 검색 가능한 의미있는 이름을 사용하세요

 

3. 머리로 매핑하지 마세요! 예) e => element, l => location

 

4. 다시 한 번 말해주지 않아도 됩니다.

 

5. 짧은 조건문보다 인자의 기본값을 사용하세요.

undefined는 기본값이 유지되고, 그 외의 빈 값('',"",[],{}), 0, null들은 바뀐다

함수

함수는 한가지 일만 할 수 있게 최대한 간단히 작성해야합니다.

1. 함수의 인자는 2개 이하인 것이 좋습니다. 파라미터가 세개 이상이라면 너무 많은 일을 하는 건 아닌지 살펴보세요.

많은 수의 인자를 사용해야한다면 객체를 사용하여 명확하게 표현해보세요!

 

2. 함수는 한 가지 일을 해야합니다. 완성된 코드를 분리하여 정리해보세요.

 

3. 함수의 이름이 하는 일을 말하도록 하세요!

자세하게 설명할수록 좋은 함수명입니다

 

4. 중복되는 코드는 수정할 코드의 개수를 늘릴 뿐! 중복되는 코드를 제거해야합니다. 

 

5. Object.assign으로 객체의 기본값을 설정하세요

일일이 config(변수명).속성 으로 중복되는 변수명을 사용하기보다는
Object.assign을 통해 객체 내용을 설정하고 변수명을 부여하세요!

 

6. 파라미터에 플래그 변수를 사용하지 마세요! boolean 값을 기반으로 코드를 따라야하는 경우에는 함수를 분할하세요.

 

7. 다른 코드에 지장을 주는 사이드 이펙트를 피하세요.

 

- 전역변수를 직접 수정하는 함수를 사용하면, 해당 함수가 변경되어 사용할 수 없게 될 수도 있어요.

 

- 자바스크립트에서 객체나 배열은 실제 원본 값이 변경가능한(가변, mutable) 값입니다.

코드가 완성된 이후에도 충분히 변경될 여지가 있기 때문에 함수도 해당 사항을 고려하여 작성해야합니다!

[...cart] 스프레드 문법을 통해 새로운 배열에 cart를 복제한 후 수정하여 해당 값을 반환하세요!

 

8. 전역 값들을 오염시키지 마세요! 

전역 함수에 값을 바로 담지말고, ES6 클래스를 사용하여 상속받아 사용하세요!

 

9. 함수형 프로그래밍을 선호하는 게 좋습니다. 함수형 언어들은 더 알아보기 간편합니다!

 

나쁜예) 

 

좋은예)

 

10. 조건문을 신경쓰세요!

 

- 함수를 이용하여 조건문을 캡슐화하세요. 유지보수하기 수월해집니다!

 

- 조건문은 긍정 조건문으로 작성하세요! 부정 조건문은 지양하세요. 해석의 해석을 일으킵니다.

 

- 그리고 "조건문"을 피하세요. 조건문은 함수가 한 가지 이상의 일을 하게 만듭니다. 함수는 오직 한 가지 일만 하게 만드세요!

조건문을 사용해야한다면 목적에 맞게 쪼개어 함수를 재설정하세요.

 

11. 타입체크를 피하세요! 자바스크립트는 어떤 타입의 인자든 받을 수 있다는 점을 이용하세요.

 

- 일관된 API를 사용하면 타입체크를 피할 수 있습니다.

어떤 타입이든 동작할 수 있게 API를 작성하세요.

 

- 타입스크립트는 좋은 대안이 될 수 있습니다! 타입체크를 위한 장황한 코드는 가독성을 저해합니다.

 

12. 최적화에 너무 많은 시간을 쏟지 마세요! 최신브라우저를 사용한다면 어느 정도는 해결됩니다.

 

13. 죽은 코드와 필요없는 주석은 제거하세요. 버전 기록을 사용한다면 굳이 남겨둘 필요가 없어집니다.

객체와 자료구조

1. getter와 setter를 사용하세요. 캡슐화하여 관리하는 것이 좋습니다.

 

2. 클로저를 통해 객체가 프라이빗 멤버를 갖게 하세요. (ES5 이하에서만)

나쁜 예의 마지막 줄은 undefined인 반면에 좋은 예의 마지막 줄은 이름이 출력된다.

테스트

하나의 테스트는 하나의 목표를 가지게 하세요

 

동시성

Callback 대신 Promise, Promise보다는 Await/Async를 사용하세요

Callback의 경우
Promise의 경우 (훨씬 깔끔하긴 하지만요,,)
Async/Await(ES2017/ES8)을 사용하면 훨씬 깔끔하게 사용할 수 있습니다

에러처리

찾아낸 에러를 꼭 대응하세요. 에러에 대한 대응법을 찾는 능력을 기르는 것도 중요합니다.

console.error의 존재를 아는 것도 중요합니다.

포맷팅

포맷팅은 주관적입니다. 내 팀이 선택한 규칙을 따라, 일관되게 작성하세요.

1. 일관된 대문자를 사용하세요.

 

2. 함수를 호출한다면 가까이 두어야 합니다. 읽는 사람이 신문처럼 읽어내리게 하세요.

 

주석

주석은 배려이지 반드시 해야하는 것은 아닙니다. 주석이 없어도 그 자체로 설명이 되는 코드가 좋은 코드입니다. 

1. 로직이 복잡한 경우에만 주석을 남기세요.

 

2. 일지를 주석으로 기록하지 마세요. 버전관리 시스템을 적극적으로 이용하세요!

 

3. 위치를 나타내는 마커를 지양하세요. 코드를 지저분하게 만듭니다.