Jasur - IT Blog

🗂 Electron.js yordamida Gemini API (2.5 flash) bilan ishlaydigan AI overlay yasab ko'rdim. Umuman olganda natija yomon emas, “share entire screen” rejimida overlay ko‘rinmaydi.

setContentProtection(true)

Bu kodni asosiy vazifasi Windows'ning SetWindowDisplayAffinity API'sini chaqiradi va oynani har qanday capture pipeline'dan chiqarib tashlaydi. Cursor harakatlarini yashirish uchun keyboard shortcut’dan foydalandim. github.com/jasurkhaitov/ai-overlay P.s. Bekorchilkdan buyam bir eksperiment @jasurkh_dev

🗂 Electron.js yordamida Gemini API (2.5 flash) bilan ishlaydigan AI overlay yasab ko'rdim. Umuman olganda natija yomon emas, “share entire screen” rejimida overlay ko‘rinmaydi.

setContentProtection(true)

Bu kodni asosiy vazifasi Windows'ning SetWindowDisplayAffinity API'sini chaqiradi va oynani har qanday capture pipeline'dan chiqarib tashlaydi. Cursor harakatlarini yashirish uchun keyboard shortcut’dan foydalanildi github.com/jasurkhaitov/ai-overlay 💠 @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

🗂 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 @JasXDev

How to get the most out of 2026 - Delete social media (Instagram, TikTok, etc.). It gave you NOTHING this year. - Choose ONE skill: drawing, marketing, coding - doesn't matter. - Learn every single day: books, articles, courses, mentors. - Apply what you learn: draw, market for your uncle, build a website. - Do it daily. No breaks. No excuses. Discipline wins. - Enjoy the results. Simple. Not easy. Print this. Read it daily.

🗂 Remote Code Execution in React Server Component React orqali serverdan “shell”gacha yetib borishga olib kelishi mumkin bo‘lgan xato React2Shell deb ataladi # Serialization / Deserialization * Serialization - React tree’ni Flight payload'ga o'tkazish * Deserialization - Flight payload'ni yana React tree'ga o'tkazish # React’da komponentlarning ikki turi bor: * Client Component * Server Component React Server Component (RSC) - bu React component bo‘lib, faqat serverda ishlaydi. Browser'ga hech qanaqa JS kod yuborilmaydi, hammasi server'da run bo'lib, render natijasi browser'ga jo'natilinadi. # Server o‘zidagi Component'ni JavaScript kodini run qiladi va render natijasini ( React tree'ni ) Flight payload formatda serialize qilib clientga yuboradi

React Flight payload - bu React Server Components render natijasini clientga yuborish uchun serialize qilingan maxsus ma’lumot strukturasi

Browser serverdan kelgan Flight payload’ni deserialize qilib, uni React tree sifatida tiklaydi va UI’ni render qiladi. ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ Umumiy olganda Remote Code Execution'ga sabab bo'ladigan muammo deserialization’da, React2Shell holatida deserialization faqatgina client tarafda emas server tarafda ham ishlatilinadi. Deserialization bosqichida server'ga kelgan Flight payload’ni yetarli validatsiyasiz React modeliga (React Tree) aylantiradi, natijada tarkibida zarari JavaScript kod bo'lsa, kod birdaniga run bo'ladi.

const flight_payload = {
    '0': '$1',
    '1': {
        'status':'resolved_model',
        'reason':0,
        '_response':'$4',
        'value':'{"then":"$3:map","0":{"then":"$B3"},"length":1}',
        'then':'$2:then'
    },
    '2': '$@3',
    '3': [],
    '4': {
        '_prefix':'console.log(7*7+1)//',
        '_formData':{
            'get':'$3:constructor:constructor'
        },
        '_chunks':'$2:_response:_chunks',
    }
}

