👩‍💻 npm run start: dev 👩‍💻

Men IT ni boshlaganimga ko'p bo'lmadi ammo bu kanalda o'zim o'rgangan va o'rganayotgan IT bilimlarimni ulashib boraman hamda IT bo'yicha yangiliklarni ham berib borishga harakat qilaman. Bu kanal tamomila sizga IT bilimlarini bera oladi deya olmasamda siz developerlarga oz bo'lsada foydasi tegadi degan umidim bor. Bu yerda kodlar, IT proyektlar va IT kompaniyalarda ishlayotgan insonlar bilan ham suhbat tashkillashtirish rejamda bor. Shu bilan birga Web site larning figma file larini hamda landing pagelarini ham ulashaman.

Albatta, bu yerda yozilgan fikrlar va ma'lumotlar bizni bu ilmni komil egasi degan da'vo yoki qarashdan yiroq deya takidlayman. Allohdan riyo hamda ujbdan saqlashini hamda bu yerda qilinadigan ishlarimizda faqat va faqat o'ziga suyanishimga ilhom berishini so'ragan holda boshlayman.

BRR: Bismillahir Rohmanir Rohim

https://t.me/bro_codeee

📱JavaScript environmentlari – qayerda ishlaydi?

JavaScript o‘zi til, lekin u turli “muhit”larda ishlaydi:

1. Browser (Front-end)

Chrome, Firefox ichida ishlaydigan JS.
👉 Button bosilganda modal ochilishi, formani yuborish, sahifani yangilamasdan ma’lumot olish – hammasi browserdagi JS.

2. React JS

Bu oddiy JavaScript ustiga qurilgan UI kutubxona.
👉 React = “JavaScript + Componentlar”.
Biz HTML o‘rniga componentlar yozamiz, lekin ichida baribir JS logic ishlatyapmiz.

3. Node.js (Back-end)

Node JS – bu JavaScriptni server tarafda ishlashiga imkon beradigan muhit.
👉 API yozish, database bilan ishlash, autentifikatsiya, fayl yuklash – bular backendda Node orqali qilinadi.
Demak, bitta til – uchta yo‘nalish: browserda UI, React’da SPA, Node’da server.

3️⃣https://t.me/bro_codeee3️⃣

📱Variable – o‘zgaruvchi nima?

Variable – bu ma’lumot turadigan qutining nomi.
Masalan: age = 25, userName = "Ali".

JavaScriptda ikkita asosiy kalit so‘z:

let – o‘zgaradigan qiymat

const – o‘zgarmaydigan qiymat

let age = 20;
age = 25; // o'zgartirish mumkin

const pi = 3.14;
// pi = 3.15; ❌ xato bo'ladi, const o'zgarmaydi

👉 Amaliy qoida:
🟡qiymat keyin o‘zgarishi kerak bo‘lsa – let

🟡o‘zgarmasa, doim bir xil bo‘lsa – const (configlar, URL, token nomi va hokazo).

3️⃣https://t.me/bro_codeee3️⃣

📱Function – nima va nima uchun kerak?

Function – bu qayta-qayta ishlatadigan kod bloki.
Masalan, har safar salomlashish uchun alohida console.log yozmaymiz, function yozib qo‘yamiz.

2 bosqich bo‘ladi:

Define – funksiyani qurib olish:

function greeting() {
  console.log("Hello World");
}

Call – funksiyani chaqirish:

greeting();

Shu bilan bir xil kodni istalgancha marta ishlatish mumkin.
Shu sababli functionlar kodni tartibli, qayta ishlatiladigan va oson o‘qiladigan qiladi.

4️⃣ Function strukturasi – 4 xil yozilish

4.1. Regular (oddiy) function
function greeting() {
  console.log("Hello from Regular");
}
greeting();

✅ Eng klassik ko‘rinish. Keyin greeting() deb chaqiramiz.

4.2. Anonymous (function expression)
const abc = function () {
  console.log("Hello from Anonymous");
};

abc();function () {} – nomi yo‘q.
Uni const abc ga tenglab, keyin abc() deb chaqiryapmiz.
Ko‘pincha callbacklarda ishlatiladi (masalan: button.addEventListener('click', function () {...})).

4.3. Arrow function
const xyz = () => {
  console.log("Hello from Arrow");
};
xyz();

Arrow function – expressionning zamonaviy, qisqaroq varianti.

Qisqa yozilishi ham mumkin:

const sum = (a, b) => a + b;
console.log(sum(2, 3)); // 5

Agar faqat bitta expression bo‘lsa, {} va return yozmasa ham bo‘ladi – avtomatik return bo‘ladi.

4.4. Auto-invoke (IIFE – darhol ishlaydigan function)

(function () {
  console.log("Hello from Auto invoke");
})();

