▶ JavaScript Tutorial

JavaScript Best Practices

JavaScript Best Practices: 효율적이고 유지보수 가능한 코드 작성법

JavaScript를 사용하여 안정적이고 효율적인 코드를 작성하는 것은 매우 중요합니다. JavaScript의 특성상 유연한 문법을 가지고 있어 다양한 방식으로 코드를 작성할 수 있지만, 모범 사례를 따른다면 가독성과 유지보수성이 뛰어난 코드를 작성할 수 있습니다. 이 가이드는 JavaScript 개발의 모범 사례를 설명하고, 안정적인 코드 작성을 위한 팁을 제공합니다.

1. `const`와 `let`을 사용하라

JavaScript에서 변수를 선언할 때는 **const**와 **let**을 사용하는 것이 좋습니다. **const**는 상수를 선언할 때 사용하며, 재할당이 필요하지 않은 경우 사용합니다. **let**은 변수로 재할당이 필요한 경우에 사용합니다. **var**는 함수 스코프를 따르고, 호이스팅 문제를 일으킬 수 있으므로 사용을 피합니다.

1.1. `const` 사용

const name = 'Alice';  // 값이 변경되지 않는 상수

1.2. `let` 사용

let age = 25;  // 값이 변경될 수 있는 변수
age = 26;

2. 의미 있는 변수 이름을 사용하라

변수나 함수의 이름을 지을 때는 의미 있는 이름을 사용하는 것이 좋습니다. 간단한 약어 대신 명확한 이름을 사용하면 코드의 가독성과 유지보수성이 향상됩니다.

2.1. 좋은 변수 이름

let totalPrice = 100;  // 명확한 의미 전달

2.2. 나쁜 변수 이름

let x = 100;  // 의미가 불명확

3. 주석을 통해 코드를 설명하라

코드가 무엇을 하는지 명확하게 설명하기 위해 주석을 사용합니다. 복잡한 논리나 의도된 동작에 대해 설명하는 것은 팀원이나 향후 유지보수 시 도움이 됩니다.

3.1. 함수 설명 주석

// 두 숫자를 더하는 함수
function add(a, b) {
    return a + b;
}

4. 함수는 하나의 작업만 하게 하라

함수는 하나의 작업만 수행하도록 설계하는 것이 좋습니다. 이렇게 하면 함수가 명확하고, 테스트와 디버깅이 더 쉬워집니다.

4.1. 좋은 함수 설계

function calculateTotalPrice(price, tax) {
    return price + tax;
}

4.2. 나쁜 함수 설계 (하나 이상의 작업 수행)

function processOrder(order) {
    validateOrder(order);
    calculateTotalPrice(order.price, order.tax);
    printOrderSummary(order);
}

5. 코드 중복을 피하라

코드 중복은 유지보수성과 가독성을 떨어뜨리므로 피해야 합니다. 중복된 코드는 함수로 분리하거나, 재사용 가능한 모듈로 만들어서 코드의 중복을 줄이는 것이 좋습니다.

5.1. 중복된 코드 예시

const user1 = { name: 'Alice', age: 25 };
const user2 = { name: 'Bob', age: 30 };

5.2. 중복 제거

function createUser(name, age) {
    return { name, age };
}

const user1 = createUser('Alice', 25);
const user2 = createUser('Bob', 30);

6. 엄격한 비교를 사용하라 (`===`)

JavaScript에서는 **==**와 **===**의 차이가 큽니다. **==**는 타입 변환을 허용하는 비교이므로 예상치 못한 결과가 나올 수 있습니다. **===**는 타입과 값 모두를 비교하므로, 더 명확하고 안전한 비교가 가능합니다.

6.1. 엄격한 비교 (`===`) 사용

let x = '5';
if (x === 5) {
    // 값이 동일하지만 타입이 다르므로 실행되지 않음
}

6.2. 느슨한 비교 (`==`)로 인한 문제

