Najlepsze praktyki w pisaniu czystego kodu Javascript

1.Konsekwentne formatowanie

Używaj jednolitego wcięcia, spójnych odstępów i konwencji nazewniczych w całym kodzie. Popularne konwencje to CamelCase dla zmiennych i funkcji oraz kebab-case dla nazw plików.

Przykład:

// Zmienne i funkcje w CamelCase
const userAge = 25;
const maxUserLimit = 100;

function calculateTotalPrice(itemPrice, quantity) {
    return itemPrice * quantity;
}

// Funkcja pomocnicza, używana w getUserDetails
function findUserById(userId) {
    // Przykładowa implementacja
    const users = [
        { id: 1, name: 'Alice', age: 30 },
        { id: 2, name: 'Bob', age: 25 }
    ];
    return users.find(user => user.id === userId);
}

// Użycie wcięć i odstępów
function getUserDetails(userId) {
    if (!userId) {
        return null;
    }

    const user = findUserById(userId);
    if (!user) {
        return null;
    }

    return {
        id: user.id,
        name: user.name,
        age: user.age
    };
}

// Nazwy plików w kebab-case
// przykładowe pliki: user-profile.js, calculate-total-price.js

Szukasz zaufanej firmy dla swoich projektów IT?

Napisz do nas!

2.Opisowe nazwy zmiennych i funkcji:

Wybieraj znaczące i opisowe nazwy dla zmiennych, funkcji i klas. Dzięki temu twój kod staje się łatwiejszy do zrozumienia.

// Dobra nazwa zmiennej
const maxUserLimit = 100;
// Dobra nazwa funkcji
function generateReportData(reportType, startDate, endDate) { /* ... */ }

// Zła nazwa zmiennej
const x = 100;
// Zła nazwa funkcji
function foo(a, b) { /* ... */ }

Wybieranie opisowych nazw zmiennych i funkcji jest kluczowe dla utrzymania czytelności i zrozumiałości kodu. Dobre nazwy jasno komunikują cel i zastosowanie danego elementu kodu, co ułatwia jego późniejsze utrzymanie i rozwijanie. W przykładzie, nazwa maxUserLimit jest klarowna i od razu wskazuje, że zmienna przechowuje maksymalny limit użytkowników. Analogicznie, funkcja generateReportData jednoznacznie określa, że jej zadaniem jest generowanie danych do raportu. Z kolei nazwy takie jak x i foo są nieopisowe i mogą prowadzić do nieporozumień oraz błędów, ponieważ nie sugerują, jakie mają przeznaczenie ani jakie operacje wykonują. Używanie opisowych nazw jest prostym, lecz bardzo efektywnym sposobem na poprawę jakości kodu.

3. Dodawaj komentarze, aby wyjaśnić bloki kodu

Komentarze odgrywają kluczową rolę w pisaniu dobrego kodu. Ułatwiają zrozumienie, co dany fragment kodu robi i dlaczego został napisany w określony sposób.

Pamiętaj, aby komentować wszystkie istotne części kodu, nie tylko te, które mogą być trudne do zrozumienia. Dobrze umieszczone komentarze mogą znacząco przyspieszyć proces debugowania oraz ułatwić przyszłe modyfikacje kodu. Jeśli zastanawiasz się, czy dodać komentarz, zrób to – nie ma czegoś takiego jak za dużo dobrych komentarzy.

Komentarze powinny być również jasne i zrozumiałe dla innych programistów. Dzięki temu nowi członkowie zespołu będą mogli szybko zrozumieć logikę aplikacji, co skróci czas potrzebny na wdrożenie ich do projektu.

4. Pisz modularny kod, który można ponownie wykorzystać:

Dziel swój kod na mniejsze, wielokrotnego użytku moduły lub funkcje. To sprzyja ponownemu wykorzystaniu kodu i pomaga zarządzać złożonością. Modularyzacja kodu zapobiega także duplikacji – jeśli stworzymy funkcję, która jest uniwersalna będzie można ją bez problemu zastosować w różnych częściach projektu.

5. Obsługa błędów:

Radzenie sobie z błędami to kolejna dobra praktyka w utrzymaniu czystego i czytelnego kodu Javascript. Zaimplementuj obsługę błędów poprzez użycie bloków try…catch tam, gdzie to potrzebne i adekwatne. Pozwoli to na efektywne zarządzanie wszelkiego rodzaju awariami.

