JavaScript Fundamentals: Har bir dasturchi bilishi kerak

Kirish

JavaScript hozirgi kunda eng mashhur dasturlash tillaridan biri bo'lib, web saytlarni interaktiv qilish uchun ishlatiladi. Frontend, Backend va hatto mobil ilovalarda ham qo'llaniladi. JavaScript'ni puxta o'rganish zamonaviy dasturchi bo'lish uchun zarur.

1. O'zgaruvchilar: var, let va const

JavaScript'da o'zgaruvchilarni e'lon qilishning uchta usuli mavjud:

var - eski usul

var ism = "Ali";
var yosh = 25;
var yosh = 30; // Qayta e'lon qilish mumkin
console.log(yosh); // 30

Muammo: var function-scoped bo'lib, block-scoped emas. Bu kutilmagan xatolarga olib kelishi mumkin.

let - zamonaviy usul

let ism = "Dilshod";
ism = "Jasur"; // O'zgartirish mumkin
// let ism = "Nodir"; // ERROR: qayta e'lon qilish mumkin emas

let block

-scoped bo'lib, faqat o'zi e'lon qilingan blok ichida mavjud.

const - o'zgarmas qiymatlar

const PI = 3.14159;
// PI = 3.14; // ERROR: qayta tayinlash mumkin emas

const user = {
    ism: "Aziz",
    yosh: 22
};
user.yosh = 23; // Bu ishlaydi, chunki obyektning xususiyati o'zgaradi

2. Ma'lumot turlari

JavaScript'da 7 ta primitive ma'lumot turi mavjud:

String - matn

const matn1 = "Salom dunyo";
const matn2 = 'JavaScript';
const matn3 = `Template literal: ${matn1}`;

Number - raqamlar

const butun = 42;
const kasr = 3.14;
const katta = 1e6; // 1000000
const manfiy = -10;

Boolean - mantiqiy qiymat

const rost = true;
const yolg = false;
const katta = 10 > 5; // true

Undefined va Null

let aniqlanmagan; // undefined
const bosh = null; // null - ataylab bo'sh qiymat

3. Funksiyalar

Funksiyalar - kodni qayta ishlatish uchun asosiy vosita.

Function Declaration

function salom(ism) {
    return `Salom, ${ism}!`;
}
console.log(salom("Jamshid")); // Salom, Jamshid!

Arrow Function - qisqa sintaksis

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

const kvadrat = x => x * x;
console.log(kvadrat(4)); // 16

Higher-Order Functions

const raqamlar = [1, 2, 3, 4, 5];

// map - har bir elementni o'zgartirish
const kvadratlar = raqamlar.map(x => x * x);
// [1, 4, 9, 16, 25]

// filter - shartga mos elementlarni saralash
const juftlar = raqamlar.filter(x => x % 2 === 0);
// [2, 4]

// reduce - bitta qiymatga keltirish
const yigindi = raqamlar.reduce((sum, x) => sum + x, 0);
// 15

4. Obyektlar va Massivlar

Obyektlar

const talaba = {
    ism: "Jasur",
    yosh: 21,
    kurs: 3,
    fanlar: ["JavaScript", "React", "Node.js"],
    salom: function() {
        return `Mening ismim ${this.ism}`;
    }
};

console.log(talaba.ism); // Jasur
console.log(talaba["yosh"]); // 21
console.log(talaba.salom()); // Mening ismim Jasur

Destructuring - qulaylik

// Obyekt destructuring
const { ism, yosh } = talaba;
console.log(ism); // Jasur

// Array destructuring
const [birinchi, ikkinchi] = talaba.fanlar;
console.log(birinchi); // JavaScript

Spread Operator

const yangiTalaba = {
    ...talaba,
    yosh: 22,
    universitet: "TATU"
};

const raqamlar1 = [1, 2, 3];
const raqamlar2 = [4, 5, 6];
const hammasi = [...raqamlar1, ...raqamlar2];
// [1, 2, 3, 4, 5, 6]

5. Asinxron JavaScript

Callback Functions

setTimeout(() => {
    console.log("2 soniyadan keyin");
}, 2000);

Promises

const malumotOlish = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const data = { ism: "Ali", yosh: 25 };
            resolve(data);
        }, 1000);
    });
};

malumotOlish()
    .then(data => console.log(data))
    .catch(error => console.error(error));

Async/Await - zamonaviy yondashuv

async function malumotniKoʻrsatish() {
    try {
        const data = await malumotOlish();
        console.log(data);
    } catch (error) {
        console.error(error);
    }
}

malumotniKoʻrsatish();

6. ES6+ Yangi Xususiyatlar

Template Literals

const ism = "Sardor";
const yosh = 28;
const matn = `Mening ismim ${ism} va men ${yosh} yoshdaman`;
console.log(matn);

Default Parameters

function salom(ism = "Mehmon") {
    return `Salom, ${ism}!`;
}
console.log(salom()); // Salom, Mehmon!
console.log(salom("Ali")); // Salom, Ali!

Optional Chaining

const user = {
    ism: "Jasur",
    manzil: {
        shahar: "Toshkent"
    }
};

console.log(user?.manzil?.shahar); // Toshkent
console.log(user?.telefon?.raqam); // undefined (xato bermaydi)

Xulosa

JavaScript fundamentallarini puxta o'rganish web dasturlashda muvaffaqiyatga erishish uchun zarur. Ushbu maqolada ko'rib chiqqan konsepsiyalar har qanday JavaScript loyihasida qo'llaniladi.

Keyingi qadamlar:

• DOM manipulyatsiya o'rganish
• Event handling va event listeners
• Fetch API va HTTP so'rovlar
• JavaScript framework'lari (React, Vue, Angular)