let x = '5';
if (x == 5) {
    // 값만 비교되므로 실행됨 (예상치 못한 동작)
}

7. 단축 평가를 사용하라

*단축 평가(Short-Circuit Evaluation)**를 사용하면, 조건문을 더 간결하게 작성할 수 있습니다. 조건이 참일 때만 실행되는 코드를 단축 평가로 간단히 표현할 수 있습니다.

7.1. 단축 평가 예시

let isUserLoggedIn = true;
isUserLoggedIn && showDashboard();  // isUserLoggedIn이 true일 때만 실행

8. 기본값을 설정하라

함수에서 매개변수로 기본값을 설정하면 **undefined**일 때 기본값을 사용하여 예기치 않은 오류를 방지할 수 있습니다.

8.1. 기본값 설정 예시

function greet(name = 'Guest') {
    console.log(`Hello, ${name}`);
}

greet();  // 출력: Hello, Guest

9. 객체 비구조화를 사용하라

*비구조화 할당(Destructuring Assignment)**을 사용하면 객체나 배열의 속성을 간편하게 추출할 수 있습니다. 코드를 더 간결하게 작성할 수 있고, 코드의 가독성이 높아집니다.

9.1. 객체 비구조화

const user = { name: 'Alice', age: 25 };
const { name, age } = user;
console.log(name);  // 출력: Alice

9.2. 배열 비구조화

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

10. 모듈화를 통해 코드를 분리하라

큰 프로젝트에서는 모듈화를 통해 코드를 분리하는 것이 좋습니다. 각 기능을 독립된 파일로 분리하고, **import**와 **export**를 사용해 필요한 기능을 가져옵니다. 이는 코드의 유지보수성을 높이고, 협업을 더 쉽게 만듭니다.

10.1. 모듈화 예시

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

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

11. 오류 처리를 하라

JavaScript는 비동기 코드에서 오류 처리를 올바르게 하지 않으면 예기치 않은 문제가 발생할 수 있습니다. try...catch 문을 사용해 오류를 처리하고, 비동기 함수에서는 **async/await**을 사용하여 에러 처리를 체계적으로 해야 합니다.

11.1. 오류 처리 예시

try {
    let data = fetchData();
} catch (error) {
    console.error('Error fetching data:', error);
}

12. 비동기 코드에서 `async/await` 사용

비동기 작업을 처리할 때는 **async/await**를 사용하는 것이 좋습니다. Promise 체이닝 대신 **async/await**을 사용하면 코드가 더 간결하고 직관적으로 보입니다.

12.1. `async/await` 사용

async function fetchData() {
    try {
        let response = await fetch('<https://api.example.com/data>');
        let data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('Error fetching data:', error);
    }
}

13. Lint 도구 사용

ESLint와 같은 Lint 도구를 사용하면 코드 스타일을 유지하고, 잠재적인 오류를 미리 방지할 수 있습니다. Lint 도구는 프로젝트에서 일관된 코딩 스타일을 유지하는 데 큰 도움을 줍니다.

13.1. ESLint 설정 예시

npm install eslint --save-dev
npx eslint --init

요약

*const*와 **let*을 사용하여 변수를 선언하고, 의미 있는 변수명을 사용합니다.
함수는 **하나의 작업만
- 수행하게 하고, 코드 중복을 피합니다.
*엄격한 비교(===)**를 사용하고, 단축 평가로 코드를 간결하게 작성합니다.
객체와 배열에서는 비구조화 할당을 사용하여 코드를 간결하게 작성하고, 모듈화를 통해 코드를 분리합니다.
비동기 작업은 **async/await*을 사용하고, 오류 처리를 철저히 해야 합니다.
Lint 도구를 사용해 코드의 일관성과 품질을 유지합니다.

이 모범 사례들을 따르면 안정적이고 유지보수하기 쉬운 JavaScript 코드를 작성할 수 있습니다.

코딩 스쿨 JavaScript