Execution context

Execution context JavaScriptdagi bajariladigan code muhitidir. Execution context current scope, variablelar va funksiyalar haqida ma'lumotni o'z ichiga oladi. Har safar funksiya chaqirilganda yangi execution context yaratiladi.

Execution contextda 2 ta componentdan iborat.
1. Memory component 2. Code component

Execution context ikki bosqicha yordam beradi. Yaratiladi (Creation) va Bajarilishi (Execution).
Birinchi bosqichda, o'zgaruvchilar (variables) va funksiyalar (functions) larga xotirani ajratish.
Ikkinchi bosqichda, JavaScript code line by line asosida bajariladi va bunda xotiradagi o'zgaruvchilarni belgilaydi. Har bir chaqirilgan funksiya o'zining local execution contextini yaratadi.

Asosiy maqsadimiz foydalanishdan?
JavaScriptda execution contextdan foydalanishning asosiy maqsadi kodning qanday ishlashini tushunish va uni to'g'ri boshqarishdir.

Misol uchun:

var globalVar = "I am globalVAR";

function outerFunction() {
    var outerVar = "I am outerVAR";
    
    function innerFunction() {
        var innerVar = "I am innerVAR";
        console.log(globalVar);  // "I am globalVAR"
        console.log(outerVar);   // "I am outerVAR"
        console.log(innerVar);   // "I am innerVAR"
    }
    
    innerFunction();
}

outerFunction();

Ishlashiga keladigan bo'lsak:
Global kontekstda globalVar o'zgaruvchisi yaratiladi.
outerFunction chaqirilganda, yangi funksiya bajarilish konteksti yaratiladi va outerVar o'zgaruvchisi shu kontekstda yaratiladi.
innerFunction chaqirilganda, yana yangi funksiya bajarilish konteksti yaratiladi va innerVar shu kontekstda yaratiladi.
Har bir kontekst o'zining 'scope chaini' ga ega bo'ladi va bu orqali o'zgaruvchilarni qidiradi.

Ushbu jarayon advance holatlarda ham line by line asosida amalga oshirilib ishlashda davom etadi.

Manba link va medium

Foydali bo'lsa share qilib yuboraverasizlar 😄.

Shu savol bo'yicha siz qanday tushunchaga egasiz, commentda qoldirishingiz mumkin!

@Muhammadislom_Dev

Savollaringiz boʻlsa:
https://t.iss.one/anonaskbot?start=0rxw6HWlNU_R4ah

Soha boʻyicha va qoʻshimcha savollar boʻlsa javob beraman 🤝.

Shunday savol keldi!

Remote ish ham topsa bo'ladi bu ancha qiyinku lekin eplasa bo'ladi.

Remote ishlar uchun linkedin.com bundan foydalanish kerak. Ko'p kompaniyalarda intern ochiladi.

O'zini levelidan yuqori levelga chiqish.

Javascript bo'yicha nazariy bilimni yaxshilash kerak, bu ko'pchilikni nozik tomoni, xususan o'zim ham tayyorlanib turaman interview savollariga. Amaliy tomonlama murakabroq apilar bilan ishlash kerak.
Masalan:
Dashboard chartlar, auth, crud, drag and drop.

Meni fikrim shu qisqacha, linkedinga kirib topshirib ko'raverish kerak ishlarga.

Assalomu alaykum hayrli kun barchaga!

Bugun rejadagi postlar: o'zim suhbatlarda yo'l qo'ygan xatolarim va interviewda tushadigan savollardan birini ko'ramiz.

Ungacha bittada reaksiya qoldirib turinglar hali asosiy yangilikni aytmadim 😌.

@Muhammadislom_Dev

O'zim suhbatda qilgan xatolarim!

Birinchi topshirgan interview hali ham esimda AbuTech (2022-yil) kompaniyasining stajirovka uchun suhbat qilingandim. Suhbat to'satdan bo'lganligi sabab savollarga hotirjam va o'zimga ishonmagan holda yakunlangan suhbat. Kutilganidek reject bo'lgan.

