Jasur Developer | Blog


Гео и язык канала: не указан, не указан
Категория: не указана


IT blog of @jasurkhaitov
Bilganlarim va foydali bo'lishi mumkin bo'lgan ma'lumotlarini barchaga ulashish maqsadida ochilgan maqsadli kanal.
For Discussion @JasXCommunity

Связанные каналы

Гео и язык канала
не указан, не указан
Категория
не указана
Статистика
Фильтр публикаций


🖥 Javascript Event Loop (2-qism)

Misol :console.log(1);

setTimeout(() => {
console.log(2);
}, 1000);

console.log(3);

setTimeout(() => {
console.log(4);
}, 3000);

console.log(5)

// Output 1 3 5 2 4

1. console.log(1) call stack'ga tushadi va sinxron funksiya bo'lgani uchun birdaniga run bo'lib ekranga 1 chiqadi.

2. Call Stack bo'shagandan keyin setTimeout() tushadi va bu asinxron funksiya bo'lgani uchun Javascript Engine bu funksiyani Web API'ga jo'natadi. Web API'da vaqt hisoblanib tugagandan keyin Callback Queue'ga jo'natiladi va MacroTask'ga joylashadi.

3. Yana console Stack'ga tushadi va run bo'ladi.

4. Navbat 3 sekundlik setTimeout()'ga keladi va MacroTaskga jo'natiladi.

Eng oxirida hamma sinxron funksiyalar bajarilib boi'lgandan keyin Call Stack bo'shaydi va navbat Callback Queue'ni ichidagi asinxron funksiyalarga keladi. Macrotask'dagi asinxron funksiyalar navbat bilan ketma ketlikda Call Stack'ga o'ta bo'shlaydi va run bo'ladi.

// Output: 1 3 5 2 4

1 3 5 - sinxron funksiya output
2 4 - asinxron funksiya output

Bir vaqtning o'zida Microtask'da Promise va Macrotask'da setTimeout funksiya to'g'ri kelib qolsa Event Loop promise funksiyani birinchi Call Stack'ga jo'natadi.


Callback Queue'dagi funksiyalarni yana qayta Call Stack'ga chiqaruvchi mexanizm EVENT LOOP deyiladi.

Loupe'da Event Loop'ni qanday ishlashini yaxshiroq ko'rish va tekshirish mumkin.

📹 https://www.youtube.com/watch?v=HDqyG-IEJBc&t=129s

#javascript #eventLoop

💠 @JasXDev


🖥 Javascript Event Loop (1-qism)

Deyarli har bir frontend interviewda so'raladigan mavzu


Event Loop - kodni asinxron ravishda ishga tushirish uchun asosiy mexanizm hisoblanadi.

Javascript single-threaded bo'lgani uchun bir vaqtni o'zida faqat bitta ishni bajaradi. Ya'ni bitta funksiya run bo'ib turga bo'lsa keyinchi funksiya ishga tushmaydi.

Memory Heap JS ma'lumotlarni saqlaydigan xotira.Masalan: array, obyekt, funksiya

Call Stack hamma javascript kodlar bajariladigan konteyner hisoblanadi va LIFO (Last in First out) prinsip bo'yicha ishlaydi, ya'ni oxirgi kod qo'shiladi, birinchisi olib tashlanadi.

Web API (Application Programming Interface) web uchun programming interface hisoblanadi va 2 turga bo'linadi (Browser API va Server API).
*Browser API'ga web browserni vazifalari kiradi. Masalan, setTimeout() va har xil eventlar( onClick, onChange va hokazo... )
*Server API'ga serverni vazifalari kiradi. Masalan, XMLHttpRequest va Fetch API

Callback Queue JavaScript runtime orqali asynchronous vazifalarni ushlab turish uchun ishlatiladigan mexanizm hisoblanadi va bu 2 turga bo'linadi (Microtask va Macrotask)
*Microtask Queue'ga promise, callback, async funksiyalar va queueMicrotask'lar kiradi.
*Macrotask Queue'ga setTimeout va setInterval kiradi.

🔗 Havola:
* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Event_loop

#javascript #eventLoop

💠 @JasXDev


🗂 Multi-threaded tillar

Multi-threaded tillarda kodlar parallel holatda run bo'ladi, ya'ni bir vaqtning o'zida har xil vazifalarni bajarish imkonini beradi.

Eng mashxur multi-threaded tillardan biri bu C#.

Thread - execution path hisoblanadi, ya'ni kod run bo'lishini va run bo'lish jarayonini ko'rsatib beruvchi roadmap'ga o'xshaydi


C#'da default holatdagi thread bu main thread hisoblanadi

using System.Threading

🖥 Misol :
using System;
using System.Threading;