Code: blog.logrocket.com/react2shell-exploit Payload ichidagi 0, 1, 2, 3 va 4 string'lar model/chunk reference'lar hisoblanadi. $1 - 0 ID'li model/obyektga to‘g‘ridan‑to‘g‘ri reference beradi. $@3 - 3 ID'li model/obyektni Promise (async) sifatida reference qiladi, ya’ni keyinroq resolve qilinadi. "status": "resolved_model" - React uni element tree’dagi komponent qismi sifatida ko‘rishi kerakligi haqida signal beradi "then": "$2:then" - Model thenable ekanini bildiradi va resolve jarayonida 2 ID’li reference’dagi then metodi ishlatiladi. "value" - Modelning serialize qilingan ichki qiymati, React uni deserialize qilib ichki struktura sifatida qayta tiklaydi. "_response": "$4" - Ushbu modelga tegishli response chunk 4 ID orqali bog‘langanini bildiradi. "_formData.get" - React deserialization vaqtida foydalanadigan FormData accessor reference’i, bu joy noto‘g‘ri ishlatilsa ichki API’larga yo‘l ochib beradi # Hozirda bu bug fix qilinganini aytishyapti * nextjs.org/blog/CVE-2025-66478 Ko'proq o'qish uchun: * github.com/AdityaBhatt3010/React2Shell-CVE-2025-55182-The-Deserialization-Bug-That-Broke-the-Web * ox.security/blog/react2shell-going-granular-a-deep-deep-deep-technical-analysis-of-cve-2025-55182 * vercel.com/blog/our-million-dollar-hacker-challenge-for-react2shell #react #nextjs @JasXDev

👨‍💻 "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 ✅ @JasXDev

🗂 Hot Module Replacement (HMR) Hot Module Replacement (HMR) — sahifani to‘liq yangilamasdan turib, faqat o‘zgartirilgan kod qismini yuklab beradi. Masalan, CSS faylida kichik o‘zgarish kiritilganda, brauzer faqat shu o‘zgarishni ko‘rsatadi, sahifaning qolgan qismi yangilanmaydi. HMR faqat ishlab chiqish (kod yozish, development) jarayonida ishlaydi. U deyarli har bir build vositalari (bundler'lar)'da mavjud. Vite, Webpack, etc... * HMR qanday ishlaydi ? Qachonki dastur run (ex. React / Vite, npm run dev) qilingan vaqtda, server ishga tushadi. Development server (vite, webpack) loyihadagi fayllarni doimiy kuzatib turadi. Fayl (masalan, CSS yoki JS) o‘zgarsa - server buni darhol sezadi. Serverda WebSocket server ochilgan bo‘ladi.

WebSocket — bu server va mijoz o‘rtasida real vaqtli, ikki tomonlama aloqa o‘rnatishga imkon beradigan texnologiya.

O‘zgarish bo‘lsa, server WebSocket orqali brauzerga o'zgargan file haqida signal yuboradi. Brauzer WebSocket orqali serverga ulangan bo‘ladi (ws://localhost:5173). Signal kelgach, brauzer faqat o‘zgargan faylni qayta yuklaydi. Sahifa to‘liq yangilanmaydi, holat (state) saqlanadi. Umumiy jarayon:

Fayl o‘zgarsa → Server sezadi → WebSocket orqali xabar → Brauzer modulni yangilaydi → Sahifa yangilanmaydi (reload bo'lmaydi).

Tekshirib ko'rish uchun vite.config.ts file da hmr ni o'chirib qo'yamiz

import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    hmr: false, // HMR to‘liq o‘chiriladi
  },
})

Natijada o'zgarishlar avtomatik yuklanmaydi, yoki sahifa to'liq load bo'ladi. 👩‍💻 webpack.js.org/concepts/hot-module-replacement #react #vite #hmr ✅ @JasXDev

⚙️ Angular Modules vs Standalone Components Angular'da komponentlar ikkita asosiy usul bilan ishlatiladi: * Module'lar orqali * Standalone component'lar orqali Angular Modules (Modullar) Modul - bu bir nechta komponent yoki servise'larni bir joyga jamlaydigan konteyner.

