'JavaScript' 코딩 스타일

설명을 시작하기에 앞서 코딩 스타일은 사람마다 다소 차이점이 있을 수 있지만
일반적으로 좋은 가이드라인과 규칙들이 있고 개발자들은 가능한 간결하고 읽기 쉽게
코드를 작성해야 한다. (자세한 설명은 아래 글을 참고 바랍니다.)

중괄호 { }

대부분의 JS 프로젝트에서 사용하는 중괄호는 '이집션 스타일'에 따라
새로운 줄이 아닌 코드의 함수의 뒤 즉 같은 줄에 작성한다. 추가로 중괄호의
시작 앞에는 아래에 첨부한 사진 처럼 공백이 하나 있어야 한다.

코드의 가로 길이

가로로 무한정 길게 늘어진 코드는 가독성이 떨어질 뿐만 아니라 이런 코드를
좋아할 사람은 없을 것 이다. 따라서 코드의 가로 길이가 길어진다면
번거롭더라도 여러 줄로 나누어 작성하는 것이 좋은 습관이다.

1. 기존의 문자열에서는 줄바꿈을 위해 '\n'과 같은 개행문자를 사용했으나
   여러 문자열의 시작과 끝에 백틱(``)을 사용 시 간단히 엔터키만 입력하면 된다.

2. 아래는 위 코드의 출력 결과이다.

들여쓰기

1. 들여쓰기는 탭키 또는 스페이스 두 번 입력을 통해 사용하며
   아래의 사진처럼 SQL 함수의 모든 인수 값의 위치를 시작 괄호와 맞출 수 있다.

세미콜론(;)

1. JS 엔진은 코드를 해석할 때 세미콜론을 기준으로 문장을 구분한다. 생략 된다면
   여러 줄이 하나의 문으로 해석될 수 있어 의도하지 않은 동작이 발생할 수 있다.


2. return, break, continue 처럼 문의 끝을 나타내는 경우
   가장 뒤에 세미콜론을 반드시 사용해야한다.

중첩 레벨 (for, while, if, ...)

1. 반복문을 사용할 경우 중첩문의 깊이가 깊어질 수록 코드를 읽고 이해하는 데에 특히 초보자라면 더 어려울 수 있고 추후 발생할 버그를 찾거나 수정이 어려울 수 있다.


2. 중첩이 깊어지면 위에서 말한 가독성이 떨어져 코드의 로직을 이해하기
   어렵기 때문에 원치않는 결과나 예상치 못한 오류가 발생할 수 있다.


3. 아래 사진의 코드 처럼 if문 아래에 굳이 else문을 사용하지 않아도 잘 동작한다.

함수의 위치

코딩 작업 중 '헬퍼'함수 여러 개를 만들어 사용하고 있다면
아래와 같은 방법을 사용하여 코드 구조를 깔끔히 정돈할 수 있다.

설명하기 전에 잠깐.. 헬퍼 함수란 무엇일까..? C언어로 예시를 들자면
main 함수 밖에 다른 함수를 만들어 필요 시 호출하고 사용하는 것이
JS에서의 헬퍼 함수와 유사한 개념이라고 생각하면 좋을 것 같다.

1. 헬퍼 함수를 사용하는 코드 위에서 헬퍼 함수들을 모아서 선언하기
   (필자의 노트북이 13인치라 코드가 잘린 부분은 양해 부탁드립니다..)

2. 위와 반대로 코드를 먼저 헬퍼 함수들은 가장 밑에 모아서 선언하기

3. 위에 두 코드의 컴파일 결과 값
   (둘 다 모두 동일한 값이 출력된다.)

참고자료 주소

JS 코딩 스타일