Azərbaycan Şirkətlərinin Saytlarında Ən Çox Görülən 7 JS Səhvi

Azərbaycan Şirkətlərinin Saytlarında Ən Çox Görülən 7 JS Səhvi

Salam, developer dostlar! Baku Stack olaraq son 3 ayda maraqlı bir eksperiment etdik: Azərbaycanda fəaliyyət göstərən 40-dan çox şirkətin veb saytını DevTools ilə açıb, console-a baxdıq, network tab-ı izlədik, performance audit keçirdik. Nəticə? Təəssüf ki, eyni JavaScript səhvləri sayt-sayt təkrarlanır.

Bu məqalə sənin üçündür — istər iş axtaran junior ol, istər artıq yerli bir şirkətdə çalışan mid-level developer. Bu səhvləri tanısan, müsahibədə fərqlənərsən, code review-da komandana dəyər qatarsan.

---

1. null və undefined yoxlaması olmadan API cavabını oxumaq

Bu, açıq ara ən geniş yayılmış səhvdir. Xüsusilə yerli bank və e-commerce saytlarında backend cavabı gözlənilməz formada gələndə sayt birbaşa ağ ekrana düşür.

javascriptKopyala
// ❌ Səhv: API cavabı null olarsa, sayt çökür
const userName = response.data.user.name;

// ✅ Düzgün: Optional chaining + fallback
const userName = response?.data?.user?.name ?? 'İstifadəçi';

Bunu 40 saytın 28-ində (70%) gördük. Xüsusilə React layihələrdə useEffect içində fetch edilən data-nın ilkin null halı handle olunmur. Nəticədə istifadəçi səhifəni açanda 0.5 saniyəlik ağ ekran görür — bu da bounce rate-i artırır.

---

2. Event listener-lərin təmizlənməməsi (Memory Leak)

Bir yerli taksi sifarişi saytında DevTools Memory tab-ını açanda gördük ki, hər səhifə keçidində RAM istifadəsi 3-5 MB artır və heç vaxt azalmır. Səbəb? addEventListener çağırılıb, amma removeEventListener heç vaxt yazılmayıb.

javascriptKopyala
// ❌ Səhv: SPA-da komponent unmount olanda listener qalır
window.addEventListener('scroll', handleScroll);

// ✅ Düzgün: React-da cleanup funksiyası
useEffect(() => {
  window.addEventListener('scroll', handleScroll);
  return () => {
    window.removeEventListener('scroll', handleScroll);
  };
}, []);

Bu səhv xüsusilə Single Page Application (SPA) arxitekturasında kritikdir. İstifadəçi 10-15 dəqiqə saytda qalsa, tab yavaşlayır, telefonda isə brauzer crash edir.

---

3. Sinxron localStorage əməliyyatları ilə main thread-i bloklamaq

Azərbaycan e-commerce saytlarının çoxunda səbət (cart) məlumatları localStorage-da saxlanılır. Problem ondadır ki, hər addToCart əməliyyatında bütün cart JSON.stringify edilib yazılır — və bu, main thread-i bloklayır.

javascriptKopyala
// ❌ Səhv: Hər klikdə böyük JSON yazılır
const cart = JSON.parse(localStorage.getItem('cart')) || [];
cart.push(newItem);
localStorage.setItem('cart', JSON.stringify(cart)); // 500+ məhsulda donma

// ✅ Düzgün: Debounce ilə yazma, və ya IndexedDB istifadə et
import { debounce } from 'lodash-es';

const saveCart = debounce((cart) => {
  localStorage.setItem('cart', JSON.stringify(cart));
}, 300);

Bir lokal elektronika mağazasının saytında səbətə 15 məhsul əlavə etdikdə "Add to Cart" düyməsinin cavab verməsi 1.2 saniyə çəkirdi. Debounce tətbiq etdikdən sonra bu rəqəm 80ms-ə düşdü.

---

4. async/await-də error handling unutmaq

Bu, müsahibələrdə də çox soruşulur. Bakıda iş müsahibəsinə gedəndə "async funksiyada xətanı necə tutarsınız?" sualına hazır ol, çünki yerli layihələrdə bu problem epidemiya səviyyəsindədir.