public class MyProgram {
class Program {
static void Main(string[] args) {
Thread mainThread = Thread.CurrentThread;
mainThread.Name = "Main Threaded";

Thread thread1 = new Thread(CountDown);
Thread thread2 = new Thread(CountUp);

thread1.Start();
thread2.Start();

Console.ReadKey();
}

public static void CountDown() {
for (int i = 3; i > 0; i--) {
Console.WriteLine(i);
Thread.Sleep(1000);
}
}

public static void CountUp() {
for (int i = 1; i


🗂 Single-threaded tillar

Single thread tillarda, kodlar ketma ket holatda run bo'ladi, ya'ni bir vaqting o'zida faqatgina bitta vazifa bajariladi va bu turdagi tillar ishlash uchun juda oson hisoblanadi.

Eng mashxur single-threaded tillardan biri bu Javascript. JS web browserda DOM, HTTP so'rovlar va shunga o'xshash vazifalarni bajaradi. Shuningdek, non-blocking I/O va asynchronous bo'lib ishlay oladi. Javascript har doim Execution Context da ishlaydi. Execution Context bu container hisoblanadi va hamma Javascript kodlar Context da bajariladi.

Execution Context ikkita qisimimga ega, memory va code.

* Memory qismi variable environment deb ham ataladi va yaratilgan hamma o'zgaruvchilar memory qismida yig'iladi.

* Code qismi Thread of Execution deb ham ataladi va u yerga run bo'ladigan code lar (bajariladigan vazifalar) yig'iladi. Javascript'da Thread of Execution - Single hisoblanadi, ya'ni hamma bajariladigan kodlar bir qatorda ketma-ket joylashadi va o'sha tartibda run bo'ladi.

🖥 Misol:
let jasx = true;

setTimeout(() => {
jasx = false;
}, 1000);

while (jasx) {
console.log('salom', jasx);
}

Misolda jasx nomli o'zgaruvchi ochilyapti va default holatda true qiymati berilyapti. O'zgaruvchi variable environment ga saqalanadi. Bu yerda 3 ta vazifa bor va ular ketma-ket call stack da yig'iladi.

Birinchi setTimeout() call stack'ga tushadi va setTimeout asinxron funksiya bo'lgani uchun run qilmay turib Javascript Engine bu funksiyani WebAPI ga jo'natadi. Ikkinchi call stack ga while loop tushadi va sinxron funksiya bo'lgani uchun bajariladi.

WebAPI ga tushgan asinxron setTimeout funksiyaga sinxron funksiyalar ishga tushib call stack bo'shagandan keyin navbat keladi.

Ammo bir muommo bor, jasx o'zgaruvchi true qiymatda bo'lgani uchun while loop hech qachon bajarishdan to'xtamaydi, shuning uchun asinxron funksiyaga navbat kelmaydi va setTimeout ishlamaydi.

🔗 Havola:
* https://dev.to/rajajaganathan/prove-that-javascript-runs-in-a-single-thread-1d7n

#javascript #singleThreaded

💠 @JasXDev


🖥 Javascript'da "Type"

"O'zgaruvchiga ma'lumot turini berish"

Javascript o'zgaruvchilarga /**
@type { variable_type } */ orqali ma'lumot turini ko'rsatishimiz mumkin.

/** @type { number | string | boolean }

"Type Checking"

Javascript "Dynamic Typed" til bo'lgani uchun "Type Checking" ga o'xshash jarayonlar runtime da ishga tushadi. Javascript ma'lumot turlarini static tahlil qilish ( ya'ni run bo'lishidan oldin compile bo'layotgan payta tahlil qilish ) uchun bir qancha tool lar ishlab chiqilgan.

* @ts-check - Kodni sintaksisini tekshiradi.

* @ts-expect-error vs @ts-ignore - ts-check orqali chiqqan errorlarni hisobga olmaydi ( ko'rsatmaydi ).

* @ts-nocheck - Sintaksis tekshiruvni to'xtatadi

Misol:
/** @type { number } */
// @ts-check

let a = "Hello"
// Error: Type "Hello" is not assignable to type "number

Foydalanish : Type Checking qilish kerak bo'lgan .js faylni birinchi // orqali commentga olib birinchi qatoriga yoziladi.


"Javascript funksiyaga Type berish"

Javascript funsiyaning parametr va return qismiga, @param { } va @returns { } maxsus teglar orqali ma'lumot turini ko'rsatishimiz mumkin.

* @param - funksiya parametrga type ko'rsatish uchun ishlatiladi.

Funksiya parametri har qanday turdagi ma'lumot qabul qilishi uchun ma'lumot turiga * berishimiz kerak.
/** @param { * } a */

* @returns - funksiya qaytaradigan ma'lumotga type ko'rsatish uchun ishlatiladi. Agar funksiya bironta ma'lumot qaytarmasa @returns ga void ma'lumot turini ko'rsatishimiz kerak.

/** @returns { string | void } */
// Funksiya string qaytaradi yoki hech narsa qaytarmaydi

Misol:

/**
* @param {number} a
* @param {number} b
* @returns {(number | void)}
*/

function sum(a, b) {
return a + b;
}

function sum(a: number, b: number): number | void {
return a + b;
}

🔗 Havola:
* https://www.typescriptlang.org/docs/handbook/intro-to-js-ts.html
* https://t.me/AbduazizPy/11
* https://jsdoc.app/tags-param

#javascript #typeChecking

✅️@JasXDev


Assalomu alaykum 🔥

Ismim Jasur. Frontend (React ⚙️) dasturchiman.
Bu kanalda IT bo'yicha o'zim bilgan bilimlarni va foydali bo'lishi mumkin bo'lgan ma'lumotlarni sizlar bilan bo'lishmoqchiman. Shuningdek, sifatli postlar joylab boraman. Inshaalloh.

🌐 Linkedln ⚙️ GitHub

121 0 2 11 12
Показано 6 последних публикаций.

26

подписчиков
Статистика канала