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

🖥 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:
* typescriptlang.org/docs/handbook/intro-to-js-ts.html
* t.me/AbduazizPy/11
* jsdoc.app/tags-param

#javascript #typeChecking

✅️@jasurkh_dev

🗂 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:
* dev.to/rajajaganathan/prove-that-javascript-runs-in-a-single-thread-1d7n

#javascript #singleThreaded

💠 @jasurkh_dev

🗂 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 <= 3; i++) {
                Console.WriteLine(i);
                Thread.Sleep(1000);
            }
        }
    }
}

// Output 3 1
// 2 2
// 1 3 

Bu kodda bir vaqtning o'zida 2 ta thread bajarilyati, thread1 va thread2. Bu thread'larda 1 secund oraliq bilan loop ishlayapti

new Thread orqali yangi Thread yaratiladi va .Start() orqali run qilinadi

Thread jasx = new Thread(some_Funtion);
jasx.Start(); 

// jasx nomli yangi thread yaratilyapti va run qilinyapti 

🔗 Havola:
* bootcamp.uxdesign.cc/single-and-multi-threaded-programming-languages-benefits-and-specificity-explained-%EF%B8%8F-37807f4bad0

📹 youtube.com/watch?v=rUbmW4qAh8w

#csharp #multiThreaded

💠@jasurkh_dev

🖥 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 keyingi 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 qo'shilgan kod birinchi run bo'ladi

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:
* developer.mozilla.org/en-US/docs/Web/JavaScript/Event_loop

#javascript #eventLoop

💠 @jasurkh_dev

🖥 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.

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

#javascript #eventLoop

💠 @jasurkh_dev

📱 SEO - Search Engine Optimization

Qidiruv tizimini optimallashtirish.

Bu foydalanuvchilar website'ni Google, Microsoft Bing va boshqa qidiruv tizimlaridan qidirganda yuqori o'rinda ko'rinishini optimallashtirish jarayoni.

Technical SEO - Website'ni arxitektura'sini yaxshilash.

* robots.txt
Robots.txt fayli veb-saytlar tomonidan veb-brauzerlarga saytning qaysi sahifalari yoki bo'limlarini indekslanmaslik kerakligi haqida ko'rsatmalar berish uchun foydalaniladigan matn faylidir.

Bironta web sahifaga kirilsa, Googlebot bu page'ni ma'lumotlarini analiz qiladi va Google index'ga to'playdi

robots.txt fayl website'ning root directory'da joylashgan bo'ladi.
Youtube: youtube.com
Robot: youtube.com/robots.txt

