자바스크립트 코딩 스타일 중 알아두면 좋은 것들

 
보기 좋은 코드가 관리 등의 유지보수및 향후 고도화, 업데이트를 위해 더 좋을 것입니다. 만약 잘못된 코딩 스타일을 가지고 있다면 바꾸도록 노력하는 건 어떨까요? 코딩 스타일은 습관처럼 쉽게 바뀌지 않기 때문이죠.

아래는 자바스크립트를 작성할 때 알아두면 좋은 코딩 스타일 가이드 중에서 몇 가지를 적어봤습니다.

# 문장의 끝에 세미콜론의 입력

문장의 끝을 마치는 기호 세미콜론... 자바스크립트에서 세미콜론이 없더라도 브라우저 엔진에서 자동으로 판단할 수 있으나 성능에도 영향이 있을 수 있으므로 반드시 세미콜론(;)을 넣는 것을 원칙으로 합니다. 다만 블록 스코프의 경우 제외합니다. 
​​​​​​​

# 주석의 사용방법

주석을 사용하는 것은 본인에게도 유리하며 좋은 습관이지만 타인과 협업하는 큰 프로젝트에 더 큰 도움이 됩니다. 상황에 따라 동일한 작업을 공통으로 개발할 수 있고 이 때 남겨둔 주석이 오류를 줄이고 완성도를 높이는데 도움을 주기 때문이죠.

주석은 아래처럼 한 줄 또는 멀티라인으로 사용됩니다. 상황에 따라 주석 스타일에 차이가 날 수 있지만 가급적 동일한 주석 스타일을 유지하는 것이 좋겠습니다.


1. 한 줄 주석 사용하기





2. 다 줄, 멀티라인 주석 사용하기

위 주석은 해당하는 코드가 어디에 쓰이는지 간략하게 나타내고 있습니다. 간략한 설명도 좋지만 아래처럼 더 많은 내용이 주석에 포함됩니다.


3. 주석에 포함되는 것들은?
일반적으로 주석 사용시 다음의 것들이 포함되어집니다.

- 함수에 넘기는 파라미터 값과 타입
- 작성된 코드의 기능 정보 및 사용 방법
- 연관된 함수, 서비스, 프로퍼티 등의 정보
- 함수 리턴시 리턴 타입 및 값 정보
- 코드 작성자 정보
- 업데이트 일자

# 변수 선언시 코딩 스타일

변수 선언시 알아두면 좋은 코딩 스타일들입니다.

1. 변수 이름을 정할 때는 반드시 이해하기 쉬운 문자의 나열로 할 것
변수 이름은 해당 변수의 역할을 확실히 알 수 있도록 정하는 것이 좋습니다. 이때 함수의 경우 앞에 동사를 사용하고 아닌 경우는 동사를 사용하지 않는 것도 좋은 방법입니다.

i. 함수인 변수 예제
movepage
updatepage
cancelupdate

ii. 함수가 아닌 변수 예제
pageno
username
nowtime


2. 변수 이름에서 의미가 다른 단어는 헝가리언, 카멜, 언더스코어 및 대쉬 표기법 등을 활용할 것
위 변수들은 아래처럼 바꾸어 표기하는 것이 이해하기 쉽고 직관적입니다.

• movepage -> movePage 또는 move_page
• cancelupdate -> cancelUpdate 또는 cancel_update
• pageno -> page-no 또는 pageNo
• nowtime -> nowTime 또는 now_time

# 긴 코드의 줄바꿈 사용 방법

코드를 작성할 때에도 일반적으로 긴 코드는 허용하지 않거나 대체하는 방법들을 선호합니다. 딱 정해진 코드 길이가 정답은 아니나 화면에 적당히 보이는 120자의 길이가 많이 선호됩니다.(가급적 스크롤이 발생 안하는 길이) 코드 길이를 줄이기 위한 방법은 몇가지 있는데 간단한 방법으로 아래의 경우가 있습니다.

1. 변수를 사용하여 코드 줄이기
만약 참조값 등의 데이터가 긴 경우 변수를 사용합니다. 만약 선택자를 사용한 엘리먼트인 경우 ...

코딩 스타일을 알아두면 더 간결하고 이해하기 쉬운 코딩을 가능하게 합니다. 또한 취업 및 이직등을 위한 인터뷰, 코딩 시험에도 남들보다 더 높은 경쟁력을 갖을 수 있을 것입니다.


구글 자바스크립트 스타일 가이드 링크 바로가기 >
​​​​​​​