@NgModule({
  declarations: [MyComponent],
  exports: [MyComponent]
})
export class MyModule {}

* Har bir komponent avval modulga declarations orqali qo‘shiladi. * Qo'shilgan component'dan boshqa joyda foydalanish uchun imports orqali chaqiriladi.

Agar komponent declarations'ga qo‘shilgan bo‘lsa, uni faqat o‘sha modul ichida ishlatish mumkin. Uni boshqa modul'da ishlatish uchun, export qilingan bo‘lishi va modul import qilingan bo‘lishi kerak.

Standalone Components ( Mustaqil komponentlar ) Standalone component'lar Angular 14 versiyada qo'shilgan bo'lib, standalone komponent o‘zini o‘zi boshqaroladi - unga modul kerak emas. Istagan boshqa komponentni React komponent'lariga o‘xshab to‘g‘ridan-to‘g‘ri imports qilib ishlatsa bo‘ladi.

@Component({
  standalone: true,
  selector: 'app-hello',
  template: '<p>Hello!</p>',
  imports: [CommonModule]
})
export class HelloComponent {}

React:

import Card from './Card'

Angular:

imports: [CardComponent]

React component'lar ham standalone component hisoblanadi

Qulay tarafi: Tezroq ishlaydi, kod kamroq, soddaroq Kamchiligi: Katta loyihalarda boshqaruv biroz murakkab bo‘lishi mumkin 🔗 medium.com/@ausaf.cs/angular-modules-vs-standalone-components-a-detailed-comparison-7b28c803cdd2 🔗 lynkz.com.au/blog/2024-angular-standalone-vs-modules #angular #standalone #module ✅ @JasXDev

🗂 Cache Busting in React / Vite React projectda frontend’ga yangi feature (xususiyat) qo‘shdim va saytni deploy qildim. Lekin ayrim brauzerlarda eski versiya chiqib qolmoqda. Bu holat caching muammosi bilan bog‘liq

Frontend loyihalar (masalan, React) yangilanganda, foydalanuvchilarning brauzeri ko‘pincha eski fayllarni keshlangan (cache) holatda saqlab qoladi.

Brauzer har doim har bir faylni qayta yuklab olish o‘rniga, uni bir marta yuklab olgach, keyingi marta site'ga kirilganda aynan o‘sha faylni cache’dan olib foydalanadi. Muammo shundaki, loyiha build qilinganda fayllar yangilansa ham, ularning nomi (main.js kabi) o‘zgarmasligi mumkin. Natijada foydalanuvchi sayt'ga kirganda, brauzer fayl nomi bir xil bo‘lgani uchun uni eski versiyadan – ya’ni cache’dan olib ishlatadi. Shuning uchun yangi o‘zgarishlar ko‘rinmaydi. "Cache Busting" — bu yangi fayllarni avtomatik ravishda yangi nom bilan yaratish usuli. Har safar build qilinganda fayl nomiga hash qo‘shiladi, hash bu raqam va harflar'dan tashkil topgan birikma. Project har build qilinganda, o'zgarish kiritilgan file'da hash o'zgaradi Masalan:

main.js → main.a3f5s3.js

Shunda brauzer bu faylni yangi fayl deb biladi va cache o‘rniga yangisini yuklaydi. React (Vite) loyihada, vite.config.ts fayl'dagi build'ga rollupOptions qo'shish orqali Cache Busting qilish mumkin:

export default defineConfig({
  build: {
    outDir: 'dist',
    assetsDir: 'assets',
    rollupOptions: {
      output: {
        entryFileNames: 'assets/[name].[hash].js',
        chunkFileNames: 'assets/[name].[hash].js',
        assetFileNames: 'assets/[name].[hash].[ext]',
      },
    },
  },
})