Bu fayl bir qancha directive (ko'rsatmalar) guruhidan tashkil topgan va har bir guruh User-agent:'dan boshlanadi.

User-agent: * 
// Bu directive(ko'rsatma)dan barcha web crawler foydalanadi. 

Disallow: /private/ 
// Har qanday web crawler bu /private/ directory orqali bironta sahifaga kirmasligini ta'minlaydi. 

Allow: /public/ 
// /public/ directory orqali kirish imkoniyatini beradi.

SEOptimer robots.txt fayl yaratish uchun

* meta tag
meta tag html faylni ichida head qismida yoziladi va browser'ga website haqida ko'proq ma'lumot beradi.

<head>
    <meta name="description" content="">
    <meta name="robots" content="">
    <meta http-equiv="refresh" content="">
    <meta name="author" content="">
    <title>Example Website</title>
</head>

Generator tag yaratish uchun

* alt attribute
Bu alt attribute html img element ichida bo'ladi va browser'ga rasm haqida ma'lumot beradi.

<img src="" alt=""> 

Browser rasm haqida ma'lumot olganidan keyin, bu rasm qidiruv tizimida yuqori o'rinda turishiga yordam beradi.

🔗 Havola:
* developers.google.com/search/docs/crawling-indexing/robots/intro
* ahrefs.com/blog/seo-meta-tags

📹 youtube.com/watch?v=bi5bfH_gVWE&t=54s

#seo #searchEngine

💠 @jasurkh_dev

⚙️ Javascript Closure

Closure bu JavaScript’da o’zidan tashqaridagi funksiyaning leksik muhit'dagi o’zgaruvchilarga kirish huquqi bo’lgan yopiq funksiya.

Misol:

let a = 10

function log() {
    a = 5
    function jasx() {
        console.log(a);
    }
    jasx()
}
a = 20

log() // output: 5

Bu holatda jasx() closure funksiya hisoblanadi. jasx() funksiyada console'ga a o'zgaruvchini chiqarish buyruq beriladi

Lekin bu funksiya ichida a o'zgaruvchi bo'lmagani uchun o'zidan tashqaridagi funksiyadan qidiradi va o'zgaruvchi bo'lgani uchun natija 5 ga teng bo'ladi.

JavaScript Engine o'zgaruvchi qidiryotganda birinichi local scope dan qidiradi natija topilmasa, global scope'ni tekshiradi

* Closure qanday ishlaydi ?

Javascript single-threaded til bo'lgani uchun, bir vaqtda bitta execution context'ni bajaradi. Hamma context'lar esa stack'da saqlanadi.

Stack esa LIFO (Last In First Out) sxema bo'yicha ishlaydi, ya'ni Oxirgi qo'shilgan kod Birinchi olib tashlanadi.

Har doim run bo'layotgan context stack'da birinchi o'rinda turadi.

Birinchi misoldagi kodni oladigan bo'lsak, u yerda 3 ta execution context bor. Global, log() va jasx() execution context.

Bu context'larni stack'da joylashish tartibi:

1.jasx() execution context
2.log() execution context
3.global execution context 

Birinchi jasx() context bajariladi va u yerdan o'zgaruvchini topolmaydi. jasx() context vazifasini bajarib bo'lgandan keyin stack'dan o'chib ketadi va navbat log() context'ga keladi. log() context'da o'zgaruvchi topilgani uchun birdan console'ga o'zgaruvchi chiqadi.

Agar context'lar ichida o'zgaruvchi topilmasa, global context'gacha o'zgaruchini izlab boradi. Unda ham topilmasa ReferenceError bo'ladi

Har doim Stack'da eng pastda joylashgan va eng oxirida run bo'ladigan Context Global Execution Context hisoblanadi.

🔗 Havola:
* freecodecamp.org/news/lets-learn-javascript-closures-66feb44f6a44

📹 youtu.be/vKJpN5FAeF4?si=s8SANTk24NTcOHc-

#javascript #closure

💠 @jasurkh_dev

🏠 Nega natija 0 1 2 3 emas ?

setTimeout ichidagi callback funksiya'da i o'zgaruvchi bo'lmagani uchun closure funksiya for'ning o'zgaruvchilarini (ya'ni i ni) olib natija 0 1 2 3 bo'lishi kerak edi. Ammo, natija 4 4 4 4

Bunga asosiy sababchi i'ni e'lon qilgan var keyword

Bu holatda var block scope bo'lmagani uchun callback funksiya bitta i o'zgaruvchini qabul qiladi.

Loop ishga tushadi va bu vaqtda setTimout() vaqtni Web API'da rejalashtirib navbatini Macrotask Queue'da kutib turadi.

Loop ishga tushganda i o'zgaruvchini qiymati o'zgarib boshlaydi 0 1 2 3 va oxirgi loopda i o'zgaruvchi 4 ga aylanadi, ammo 4 loop'ga 3 dan katta bo'lgani uchun kirolmaydi va loop to'xtaydi. Endi navbat setTimeout()'ga keladi va i o'zgaruvchi 4 ga teng bo'lgani uchun console'ga 4 chiaqadi

Natija: 4 4 4 4

📹 youtu.be/vKJpN5FAeF4?si=DCew6PJqTsospNjW&t=133

