Siz bilishingiz muhim bo’lgan JavaScript tushunchalar.
JavaScriptda ishlashni osonlashtiruvchi muhim tushunchalarni o’rganing.
1. O’q (arrow) funksiyasi
Javascriptda an’anaviy tarzda
funksiya kalit so’zidan foydalanib funksiyani 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 funksiyani yaratish :
function hello () {
console.log('hello world');
}
O'q funksiyasidan foydalanish:
const hello = () => {
console.log('hello world');
};
Faqat bitta bayonotli funksiyalar 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) funksiyasi
Funksiya chaqirilganda, u argument sifatida «qayta qo’ng’iroq qilish funksiyasi» deb nomlangan funksiyani qaytarishi mumkin.
Buni yaxshiroq tushunish uchun, keling,
hello qayta qo’ng’iroq qilish funksiyasini 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 -> funksiya tomonidan qabul qilingan parametr
cb -> so’zlarni parametr sifatida yuborish orqali funksiyani qaytaradi.
Keling, o’z funksiyamizni 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 funksiyaga 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
}
};
Funksiya 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 funksiyalarni alohida faylda bo’lish har doim yaxshi amaliyotdir.
Siz keyinchalik funksiyalarni modul sifatida ajratishingiz mumkin. Keyin ularni boshqa faylga import qilishingiz mumkin.
Fayldan funksiyalarni eksport qilish uchun
module.exports‘dan foydalaning
const hello = () => {
console.log("hello world");
}
module.exports = hello;
Keyin, eksport qilingan funksiyalarni ishlatish uchun faylni package sifatida so’rang(require):
const hello = require("hello");
hello();
Agar siz bir nechta funksiyalarni 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 funksiyalarni 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 funksiya chaqiruvidan keyin keyingi iborani bajaradi.
Ammo ba’zida quyidagi bayonot funksiya 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 .
awaitFunksiya chaqiruvidan oldin kalit so’zdan foydalaning
const data = await aFunctionCall(); console.log(data);
So’ngra, so’zlarni
asinxron funksiyaga qo’shing :
const func = async () => {
const data = await aFunctionCall();
console.log(data);
}
O’ylaymanki, siz uchun maqola foydali bo’ldi.
Web Dasturlash
Siz bilishingiz muhim bo’lgan JavaScript tushunchalar.