Bu konfiguratsiya har bir faylni hash bilan nomlaydi, shunda brauzer eskisini emas, yangisini yuklaydi. 🔗 keycdn.com/support/what-is-cache-busting 🔗 maxtsh.medium.com/the-ultimate-guide-to-cache-busting-for-react-production-applications-d583e4248f02 #reactjs #vite #cache #busting ✅ @JasXDev

⚙️ Kichik Experiment

React component'ni Angular project'da ishlatib ko'rdim.

React kutubxonani o'rnatib olamiz

npm install react react-dom

* package.json

{
     .....
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     .....
}

TypeScript bilan ishlash uchun kerakli @type kutubxonalarni ham o‘rnatamiz

npm install --save-dev @types/react @types/react-dom

* tsconfig.json

{
  "compilerOptions": {
    "jsx": "react"
  }
}

React component yaratamiz (e.g. src/react/HelloReact.tsx)

import React from 'react';

const HelloReact = () => {
  return <div>Hello from React!</div>;
};

export default HelloReact;

Yaratilgan React component'ni DOM'ga joylashtirish (render qilish) uchun ReactWrapper funksiya yozamiz.

import React from 'react';
import ReactDOM from 'react-dom/client';
import HelloReact from './HelloReact';

export function renderReactComponent(container: HTMLElement) {
  const root = ReactDOM.createRoot(container);
  root.render(<HelloReact />);
}

Bu funksiyada ReactDOM.createRoot() orqali React komponentini render qilamiz. React o‘zining virtual DOM mexanizmi yordamida HelloReact komponentini HTML elementga aylantiradi.

@Component({
  selector: 'app-react-wrapper',
  template: `<div id="react-root"></div>`,
  standalone: true,
})

export class ReactWrapperComponent implements AfterViewInit {
  constructor(private elRef: ElementRef) {}

  ngAfterViewInit() {
    const container = this.elRef.nativeElement.querySelector('#react-root');
    renderReactComponent(container);
  }
}

ReactWrapperComponent vazifasi, Render qiling React component'ni Angular componentda ochilgan <div id="react-root"></div>'ga joylash. AfterViewInit — bu Angular lifecycle metodi hisoblanadi. Uning vazifasi - ngAfterViewInit funksiyasi ichidagi kodlarni komponentning barcha view elementlari to‘liq render qilingandan keyin ishga tushirishdir. AfterViewInit - angular.dev/api/core/AfterViewInit Hosil bo'lgan Angular component'ni istalgan joy'da foydalana olamiz

<app-react-wrapper></app-react-wrapper>

🔗 medium.com/@zacky_14189/embedding-react-components-in-angular-the-easy-way-60f796b68aef #react #angular 💠 @JasXDev

🔋 Lazy loading

Lazy loading - bu veb-sahifaning ma’lum qismlarini foydalanuvchi yoki brauzerga kerak bo'lmaguncha yuklamasdan kutib turish (render qilish jarayonini to'xtatib turish)

Hammasini birdaniga yuklash (eager loading) o‘rniga, brauzer ba’zi resurslarni faqat foydalanuvchiga kerak sahifa bilan o‘zaro aloqaga kirishgandan keyin so‘raydi. Agar Lazy loading to‘g‘ri amalga oshirilsa, sahifaning yuklanish tezligini oshirishga yordam beradi. Bu turdagi yuklash 'dangasa' (lazy) deb ataladi, chunki u brauzerni ishini kechiktirishga undaydi. Masalan, blog postda sahifaning yuqori qismida rasm, pastki qismida diagramma bor deb faraz qilaylik. Blog postini o‘qiyotgan foydalanuvchi bir necha daqiqa davomida matnning pastki qismiga yetib bormasligi mumkin, shuning uchun brauzer foydalanuvchi o‘sha bo‘limga o‘tmaguncha diagrammani yuklashni kutadi. Shunday qilib, sahifa dastlab tezroq yuklanadi, chunki brauzer ikkita rasm o‘rniga bitta rasm yuklamoqda. Veb-sahifa yuklanganda, foydalanuvchi ko‘rayotgan qismi 'yuqori qism' (above the fold) deb ataladi, foydalanuvchi hali ko‘rmayotgan qismi esa 'quyi qism' (below the fold) deb ataladi.