🏠 Javascript interview savollari

1. Javascript Single-threaded tilmi yoki Multi-threaded tilmi ?

Javascript single-threaded tillar qatoriga kiradi. Bunga sabab Javascript'da 1 ta call stack va memory heap mavjud. Shuning uchun bir vaqtning o'zida faqatgina bitta context run bo'ladi.

Stack hamma javascript kodlar bajariladigan konteyner hisoblanadi va LIFO (Last in First out) prinsip bo'yicha ishlaydi, ya'ni oxirgi qo'shilgan kod birinchi run bo'ladi. FILO (First in Last out) birinchi qo'shilgan oxiri run bo'ladi.

Javascript'ni tabiati sinxron va blocking hisoblanadi, lekin callbacks, promise, async/await, va event listener orqali asinxron bo'lib ishlay oladi.

📝 medium.com/swlh/what-does-it-mean-by-javascript-is-single-threaded-language-f4130645d8a9

2. Javascript Engine qanday ishlaydi ?

Har qanday dasturlash tilida yozilgan kodlarni run qilish uchun maxsus dasturlar kerak bo'ladi. Masalan, Python kodlar uchun Python interpreter. Javascript uchun esa Javascript Engine kerak bo'ladi, ammo Javascript Engine'ni yuklab o'rnatishimiz shart emas u deyarli barcha browser'larda mavjud.

Javascript Engine JS kodlarni run qilish uchun va machine code'ga o'tkazish uchun kerak bo'ladigan dastur hisoblanadi.

Qachonki Javascipt kod run bo'lganda, parser kodni o'qiydi va AST(Abstract Syntax Tree bu kodlarni sintaksis sxemasi) yaratib xotira'ga saqlaydi. Interpreter(high-level kodlarni komputer tushunadigan ko'rsatmalarga tarjima qilib beruvchi mexanizm) AST'ni jarayondan o'tkazadi va bytcode yaratadi.

Bytecode Interpreter bytcode'larni machine code'ga o'tkazadi, hosil bo'lgan machine code hardware processor tomonidan run bo'ladi.

📹 youtube.com/watch?v=xckH5s3UuX4&t=62s

3. Javascript Event Loop nima ?

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

Call Stack bu barcha execution context'larni o'z ichida saqlaydigan va LIFO sxemasi bo'yicha ishlaydigan konteyner hisoblanadi. Bu stack'dan kodlar saralanib bajariladi. Sinxron kodlar run bo'ladi, asinxron (setTimeout, fetch requests, promises) kodlar esa Web Api'ga joylashadi.

Web Api'dan esa Queue joylashadi. Oxirida stack bo'shagandan keyin EVENT LOOP asinxron kodlarni Queue'dan Stack'ga o'tkazadi.

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

#javascript #interview

💠 @jasurkh_dev

🏠 Javascript Scope

Javascript'da O'zgaruvchilar 3 ta scope'da ishlaydi.(Global, Local va Block scope)

Scope bu biron bir o'zgaruvchi amal qilishi ya'ni ishlatilishi mumkin bo'lgan context yoki muhit. Masalan, funksiya ichida ochilgan o'zgaruvchi tashqarida ishlamaydi va bu funksiya o'zgaruvchi uchun scope vazifasini bajaradi.

* Global Scope
Agar o'zgaruvchi global scope'da e'lon qilingan bo'lsa, bu o'zgaruvchi'ni kodni istalgan qismida foydalansa bo'ladi, funksiya, if else statement'da va h.o.

Eslatma: Global O'zgaruvchilar'dan foydalanish bir qancha buglarni keltirib chiqishi mumkin.

* Local (Function) Scope
Local scope bu private xona'ga o'xshaydi, ya'ni bu yerda e'lon qilingan o'zgaruvchilar faqatgina o'sha xonada ishlay oladi va tashqaridan himoyalangan bo'ladi. Masalan, funksiya ichida e'lon qilingan o'zgaruvchi.

