자바스크립트 스타일 가이드: 깨끗하고 일관된 코드 작성

안녕하세요, 야심찬 코더 여러분! 자바스크립트 스타일 가이드의 세계를 탐험하는 여정에 함께 참여하게 되어 기쁩니다. 프로그래밍을 가르쳐온 지 오래된 저로서는 깨끗하고 일관된 코드를 작성하는 것이 얼마나 중요한지 강조할 수밖에 없습니다. 방을 깨끗하게 유지하는 것과 같아요 - 모든 것을 쉽게 찾고 관리할 수 있게 해줍니다!

왜 스타일 가이드가 필요한가요?

이제부터 다루어보겠습니다. 상상해보세요, 팀 프로젝트에서 각자 다른 방식으로 코드를 작성하는 상황을. 그것은 혼란스러운 일입니다! 스타일 가이드는 모든 사람이 동의하여 따르는 규칙의 집합으로, 코드를 더 쉽게 읽고 유지할 수 있게 해줍니다.

이제 자바스크립트 스타일 가이드의 구체적인 내용으로 들어가보겠습니다!

코드 인덴트

H3: 읽기 쉬운 코드의 기초

인덴트는 집의 기초와 같아요 - 구조와 안정성에 매우 중요합니다. 자바스크립트에서는 공백이나 탭을 사용하여 코드를 인덴트합니다. 예를 보겠습니다:

function greetStudent(name) {
if (name) {
console.log("Hello, " + name + "!");
} else {
console.log("Hello, student!");
}
}

이 예제에서, 함수 내부와 if-else 문 내부의 코드를 인덴트했습니다. 이렇게 하면 코드의 어떤 부분이 함께 속하는지 명확하게 알 수 있습니다.

주석

H3: 미래의 당신에게 남길 길표

주석은 코드에 남긴 작은 메모와 같아요. 코드가 어떻게 동작하는지 설명하지만, 코드의 실행에는 영향을 주지 않습니다. 다음과 같이 사용합니다:

// 이것은 단일 줄 주석입니다

/*
이것은
여러 줄 주석입니다
*/

/**
* 이것은 JSDoc 주석입니다
* 함수를 문서화하는 데 사용됩니다
* @param {string} name - 학생의 이름
*/
function greetStudent(name) {
// 여기에 코드 작성
}

좋은 주석은 왜 하는지 설명해야 하며, 코드 자체는 무엇을 하는지 보여줘야 합니다.

변수 선언

H3: 코드의 등장인물 소개

변수는 코드의 등장인물과 같아요. 자바스크립트에서는 변수를 선언하는 몇 가지 방법이 있습니다:

// 'let'을 사용하여 변할 수 있는 변수 선언
let age = 25;

// 'const'을 사용하여 변하지 않는 변수 선언
const PI = 3.14159;

// 현대 자바스크립트에서는 'var'을 사용하지 않는 것이 좋습니다
// var oldWay = "We don't do this anymore";

항상 변수를 사용하기 전에 선언하고, 값을 변경하지 않을 경우 const를 사용하려고 노력하세요.

식별자 이름 camelCase 사용

H3: 합리적인 명명 규칙

자바스크립트에서는 대부분 camelCase를 사용하여 식별자를 이름 지정합니다. 단어를 붙이되, 새로운 단어의 첫 글자를 대문자로 합니다:

let firstName = "John";
let lastName = "Doe";
let fullName = firstName + " " + lastName;

function calculateArea(width, height) {
return width * height;
}

const MAX_SIZE = 100; // 예외: 상수는 자주 ALL_CAPS로 작성됩니다

공백과 브래켓

H3: 코드에 공간을 주기

적절한 공백은 코드를 더 읽기 쉽게 만듭니다. 긴 에세이에 문단을 추가하는 것과 같아요. 다음과 같이 공백과 브래켓을 사용합니다:

// 좋은 공백
if (condition) {
doSomething();
} else {
doSomethingElse();
}

// 함수 호출
console.log("Hello, World!");

// 배열과 객체
let colors = ["red", "green", "blue"];
let person = { name: "Alice", age: 30 };

연산자 주변과 쉼표 뒤에 공백을 추가하는 것이 프로 코드의 외관을 더해줍니다.

객체 규칙

H3: 데이터 구조화

객체는 관련 데이터의 컨테이너와 같아요. 다음과 같이 일반적으로 구조화합니다:

const student = {
name: "Bob",
age: 20,
grades: {
math: 90,
science: 85
},
isEnrolled: true
};

// 객체 프로퍼티 접근
console.log(student.name);
console.log(student["age"]);

객체 프로퍼티를 일관되고 잘 정리된 상태로 유지하세요. 나중에 골머리 아픈 일이 적어집니다.

문장 규칙

H3: 하나의 생각, 하나의 줄

일반적으로 각 문장을 별도의 줄에 유지합니다. 에세이에서 문장을 작성하는 것과 같아요 - 각 문장은 완전한 생각을 표현해야 합니다:

let a = 5;
let b = 10;
let c = a + b;

if (c > 10) {
console.log("c is greater than 10");
}

이렇게 하면 코드를 읽고 디버그하기 더 쉽습니다.

줄 길이

H3: 간결하게 유지하기

코드 줄의 길이를 합리적인 길이로 유지하세요 - 일반적으로 80-100자 정도입니다. 줄이 너무 길어질 경우 분리합니다:

// 너무 길다
let result = veryLongFunctionName(extremelyLongVariableName1, extremelyLongVariableName2, extremelyLongVariableName3);

// 더 나은 방법
let result = veryLongFunctionName(
extremelyLongVariableName1,
extremelyLongVariableName2,
extremelyLongVariableName3
);

이렇게 하면 가독성을 높이고 코드가 더 깔끔해집니다.

모든 것을 통합하다

이제 모든 스타일 가이드를 다룰 수 있도록 완전한 예제를 보겠습니다:

/**
* 쇼핑 카트에 있는 아이템의 총 가격을 계산합니다
* @param {Object[]} items - 카트에 있는 아이템 배열
* @returns {number} 총 가격
*/
function calculateTotalPrice(items) {
let total = 0;
const TAX_RATE = 0.08;

for (let i = 0; i < items.length; i++) {
let item = items[i];
let itemPrice = item.price * (1 + TAX_RATE);

total += itemPrice;

// 각 아이템의 세금 포함 가격 로그
console.log(`${item.name}: $${itemPrice.toFixed(2)}`);
}

return total.toFixed(2);
}

// 예제 사용
const shoppingCart = [
{ name: "T-shirt", price: 15.99 },
{ name: "Jeans", price: 39.99 },
{ name: "Shoes", price: 59.99 }
];

let finalPrice = calculateTotalPrice(shoppingCart);
console.log(`Total price: $${finalPrice}`);

이 예제는 적절한 인덴트, 주석, 변수 선언, camelCase 명명, 공백, 객체 사용, 문장 분리 및 줄 길이 가이드를 따르고 있습니다.

이 가이드를 따르면 코드가 더 읽기 쉽고 유지하기 쉬워집니다. 깨끗하고 일관된 코드 작성을 통해 coding 여정에서 큰 도움이 될 것입니다. 행복하게 코딩하세요, 코드가 항상 깨끗하고 일관적이기를 바랍니다!

Credits: Image by storyset