🖥 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

🖥 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

⚙️ 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

🏠 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

🏠 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

🖥 Javascript Navigator Object

Navigator dasturchilarga foydalanuvchining veb-brauzeriga kirish va u bilan o‘zaro aloqada bo‘lish imkonini beradi, bu dasturchilarga website'ni yanada yaxshilashga yordam beradi

Masalan: Navigator obyektidan foydalangan holda foydalanuvchining brauzeri versiyasi, ekran o‘lchami, til sozlamalari va internet tezligini aniqlashi mumkin. Bu ma’lumotlar yordamida saytni yanada yaxshilash mumkin.

Navigator obyekti foydalanuvchining geografik joylashuvini aniqlashda ham ishlatilinadi. Bu til tarjimalari, valyuta konvertatsiyasi va mahalliy ob-havo ma’lumotlarini taqdim etishga imkon beradi.

Navigator Global Window Object'ni bir qismi hisoblanadi.

let navigatorObject = window.navigator;

Navigator object property orqali o'zimizga kerak bo'lgan ma'lumotlarni olishimiz mumkin

⚠️ Navigator Object xususiyatlari foydalanuvchining brauzeri haqida har doim aniq ma’lumot bermasligi mumkin. Masalan, foydalanuvchilar eskirgan yoki o‘zgartirilgan brauzerlardan foydalanayotgan bo‘lishi mumkin, bu esa noto‘g‘ri ma’lumotlarga olib keladi. Bundan tashqari, barcha brauzerlar Navigator obyektining barcha funksiyalarini qo‘llab quvvatlamaydi.

navigator Object'ni console'ga chiqaradigan bo'lsak, hamma browser da ham bir xil ma'lumotni ko'rsatmaydi

Masalan: Chrome orqali deviceMemory aniqlash mumkin, lekin FireFox'da bu ma'lumot mavjud emas

Battery Charge Detecting

Navigator object orqali qurilma quvvatini (zaryadini) aniqlash uchun Battery Status API'dan foydalanamiz

navigator.getBattery() orqali Battery Status API'ga kiriladi va BatteryManager object'ni resolve qilish uchun Promise qaytaradi.

BatteryManager Object level, charging property'larni o'z ichiga oladi.

level - qurilma quvvati (0 dan 1 gacha qiymatda)
charging - boolean qiymat qaytaradi, qurilma quvvat olyaptimi yuqmi aniqlash uchun

Battery Status API ko‘plab yangilangan brauzerlarda privacy concerns sababli qo‘llab-quvvatlanmaydi. Bu API eski versiyadagi Chrome, Edge va ba’zi boshqa brauzerlarda ishlaydi, lekin Firefox yoki Safari’da ishlamasligi mumkin.

if ('getBattery' in navigator) {
  navigator.getBattery().then((battery) => {
    console.log(`Battery level: ${battery.level * 100}%`);
    console.log(`Charging: ${battery.charging ? 'Yes' : 'No'}`);
  });
} else {
  console.log('Battery Status API is not supported in this browser.');
}

🔗 bito.ai/resources/navigator-object-javascript-javascript-explained

#javascript #navigator

💠 @jasurkh_dev

🏠 Copy/Paste/Cut to Clipboard

Biz ko'p foydalanadigan matn'ni nusxalash tugmasi (button) qanday qilinadi ?

Hozirgi yangi browser'larda matn'ni nusxalash uchun Asynchronous Clipboard API'dan foydalanish osonroq

Eski brauzerlarga ham qo'llab-quvvatlash kerak bo'lsa, boshqa yo'llardan foydalangan yaxshiroq, ammo u yo'l biroz murakkab

Asynchronous Clipboard API - clipboard buyruqlariga javob berish imkonini beradi. Masalan: matn'ni qirqib olish, nusqalash va matn'ni joylashtirish (cut, copy vs paste)

*Copy

Nusxalashdan oldin, browser Clipboard API'ni qo'llab-quvvatlaydimi yo'qmi tekshirish kerak

 if (navigator && navigator.clipboard && navigator.clipboard.writeText) return 'true'

Matn'ni nusxalash uchun

navigator.clipboard.writeText("Selected Text");

To'liq kod:

const copyToClipboard = str => {
  if (navigator && navigator.clipboard)
    return navigator.clipboard.writeText(str);
  return Promise.reject('API is not available.');
};

str - nusxalash kerak bo'lgan matn

*Paste

Matn'ni paste qilish uchun .readText() funksiyadan foydalanamiz

navigator.clipboard.readText()

Matn'ni joylashtirish uchun, joylashtirmoqchi bo'lgan input yoki textarea'ga navigator.clipboard.readText() Promise qaytargandan keyin .value qilib joylaymiz.

Masalan:

navigator.clipboard
 .readText()
 .then(text=>{document.getElementById('outputText').value = text})

*Cut

Matn'ni qirqish uchun .writeText() funksiya'dan foydalanamiz

navigator.clipboard
  .writeText(textToCut)
  .then(() => { inputField.value = '' })

textToCut - matn

Tekshirish uchun: clipboard-operations.vercel.app

🔗 30secondsofcode.org/js/s/copy-text-to-clipboard/#the-asynchronous-clipboard-api

#javascript #clipboard

💠 @jasurkh_dev

👨‍💻 "1" + 1 = "11" | Type Coercion

Type Coercion - bu JavaScriptda eng ko‘p tanqidga uchraydigan kamchiliklaridan biri.

Type Coercion - bu JavaScript avtomatik ravishda bir turdagi qiymatni boshqasiga o‘zgartiradigan holat