O'zimni xotirjam his qila olmasdim suhbatlarda.

Bu holat nafaqat menda balki yangi boshlaganlarda ham uchrab turadi. Buni yo'qotishni yagona yo'li o'zingizdan leveli sal yuqori bo'lgan inson bilan suhbat qilish, communication skillini rivojlantirish kerak.

Communication dasturchilar uchun shartmi deyishiz mumkin.

Albatta juda muhim, sababi loyihadagi yechimni ya'ni o'zingizni fikringizni aniq va to'g'ri yetkazib berishiz kerak. Bu suhbatlarda ham yaxshi foyda keltiradi. Xayojon va qo'rquvni, o'zingizni sal bo'lsa-da bosib olishga yordam beradi.

Texnik suhbatga tayyorlanmaslik, bir joyda qotib qolish.

Texnik suhbatlarga doim tayyorlanib borish kerak nazariy tomonlama, code tomonlama siz zo'r bo'lishiz mumkin lekin uni nazariy jihatdan tushuntirib berolmasangiz befoyda. Interviewlarda ham dastlab nazariy tomonlama keyin amaliy tomonlama bo'ladi. Bir joyda qotib qolmaslik uchun doim takrorlab turish kerak. Bu men yo'l qo'ygan eng katta xatolardan biri.


Siz kabi men ham oddiy kursni tamomlab hozirda o'zimni ishimni topkan bir inson sifatida yozdim bu postni, kim uchundir foydali bo'lsa xursandman.

Kichik xatolarni to'g'rilashimiz kerak.

Foydali bo'lsa reaksiya bildirib qo'yasizlar, commentda fikringizni bemalol bildirishingiz mumkin xato va kamchiliklar bo'lsa uzr!

@Muhammadislom_Dev

DOM va BOM nima?

📌 DOM (Document Object Model)

DOM - bu HTML hujjatining tuzilishini daraxt shaklida aks ettiruvchi model bo‘lib, JavaScript orqali sahifa elementlarini manipulyatsiya qilish imkonini beradi.

const button = document.querySelector('button');
button.addEventListener('click', () => {
    document.body.style.backgroundColor = 'lightblue';
});

🌐 BOM (Browser Object Model)

BOM - bu brauzer muhitini boshqarish imkonini beruvchi obyektlar to‘plami bo‘lib, brauzer oynasi, URL, history, console, alert va boshqa API’lar bilan ishlashga yordam beradi.

console.log('Page width:', window.innerWidth);
if (confirm('Do you want to refresh the page?')) {
    location.reload();
}

📌 Xulosa:

DOM – bu veb-sahifaning tarkibiy qismlari bilan ishlash.

BOM – bu brauzer bilan ishlash uchun ob’ektlar to‘plami.

Foydali bo'lsa share qilib qo'yasizlar bittadan reaksiya 🔥

@Muhammadislom_Dev

Assalomu alaykum hayrli kun barchaga!
Hammani dasturida turli xil xatoliklar chiqadi bugun shuni qanday debug qilish haqida batafsil yozaman.

Ungacha sizlarga bir savolim bor, interviewda Event loop haqida so'rasa qanday javob berasizlar?

Keyin o'zimni javobimni yuboraman, aktiv bo'lib turinglar hay🙂.

@Muhammadislom_Dev

Chatgpt yoki boshqa AI lardan nima maqsadda foydalanasiz?

Men ko'proq bir nechta tillardagi tarjima uchun foydalanyapman so'nggi paytlarda.

AI ishni ancha osonlashtiryapti so'ngg paytlarda.

Fikringizni commentda qoldiring men uchun qiziq albatta 😌.

@Muhammadislom_Dev

🔍 Dasturdagi muammolarni qanday debug qilish mumkin?

1️⃣ console.log() – Eng oddiy va tezkor usul
🛠 Qachon ishlatish kerak?

Kodning qaysidir joyigacha yetib borganini tekshirish uchun
O‘zgaruvchilarning qiymatini tekshirish uchun

2️⃣ debugger – Kuchli vosita
🔎 Qachon ishlatish kerak?