"above the fold" va "below the fold" gazeta maketlaridan kelib chiqqan. Gazetalar, odatda, gorizontal bo‘yicha ikkiga buklangan, oldingi yarmi esa buklangan joydan yuqorida joylashgan bo‘ladi.

* Rasmlar uchun lazy loading amalga oshirish Lazy loading-ni amalga oshirishning bir usuli — bu img tegida loading atributidan foydalanish. Quyidagi misolda ko‘rsatilganidek, loading="lazy" qo‘shish brauzerga foydalanuvchi rasmga yaqinlashguncha uni yuklamaslikni buyuradi

<img src="example.com/image" loading="lazy">

* Eager loading nima ? Eager loading — bu barcha veb-sahifa resurslarini bir vaqtning o‘zida yuklash jarayoni. Murakkab va kodi ko‘p bo‘lgan veb-ilovalar, masalan, onlayn o‘yinlar, ko‘pincha eager loading'dan foydalanishni afzal ko‘radi.

<img src="example.com/image" loading="eager">

loading="eager" atributidan foydalanildi, bu esa rasmni darhol yuklashni ta'minlaydigan standart hisoblanadi. Bu, darhol ko'rilishi kerak bo'lgan muhim rasmlar uchun ishlatilinadi. image tag'da default holatda loading attribute qiymati eager bo'ladi 🔗 cloudflare.com/learning/performance/what-is-lazy-loading ⚙️ React Lazy Loading React'da component dinamik tarzda yuklanish uchun, React.lazy funksiyasi ishlatilinadi Odatda, Lazy loading React ilovalarida ko'p ishlatilmaydi, chunki React ko'pincha bitta sahifali ilovalar (SPA) yaratish uchun ishlatiladi. React odatda butun ilovani bitta faylga birlashtiradi (bundle qiladi). Misol: Lazy Loading Component

import React, { Suspense } from "react";

const LazyComponent = React.lazy(() => import("./LazyComponent"));

