JavaScript Code Style Guide

안녕하세요. 오늘은 자바스크립트의 코드 스타일에 대한 가이드에 알아볼게요.

 

 

 

자바스크립트의 코드 스타일

 

자바스크립트 코딩 스타일은 구글(Google)과 에어비앤비(Airbnb)에서 배포한 

 

코드 스타일 가이드를 기준으로 작성하는 것을 권장해요.

 

(특히 Airbnb 스타일 가이드는 전 세계적으로 많이 사용돼요.)

 

 

아래는 두 스타일 가이드 핵심 비교 요약표예요.

항목	Airbnb	Google	설명
들여쓰기	space 2칸	space 2칸	동일하게 권장
문장 종료	세미콜론 ; 필수	세미콜론 권장	Airbnb는 반드시, Google은 가급적 사용
문자열 따옴표	작은따옴표 ' '	큰따옴표 " "	Airbnb: 'hello', Google: "hello"
변수 선언	const, let 사용 / var 금지	const, let 사용 / var 금지	둘 다 ES6 문법 준수
함수 선언 방식	화살표 함수(=>) 적극 사용	명시적 함수 선언도 허용	Airbnb는 짧고 간결한 문법 선호
객체/배열 마지막 쉼표(trailing comma)	허용	비허용	Airbnb: 변경 시 git diff 줄임
이중 등호(==)	금지, 반드시 === 사용	금지, === 사용	타입 비교 오류 방지
변수명 스타일	camelCase / 클래스는 PascalCase	동일	일관성 유지
줄 길이 제한	100자 이내	80자 이내	Google이 더 엄격함
주석 스타일	JSDoc 지원, 블록 주석 권장	JSDoc 적극 권장	둘 다 함수 단위 설명 중시
함수 매개변수 기본값	default parameter 적극 사용	사용 가능	예: function test(a = 1)

 

다음은 제가 생각하는 자바스크립트 기본 문법과 코드 스타일의 중요하다고 생각한 몇 가지를 설명드릴게요.

 

 

 

자바스크립트 코드 스타일 가이드

 

1. 들여 쓰기 (Indentation)

 

들여 쓰기는 tab 1칸(=space 2칸)으로 설정하는 것이 일반적으로,

 

{} 중괄호 안의 코드는 들여 쓰기를 적용해 가독성을 높일 수 있어요.

for (let i = 0; i < 5; i++) {
  let j = 0;
}

 

 

2. 세미콜론(;)

 

자바스크립트는 세미콜론이 없어도 오류가 발생하지 않지만,

 

명확한 구문 구분을 위해 세미콜론 사용을 권장해요.

 

한 줄에 여러 구문을 작성할 경우 반드시 세미콜론으로 구분해요.

 

(단, 한 줄에는 한 구문만 작성하는 것을 권장드려요.)

console.log('Hello'); console.log('World'); // 지양
console.log('Hello');
console.log('World'); // 권장

 

 

3. 공백(Whitespace) 규칙

 

코드의 가독성을 위해 연산자, 예약어, 값 사이에는 공백을 넣어요.

 

= 등호 같은 연산자는 양쪽에 공백을 두고,

 

for () {} 구조에서도 괄호와 중괄호 사이에 공백을 둬요.

let num = 1;
for (let i = 0; i < 5; i++) { ... }

 

 

4. 주석(Comment)

 

주석은 불필요한 주석은 피하고, 의미 있는 설명만 작성하는 게 좋아요.

 

코드의 의도를 명확히 할 때만 주석을 사용하는 것을 권장드려요.

// 올바른 예: 함수의 목적을 설명
// 사용자의 이름을 출력하는 함수
function printName(name) {
  console.log(name);
}

 

 

 

자바스크립트 기본 문법 개념

 

1. 표현식(Expression)과 문장(Statement)

 

표현식은 값을 만들어내는 코드 조각이에요.  예를 들어 3 + 5, "안녕", console.log() 등 이 있어요.

 

문장은 하나 이상의 표현식으로 이루어진 실행 가능한 코드로 세미콜론(;)이나 줄 바꿈으로 문장이 끝남을 표시해요.

let x = 3 + 5; // 하나의 문장 안에 표현식이 포함됨

 

 

2. 키워드(Keyword)와 식별자(Identifier)

 

키워드는 자바스크립트가 예약해 둔 단어로, 변수명으로 사용할 수 없어요. (let, const, function 등)

 

식별자는 변수, 함수, 클래스 등의 이름으로 개발자가 정의할 수 있는 단어예요.

 

 

3. 식별자 명명 규칙

 

키워드 사용금지와 숫자로 시작 금지 규칙이에요.

 

사용할 수 있는 특수문자는 _(언더스코어, 언더바), $(달러 기호) 두 가지 만이에요.

 

그리고 _로 시작하는 변수명은 특별한 경우 외에는 지양해요.

 

의미 있는 변수명을 사용해 코드를 읽기 쉽게 작성해요.

 

 

4. 이름 규칙 (Naming Convention)

 

이름 규칙 클래스명은 첫 글자는 대문자로 작성하고

 

변수, 함수, 메서드 속성명은 첫 글자 소문자로 작성해요.

class UserProfile {}
let userName = '홍길동';
function calculateArea() { ... }

 

 

5. 식별자 뒤의 소괄호 유무

 

() 소괄호가 있을 경우 함수 또는 메서드를 호출할 수 있고,

 

소괄호가 없을 경우 변수 또는 속성을 참고하기 때문에 구분을 잘하셔야 해요.

소괄호 () 있음 → 함수 또는 메서드 호출
(예: printName(), obj.method())

소괄호 () 없음 → 변수 또는 속성 참조
(예: userName, obj.name)

 

 

다음은 중복되지만 제가 생각한 코드스타일 가이드 요약 표예요.

 

구분	내용	예시
들여쓰기	space 2칸 권장	for (...) { ... }
세미콜론	명확한 문장 구분용	console.log('hi');
공백	연산자·괄호 사이 띄어쓰기	let num = 1;
주석	필요한 부분만 작성	// 설명
표현식	값을 만드는 코드	3 + 5, "hi"
문장	실행 가능한 코드 단위	let x = 3 + 5;
식별자	변수·함수 이름	userName, calculateArea()
이름 규칙	camelCase / PascalCase	myVar, MyClass

 

 

 

여기까지 자바스크립트 기본 문법과 코딩 스타일 가이드에 대해 알아봤는데요.

 

자바스크립트를 알아갈수록 자바와 매우 흡사하다는 것을 알 수가 있었어요.

 

그리고 클린코드에 대해 다시 한번 느낄 수가 있었어요.

 

여러분들은 어떠셨나요?