Murakkab muammolarni qadam-baqadam tahlil qilish uchun
Kod qanday ishlashini vizual ravishda tushunish uchun

function calculate(a, b) {
   debugger; // Kod shu joyda to‘xtaydi
   return a + b;
}
calculate(5, 10);

debugger ni kodga qo‘shing
Brauzerning Developer Tools (F12 yoki Ctrl + Shift + I) da Sources bo‘limidan kodni qadam-baqadam tekshiring.

O'zimga kelsam, xatoni to'g'rilash uchun, boshidan kelaman xatoni bartaraf etish uchun. Bir paytlari vscodeda amalni bajarib productiondan tekshirgan paytlarim ham bo'lgan 😄.

Sizlarda ham bo'lib turadimi, code editorda ishni bajarasiz uni natijasini productiondan ko'rmoqchi bo'lasiz.

Foydali bo'lsa bittadan reaksiya bilan yondirvoraylik😌.

@Muhammadislom_Dev

🎯 JavaScriptda Event Loop nima?

Event Loop – bu Call Stack, Callback Queue va Microtask Queueni boshqarib, kodning to‘g‘ri bajarilishini ta’minlaydigan mexanizmdir.

🔹 Event Loop qanday ishlaydi?
1️⃣ Call Stack (chaqiruv steki) – Funksiyalarni bajarish ketma-ketligi. Agar funksiya bajarilishi tugamasa, boshqa kodlar ishlamaydi.
2️⃣ Web APIs – setTimeout(), fetch(), DOM events kabi asinxron amallarni brauzer API orqali boshqaradi.
3️⃣ Callback Queue (Macrotasks) – setTimeout, setInterval kabi funksiyalar ishlaganda shu yerga tushadi.
4️⃣ Microtask Queue (Microtasks) – Promise.then(), queueMicrotask() kabi funksiyalar bu yerda kutadi.
5️⃣ Event Loop – Call Stack bo‘sh bo‘lsa, Callback Queue yoki Microtask Queue’dan kodlarni olib bajaradi.

Macrotask: setTimeout(), setInterval(), setImmediate() – Callback Queue orqali ishlaydi.
Microtask: Promise.then(), MutationObserver(), queueMicrotask() – Microtask Queue orqali ishlaydi.

Misol:

console.log("1️⃣ Start");

setTimeout(() => console.log("3️⃣ Timeout"), 0);

Promise.resolve().then(() => console.log("2️⃣ Promise"));

console.log("4️⃣ End");

🚀 Xulosa:
✔ JavaScript asinxron kodlarni Event Loop orqali boshqaradi.
✔ Microtasks (Promise.then()) doimo Macrotasks (setTimeout()) dan oldin ishlaydi.
✔ Call Stack bo‘shagach, Event Loop navbatdagi kodni bajaradi.

📢 Sizni intervyuda Event Loop haqida qanday savollar qiynagan? Kommentda yozib qoldiring fikr almashamiz!

@Muhammadislom_Dev

Assalomu alaykum hayrli kun barchaga!
Frontend Amaliyot bo'yicha kecha Redux, Redux toolkit mavzulari o'tib berdim va asosiy qismini ham yakunladik.

Kelasi haftaga bir ishni boshlash arafasidaman, u haqida bugun batafsil yozaman.

@Muhammadislom_Dev

Frontend Amaliyot bepul olib borgan loyihamni bu hafta yakuniga yetkazaman va yaqinda shu o'tilgan darslar bo'yicha real projectda amaliyot tashkil qilmoqchiman.

Amaliyot uchun admin panel bo'ladi, barcha admin panelda ishlashda qiynaladi, shu sabab kerakli o'tilgan mavzu bo'yicha amaliy ham ko'rsatib beraman.

Qatnashish bepul bo'ladi va bu admin panel real projectdagi API dan foydalanaman. O'zim bir nechta proyektlar uchun admin paneldan foydalanaman va uni universal ko'rinishga keltirib olaman. Shuni 0 dan boshlagan holda qilish jarayonini ko'rsatib beraman.