String Coercion - Masalan:

console.log('5' + 2);     // '52'
console.log('5' + true);  // '5true'

Number Coercion - Masalan:

console.log('5' - 2);     // 3
console.log('5' * 2);     // 10
console.log('10' / '2');  // 5

Bu natijalarga sabab - JavaScript’da type checking yo‘qligi va type coercion (tur o‘zgarishi)'dir.

+ operatori 2 maqsadda ishlatiladi: string'larni birlashtirish (concatenation) yoki matematik amallarni bajarish uchun.

Agar + operatori ishlatilayotgan joyda faqat raqamlar (number) bo‘lsa, JavaScript buni matematik amal deb tushunadi va oddiy qo‘shish bajariladi. Ammo agar operandlardan biri string bo‘lsa, JavaScript buni matematik emas, matn birlashtirish (concatenation) deb tushunadi. Bu holatda, ikkala operand ham string'ga aylantirilib, ketma-ket birlashtiriladi.

-, / va * operatorlari faqat matematik amallar uchun ishlatiladi.

Bu operatorlar bilan ishlaganda, operandlar son (number) bo‘lishi kerak.
Shuning uchun JavaScript bu operandlarni avtomatik ravishda number turiga type coercion orqali o‘zgartiradi.

Masalan:

"10" / "2"  →  10 / 2  →  5

Hozirda bunaqa narsalarni o'rganish shart emas, ko‘pchilik TypeScript’dan foydalanadi, strict type checking orqali bunday xatolarning oldini oladi.

🔗 geeksforgeeks.org/javascript/what-is-type-coercion-in-javascript

🔗 developer.mozilla.org/en-US/docs/Glossary/Type_coercion

#javascript #typeCoercion

✅ @jasurkh_dev

🗂 JavaScript Autoboxing

JavaScript’da primitive qiymatlar (number, string, boolean) method va property'larga ega emas.

Lekin .toLowerCase() yoki .length kabi method va property’larni chaqirsak, ular ishlaydi.

Buning asosiy sababi - autoboxing

Primitive qiymat ustida method yoki property chaqirilganda, JavaScript uni vaqtincha object’ga o‘rab beradi, bunday object'lar wrapper object'lar deyiladi.

null va undefined'dan tashqari, har bir primitive wrapper object'ga ega:
* string - String()
* number - Number()
* boolean - Boolean()
* bigint - BigInt()
* symbol - Symbol()

String qiymat uchun method chaqirib ko'raylik:

const myString = "Hello World";

console.log(myString.toUpperCase());

JavaScript ichida bu taxminan shunday ishlaydi:

const myString = "Hello World";

let temp = new String(myString);
temp.toUpperCase();
temp = null; // vaqtinchalik object olib tashlanadi

~~~~~~~~~~

Savol: Primitive qiymatlarga property qo‘shsa bo‘ladimi?

Property primitive’ning o‘ziga emas, wrapper object’ga qo‘shiladi.
Lekin bu object vaqtinchalik bo‘lgani uchun, vazifasini bajargach o'chib ketadi.

const number = 5;
number.type = 'odd';

console.log(number.type); // undefined

Bu tahminan shunaqa ishlaydi:

const number = 5;

let temp = new Number(number);
temp.type = 'odd';
temp = null;

temp = new Number(number);
console.log(temp.type); // undefined 

* mantrax.io/javascript-autoboxing
* dapelican.dev/js-object-wrappers

#javascript #autoboxing

✅ @jasurkh_dev

🗂 Assignment vs Mutation ~ const

# Eslatma
* primitive - qiymatning o‘zi saqlanadi
* reference - qiymat emas, xotiradagi manzil (reference) saqlanadi

JavaScript’da qiymatni o‘zgartirishning ikki xil yo‘li bor
* assignment - o'zgaruvchiga qayta qiymat berish
* mutation - mavjud object / array ichidagi qiymatni o‘zgartirish

mutation faqatgina reference ma'lumot turlari uchun ishlaydi

let user = { name: "js" };

user.name = "ts";   // mutation

user = { name: "ts" };   // assignment

# 1. const / mutation in reference

const - immutable degani emas, faqat assignment'ni taqiqlaydi, mutationni emas.

const user = { name: "js" };

user.name = "ts"; 
user = { name: "ts" }; // TypeError

# 2. React'da state rendering

React render qilishi uchun state'larni oldingi va hozirgi holatlarini taqqoslaydi, agar o'zgarish bo'lsa render qiladi, o'zgarish bo'lmasa render qilmaydi

Primitive state'larni taqqoslashda value'lar tenglashtiriladi, Non-primitive state'larda reference tenglashtiriladi.

State'ni o'zgartirish uchun mutation qilish o'rniga assignment ishlatilinadi

Mutation'ga misol:

const [user, setUser] = useState({ name: "Ali", age: 20 });

function updateAge() {
  user.age = 21;
  setUser(user);
}

* object mutate bo‘ldi
* reference o‘zgarmaydi
* UI update bo‘lmaydi

Assignment'ga misol:

function updateAge() {
  setUser({
    ...user,
    age: 21
  });
}

* yangi object yaratildi
* reference o‘zgardi
* React re-render qiladi

Buni tekshirish uchun object state’ga qiymati bir xil bo‘lgan yangi object berib ko'ramiz, natijada component yana render bo‘ladi

* joshwcomeau.com/javascript/the-const-deception

#javascript #react #mutation

✅️ @jasurkh_dev