* Block Scope
Block scope katta konteyner ichida ketma-ket joylashgan box'larga (qutilar'ga) o'xshaydi, ya'ni har bir quti ichida o'zgaruvchi e'lon qilsa tashqarida bu o'zgaruvchilardan foydalanib bo'lmaydi va {} bilan o'ralgan bo'ladi.

Masalan:

let x = 10

if (true) { let a = 20 }

function log() { var b = 20 }

Bu kod'da 3 ta scope mavjud. x o'zgaruvchi global scope, a o'zgaruvchi block scope va b o'zgaruvchi local scope.

* Lexical Scope

Judayam oson bo'lgan, ammo interview'da ko'p so'raladigan scope

Lexical Scope Closure'ni muhim qismlaridan hisoblanadi.

Lexical Scope nested (ichma-ich joylashgan) funksiyalarni parent (tashqaridagi) scope'da joylashgan o'zgaruvchilar'dan foydalanishini ko'rsatadi.

Masalan:

function outer() {
    let x = "JasX"

    function inner() {
        console.log(x);
    }
    inner()
}

outer() // Output:JasX

Bu kod'da inner() scope'da x o'zgaruvchi yo'qligi uchun parent scope, ya'ni outer() funksiyadan olyapti.

🔗 freecodecamp.org/news/javascript-closure-lexical-scope

📹 youtube.com/watch?v=qT5S7GgIioE

#javascript #scope

💠 @jasurkh_dev

🏠 Javascript interview savollari

4. var, let va const orasidagi farqi nima ?

Bu keyword'lar Javascript'da o'zgaruvchilarni e'lon qilish uchun ishlatiladi

Javascript yaratilganda var keyword'dan foydalanilgan, 2015 yilda ES6 chiqqandan keyin let va const keyword'lar qo'shilgan.

var - global yoki function scope
let - global yoki block scope
const - global yoki block scope bo'lib ishlay oladi

3 ta keyword ham global scope bo'lib ishlay oladi, lekin global scope 2 turga bo'linadi window object'ga biriktirilgan va biriktirilmagan. let va const window object'ga biriktirilmagan global scope bo'lib ishaydi.

Masalan:

var a = "var"
let b = "let"
const c = "const"

console.log(window.a); // Output: "var"
console.log(window.b); // Output: undefined
console.log(window.c); // Output: undefined 

Hoisting bu Javascript'ning o'ziga xos-xususiyatlaridan biri hisoblanadi. O'zgaruvchi, funksiya va class'larni ishlatilgan joydan past'da e'lon qilinsa, Javascript Engine bu e'lon qilingan o'zgaruvchini run bo'layotgan context'ning yuqorisiga joylashtiradi va birinchi o'qiydi.

Masalan:

console.log(a);
var a = 20 

Bu o'zgaruvchini'ni Engine yuqoriga joylashtiradi, ya'ni

var a; 
console.log(a)
a = 20