Przykład:

try {
    // Próbuj wykonać pewną akcję
    const data = fetchDataFromAPI();
    process(data);
} catch (error) {
    // Logowanie błędu w konsoli
    console.error('Wystąpił błąd podczas pobierania danych z API:', error);
    
    // Informowanie użytkownika o błędzie
    alert('Wystąpił problem podczas pobierania danych. Proszę spróbuj ponownie później.');

    // Dodatkowe kroki w przypadku specyficznych błędów
    if (error instanceof NetworkError) {
        // Obsługa błędu sieciowego
        console.warn('Problem z połączeniem sieciowym:', error.message);
    } else if (error instanceof ServerError) {
        // Obsługa błędu serwera
        console.warn('Problem po stronie serwera:', error.message);
    } else {
        // Obsługa innych rodzajów błędów
        console.warn('Nieznany błąd:', error.message);
    }
}

W tym przykładzie try próbuje wykonać funkcję fetchDataFromAPI i przetworzyć dane za pomocą process. Jeśli wystąpi błąd podczas wykonywania którejkolwiek z tych operacji, zostanie on przechwycony przez blok catch, który wyświetli komunikat o błędzie w konsoli oraz poinformuje użytkownika o problemie. Dodatkowo, różne typy błędów mogą być obsługiwane w różny sposób, co pozwala na bardziej precyzyjne reagowanie na różne sytuacje.

6. Organizuj funkcje w pliku zgodnie z zasadą stopniowego obniżania poziomu szczegółowości

Wyższe poziomem funkcje powinny znajdować się na górze pliku, a niższe poziomy poniżej. Ułatwia to naturalne czytanie kodu źródłowego. Przykład:

// NIEPOPRAWNIE
// "Potrzebuję pełnej nazwy do czegoś..."
function getFullName(user) {
  return `${user.firstName} ${user.lastName}`;
}

function sendWelcomeMessage(user) {
  // "a, tutaj"
  const fullName = getFullName(user);
  console.log(`Witaj, ${fullName}! Cieszymy się, że jesteś z nami.`);
}

// POPRAWNIE
function sendWelcomeMessage(user) {
  // "Potrzebuję pełnej nazwy użytkownika"
  const fullName = getFullName(user);
  console.log(`Witaj, ${fullName}! Cieszymy się, że jesteś z nami.`);
}

// "Używam tego do wysyłania wiadomości powitalnej"
function getFullName(user) {
  return `${user.firstName} ${user.lastName}`;
}

W powyższym przykładzie funkcja sendWelcomeMessage jest wyżej, ponieważ jest bardziej ogólna i wywołuje funkcję getFullName, która jest bardziej szczegółowa i znajduje się niżej. Taka organizacja kodu sprawia, że jest on bardziej czytelny i zrozumiały.

7. Korzystaj z bibliotek i frameworków

Korzystanie z bibliotek i frameworków jest kluczowe dla pisania czystego i czytelnego kodu JavaScript. Te narzędzia pomagają w standaryzacji kodu, dostarczając sprawdzonych rozwiązań i najlepszych praktyk, co znacząco wpływa na jakość kodu.

Biblioteki dostarczają zestaw gotowych funkcji, które można łatwo zaimplementować w projekcie, co pozwala na oszczędność czasu i uniknięcie pisania kodu od podstaw. Na przykład, biblioteka Lodash oferuje liczne funkcje do manipulacji danymi, które są zoptymalizowane pod kątem wydajności i zgodności. Korzystanie z takich gotowych rozwiązań zapobiega pisaniu powtarzalnego kodu i minimalizuje ryzyko błędów.

Frameworki, takie jak React, Angular czy Vue.js, narzucają strukturalne podejście do budowania aplikacji, co ułatwia utrzymanie spójności kodu. Frameworki te oferują komponentowy model programowania, który promuje ponowne wykorzystanie kodu i modularność. Dzięki temu kod jest bardziej przejrzysty i łatwiejszy do zarządzania, a nowe funkcje mogą być dodawane bez wprowadzania chaosu.

FAQ – Frequently Asked Questions