yazn_108 image

يزن احمد(@yazn_108)مطور مواقع فرونت اند

لا تتصل بنا بل تواصل معي

لا حاجة للتكلف في صياغة الرسالة كل ما تحب ان اساعدك فيه، اخبرني عنه. اذا عندك اي شيء تحب تخبرني عنه فانا جاهز لمساعدتك والهدف من المنصة هو البساطة وتجنب التكلفات والرسميات التي اعتدنا عليها في المواقع حتى اصبحت جميع المواقع لها نمط واحد وان تنوعت في الافكار والاشكال.اهلا وسهلا ومرحبا بك

اشترك في النشرة البريدية

ما راح أزعجك برسائل كثيرة، كل القصة إنك تحط بريدك عشان يوصلك تنبيه أول ما أنشر مقالات جديدة. بسيطة وسهلة 👌 أهلاً بك.

هدف المنصة/من انا؟شروط الاستخدام

© جميع الحقوق محفوظة لـyazn_108

الـDestructuring في JavaScript

الـDestructuring هو طريقة لاستخراج البيانات من الـArrays أو الـObjects على شكل متغيرات جديدة بطريقة مختصرة وسهلة، بدلًا من الكتابة التقليدية.

  1. ما الهدف من استخدامها؟
  2. تأثير Destructuring على الأداء
  3. اشترك في النشرة البريدية

ما الهدف من استخدامها؟

الـDestructuring في JavaScript فكرته بسيطة جدًا: يخليك تختصر وتوضح الكود بدل ما تكتب أسطر طويلة عشان توصل لقيمة من Array أو Object، يعني بدل ما تعيد وتكرر .name و .age كل شوي، تقدر تستخرج القيم مرة واحدة وتحطها في متغيرات. الميزة الحلوة إنه مو بس يختصر الكود، كمان يخليك تتعامل مع بيانات متداخلة بسهولة، وتقدر تحط قيم افتراضية لها إذا ما تم العثور على بعض القيم لسبب ما، وهذا مهم خصوصًا لو البيانات جاية من API أو مصدر خارجي، عشان ما يحصل أخطاء غير متوقعة. بالمختصر: الكود يصير أنظف، أسهل، وآمن.

تأثير Destructuring على الأداء

من ناحية تأثيره على الاداء فلا يوجد اي تأثير بين

الطريقة المعتادة:

javascript

const numbers = [1, 2, 3];
const first = numbers[0];

const person = {
  name: "yazn",
  age: 20
};
const name = person.name;

وطريقة الـDestructuring:

javascript

const [a, b, c] = [1, 2, 3];
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

const person = {
  name: "yazn",
  age: 20
};
const { name = "الاسم الافتراضي", age } = person;
console.log(name); // Yazan
console.log(age);  // 22

إلا في حالات محدودة جدًا يكون التأثير شبه معدوم، ويحصل هذا عند استخدام الـDestructuring بكثرة داخل نفس الـscope، وهذا يرجع لعملية التفكيك (destructuring) التي تتطلب معالجة إضافية من قبل محرك JavaScript في الخلفية. ومع هذا، مثل ماذكرت، هذا التأثير نادراً ما يكون ملحوظ ولا يؤثر على الأداء العملي للتطبيقات العادية، ولكن من باب الإشارة إلى أن هناك تكلفة صغيرة جدًا على المستوى الداخلي لمحرك اللغة عند الاستخدام المكثف للغاية. (وتقدر تعتبر هذه الجزئية غير موجودة 🙃)