클린 코드 이해: 함수 ⚡-JS 튜토리얼-php.cn

클린 코드 이해: 함수 ⚡

WBOY

풀어 주다： 2024-08-16 06:11:36

원래의

588명이 탐색했습니다.

Understanding Clean Code: Functions ⚡

소프트웨어 개발에서 기능은 모든 애플리케이션의 구성 요소입니다. 이는 논리를 구성하고, 동작을 캡슐화하고, 복잡한 작업을 관리 가능한 부분으로 나누는 주요 방법입니다.

그러나 모든 기능이 동일하게 만들어지는 것은 아닙니다. 클린 코드 3장에서는 작고 집중적이며 한 가지 일을 잘하는 작업 작성에 중점을 두고 있습니다.

이 기사에서는 이러한 원칙을 자세히 알아보고 이를 JavaScript에 적용하는 방법을 살펴보겠습니다.

?1. 작은 기능: 적을수록 좋습니다

Clean Code의 핵심 원칙 중 하나는 기능이 작아야 한다는 것입니다.

그런데 이 맥락에서 '작은'은 무엇을 의미하나요? 저자는 일반적으로 몇 줄 길이의 함수를 옹호합니다.

작은 기능이 이해하고, 테스트하고, 유지 관리하기가 더 쉽다는 생각입니다.

JavaScript의 예를 살펴보겠습니다.

// Bad Example: A large, unfocused function
function processOrder(order) {
    applyDiscount(order);
    calculateShipping(order);
    calculateTax(order);
    generateInvoice(order);
    sendConfirmationEmail(order);
    updateInventory(order);
}

로그인 후 복사

이 기능은 겉으로는 간단해 보이지만 너무 많은 기능을 수행합니다. 이러한 각 작업은 고유한 기능으로 분류될 수 있고 분류되어야 합니다.

// Good Example: Small, focused functions
function processOrder(order) {
    applyDiscount(order);
    calculateShipping(order);
    calculateTax(order);
    generateInvoice(order);
    sendConfirmationEmail(order);
    updateInventory(order);
}

function applyDiscount(order) {
    // Discount logic
}

function calculateShipping(order) {
    // Shipping calculation logic
}

function calculateTax(order) {
    // Tax calculation logic
}

function generateInvoice(order) {
    // Invoice generation logic
}

function sendConfirmationEmail(order) {
    // Email sending logic
}

function updateInventory(order) {
    // Inventory update logic
}

로그인 후 복사

수정된 예에서 각 함수는 한 가지 작업을 수행하므로 코드를 더 쉽게 읽고 유지 관리할 수 있습니다.

이제 processOrder 함수는 상위 수준 오케스트레이터 역할을 하며, 더 작고 집중된 함수가 세부 사항을 처리합니다.

?2. 한 가지만 하세요

함수는 한 가지 일을 하고 그 일을 잘 해야 합니다. 여러 작업을 수행하는 함수를 작성하고 있다면 이를 더 작은 함수로 리팩터링해야 한다는 신호입니다.

예:

// Bad Example: A function doing multiple things
function formatAndSendEmail(email, subject, message) {
    const formattedMessage = `<html><body>${message}</body></html>`;
    sendEmail(email, subject, formattedMessage);
}

로그인 후 복사

이 기능은 간결해 보이지만 메시지 형식 지정과 이메일 전송이라는 두 가지 작업을 수행합니다. 대신 다음과 같이 분류하세요.

// Good Example: Functions doing one thing
function formatMessage(message) {
    return `<html><body>${message}</body></html>`;
}

function sendFormattedEmail(email, subject, message) {
    const formattedMessage = formatMessage(message);
    sendEmail(email, subject, formattedMessage);
}

로그인 후 복사

이제 각 함수에는 단일 책임이 있으므로 코드를 더 쉽게 테스트하고 재사용할 수 있습니다.

formatMessage 기능은 이메일 전송 로직과 별도로 테스트할 수 있습니다.

?3. 부작용을 피하세요

함수는 부작용을 최소화해야 합니다. 즉, 예상치 못한 방식으로 시스템 상태를 변경해서는 안 됩니다. 부작용이 있는 함수는 디버그하고 추론하기가 더 어려울 수 있습니다.

예:

// Bad Example: A function with a side effect
let globalCounter = 0;

function incrementCounter() {
    globalCounter++;
}

로그인 후 복사

incrementCounter 함수는 전역 상태를 변경하므로 주의 깊게 관리하지 않으면 버그가 발생할 수 있습니다.

더 나은 접근 방식은 새 값을 반환하고 호출자가 이를 어떻게 할지 결정하도록 하는 것입니다.

// Good Example: Avoiding side effects
function incrementCounter(counter) {
    return counter + 1;
}

globalCounter = incrementCounter(globalCounter);

로그인 후 복사

부작용을 피함으로써 기능을 더 예측 가능하고 작업하기 쉽게 만들 수 있습니다.

?4. 단일 수준의 추상화

함수는 단일 추상화 수준에서 작동해야 합니다. 동일한 기능 내에서 다양한 세부 수준을 혼합하면 이해하기가 더 어려워질 수 있습니다.

예:

// Bad Example: Mixed levels of abstraction
function getUserData(userId) {
    const user = database.fetchUserById(userId); // Low-level
    return `${user.firstName} ${user.lastName} (${user.email})`; // High-level
}

로그인 후 복사

여기서 함수는 낮은 수준의 데이터베이스 가져오기와 높은 수준의 사용자 데이터 형식을 혼합합니다.

이러한 문제는 분리하는 것이 좋습니다.

// Good Example: Single level of abstraction
function getUser(userId) {
    return database.fetchUserById(userId);
}

function formatUserData(user) {
    return `${user.firstName} ${user.lastName} (${user.email})`;
}

const user = getUser(userId);
const formattedUserData = formatUserData(user);

로그인 후 복사

이제 각 함수는 단일 추상화 수준에서 작동하므로 코드가 더욱 명확해지고 유지 관리가 쉬워집니다.