> 웹 프론트엔드 > JS 튜토리얼 > 클린 코드 이해: 의미 있는 이름 ⚡

클린 코드 이해: 의미 있는 이름 ⚡

WBOY
풀어 주다: 2024-08-12 20:30:49
원래의
448명이 탐색했습니다.

Understanding Clean Code: Meaningful Names ⚡

코드 작성 시 가장 간과되지만 중요한 측면 중 하나가 바로 이름 지정입니다.

코드의 변수, 함수, 클래스 및 기타 엔터티에 대해 선택하는 이름은 가독성, 유지 관리 용이성 및 전반적인 품질에 큰 영향을 미칠 수 있습니다.

클린 코드의 2장에서는 의미 있는 이름을 선택하는 예술과 과학을 탐구하고 개발자가 표현력이 풍부하고 이해하기 쉬운 코드를 작성하는 데 도움이 되는 일련의 지침을 제공합니다.

이 블로그 게시물에서는 JavaScript의 예를 통해 각 개념을 설명하면서 이 장의 주요 내용을 살펴보겠습니다.


?1. 의도를 드러내는 이름을 사용하세요

선택한 이름은 변수, 함수 또는 클래스 뒤에 숨은 의도를 명확하게 전달해야 합니다. 독자는 추가 컨텍스트 없이도 코드의 기능을 이해할 수 있어야 합니다.

// Bad
let d; 

// Good
let daysUntilDeadline;
로그인 후 복사

첫 번째 예에서 d는 모호하고 맥락을 제공하지 않습니다. 개선된 버전인 daysUntilDeadline은 변수가 무엇을 나타내는지 명확하게 나타냅니다.


?2. 허위 정보 방지

이름은 오해의 소지가 있어서는 안 됩니다. 코드가 실제로 수행하는 것과 다른 의미를 암시할 수 있는 이름은 사용하지 마세요.

// Bad
let accountList = new Map();

// Good
let accountsMap = new Map();
로그인 후 복사

여기서 accountList는 목록(순서가 지정된 컬렉션)을 제안하는 반면 실제 데이터 구조는 맵이므로 오해의 소지가 있을 수 있습니다. accountMap을 사용하는 것이 더 정확합니다.


?3. 의미 있는 구별을 하라

유사한 변수, 함수, 클래스를 구분해야 하는 경우 명확하고 의미 있는 방식으로 구분하세요.

// Bad
getUserInfo();
getUserData();

// Good
getUserProfile();
getUserSettings();
로그인 후 복사

첫 번째 예에서는 getUserInfo와 getUserData가 너무 유사하여 차이점을 명확하게 전달하지 못합니다. 두 번째 예에서는 반환되는 내용에 따라 함수 이름을 지정하여 구별을 명확히 합니다.


?4. 발음하기 쉬운 이름을 사용하세요

이름은 읽고 발음하기 쉬워야 합니다. 이렇게 하면 다른 사람들과 코드에 대해 더 간단하게 논의할 수 있습니다.

// Bad
let genymdhms;

// Good
let generationTimestamp;
로그인 후 복사

genymdhms는 기억하거나 토론하기 어려운 발음할 수 없는 이름입니다. 그러나 GenerationTimestamp는 명확하고 말하기 쉽습니다.


?5. 검색 가능한 이름 사용

대규모 코드베이스에서는 검색하기 쉬운 이름을 사용하는 것이 중요합니다. 한 글자로 된 이름이나 지나치게 축약된 이름은 사용하지 마세요.

// Bad
let e = document.getElementById('email');

// Good
let emailInputElement = document.getElementById('email');
로그인 후 복사

e는 쉽게 검색할 수 없으며, 그것이 무엇을 의미하는지 전달하지 않습니다. emailInputElement는 더 설명적이고 코드베이스에서 찾기가 더 쉽습니다.


?6. 인코딩 방지

이름에 유형, 접두사 또는 기타 인코딩을 포함하지 마세요. 이름 자체를 충분히 설명하도록 하세요.

// Bad
let phoneString;

// Good
let phoneNumber;
로그인 후 복사

이 경우 PhoneString에는 불필요한 유형 인코딩(String)이 포함되어 있습니다. PhoneNumber는 더 간단하고 직접적입니다.


?7. 클래스 이름은 명사여야 하고, 함수 이름은 동사여야 합니다.

클래스는 객체나 개념을 나타내므로 이름은 명사여야 합니다. 반면에 함수는 동작을 나타내므로 이름은 동사여야 합니다.

// Class names (Nouns)
class UserAccount {}
class ShoppingCart {}

// Function names (Verbs)
function calculateTotal() {}
function sendEmail() {}
로그인 후 복사

이러한 구별은 코드에서 각 요소의 역할을 이해하는 데 도움이 됩니다.


?8. 정신적 매핑을 피하세요

독자에게 이름을 더 의미 있는 이름으로 번역하도록 강요하지 마세요. 이름은 설명이 쉬워야 합니다.

// Bad
let n = 5; // Number of users

// Good
let userCount = 5;
로그인 후 복사

n은 독자가 사용자 수를 의미한다는 것을 기억하거나 추론하도록 요구하는 반면, userCount는 즉시 명확합니다.


결론 ⚡

의미 있는 이름을 선택하는 것은 스타일의 문제 그 이상입니다. 이는 깔끔하고 유지 관리 가능한 코드를 작성하는 데 있어 기본적인 관행입니다.

클린 코드 2장에 설명된 지침을 따르면 JavaScript 코드의 가독성을 높이고 다른 사람(그리고 본인)이 더 쉽게 이해하고 유지 관리할 수 있습니다.

목적과 논리를 전달하는 코드를 작성하여 독자의 인지 부하를 줄이는 것이 목표라는 점을 기억하세요.

다음번에 변수, 함수 또는 클래스의 이름을 지정할 때 의미 있는 이름 지정의 원칙과 이러한 원칙이 어떻게 더 깔끔하고 효과적인 코드에 기여할 수 있는지 생각해 보세요.

즐거운 코딩하세요!

위 내용은 클린 코드 이해: 의미 있는 이름 ⚡의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