자바스크립트 코딩 컨벤션

이 글은 아래의 영상 내용을 기반으로 작성되었습니다.

www.youtube.com/watch?v=RMN_bkZ1KM0

 

 

 

정말 잘 짜여진 코드는 마치 사람의 산문처럼 읽힌다고 어느 유명 개발자가 말했습니다. 이러한 코드를 만들 수 있는 몇가지 컨벤션을 살펴봅시다.

 

 

Magic Number & String

절대 그냥 숫자나 문자열을 사용하지 마십시오. 코드를 작성하는 시점의 당신은 그 숫자나 문자열이 뭘 뜻하는 것인지 잘 알겠지만, 미래의 당신, 혹은 다른 개발자는 그 숫자나 문자열이 무엇을 의미하는 것인지 알기 어려울 수 있습니다. 써야한다면 반드시 상수에 담아 사용하십시오. 이때 상수 이름은 대문자와 _(underscore) 로만 이루어지는게 일반적입니다.

 

const SECONS_IN_A_DAY = 86400;

 

 

 

Deep Nesting

콜백 지옥을 아는 사람들은 그것이 얼마나 코드 가독성을 떨어뜨리는지를 알 것입니다. 하지만 이는 단순히 콜백 지옥에만 한정된 문제는 아닙니다. 내부 함수, if, for, while 구문 등을 사용할 때, 3단계 이상의 깊이를 가지지 않도록 조심하십시오. 가능하면 함수를 쪼개서 사용하거나, 재귀 함수를 활용하는 것도 하나의 방법입니다.

 

 

 

Stop Writing Comments

코드에 주석을 다는 것은 상당히 일반적이기 때문에 이에 반감을 가지는 사람들도 분명 있을 것이라 생각합니다. 하지만 코드가 주석이 필요하다는 것은 역으로 생각해보면 코드 자체가 스스로를 설명하는데 실패했다는 말이기도 합니다. 주석에 너무 의존하다보면 코드 그 자체에 신경을 덜 쓰게 되기 쉽고, 코드 자체가 스스로를 잘 설명한다면 애초에 주석은 사족이 될 뿐입니다.

 

 

 

Avoid Large Function

함수 하나는 너무 많은 라인을 차지해서는 안됩니다. 너무 많은 일을 처리하는 함수는 여러개의 함수로 쪼개도록 하십시오.

 

 

 

Code Repetition

코드에 반복되는 부분이 보인다면, 그 부분은 가능하면 개별적인 함수로 빼도록 하십시오. 재귀를 활용할 수도 있습니다. 구조해체 할당을 이용하면 변수에 값을 할당하는 작업을 매우 간단하게 만들 수 있습니다.

 

 

 

Variable Naming

거의 모든 변수들의 이름은 카멜 케이스로 작성하십시오.

 

 

 

Use Meaningful Name

최대한 변수가 의미하는 것이나 함수가 리턴하는 값을 구체적으로 알 수 있는 이름을 사용하십시오. getUserData, getUserInfo 와 같은 함수명은 언뜻보면 구체적인 것 같지만 정확히 무엇을 리턴하는 것인지 알기 어렵습니다. 단어 하나하나를 더 구체적으로 표현할 수 있는지를 생각해보십시오 getUserPosts, getUserEmailAndPassword 가 차라리 더 나은 이름입니다. (하지만 타입스크립트를 써서 특정 변수의 형식을 정의하고 이 객체 이 변수 이름을 활용하면 더 간결해질 수 있을 것입니다. ← 본인 생각)

 

 

 

Favor Descriptive Over Concise

변수가 길어지는 것을 절대 두려워하지 마십시오. 변수나 함수명은 최대한 간결하게 만드는 것이 좋지만, 더 구체적으로 해당 변수와 함수를 설명할 수 있는 이름이라면 더 길다고 하더라도 그것을 쓰십시오. (타입스크립트를 쓰면 타입에 관한 설명은 변수나 함수명으로 하지 않아도 괜찮습니다. ← 그냥 제 생각입니다만) 예를 들어 findUser 보다는 findUserByName 이 더 좋습니다.

 

 

 

Use Shorter Version

긴 변수나 함수명을 써도 된다고 해서 해당 변수와 함수를 설명하는데 별 도움이 되지 않는 단어 또한 포함시켜도 된다는 의미는 아닙니다. 가능하면 그런 단어는 빼도록 하십시오.

 

 

 

Use Consistent Verbs Per Concept

함수명을 지을 때, 최대한 일관적으로 동사를 붙이십시오. 대부분의 함수는 Create, Read, Update, Delete 의 4가지 동작을 수행합니다. get, return, retrieve 등은 사실 똑같은 동작이지만 다른 동사입니다. 그러니 이들을 혼용하지 말고 get 만 쓰는 식으로 일관성에 신경쓰십시오.

 

 

 

Make Booleans That read well in in-then statements

is 와 같은 be 동사나, has 와 같은 have 동사 등은 값이 boolean 인 변수를 더 구체적으로 설명해줍니다. 이들을 잘 활용하십시오.

 

 

 

Use Nouns for Class Names

클래스의 이름의 가장 앞은 대문자로 시작하는 파스칼 케이스를 사용해야 하지만 그것 외에도 오직 명사로만 클래스를 명시해야 한다는 규칙 또한 있습니다.

 

 

 

Capitalize constant values Snake Upper Case

더 명확히 구분하기 위해, 상수는 오직 대문자와 _(underscore)로만 명명하십시오. 하지만 이것이 모든 const 로 정의되는 상수를 대문자화 하라는 의미가 아닙니다. 오직 원시 값을 할당하는 상수만을 이렇게 명명하십시오. 다른 변수나 객체를 활용해서 상수값을 명명하는 경우, 그 상수는 엄밀한 의미에서는 상수라고 하기 어렵습니다. 할당에 사용된 변수나 객체가 바뀌면 해당 상수에 다른 값이 할당될 것이기 때문입니다. 그러니 이런 경우엔 카멜 케이스를 그대로 사용하십시오.

 

 

 

Avoid one-letter variable names

'q' 와 같이 하나의 알파벳으로만 명명된 변수나 함수는 나중에 봤을 때 그 의미를 이해하기 어려울 가능성이 큽니다. 최대한 단어 전체를 쓰십시오. for 문의 i 는 매우 널리 알려진 컨벤션이기에 이런건 한글자로만 명명해도 괜찮습니다.