Porządki w JavaScript — jak pisać czysty, czytelny i bezpieczny kod

JavaScript to język, który potrafi być genialny… i chaotyczny jednocześnie. Łatwo zacząć w nim programować, ale równie łatwo stworzyć kod, który po tygodniu wygląda jak losowo rozmieszczone przewody pod biurkiem. Dlatego dziś zrobimy porządki w JavaScript — krok po kroku pokażę zasady, które sprawią, że Twój kod będzie czytelny, przewidywalny i przyszłościowy.

🔹 1. Używaj let i const, zapomnij o var

var to relikt dawnych czasów — ma dziwne zasady działania (hoisting, brak blokowego scope).
Dziś używamy:

• const — gdy nie zmieniasz wartości
• let — gdy wartość się zmienia

Przykład:

const API_URL = "https://api.example.com";
let counter = 0;

To pierwsza i najprostsza rzecz, która uprawnia Twój kod do miana „współczesnego”.

🔹 2. Nadawaj sensowne nazwy zmiennym i funkcjom

To “czystość” w najbardziej podstawowym znaczeniu.
Zamiast:

let a = 10;
function x(b) {
  return b * 2;
}

Pisz:

let maxUsers = 10;
function double(value) {
  return value * 2;
}

Kod bardziej opisuje to, co robi, więc jest zrozumiały nawet po długiej przerwie.

🔹 3. Formatuj kod – to nie kosmetyka, to konieczność

Chaos w wcięciach i klamrach to wróg czytelności.

Źle:

function test(){
console.log("Hi");
if(true){
console.log("OK");
}}

Dobrze:

function test() {
  console.log("Hi");
  if (true) {
    console.log("OK");
  }
}

Używaj automatyzacji:

• Prettier
• ESLint

Można je ustawić tak, aby naprawiały formatowanie automatycznie przy każdym zapisie pliku.

🔹 4. Unikaj duplikowania kodu (DRY — Don’t Repeat Yourself)

Jeśli powtarzasz jakiś fragment kodu 3–4 razy, czas zrobić funkcję.

Zamiast:

console.log("Hello, Igor!");
console.log("Hello, Kasia!");
console.log("Hello, Tomek!");

Pisz:

function greet(name) {
  console.log(`Hello, ${name}!`);
}

["Igor", "Kasia", "Tomek"].forEach(greet);

Czysto, przejrzyście i skalowalnie.

🔹 5. Używaj struktury folderów

W projektach front-endowych nie trzymaj wszystkiego w jednym pliku.
Podziel logikę na:

/js
   api.js
   utils.js
   main.js
/css
   style.css
/index.html

A w większych projektach: komponenty, moduły, serwisy – JavaScript to lubi.

🔹 6. Komentuj, ale… nie za dużo

Komentarz powinien wyjaśniać dlaczego, a nie co kod robi.

❌ Źle:

// dodaje 1
counter = counter + 1;

✔️ Dobrze:

// licznik rośnie, gdy użytkownik odblokuje poziom
counter++;

Czysty kod broni się sam, komentarze tylko tam, gdzie naprawdę są potrzebne.

🔹 7. Unikaj „magicznych wartości”

Zamiast:

if (age > 18) {

Lepiej:

const MIN_AGE = 18;

if (age > MIN_AGE) {

Dzięki temu łatwo zmienić zasady działania programu bez grzebania w całym kodzie.

🔹 8. Korzystaj z funkcji strzałkowych

Nowoczesne, krótkie, czytelne:

const square = x => x * x;

Szczególnie przydatne w callbackach:

users.map(user => user.name);

🔹 9. Rób logi tylko na czas debugowania

console.log() to super narzędzie, ale w produkcyjnych projektach nie może zostać.

Jeśli robisz porządki, usuń logi albo zamień je na:

• własny logger
• warunkowe logowanie
• narzędzia devtools

🔹 10. Oddziel warstwy logiki

Unikaj mieszania:

• kodu logiki,
• kodu manipulującego DOM,
• kodu obsługi API

Przykład bałaganu:

button.addEventListener("click", () => {
  const data = fetch("url").then(...);
  list.innerHTML = data.map(...);
});

Lepszy porządek:

button.addEventListener("click", loadData);

async function loadData() {
  const data = await getUsers();
  renderList(data);
}

Kod staje się modułowy i łatwy do testowania.

Porządek w JavaScript to nie tylko ładniejsze pliki. To:

✔️ mniej błędów
✔️ łatwiejsza rozbudowa
✔️ szybsze diagnozowanie problemów
✔️ zrozumiały kod po latach

Darkmord