•Bu yozilishda:
functionni e’lon qildik
darhol () bilan chaqirdik
•Ko‘pincha kodni alohida “scope”ga kiritib qo‘yish uchun ishlatiladi (global o‘zgaruvchilarni iflos qilmaslik uchun).

5️⃣ Returning vs Void function
Returning function – qiymat qaytaradi

function calculate() {
  const a = 10;
  const b = 2;
  return a + b;
}

const result = calculate(); // 12
console.log("result:", result);

👉 Muhim nuqta:
return yozilgan joydan keyin funksiya to‘xtaydi. Yana kod yozsang ham ishlamaydi.

Returning functionlar bilan:
natijani o‘zgaruvchiga saqlash
keyin boshqa joyda ishlatish boshqa functionga argument sifatida berish mumkin.

Void function – hech narsa qaytarmaydi

function calculateVoid() {
  const a = 10;
  const b = 2;
  console.log("result:", a + b);
}

calculateVoid();

Bu faqat ichida ishini qilib qo‘yadi, lekin tashqariga hech narsa qaytarmaydi.
Shuning uchun:

const res = calculateVoid();
console.log(res); // undefined

❗ Agar natijani keyin ishlatmoqchi bo‘lsang – albatta return ishlatish kerak.

4️⃣https://t.me/bro_codeee4️⃣

📱Parametr va Argument – farqi nima?📱

a, b → parametr (function ichida e’lon qilingan nomlar)

10, 20 → argument (chaqirayotganda berilgan haqiqiy qiymatlar)

Parametr = joy nomi
Argument = joyga qo‘yiladigan real ma’lumot

Yana bir misol:

function greeting(name) {
  console.log("Salom,", name);
}

greeting("Ali");   // name = "Ali"
greeting("Laylo"); // name = "Laylo"

Bitta function, lekin har xil argument bilan har xil natija.

4️⃣https://t.me/bro_codeee4️⃣

📱Scope – qanday ishlaydi?📱

const a = 50; // global

function calculate(b) {
  return a + b;
}

const result = calculate(10);
console.log("result:", result); // 60

Bu yerda:

Tashqaridagi a = 50 – global scope.

Function ichida a yo‘q, shuning uchun JS tashqariga qaraydi va global ani oladi.

Demak, 50 + 10 = 60.

Agar ichida yana const a = 5; deb yozsak:

const a = 50;

function calculate(b) {
  const a = 5; // local
  return a + b;
}

console.log(calculate(10)); // 
15

Endi function ichida yaqinroq bo‘lgan a ishlaydi – ya’ni 5.
Qoida: yaqin scope har doim ustun bo‘ladi.

4️⃣https://t.me/bro_codeee4️⃣

📱Synchronous va Asynchronous – qisqacha📱

Hozir ko‘rgan functionlarning hammasi synchronous:

console.log("1");
console.log("2");
console.log("3");

Natija har doim tartib bilan: 1 → 2 → 3.

Asynchronousda esa:

• serverdan ma’lumot kelishi

• fayl yuklanishi

• timer (setTimeout)

kabi ishlar parallelga o‘xshab ishlaydi va natija keyinroq keladi.

Misol:

console.log("1");

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

console.log("3");

Natija: 1, 3, va keyin 1 sekunddan so‘ng 2.
Bu mavzuni keyin Promise / async await bilan alohida post qilinadi.

📱 https://t.me/bro_codeee 📱

📱Programming Paradigms: Functional vs OOP

🔹 Functional Programming
Asosiy e’tibor: functionlarga.
⚫️Functionlar:
⚫️ko‘pincha pure function bo‘ladi (bir xil kirish = bir xil chiqish, tashqi holatni o‘zgartirmaydi).
⚫️yon ta’sir (side effect) kamroq bo‘ladi.
⚫️Ma’lumotlarni o‘zgartirish o‘rniga, ko‘proq yangi qiymat qaytaradi.
⚫️Masalan: map, filter, reduce bilan massivlarni qayta ishlash.

📱OOP (Object-Oriented Programming)
⚫️Asosiy e’tibor: object va classlarga.
⚫️Ma’lumot (property) + xatti-harakat (method) bitta joyda bo‘ladi.
⚫️Katta loyihalarda strukturani tartibli qiladi.
⚫️Sening kodingdagi class Person { ... } – toza OOP.

👩‍💻https://t.me/bro_codeee👩‍💻

👩‍💻OOP Big 4 – Abstraction, Encapsulation, Inheritance, Polymorphism👩‍💻

Quyidagi tushunchalar Person class misolida ko‘rsatib o‘tiladi.

1. Abstraction (Abstraksiya)

