▶ JavaScript Tutorial

JavaScript Style Guide

JavaScript Style Guide: 코드 스타일 가이드와 모범 사례

JavaScript 스타일 가이드는 코드의 일관성과 가독성을 유지하기 위해 지켜야 할 코딩 규칙과 모범 사례를 정의한 것입니다. JavaScript는 유연한 언어이기 때문에, 여러 가지 방식으로 코드를 작성할 수 있습니다. 하지만 일관된 코드 스타일을 유지하면 팀원 간의 협업이 수월해지고, 코드의 유지보수성이 향상됩니다.

이 가이드는 일관된 코딩 스타일을 유지하기 위한 JavaScript 스타일 가이드의 주요 원칙을 설명합니다. Google, Airbnb, JavaScript Standard와 같은 널리 사용되는 스타일 가이드를 참고해 작성되었습니다.

1. 변수 선언

JavaScript에서는 변수를 선언할 때 **let**과 **const**를 사용해야 하며, **var**는 사용하지 않는 것이 좋습니다. **const**는 재할당이 필요 없는 상수에, **let**은 재할당이 필요한 변수에 사용합니다.

1.1. `const`와 `let` 사용

const name = "Alice";  // 상수는 const 사용
let age = 25;          // 변수는 let 사용

1.2. `var` 사용 금지

*var*는 함수 스코프를 가지며, 호이스팅(hoisting) 때문에 예기치 않은 오류가 발생할 수 있으므로 사용하지 않습니다.

var x = 10;  // 권장하지 않음

2. 들여쓰기

들여쓰기는 코드의 구조를 명확하게 보여주기 때문에 매우 중요합니다. 일반적으로 2칸 또는 4칸의 공백을 사용하며, 팀이나 프로젝트에 따라 규칙이 정해질 수 있습니다.

2.1. 공백 들여쓰기 (스페이스 사용)

스페이스 2칸 또는 4칸을 사용하여 들여쓰기합니다. 탭(Tab) 대신 **스페이스(Space)**를 사용하는 것이 권장됩니다.

if (true) {
    console.log("Hello, world!");  // 2칸 들여쓰기
}

3. 세미콜론 사용

JavaScript에서는 **세미콜론(;)**을 명시적으로 사용하는 것이 권장됩니다. JavaScript는 세미콜론 자동 삽입(Auto Semicolon Insertion) 기능이 있지만, 명시적으로 세미콜론을 사용하면 잠재적인 오류를 방지할 수 있습니다.

let x = 5;
console.log(x);  // 세미콜론 사용 권장

4. 공백 규칙

공백을 적절히 사용하여 코드 가독성을 높이는 것이 중요합니다. 연산자와 함수 매개변수 사이에 공백을 사용하는 것이 좋습니다.

4.1. 연산자 주위 공백

연산자 양쪽에 공백을 넣어 가독성을 높입니다.

let sum = a + b;  // 연산자 주위에 공백

4.2. 함수와 매개변수 사이의 공백

함수 호출 시 괄호와 함수 이름 사이에 공백을 넣지 않으며, 매개변수 사이에만 공백을 사용합니다.

function greet(name) {
    console.log("Hello, " + name);
}

greet("Alice");  // 함수명과 괄호 사이에 공백 없음

5. 코드 블록과 중괄호 사용

모든 **제어문(if, for, while)**에 **중괄호({})**를 사용하는 것이 좋습니다. 한 줄로 처리할 수 있더라도 중괄호를 명시하는 것은 코드의 명확성을 높이는 데 도움을 줍니다.

if (condition) {
    doSomething();
}  // 중괄호 사용 권장

6. 문자열 사용