function App() {
  return (
    <div>
      <h1>Welcome to My App</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

export default App;

React.lazy faqat LazyComponent render qilinganda dinamik ravishda import qiladi. Suspense fallback komponent yuklanayotgan paytda zaxira UI taqdim etadi (loader). 📹 youtu.be/KcbPpVeDqKA?si=2_eFmDXsVeC3--AR ⚙️ Angular Lazy Loading Default holatda, NgModul'lar tezda yuklanadi. Bu shuni anglatadiki, ilova yuklanganda, barcha NgModul'lar darhol yuklanadi, ular hozirgi vaqtda zarur yoki yo'qligiga qaramay. Lazy loading dastlabki paket (bundle) o'lchamlarini kichikroq saqlashga yordam beradi, bu esa yuklash vaqtlarini qisqartirishga yordam beradi. Angular modullarini lazy loading qilish uchun AppRoutingModule routing konfiguratsiyasida component o'rniga loadChildren'dan foydalaniladi

const routes: Routes = [
  {
    path: 'items',
    loadChildren: () => import('./items.module').then(m => m.ItemsModule)
  }
];

🔗 v17.angular.io/guide/lazy-loading-ngmodules 📹 youtu.be/NFJbXP6Ci98?si=tutzScmyavxQbYim #lazyLoading #react #angular ✅ @JasXDev

🗂 Linked List in Javascript (2- qism) Yuqorida ta’kidlanganidek, ListNode ikkita elementni o‘z ichiga oladi: ma’lumotlar va keyingi node'ning manzili. * Node Class & Constructor LinkedList class yaratishdan oldin, ListNode yaratishimiz kerak. LinkedList'ni tashkil etuvchi node'larni yaratish uchun class Node ishlatiladi. Har bir node data xossasiga va next xossaga ega bo‘ladi. data xususiyati node'da saqlanadigan ma’lumotlarni saqlaydi. next xususiyat LinkedList'ning keyingi node'ga ishora qiladi. JavaScriptda ListNode'ni quyidagicha amalga oshirishimiz mumkin:

class Node {
    constructor(data) {
        this.data = data
        this.next = null                
    }
}

this.data = data - Node class'ga uzatilgan ma’lumotlar joriy obyektning data xususiyatiga saqlanadi. this.next = null node'ning next xossasiga null'ga o‘rnatadi. * Linked List Class & Constructor Endi Node Class'ga ega bo‘lganimiz sababli, biz LinkedList class'ni yaratishimiz mumkin. LinkedList Class head va tail xususiyatlariga ega. Head - LinkedList'dagi birinchi node'ga ishora qiladi. Tail - LinkedList'dagi oxirgi node'ga ishora qiladi. Agar LinkedList bo'sh bo'lsa ya'ni bironta node mavjud bo'lmasa head va tail qiymati null'ga teng bo'ladi

class LinkedList {
   constructor() {
    this.head = null;
    this.tail = null;
  }
}

* Yangi node qo'shish add() method LinkedList'ning oxiriga yangi node qo'shadi. Agar List'ning birinchi elementi (head) null qiymatga ega bo'lsa, yangi node head'ga biriktiriladi. Agar head qiymatga ega bo'lsa, yangi node tail'ga biriktiriladi. Ushbu usulning time complexity'si O (1) ga teng, chunki u yangi node'ni qo‘shish uchun LinkedList orqali loop o‘tishi shart emas.

add(data) {
  const node = new Node(data);

  if (this.head === null) {
    this.head = node;
  } else {
    this.tail.next = node;
  }

  this.tail = node;

* Linked List Loop PrintAll usuli head node'dan boshlanadi va har bir node orqali tail node'ga yetguncha takrorlanadi.

  printAll() {
    let current = this.head;

    while (current !== null) {
      console.log(current.data);
      current = current.next;
    }
  }

Endi biz buni yangi LinkedList yaratish va unga ba’zi node'larni qo‘shish orqali sinab ko‘rishimiz mumkin.

const list = new LinkedList();

list.add(1);
list.add(2);
list.add(3);
list.add(4);

list.printAll();

* Ma'lum bir index'dagi node'ni olish get usuli node'ning ma’lumotlarini ko‘rsatilgan indeks'da qaytaradi. U indeks qiymatini qabul qiladi va ko‘rsatilgan indeksdagi node'ga yetib borguncha LinkedList orqali takrorlanadi. Keyin o‘sha node'ning ma’lumotlarini qaytaradi. Ushbu usulning time complexity'si O(n) ga teng, chunki u ko‘rsatilgan indeksdagi node'ni topish uchun LinkedList orqali o‘tishi kerak. Massivlar buning uchun yaxshiroq variant, chunki ular istalgan vaqt kirish imkoniyatiga ega. Massivdagi elementga murojaat qilishning time complexity'gi O(1) ga teng.

 get(index) {
    let current = this.head;
    let i = 0;

    while (i < index) {
      current = current.next;
      i++;
    }

    return current.data;
  }

👨‍💻 https://github.com/bradtraversy/traversy-js-challenges/blob/main/07-stacks-queues-linked-lists/10-linked-list-implementation/readme.md 📹 https://youtu.be/ZBdE8DElQQU?si=S2P__kh9HkIO61MT 🔗 https://www.freecodecamp.org/news/implementing-a-linked-list-in-javascript/ #algorithm #linkedList #js ✅ @JasXDev