Abstraksiya – faqat kerakli qismini ko‘rsatib, keraksiz tafsilotlarni yashirishdir.
⚫️Modelda odam faqat name, age, introduce(), greet() orqali ifodalanadi.
⚫️Asl hayotda inson organizmida yurak, qon, biologiya va boshqa murakkab tizimlar mavjud bo‘lsa-da, kod darajasida faqat zarur bo‘lgan qismi olinadi.

📱https://t.me/bro_codeee📱

🌐Encapsulation (Inkapuslatsiya)🌐

Inkapuslatsiya – ma’lumot (state) va u bilan ishlovchi funksiyalarni (method) bitta kapsula, ya’ni class ichiga joylashdir.
🟡name, age – shu obyektga tegishli ma’lumot;
🟡introduce(), greet() – aynan shu obyekt bajarayotgan xatti-harakatlar.

Inkapuslatsiya natijasida kod tartibli bo‘ladi va har bir class o‘z ma’lumotlari uchun javobgar bo‘ladi.


😈https://t.me/bro_codeee😈

💻Inheritance (Meros / Vorislik)💻

Inheritance – bitta umumiy classdan boshqa classlarning meros olib, uni kengaytirib ishlatishi jarayonidir.

🟡Masalan, quyidagi misolda Student classi Person classidan meros oladi.

Bu yerda:
🟡Student → Persondan inherit qilyapti;
🟡name, age, introduce(), greet() – Student obyektlarida ham mavjud bo‘ladi;
🟡qo‘shimcha sifatida major property qo‘shiladi.

Bunday yondashuv katta loyihalarda kodni qayta-qayta yozishdan qochishga yordam beradi.

👩‍💻https://t.me/bro_codeee👩‍💻

🌐Polymorphism (Ko‘p shakllilik)🌐

Polymorphism – bir xil nomdagi methodning turli classlarda turlicha ishlashidir.


🟡person.introduce() → My name is David
🟡student.introduce() → I am student David

Method nomi bir xil (introduce), lekin bajariladigan logic har xil. Bu holat polymorphismga misol bo‘ladi.

😈https://t.me/bro_codeee😈

📱Objectlarni qayta sodda qilib tushuntirish📱

Quyida objectlar bilan ishlash bo‘yicha qisqa konspekt keltiriladi.

1. Object literal – eng oddiy usul

const person = {
  name: "David",
  age: 30,
  nationality: "Australian",
  greet() {
    console.log("Hi, How are you?");
  },
  introduce() {
    console.log(`My name is ${this.name} and I am ${this.age} years old!`);
  }
};

Bu obyekt:

🟡name, age, nationality → property (ma’lumot);

🟡greet(), introduce() → method (obyektning xatti-harakatlari);

🟡this.name → aynan shu obyekt ichidagi name maydoniga murojaat qiladi.

📱https://t.me/bro_codeee📱

📱Primitive vs Object (reference farqi)📱

Primitive turlar (string, number, boolean va boshqalar) qiymat bilan ishlaydi:



const a1 = "Jack";
let x1 = a1;
x1 = "Max";

console.log("a1:", a1); // "Jack"


Bu misolda:
🟡x1ga a1ning qiymati nusxa sifatida o‘tadi;
🟡x1 o‘zgartirilsa ham, a1 o‘zgarishsiz qoladi.

Objectlarda esa vaziyat boshqacha:



const person2 = { name: "Robert", age: 32 };
const person3 = person2;

person3.name = "Fred";

console.log(person2.name); // "Fred"


Bu holatda:
🟡person3 = person2 – ikkala o‘zgaruvchi ham bir xil obyekt manziliga qaraydi;
🟡person3.name o‘zgartirilishi person2ga ham ta’sir qiladi.

Bu reference (manzil bilan ishlash) tushunchasini ko‘rsatadi.

📱https://t.me/bro_codeee📱

📱Spread operator – yangi nusxa (yangi reference)📱



const person4 = { ...person2 };
person4.name = "Kyler";

console.log(person2.name); // eski qiymat
console.log(person4.name); // "Kyler"



Bu yerda:
🟡{ ...person2 } – person2
obyektidan yangi obyekt yaratiladi;
🟡person2 va person4 endi alohida obyektlar bo‘lib, biri o‘zgartirilganda ikkinchisiga ta’sir qilmaydi.

3️⃣https://t.me/bro_codeee3️⃣

📱new Object() bilan obyekt yaratish📱



const obj = new Object();
obj.name = "David";
obj.age = 30;
obj.hobby = "football";

console.log(`My name is ${obj.name}, I am ${obj.age}, and I love ${obj.hobby}`);



Bu ham object yaratadi, ammo amaliyotda ko‘proq literal usul ({ ... }) qo‘llaniladi, chunki u ixcham va o‘qilishi oson.

📱 https://t.me/bro_codeee📱