Agarda o'zingiz foydalanib qilmoqchi bo'lsangiz amaliyot davomida foydalanishga beraman va yakunda admin panelni o'zingizni real projectlariz qatoriga qo'shishingiz mumkin.

Shunday qilsam qatnashgan bo'larmidingiz? Fikringizni commentda qoldiring!

Bugun harakat ertaga natija sizni kutmoqda!

@Muhammadislom_Dev

Qilayotkan ishingizni professional qilishga urining!

Bugun bir odam bilan koʻrishib qolgandim sentyabr oyida sayt qilib bergandim kichik bir biznesi uchun, shopping sayt edi mahsulotlar va u haqida maʼlumotlar koʻra oladigan.

Keyin aytib qoldi qilib bergan saytingiz meni mijozlarimga yordam berdi. Kelgan insonlar koʻp qismi sayt orqali keldi va mahsulot haqida mendan informatsiya soʻramadi dedi. Bilasiz doʻkonga borganda albatta mahsulotlar haqida maʼlumot olamiz. Sizga bergan pulimga roziman dedi.

Toʻgʻrisi bunaqa gaplar sal boʻlsa-da insonni hursand qiladi ekan. Ish koʻp paytida charchaydi hamma, baʼzi paytlari qilgim ham kelmaydi.

Bundan 3 yil oldin saytdagi oddiy xatolarni toʻgʻrilay olmasdim yoki qila olmasdim. Shundan keyingi mehnatlarni natijasini olyapman.

Yakunda nima demoqchiman, men yuqoridagi kabi amaliy yordam koʻrsatganda foydalanib qolishni sizlarga tavsiya qilardim, chunki menda tajriba va xatolarimdan olgan xulosalarim bor. Qilayotkan ishimizni professional darajada yondashishga har birimiz urinaylik.

Harakatlar oʻz natijasini beradi albatta.

@Muhammadislom_Dev

Assalomu alaykum hayrli kun barchaga!

P:s Bugungi kun uchun foydali postlar share qilaman, faqat bitta yordamilar ham kerak bo'ladi.

🎭 Impostor Sindromi

Bu o‘z yutuqlaringizni kichraytirish yoki ular tasodifiy deb o‘ylash holati. Masalan, biror loyiha muvaffaqiyatli chiqqanida, “Bu men tufayli emas, omadsizlik bo‘lsa kerak” deb o‘ylash mumkin. Yoki yangi texnologiyani o‘rganayotib, “Boshqalar mendan aqlliroq, men bu sohaga mos emasman” degan fikrlar paydo bo‘ladi.

💻 Dasturchilar Nega Ko‘proq Sezadi?

Doimiy rivojlanish: Texnologiyalar tez o‘zgaradi, yangi narsalarni o‘rganishga ulgura olmaslik hissi paydo bo‘ladi.
Internetdagi muvaffaqiyat hikoyalari: GitHub’dagi mukammal kodlar yoki LinkedIn’dagi “idealdan ham mukammalroq” postlar sizni o‘zingizni pastroq his qilishga undaydi.
Kompleks muammolar: Kod yozishdagi xatolar yoki murakkab muammolar yechishda qiynalish, o‘zingizni yetarli darajada emasdek his qilishga olib keladi.

🔑 Bunga Qarshi Kurashish Yo‘llari:

Muvaffaqiyatlaringizni tan oling: Har bir kichik yutug‘ingizni qayd eting va o‘zingizni rag‘batlantiring.
Qiyoslashni to‘xtatish: O‘zingizni faqat kechagi kundagi o‘zingiz bilan taqqoslang.
Xatolar – bu o‘sishning bir qismi: Har bir xato – bu yangi bilim olish imkoniyati.
Boshqalar bilan tajriba almashish: Boshqalar ham xuddi shunday hissiyotlarni boshidan kechirayotganini bilish, sizga yengillik beradi.

Har bir muvaffaqiyat – sizning mehnatingiz va bilimlaringiz natijasi. O‘z qadringizni biling va doim o‘zingizga ishoning!

