JavaScriptda "Destructuring assignment"

Assalamu Alaykum.

Bugungi maqolamizning mavzusi ko'rib turganingizdek "Destructuring assignment" bo'ladi. Nomi notanish bo'lsada ko'pchiligimiz ishlatib ko'rgan mavzulardan biri.

Demak boshladik.

Bilamiz, JS da eng ko'p ishlatiladigan data type lardan biri bu Object bo'ladi. Ya'ni, Arraylar va Objectlar. Deyarli barcha katta dasturlarda object va arraylarni uchratishimiz mumkin.

Bir savol tug'iladi, Array va Object lar o'zida birqancha o'nlab, hatto yuzlab qiymatlarni o'zida bemalol saqlashi mumkin. Ammo biz u qiymatlarni ichidan aynan o'zimizga kerakligini chiqarib olib ma'lum bir o'zgaruvchiga berishimiz kerak bo'lib qolsa qanday yo'l tutamiz ?

"Destructuring assignment" orqali!

Qanday ?

Demak tasavvur qilamiz, bizda ishchilar ismlari joylashgan quyidagicha array bor:

let arr = ["Josh","John", "Steve", "Alex", "Tom", "Jerry"];

va bu arraydan bizga faqat birinchi ikkita ishchini olib ma'lum bir o'zgaruvchiga berib, ularni ustida bir qancha amallar qilishimiz kerak. Demak bu holatda "Destructuring assignment" dan foydalanishimiz mumkin.

let [firstEmp, secondEmp] = arr; // firstEmp = "Josh", secondEmp = "John";

Ko'rib turganimizdek arrayning ketma ketligiga binoan, birinchi o'zgaruvchi arraydagi birinchi qiymatni, ikkinchisi esa ikkinchi qiymatni qabul qildi. Agar uchinchisi ham kerak bo'lsa shunchaki uchinchi o'zgaruvchini qatorga qo'shamiz holos.

Bu oddiyroq ko'rinishi edi. Endi boshqa qulayliklari bilan tanishamiz.

Agar arraydagi birinchi qiymatni va uchinchi qiymatni o'zgaruvchiga olishimiz kerak bo'lsa nima qilamiz ?, Chunki uchinchi qiymatga yetib borishimiz uchun tepada 3 ta o'zgaruvchi yozishimiz kerakligini bildik. Ammo bizga ikkinchi o'zgaruvchi kerak emas!

bu holatda , shunchaki ikkinchi o'zgaruvchi o'rniga hech narsa yozmasdan, vergul(,) orqali ikkinchi o'zgaruvchini o'tkazib yuborishimiz mumkin. Misol uchun:

let [firstEmp, , thirdEmp] = arr; // firstEmp = "Josh", , thirdEmp = "Steve";

Huddi shunaqa yo'l bilan.

Davom etamiz. 😉

Agar bizga arraydagi birinchi va ikkinchi qiymatlarni alohida o'zgaruvchilarga olishimiz va qolgan barcha qiymatlarni alohida bitta array sifatida boshqa o'zgaruvchiga berishimiz kerak bo'lsa nima qilamiz ?

Spread operatoridan(...spread) foydalanishimiz mumkin. Mana bunday:

let [firstEmp, secondEmp, ...otherEmps] = arr; // firstEmp = "Josh", secondEmp = "John", otherEmps = [ "Steve", "Alex", "Tom", "Jerry"];

Arraylar bilan "Destructuring assignment" ni ishlatishni o'rgandik. Endiki navbat Objectlarga.😎

Bizda quyidagicha object bor:

let emp = {name: "Josh", surname: "Sa'dullayev", age: 19 };

Arraylarda esingizda bo'lsa ma'lum bir ketma-ketlik bor edi. Ya'ni, birinchi o'zgaruvchi arraydagi aynan birinchi qiymatni olishi kerak degan. Objectlarda esa unday emas. Indekslarga asoslanmagan. Objectlarda biz berayotgan o'zgaruvchilar objectni key lariga bog'lanadi. Misolga o'tamiz:

let {surname, age, name} = emp; // surname = "Sa'dullayev", age = 19, name = "Josh"

Ko'rib turganimizdek biz bergan o'zgaruvchilar objectda nomlari birhil bo'lgan key larning qiymatlarini o'zlariga oldi. Ya'ni name o'zgaruvchisi emp.name ning qiymatini oldi.

Sinab ko'rishni unutmang har bir misollarni.😋

Arraylardagi kabi, bu yerda ham Spread operatoridan foydalanishimiz mumkin. Misol uchun:

let {age, ...fullName} = emp; // age = 19, fullName = {name: "Josh", surname: "Sa'dullayev"}

Demak tushundik. Amm0 savollar paydo bo'lishni boshlaydi. Agar biz yozgan o'zgaruvchining nomi va objectning ichidagi propertylar nomlari to'gri kelmasa, ya'ni isAdult o'zgaruvchisini qo'shsak-u, ammo emp objectini ichida u property bo'lmasa. Nima bo'ladi ? . isAdult = undefined bo'ladi. Agar objectning ichida u property bo'lmasa biz default qiymati sifatida boshqa qiymatni berishimiz mumkin. Qanday ?

let {isAdult = "default qiymat"} = emp; // isAdult = "default qiymat";

isAdult objectning ichidan topilmagani uchun default qiymat olindi.

let {name = "Default qiymat"} = emp; // name = "Josh";

name objectda mavjud bo'lgani uchun, default qiymat olinmadi.

Agar bizga emp.name ni olish kerak bo'lsayu, Ammo kodimizda name o'zgaruvchisini ishlatgimiz yo'q bo'lsa nima qilamiz ?

Quyidagi yechim javob bo'ladi: 😋

let {name: ism} = emp; // ism = "Josh"

Asosiy o'rgatmoqchi bo'lgan narsalarim shular edi. Shuningdek kodda quyidagicha holatlarda ham "Destructuring assignment" ni ko'rishingiz mumkin.

1) Stringlarda

let [a,b,c] = "abc"; // a = "a", b = "b", c = "c"

[a, b, c] = [b,c,a] // a = "b", b = "c", c = "b"

2) Nested objectlarda.

let user= {name: "Josh", address: {country: "Uzb", city: "Tashkent"} };

let {name, address: {country, city}} = user; // name = "Josh", country = "Uzb", city = "Tashkent"

Bugungi maqolamiz shulardan iborat edi. Savol, taklif va izohlarni kommentda kutaman.

Feedbacks are appreciated 😉

Maqola yoqqan bo'lsa boshqalarga ham ulashishni unutmang.

Alloh manfaatli qilsin.

Kanalimiz: @JoshDeveloper