JavaScriptda ishlashni osonlashtiruvchi muhim tushunchalarni o'rganing.

1. O'q (arrow) funksiyasi

Javascriptda an'anaviy tarzda funktsiya kalit so'zidan foydalanib funktsiyani yaratishingiz mumkin . Lekin o'q (arrow) funksiya tuzilmasidan foydalanib, siz kodni tezroq yozishingiz va uni yanada qiziqroq qilib ko'rsatishingiz mumkin.

function​ kalit so'zi yordamida funktsiyani yaratish :

​function hello () {
console.log('hello world');
}

O'q funksiyasidan foydalanish:

const hello = () => {
console.log('hello world');
};

Faqat bitta bayonotli funktsiyalar uchun siz jingalak qavslarsiz to'g'ridan -to'g'ri bayonotni belgilashingiz mumkin:

const hello = () => console.log('hello world');

Qaytish bayonotlari uchun siz to'g'ridan -to'g'ri returnkalit so'zsiz qiymatlarni qaytarishingiz mumkin .

const hello = () => {
return "Hello World";
}
// quyidagi funksiya bilan bir xil
const hello = () => "Hello World";

2. Qayta qo'ng'iroq qilish (callback) funktsiyasi

Funktsiya chaqirilganda, u argument sifatida "qayta qo'ng'iroq qilish funktsiyasi" deb nomlangan funktsiyani qaytarishi mumkin.

Buni yaxshiroq tushunish uchun, keling, hello qayta qo'ng'iroq qilish funktsiyasini yarataylik , u nom (string)ni parametr sifatida oladi va qayta qo'ng'iroqni xabar (string) bilan qaytaradi.

const hello = (name, cb) => {
const greetings = "Hello, " + name + "!";
cb(greetings);
};

hello -> funksiya nomi
name -> funktsiya tomonidan qabul qilingan parametr

cb -> so'zlarni parametr sifatida yuborish orqali funktsiyani qaytaradi.

Keling, o'z funktsiyamizni callback funksiyasi orqali qaytaramiz:

hello("Ayyubxon", (greet) => {
alert(greet);
});

"Ayyubxon" bu funksiyaga berilgan qiymat.

3. Javascriptda obyektlar

Javascript obyekti xususiyatlari va ularning qiymatlarini o'z ichiga oladi.

const student = {
name : "Harry",
year : 5,
house : "Griffindor",
}

// Qiymatlarga uning xususiyatidan foydalanib, nuqta operatori
console.log (student.name) yordamida kirish mumkin ;

Xususiyatlar qiymat sifatida funktsiyaga ega bo'lishi mumkin:

const hello = { fname : "Hermoine", lname : "Granger", fullName : function () {
 return this.fname + " " + this.lname;
};
console.log(hello.fullName()); //logs "Hermoine Granger"ni chiqarib beradi

Hususiyatlar qiymati sifatida obyektga ega bo'lishi mumkin:

const nestedObject = {
name: {
type: String,
maxLength: 10
},
regno: {
turi: soni
}
};

Funktsiya deklaratsiyasi ham {} bilan boshlanganligi sababli, ​obyektni shu tarzda qaytarganingizda, obyektni qavs bilan o'raganingizga ishonch hosil qiling.

const funcToReturnObject = () => {
return {
name : "Draco",
house : "Slytherin"
};
};

const one_line_funcToReturnObject = () => ({
name : "Draco",
house : "Slytherin"
});

4. Massiv (array) va obyektlarni buzish(destructuring).

Massiv yoki ob'ektni o'zgaruvchilarga buzish(destructuring). Ya'ni o'zgarmaydigan nomlarga massiv yoki obyekt qiymatlarini berish.

Qiymatlar massivdagi elementlar tartibida belgilanadi:

const arr = ["Hello", "World"];//Destructure 
[ hello, world ] = arr;
​console.log(hello); // logs "Hello"
console.log(world); // logs "World"

Qolgan elementlarni alohida qatorda qayerda saqlashni tanlashingiz mumkin.

const newarr = [0, 1, 1, 2, 3, 5];
​
​[first, second, ...others] = newarr;
​
​​console.log(first); // logs 0
​
​console.log(others); // logs [1, 2, 3, 5]​

Obyektni buzish (destructuring)

Siz faqat kerakli qiymatlarni belgilashingiz mumkin. Mulk nomlarini jingalak qavslar ichiga kiriting

const person = { name : "Luna", age : 16, house: "Ravenclaw"};

​{ name, age } = person;console.log(name); // logs "Luna"

​console.log(age); // logs 16​

5. import va eksport

Shunga o'xshash funktsiyalarni alohida faylda bo'lish har doim yaxshi amaliyotdir.

Siz keyinchalik funktsiyalarni modul sifatida ajratishingiz mumkin. Keyin ularni boshqa faylga import qilishingiz mumkin.

Fayldan funktsiyalarni eksport qilish uchun module.exports​'dan foydalaning

const hello = () => {
console.log("hello world");
}
module.exports = hello;

Keyin, eksport qilingan funktsiyalarni ishlatish uchun faylni package sifatida so'rang(require):

const hello = require("hello");
hello();

Agar siz bir nechta funktsiyalarni eksport qilmoqchi bo'lsangiz, ularni obyekt sifatida yuboring:

• hello.js

const hello = () => { alert("Hello!");};
const helloName = (name) => { alert("Hello!, " + name )};​
​module.exports = { hello: hello, helloName: helloName,};​

• Boshqa .jsfaylga import qiling .

const hello = require("hello.js"); ​

hello.hello();
hello.helloName("Ron");

• Obyektni buzish yordamida faqat kerakli funktsiyalarni import qiling.

const { helloName } = require("hello.js");
​helloName("Ron");

6. async va await

API orqali serverga so'rov yuborilganda, so'rovni qayta ishlashga biroz vaqt ketishi mumkin va kutish vaqtida javascript funktsiya chaqiruvidan keyin keyingi iborani bajaradi.

Ammo ba'zida quyidagi bayonot funktsiya chaqiruvi tomonidan qaytariladigan ma'lumotlarga bog'liq bo'lishi mumkin. Shunday qilib, siz kerakli natijaga erisha olmaysiz.

Bunga yo'l qo'ymaslik uchun, biz JavaScript -ni so'rov bajarilmaguncha kutish uchun async/await -dan foydalanishimiz mumkin .

awaitFunktsiya chaqiruvidan oldin kalit so'zdan foydalaning

const data = await aFunctionCall();
console.log(data);

So'ngra, so'zlarni asinxron funktsiyaga qo'shing :

const func = async () => {
const data = await aFunctionCall();
console.log(data);
}

O'ylaymanki, siz uchun maqola foydali bo'ldi.