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