var keyword'da e'lon qilingan o'zgaruvchi yuqori scope'ning yuqori qismida ishlatilsa undefined (e'lon qilinmagan) qaytaradi.

let va const keyword'da e'lon qilingan o'zgaruvchi yuqori scope'ning yuqori qismida uninitialized (ishga tushirilmagan) qaytaradi.

Bitta scope ichida var keyword'da e'lon qilingan o'zgaruvchini 2 marta e'lon qilish mumkin, lekin let va const keyword'da e'lon qilingan o'zgaruvchini 2 marta e'lon qilish mumkin emas.

var va let'ga qayta qiymat berish mumkin, lekin const keyword'ni o'zgartirib bo'lmaydi.

var va let farqi:

{
    var x = 10
    let y = 20
}

console.log(x); // Output: 10
console.log(y); // Output: Undefined 

let block scope bo'lgani uchun y o'zgaruvchi'ni scope'dan ({}) tashqarida foydalanib bo'lmaydi.

[Bonus] For Loop

for loop'da i o'zgaruvchini e'lon qilishda let keyword'dan foydalanish maslahat beriladi, chunki var keyword global bo'lgani uchun i o'zgaruvchini loop'dan tashqaridan foydalanish imkonini beradi va bu yaxshi holat emas.

Masalan:

for (var i = 0; i < 3; i++) {   }

console.log(i); // Output: 3 

let block scope bo'lgandan keyin loop'dan tashqarida foydalanib bo'lmaydi.

for (let i = 0; i < 3; i++) {   }

console.log(i); // ReferenceError: i is not defined 

🔗 freecodecamp.org/news/var-let-and-const-whats-the-difference

#javascript #interview

💠 @jasurkh_dev

🏠 Reference vs Primitive ma'lumot turlari

Javascript'da ma'lumot turlari 2 turga bo'linadi Primitive va Reference.

* Primitive ma'lumot turlari Immutable, ya'ni o'zgarmas hisoblanadi.

let name = "JsX";
name[0] = "T";

console.log(name); // JsX

Bu misolda name nomli o'zgaruvchi yaratildi va qiymat berildi. Index orqali name'ning birinchi harfini o'zgartirish haqida buyruq berildi, lekin o'zgarish sodir bo'lmadi. Chunki string ma'lumot turi primitive hisoblanadi.

Eslatma: Primitive ma'lumot turi o'zgarmas hisoblanadi, lekin bu const degani emas. O'zgaruvchi bitta memory location'da saqlangan holda o'zgartirish'ni iloji bo'lmasa bu o'zgaruvchi primitive hisoblanadi

let a = 10;
a = 20

Bu holatda o'zgaruvchi'ga yangi qiymat berilyapti va bu o'zgaruvchi yangi memory location'ga saqlanadi

Primitive ma'lumot turlari: string, number, boolean, bigint, symbol, null, undefined.

* Non - Primitive ma'lumot turlari mutable, ya'ni o'zgaruvchan hisoblanadi va Reference ma'lumot turi deb ham ataladi

const jasx = {
    lang: 'JS'
};
jasx.lang = "TS";

console.log(jasx); // { lang:'TS' }

jasx nomli object yaratildi va lang nomli property berildi. Dot Notation orqali lang'ni qiymatini o'zgartirish haqida buyruq berildi. O'zgarish memory location o'zgarmasdan sodir bo'ldi, shuning uchun jasx o'zgaruvchi non-primitive hisoblanadi.

Reference ma'lumot turlari: object.

🔗 dev.to/mrizwanashiq/primitive-and-non-primitive-56n8

📹 youtube.com/watch?v=rdlMyOx6Ub8&t=40s

#javascript #primitive #reference

💠 @jasurkh_dev

🏠 Javascript interview savollari

5. Javascript ma'lumot turlari ?

Javascript'da 8 ta ma'lumot turi mavjud va ular qiymatiga qarab 2 turga bo'linadi Primitive va Reference

* Primitive ma'lumot turlari: string, number, boolean, bigint, symbol, null, undefined.

* Non - Primitive ma'lumot turlari: object.

1. Number ma'lumot turi !

Number qiymati butun va kasr sonlarni ko'rsatadi. Number() funksiya qiymatni number'ga o'tkazishda foydalaniladi.

Number("123");    // returns 123
Number("123abc"); // returns NaN
Number("");       // returns 0

Number ma'lumot turi 64-bitli IEEE 754 double-precision hisoblanadi, ya'ni sonlarni binary formatda ko'rsatish uchun 64 bit'dan foydalaniladi.
1 bit - musbat yo manfiy belgisi uchun
11 bit - exponent uchun (-1022 va 1023)
52 bit - kasr qismi uchun

Number ma'lumot turi -(2^53 − 1) va (2^53 − 1) orasidagi sonlar qabul qiladi

Infinity va NaN ham Number ma'lumot turiga kiradi.

2. String ma'lumot turi !

String qiymati matn ma'lumot turini ko'rsatadi va qiymat 16-bit unsigned integer (UTF-16) bilan kodlangan bo'ladi. String() funksiya string ma'lumot yaratish uchun ishlatiladi. new String() orqali String Object yaratiladi.

const str = new String("JasX");

3. Boolean ma'lumot turi !

Boolean ma'lumot turi true va false qiymat ko'rsatadi va logical operator deb ham ataladi. Boolean() funksiya boolean bo'lmagan qiymatlarni true yoki false qiymatga o'tkazish uchun ishlatiladi.

Boolean("");           // false
Boolean(null);         // false
Boolean(undefined);    // false
Boolean(NaN);          // false

Boolean("hello");      // true
Boolean([]);           // true
Boolean({});           // true

4. BigInt ma'lumot turi !

BigInt ma'lumot turi katta raqamli qiymat qabul qiladi, ya'ni Number qabul qilolmaydigan sonlarni -(2^53 − 1)'dan kichik va (2^53 − 1)'dan katta. BigInt() funksiya Number'larni BigInt'ga o'tkazadi primitive qiymat qaytaradi

let bigIntFromNumber = BigInt(9007199254740992);
console.log(bigIntFromNumber); // 9007199254740992n

let bigIntFromString = BigInt("9007199254740992");
console.log(bigIntFromString); // 9007199254740992n

5. Symbol ma'lumot turi !

Symbol antiqa va o'zgarmas primitive qiymat hisoblanadi va Object uchun unique key sifatida ham foydalanilishi mumkin. Symbol'ning asosiy vazifasi antiqa key yaratish va bu key boshqa Object key'lar bilan xar xil bo'lishi kafolatlangan. Symbol() funksiya antiqa key yaratish uchun ishlatiladi.

let sym1 = Symbol("desc");
let sym2 = Symbol("desc");

console.log(sym1 === sym2); // false

📹 youtube.com/watch?v=tmkD2VGtEqc&t=60s

6. null ma'lumot turi !

null ma'lumot turi qiymat yo'qligini bildiradi va turli holatlarda paydo bo'lishi mumkin, masalan object'ning biron bir property'sida qiymat bo'lmasa. null boolean operator'lar uchun false qiymat beradi.

7. undefined ma'lumot turi !

undefined global object'ning xosasi va global scope o'zgaruvchisi hisoblanadi. O'zgaruvchi e'lon qilinsa, lekin qiymat berilmasa undefined qiymat beriladi.

let a;
console.log(a); // undefined

8. Object ma'lumot turi !

Object bu ma'lum bir narsaning xususiyatlar to'plami, xususiyat bu name (key) va qiymat'ning birlashmasi. Xususiyatning qiymat har qanday ma'lumot turi bo'lishi mumkin.

let obj = {
    key: value
};

new Object() constructor object yaratib beradi.

let obj = new Object();

obj.key = 'value';

console.log(obj.key); // {key: 'value'}

Array vs Funksiya

let arr = []
function log() {}

console.log(typeof arr); // object
console.log(typeof log); // function    .

Javascript'da Array ma'lumot turi mavjud emas. Array bu ma'lumot'larni to'plash uchun ishlatiladi va Object'ning ustiga qurilgan global object'ning bir turi hisoblanadi.

Funksiya'ni typeof qilib tekshirganda Function qaytaradi. Lekin Javascript'da function ma'lumot turi mavjud emas. Funksiya Object hisoblanadi.

🔗 developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures

📹 youtube.com/watch?v=rdlMyOx6Ub8&list=PLn8TR1nMED9ZkH_zA0teP6ZEIF6oZhMSA

#javascript #interview

💠 @jasurkh_dev

🏠 Nega Javascript Number ma'lumotlari cheklangan ?

Javascript Number ma'lumot turi IEEE 754 standarti orqali 64-bit'li ikkilik formatidagi (double-precision) raqamlarni ko'rsatadi.

IEEE 754 - floating-point arifmetikasi uchun Institute of Electrical and Electronics Engineers tomonidan ishlab chiqilgan texnik standart hisoblanadi.

64 bit - Javascript number ma'lumotlarni kodlash (encode qilish) uchun.

1 bit - musbat yo manfiy belgisi uchun
11 bit - butun sonning Exponent qismini ko'rsatadi
52 bit - kasr qismi uchun (mantissa)

Javascript number ma'lumotlarni bit'dan numberga o'tkazish uchun shu formuladan foydalanadi.

Number = (-1)^sign × (1 + mantissa) × 2^exponent

JavaScript floating-point representation 53-bit hisoblanadi. Ya'ni ( 1 + mantissa ), 1bit + 52 bit.

1 bit implicit leading bit, 52 bit implicit leading bit deyiladi.

Shuning uchun Javascript floating-point uchun umumiy 53 bit sarflaydi.

Bundan kelib chiqadi:
Number.MAX_SAFE_INTEGER 2^53 – 1'ga teng.
Number.MIN_SAFE_INTEGER -(2^53 - 1)'ga teng.

Agar Number bu qiymatdan ortib ketsa, maximum precision 53 bit'dan oshib ketadi. Natijada, Aniqlikda xatoliklar va Hisoblashda noaniqliklar kelib chiqadi.

🔗 developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number

📹 youtu.be/bqj0pQc7SNw?si=TGLIoJoYyWkt8u6h&t=382

🏠 Javascript Device Detection

Web Sahifa'ga tashrif buyurilgan qurilmani aniqlash responsiv dizayn, analitika, feature o'zgartirish kabi vazifalar uchun foydali bo'ladi.

Sahifa mobil qurilmada yoki kompyuterda ko'rilayotganligini aniqlash uchun Navigator.userAgent xususiyatidan foydalaniladi.

Navigator.userAgent browser'ning user agenti (user agent of the browser) qaytaradigan string'ni o'z ichiga oladi.

Masalan:

console.log(navigator.userAgent);

// Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Mobile Safari/537.36 

Navigator.userAgent qaytaradigan string orqali qurilma turini aniqlash mumkin, bunga sabab qurilmalarda string farq qiladi.

Qurilma turini aniqlash uchun qo'shimcha RegExp'dan foydalanamiz, ya'ni RegExp.prototype.test().

RegExp.prototype.test()

test() metodi regular expression'ni match qilingan ma'lumot ichidan qidiradi va mavjudligiga qarab boolean ma'lumot (true, false) qaytaradi.

Masalan:

const str = 'table football';
const regex = new RegExp('foo');

console.log(regex.test(str)); // true

Mobil qurilma ekanligini aniqlash uchun /Mobile|Android|iPhone|iPad/i Regular Expression'dan foydalanamiz.

const detectDeviceType = () => /Mobile|Android|iPhone|iPad/i.test(navigator.userAgent) ? 'Mobile' : 'Desktop';

detectDeviceType();

Bu kod'da Navigator.userAgent string qaytaradi va .test() RegExp bilan stringni test qiladi. Agar string ichida berilgan experssion mavjud bo'lsa .test() true qaytaradi. Natija, qurilma mobil bo'ladi.

/Mobile|Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i - Mobil qurilmani aniqlash uchun expression'ni kengaytirish mumkin.

Kelajakda browser'larda .userAgent() ishlamasligi mumkin, ya'ni browser o'zi haqida ma'lumot bermasligi mumkin.

Qurilmani tekshirish uchun: device-detecting.vercel.app

🔗 30secondsofcode.org/js/s/detect-device-type

📹 youtu.be/VKZvBf0VLXE?si=IJNQytIonhS9AuS5

#javascript #deviceDetection

💠 @jasurkh_dev