JavaScript에서 문자열을 사용할 때는 일관성이 중요합니다. 작은따옴표(') 또는 **큰따옴표(")**를 사용할 수 있지만, 한 프로젝트에서는 한 가지 스타일로 통일하는 것이 좋습니다. 템플릿 리터럴을 사용하는 것도 좋은 방식입니다.

6.1. 작은따옴표 사용

const greeting = 'Hello, world!';

6.2. 템플릿 리터럴

템플릿 리터럴은 문자열을 포함한 표현식을 삽입할 때 매우 유용합니다. **백틱(`````)**을 사용하며, ${} 안에 변수를 삽입합니다.

const name = "Alice";
const greeting = `Hello, ${name}!`;  // 템플릿 리터럴 사용

7. 객체와 배열

7.1. 객체 정의 시 마지막에 쉼표 사용

객체나 배열을 정의할 때 마지막 요소 뒤에 쉼표를 붙이는 것이 좋습니다. 이를 **후행 쉼표(trailing comma)**라고 하며, 나중에 수정할 때 코드 수정이 간결해지고 버전 관리 시스템에서의 차이도 명확하게 남습니다.

const person = {
    name: 'Alice',
    age: 25,
    city: 'New York',  // 후행 쉼표
};

7.2. 배열 정의

배열은 **대괄호([])**를 사용해 정의하며, 쉼표로 요소를 구분합니다.

const colors = ['red', 'green', 'blue'];

8. 함수와 화살표 함수

8.1. 함수 선언

함수 선언 시 기명 함수를 사용하는 것이 일반적으로 권장됩니다.

function add(a, b) {
    return a + b;
}

8.2. 화살표 함수 사용

간단한 함수나 콜백 함수는 화살표 함수를 사용해 가독성을 높일 수 있습니다.

const add = (a, b) => a + b;

9. 주석

코드에 주석을 달아 코드를 더 쉽게 이해할 수 있도록 합니다. 주석은 코드의 이해와 유지보수에 도움을 줍니다.

9.1. 한 줄 주석

한 줄 주석은 **//**를 사용하여 작성합니다.

// 이름을 출력하는 함수
function printName(name) {
    console.log(name);
}

9.2. 여러 줄 주석

여러 줄 주석은 **/* */**을 사용합니다.

/*
이 함수는 두 숫자를 더하는 함수입니다.
매개변수로 두 숫자를 받고, 그 합을 반환합니다.
*/
function add(a, b) {
    return a + b;
}

10. 객체와 배열 비구조화 할당 (Destructuring)

비구조화 할당을 사용하여 객체나 배열의 값을 더 간결하게 추출할 수 있습니다.

10.1. 객체 비구조화

const person = { name: 'Alice', age: 25 };
const { name, age } = person;  // 비구조화 할당
console.log(name);  // 출력: Alice

10.2. 배열 비구조화

const numbers = [1, 2, 3];
const [first, second] = numbers;
console.log(first);  // 출력: 1

11. 코드 분리

모든 코드를 하나의 파일에 작성하지 않고, 기능별로 분리하여 모듈화하는 것이 좋습니다. JavaScript 모듈을 사용해 **import**와 **export**로 모듈 간에 기능을 공유합니다.

11.1. 모듈 사용

// math.js
export function add(a, b) {
    return a + b;
}

// app.js
import { add } from './math.js';
console.log(add(2, 3));  // 출력: 5

12. 코드 정리 도구 (Linting)

ESLint와 같은 Lint 도구를 사용하면 코드의 스타일 문제나 잠재적인 오류를 자동으로 감지하고 수정할 수 있습니다. 프로젝트에 Lint 도구를 설정하면 일관된 스타일을 유지하고, 코드 품질을 높일 수 있습니다.

요약

*let*과 **const*를 사용하여 변수를 선언하며, **var*는 사용하지 않습니다.
스페이스를 사용해 들여쓰기하고, 세미콜론을

명시적으로 사용합니다.

객체나 배열의 정의 시 후행 쉼표를 사용하고, 비구조화 할당을 활용합니다.
화살표 함수는 간단한 함수를 작성할 때 유용하며, 주석을 통해 코드의 이해도를 높입니다.
Lint 도구를 사용해 코드의 일관성을 유지하고, 오류를 방지합니다.

일관된 코드 스타일을 유지하면 팀원 간의 협업이 원활해지고, 코드의 가독성과 유지보수성이 크게 향상됩니다.

코딩 스쿨 JavaScript