Reaksiya bilan yondirib yuboraylik hay 🔥.

@Muhammadislom_Dev

Assalomu alaykum hayrli kun barchaga, Juma Muborak bo'lsin ❤️‍🔥.

Real loyiha muammosi

Dasturlashni yangi boshlaganimda real ishlab turadigan loyiham boʻlmasdi, netlify yoki vercelga deploy qilingan loyihalar edi hammasi. Haqiqiy real loyihani apisidan foydalanib koʻrmagandim qachonki ishga kirganimda ishlatkandim.

Bilaman sizlarda ham shunday muammolar bor. Bunga yechim albatta men sizlarga bermoqchiman. Yaqinda boshlangan loyihamni admin panel qismini birga qilishni sizlarga taklif qilsam qoʻshilgan boʻlarmidiz. Sizdan hech nima soʻramayman. Faqat ohirigacha boradiganlar kerak menga.

Oʻzim loyihani qilaman, real loyihadagi apidan foydalanaman, video dars shaklida olib boraman.
Albatta bu admin panel boʻladi kamida 4-5 sahifadan iborat.

Hech kim bunday taklif bermaydi deb oʻylayman, ohirigacha borsangiz oʻzingizga yaxshi bir loyiha boʻladi.

Shunday tashkil qilsam qatnashgan boʻlarmidiz, commentga yozib qoldiring.

Bepul bilim va tajribadan foydalanib qolish kerak!

@Muhammadislom_Dev

O'ynaganlar bormi 😄. Yoshligim esimga tushkandek bo'ldi.

Vaqt tez o'tyapti, harakatni to'xtatmaslik kerak!

@Muhammadislom_Dev

Assalomu alaykum hayrli kun barchaga!

Real loyiha bilan amaliyot dasturini dushanba kuni qabulini ochaman, bugun batafsil tushuntirib beraman.

Amaliyot dasturidan nimalar o'rganish mumkin?

Real project qilinadi aytib o'tkanimdek, admin panel real loyiha uchun tanlab olindi.

Bunda siz:
✔️ API bilan to'g'ri ishlashni o'rganasiz
✔️ Login/Register qismidagi token bilan ishlashni o'rganasiz, accessToken va refreshToken bilan birga.
✔️ CRUD amaliyotlarini qilib o'rganasiz.
✔️ React query yordamida real loyihadan bilim ko'nikma olasiz

Bu kimlar uchun:
- Kursni tamomlagan va real loyiha orqali o'zining tajribasini oshirmoqchi bo'lganlar uchun!

Barcha uchun bepul hamma qatnashishi mumkin, loyiha uchun dizayn bo'ladi va shu asosida qilinadi, o'zingiz uchun bitta loyiha bo'lib qoladi kelajak uchun.

Faqat ohirigacha borish kerak albatta, chunki hech kim o'rgatmaydi bunday narsalarni bepulga, o'zingiz youtube orqali ko'rishingiz mumkin albatta. Jonli ko'rgan baribir yaxshi hammamiz uchun.

Online formatda va telegramda olib boriladi.

Foydalaniladigan texnologiyalar:
JavaScript, Reactjs, React query, Chakra UI.

Iltimos faqat share qilishda yordamilar kerak ushbu postni share qilib yuborselar zo'r bo'lardi 🔥.

Qabul kuni: dushanba.

@Muhammadislom_Dev

Bu amaliyot barcha uchun bepul!

Loyiha sifatida admin panel uchun dizayn qilinadi va shu asosida olib boriladi. Dars telegramda olib boriladi.

Barcha qatnashishi mumkin Vue yoki boshqa tehnologiyalardan foydalanadiganlar ham. Faqat men React yordamida qilaman, asosiy funksionallik qismlarini jonli dars sifatida olib boriladi.

Bu dastur men Frontend Amaliyot 1.0 olib borganimning davomi sifatida amaliyot uchun tashkil qilinmoqda, ixtiyoriy inson qatnashishi mumkin. Yakunda natijalarni sarhisob qilamiz.

@Muhammadislom_Dev