همه چیز درباره object destructuring در جاوااسکریپت

سلام? فرقی نمیکنه که من و شما react کار کنیم یا vue, angular و یا vanilla js. مهم اینه که ما هرروز داریم با جاوااسکریپت کار میکنیم و لازمه که توی موارد پایه، خودمون رو قوی نشون بدیم. (البته فقط قوی نشون دادن کافی نیست و واقعا باید قوی باشیم)

چیزی که هرروز داریم توی برنامه هامون ازش استفاده میکنیم داده ها هستن و اگر داده ای وجود نداشته باشه عملا برنامه ما هم به هیچ دردی نمیخوره پس داده ها هستن که به برنامه ما ماهیت میدن.

حالا این وسط برای اینکه ما برنامه نویس ها راحت تر باشیم میایم و با نوع های مختلفی داده هامون رو مدیریت میکنیم تا شلخه و درهم برهم نباشن. مثل ذخیره کردن اطلاعات ی کاربر توی یک object مثل نمونه زیر:

const user = {

name: 'Chris',

age: 33,

};

ذخیره اطلاعات توی object ها یکی از کاراییه که ما شاید روزانه چندین بار انجام بدیم و بهمون هم کمک میکنه که خیلی تر و تمیز تر اطلاعاتمون رو ذخیره کنیم و توی جای خودش ازش استفاده کنیم. مثل مثال زیر که مثلا من میخوام نام کاربر رو توی ی متغیر وارد کنم:

let name = user.name;

حالا شاید بگین خب تا اینجا چه مشکلی مگه داریم اینجا.باید بگم که هیچی

شما میتونید از همین روش تا آخر عمرتون استفاده کنید و به هیچ مشکلی هم برنخورین اما میخوام توی این مطلب ی ویژگی کوچولو از ES6 رو بهتون بگم تا یکم تروتمیز ترش کنیم. اصلا هم سخت نیست(قول میدم)

object destructuring در جاوااسکریپت

توسعه دهنده های js توی es6 به این نتیجه رسیدین که ی ویژگی destructuring رو به js اضافه کنن و این تنها مختص به object ها نیست و شما میتونید از این عملیات توی آرایه ها هم استفاده کنید.

خب برای انجام این عملیات ما فقط میایم و بجای اینکه با نقطه (.) به مقادیر ابجکت دسترسی پیدا کنیم و بعد اون هارو داخل یک متغیر بریزیم میایم و همین اول کار به صورت زیر عمل میکنیم:

const { name, age } = user;

خب بریم سراغ توضیح کد بالا. توی کد بالا ما اومدیم و بعد از ثابت const یک آکولاد ({}) باز و بسته کردیم و داخلش مقدار name و age رو قرار دادیم و بعد یک مساوی و آبجکتمون.

حالا توی کد بالا انگار که مرورگر اول ی متغیر با نام name ایجاد کنه و بعد بره و توی آبجکس ما شروع کنه به گشتن و ببینه آیا مقداری با اسم name هست یا ن؟ اگر مقداری وجود داشته باشه اون مقدار رو داخل اون متغیر که ساخته قرار میده و میره سراغ پارامتر بعدی که age هست. دوباره ی متغیر ایجاد میکنه و شروع میکنه داخل object گشتن و اگر مقدار age رو پیدا کرد اون رو داخل متغیری که ساخته بود میریزه. به همین راحتی.

حالا شاید این سوال پیش بیاد که اگه اون مقدار رو توی اون object نبود چی؟ تکلیف متغیری که ساخته چی میشه؟ خطا میده؟ جواب همه این سوال ها اینه که اگه اون مقداری رو که نوشتیم نباشه، مقدار undefined رو داخل متغیر قرار میده.

حالا برای اینکه بخوایم تستش کنیم کدمون رو میتون مقداری name,age رو مثل زیر log بگیریم:

const { name, age } = user;

console.log(name);

// Chris

console.log(age);

// ۳۳

به همین راحتی شما برای اولین بار از object destructuring در جاوااسکریپت استفاده کردین.

خب نکنه فکر کردین به همینجا ختم میشه؟ ن. چون با این قابلیت میشه کار های خفن تر دیگه ای هم انجام داد که اینجا میخوام چند تا از کاربرد های دیگه object destructuring در جاوااسکریپت رو بهتون بگم تا دیگه حسابی بترکونید.

خب برای اینجا کافیه☺️اخه من این پست رو منتشر کردم تا بفهمین ی همچین پست خوبی رو توی سایت آقای مبتدی هست و میتونید اونجا بیاین و این مطلب رو کامل بخونید. (شاید از این حرکت من ناراحت شده باشید ولی اگه دنبال یادگرفتن باشید حتما به سایت میاین و ادامش رو میخونید و اگر هم ناراحت شدین از این حرکت که معذرت میخوام☺️)

لینک مطلب: همه چیز درباره object destructuring در جاوااسکریپت