JavaScript to potężne narzędzie, ale czasem wystarczy znać kilka sztuczek, by znacznie przyspieszyć pracę. Oto 5 praktycznych trików, które oszczędzą Ci godziny pracy:
1. Nullish Coalescing (??) vs Logical OR (||)
Użyj ?? zamiast ||, gdy zależy Ci na unikaniu null i undefined, ale nie na wartościach typu 0 czy pusty string.
// ❌ Problem z ||const count = user.count || 0; // 0 zostanie zastąpione domyślną wartością// ✅ Rozwiązanie z ??const count = user.count ?? 0; // 0 pozostanie 0
2. Destrukturyzacja obiektów i tablic
Upraszcza kod i czyni go bardziej czytelnym:
// Destrukturyzacja obiektówconst {name, age, email} = user;// Destrukturyzacja tablicconst [first, second, ...rest] = array;// Z wartościami domyślnymiconst {name = 'Anonymous', age = 18} = user;
3. Array.map() + Array.join() — szybki rendering list
Efektywny sposób na renderowanie list w UI:
// Szybkie renderowanie listyconst userList = users .map(user => `<li>${user.name}</li>`) .join('');// Zamiast pętli forlet userList = '';for (let user of users) { userList += `<li>${user.name}</li>`;}
4. Object.entries() + forEach do iterowania po obiektach
Elegancki sposób na iterowanie po właściwościach obiektu:
// Iterowanie po obiekcieObject.entries(user).forEach(([key, value]) => { console.log(`${key}: ${value}`);});// Z filtrowaniemObject.entries(user) .filter(([key, value]) => value !== null) .forEach(([key, value]) => processData(key, value));
5. Operator warunkowy ? : w prostych przypadkach
Zamiast if, rozważ użycie operatora warunkowego w prostych przypadkach:
// Zamiast if/elseconst message = user.isActive ? 'Welcome back!' : 'Please log in';// Z łańcuchowaniemconst status = user.isAdmin ? 'admin' : user.isModerator ? 'moderator' : 'user';// Z funkcjamiconst result = condition ? processData() : handleError();
💡 Pro Tip:
Te triki nie tylko przyspieszają kodowanie, ale także czynią kod bardziej czytelnym i łatwiejszym w utrzymaniu. Pamiętaj, że czytelność kodu jest równie ważna jak jego funkcjonalność.
