JavaScriptda Destructuring assignment

JavaScriptJavascript interviewInterview

Summary

Bugungi maqolamizda yana bir muhim JavaScript sintaksi bo’lgan, Destructuring assignment haqida batafsil tanishib chiqamiz!.

Category

JavaScript

Javascript interview

Interview

Cover

https://utfs.io/f/b2288c1b-34bc-402d-a03e-f3be2dc97847-hty9m5.jpg

Slug

javascript-destructuring-assignment

Date

‣

author

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:


const fruits = ['olma', 'banan', 'uzum'];

const [birinchiMeva, ikkinchiMeva] = fruits;

console.log(birinchiMeva); // 'olma'
console.log(ikkinchiMeva); // 'banan'

Obyekt bilan ishlash

Obyektlardan qiymatlarni ajratib olishda figurali qavslar ({}) ishlatiladi:


const person = {
    ism: 'Anvar',
    yosh: 22,
};

const { ism, yosh } = person;

console.log(ism); // 'Anvar'
console.log(yosh); // 25

Nomlarni o'zgartirish

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.

Obyekt va Spread:


const person = {
    ism: 'Anvar',
    yosh: 22,
    shahar: 'Jizzax',
    kasb: 'Dasturchi'
};

// Destructuring yordamida `ism` va `yosh` ajratib olindi
const { ism, yosh, ...qolganlari } = person;

console.log(ism); // 'Anvar'
console.log(yosh); // 25
console.log(qolganlari); // { shahar: 'Toshkent', kasb: 'Dasturchi' }

Massiv va Spread:


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.

E’tiboringiz uchun raxmat!.