javascriptKopyala
// ❌ Səhv: try-catch yoxdur, unhandled promise rejection
async function fetchOrders() {
  const res = await fetch('/api/orders');
  const data = await res.json();
  return data;
}

// ✅ Düzgün: Xətanı tut və istifadəçiyə məlumat ver
async function fetchOrders() {
  try {
    const res = await fetch('/api/orders');
    if (!res.ok) throw new Error(`Status: ${res.status}`);
    const data = await res.json();
    return data;
  } catch (error) {
    console.error('Sifarişlər yüklənmədi:', error);
    showToast('Xəta baş verdi. Zəhmət olmasa yenidən cəhd edin.');
    return [];
  }
}

Maraqlı statistika: Chrome-un unhandledrejection event-ini dinləyəndə bir bank saytında 1 sessiyada orta hesabla 4.7 unhandled promise rejection qeydə aldıq.

---

5. Bundle size-a əhəmiyyət verməmək

Bir yerli delivery platformasının saytını Lighthouse ilə test etdik: ilk yükləmədə 2.8 MB JavaScript transfer olunurdu. Sıxılmamış halda isə 8 MB-dan çox idi. Səbəb? Bütün moment.js kitabxanası (locale faylları ilə birlikdə), istifadə olunmayan icon kitabxanası, və tree-shaking olunmamış utility library.

javascriptKopyala
// ❌ Səhv: Bütün kitabxananı import etmək
import _ from 'lodash';
import moment from 'moment';

// ✅ Düzgün: Yalnız lazım olan hissəni götür
import debounce from 'lodash-es/debounce';
import { format } from 'date-fns';

Azərbaycanda mobil internet istifadəçilərinin böyük hissəsi hələ də 4G istifadə edir və aylıq data limiti var. 2.8 MB JS yükləmə — Bakı metrosunun tunelində 12-15 saniyə deməkdir. İstifadəçi gözləmir, saytı bağlayır.

---

6. i18n və AZN valyuta formatlamasının səhv olması

Yerli saytların çoxunda qiymətlər string concatenation ilə göstərilir: price + ' AZN'. Problem ondadır ki, onluq ayırıcısı, minlik ayırıcısı və valyuta simvolu ölkə standartlarına uyğun olmur.

javascriptKopyala
// ❌ Səhv: Manual format
const display = product.price + ' AZN'; // "1500.5 AZN"

// ✅ Düzgün: Intl.NumberFormat istifadə et
const display = new Intl.NumberFormat('az-AZ', {
  style: 'currency',
  currency: 'AZN',
  minimumFractionDigits: 2
}).format(product.price); // "1 500,50 ₼"

Bu kiçik detal istifadəçi etibarını artırır. Professional görünən qiymət formatı = daha yüksək conversion rate.

---

7. Console.log-ları production-da saxlamaq

Bəlkə gülməli görünür, amma 40 saytın 22-sində (55%) production build-də console.log, console.warn, hətta console.error mesajları qalıb. Bir şirkətin saytında console-da düz API_KEY çap olunurdu.

javascriptKopyala
// .eslintrc.js-ə əlavə et
module.exports = {
  rules: {
    'no-console': ['error', { allow: ['warn', 'error'] }]
  }
};

Və ya build prosesinə terser plugin əlavə et ki, production-da bütün console çağırışları avtomatik silinsin.

---

Yekun: Bu səhvləri bilmək sənə nə qazandırır?

Bakıda JavaScript developer maaşları hazırda junior üçün 800-1200 AZN, mid-level üçün 1500-2800 AZN, senior üçün isə 3500-6000 AZN civarındadır. Junior-dan mid-level-ə keçidin ən sürətli yolu — bu tip real-world problemləri tanımaq və həll etməyi bilməkdir.

Əgər bu gün çalışdığın və ya müsahibəyə getdiyin şirkətin saytını açıb DevTools-da bu 7 problemi yoxlasan, həm öz biliyini test edərsən, həm də müsahibədə danışmağa real nümunən olar.

Pro tip: Növbəti müsahibədən əvvəl həmin şirkətin saytını Lighthouse ilə scan et. Tapdığın performance problemlərini müsahibədə diplomatik şəkildə qeyd et — bu, sənin proaktiv developer olduğunu göstərir.

Kodunuz təmiz, console-unuz boş olsun! 🚀

Baku Stack | 13 Aprel 2026