Bugungi maqolamizda yana bir muhim JavaScript sintaksi bo’lgan, Destructuring assignment haqida batafsil tanishib chiqamiz!.
Category
JavaScript
Javascript interview
Interview
Cover
Slug
javascript-destructuring-assignment
Date
‣
author
Published
Published
Assalomu Aleykum.
Bugun o’rganadigan JavaScript sintaksi juda ko’p joylarda uchratganmiz ayniqsa OOP da va turli JavaScript framework va kurtibxonalarida modullar import, exportida ko’p foydalanib kelganmiz.
Buni qaranki ko’pchligimiz va uzimda ham shu holat bo’lgan, aynan ushbu sintaksis nima ekanligini bilmay ishlatib kelganmiz 😀.
Gapni cho’zmay maqsadga o’taylik!.
JavaScriptda Destructuring assignment (bo'laklab ajratish) sintaksisi yordamida massivlar yoki obyektlardan ma'lum elementlar yoki qiymatlarni o'zgaruvchilarga osonlik bilan ajratib olishimiz mumkin ekan, bu esa bizga yaxshigina qulaylik beradi.
Massiv bilan ishlash
Massivdagi qiymatlarni ajratib olish uchun kvadrat qavslar ([]) ishlatiladi:
Agar obyektning xususiyat nomini o'zgartirish kerak bo'lsa, quyidagicha qilinadi:
const person = {
ism: 'Anvar',
yosh: 25
};
const { ism: name, yosh: age } = person;
console.log(name); // 'Anvar'
console.log(age); // 25
// Bu yerda ism va yosh xususiyatlari name va age o'zgaruvchilariga ajratib olindi.
To’xtang amalyotda qo’llash esdan chiqmasina 🧑🏻💻
Default qiymatlar
Agar ajratib olinadigan qiymat mavjud bo'lmasa, default qiymat belgilash mumkin:
const [birinchi = 'Olma', ikkinchi = 'Banan'] = [];
console.log(birinchi); // 'Olma'
console.log(ikkinchi); // 'Banan'
// Agar massiv bo'sh bo'lsa, birinchi va ikkinchi o'zgaruvchilari Olma va Banan qiymatlariga ega bo'ladi.
Qo’shimcha qilamiz
Destructuring va Spread operatorlarining kombinatsiyasi
Quyidagi misolda obyekt va massiv bilan ishlashda destructuring va …spread operatorlari birgalikda qanday ishlatilishini ko’rib chiqamiz.
const fruits = ['olma', 'banan', 'uzum', 'anor'];
// Destructuring bilan birinchi elementni ajratib olish
const [birinchiMeva, ...qolganMevalar] = fruits;
console.log(birinchiMeva); // 'olma'
console.log(qolganMevalar); // ['banan', 'uzum', 'anor']
Bu usullar JavaScriptda modular kod yozishda juda foydali bo'lib, kodni yanada o'qilishi oson va ixcham qiladi. Spread operatori obyektlar yoki massivlarni birlashtirish, yangilash yoki nusxa olish uchun ham ishlatiladi, bu kodni yozish jarayonini sezilarli darajada yengillashtiradi.