Lesson 11 / الدرس 11

Destructuring / التفكيك

Pulling values out of an object or an array into named variables, in one line. It appears everywhere in modern code, and once you can read it a great deal of other people's code opens up.

سحب القيم من كائن أو مصفوفة إلى متغيّرات مسمّاة في سطر واحد. ويظهر في كل مكان في الشيفرة الحديثة، وما إن تستطيع قراءته حتى ينفتح لك كثير من شيفرة الآخرين.

The same thing, shorter

const name = product.name;              before
const price = product.price;

const { name, price } = product;        after

const { name, price = 0 } = product;    with a default if missing
const { name: title } = product;        under a different name

const [first, second] = list;           arrays, by position

The names on the left must match the keys, which is the whole rule for objects. For arrays it is position instead, since arrays have no names. Run the demonstration.

Where it earns its place

Situation	Why it helps
In a function parameter list	The call site names every value, in any order
In a for … of over objects	The loop body reads without dots
Taking two values from a response	One line instead of three
Importing from a module	The same syntax — lesson 14
Everything from one object	Do not — see the warning

The first row is the one worth adopting. It answers the complaint from lesson 19 of the basics course: a function with six positional parameters cannot be called correctly without checking the definition, and one that destructures an object names every value where it is called.

وتفكيك شيء هو undefined يرمي خطأً فورًا. فـconst { name } = order.customer ينهار حين لا يوجد عميل، والرسالة تلوم سطر التفكيك لا البيانات المفقودة. أعطِ الكل قيمة افتراضية — const { name } = order.customer ?? {} — أو افحص أولًا. وهذا الشكل نفسه من التسلسل الاختياري في الدرس 13، وهو أشيع انهيار تفكيك.

Two smaller notes. Destructuring more than about four values in one line stops being readable — at that point taking the object itself and using dots is clearer. And renaming with { name: title } reads backwards the first few times: the key is on the left and your new variable name is on the right, which is the opposite of an assignment.

وملاحظتان أصغر. فتفكيك أكثر من نحو أربع قيم في سطر يكفّ عن كونه مقروءًا — وعندها يكون أخذ الكائن نفسه واستخدام النقاط أوضح. وإعادة التسمية بـ{ name: title } تُقرأ معكوسة أول مرات: فالمفتاح على اليسار واسم متغيّرك الجديد على اليمين، وهو عكس الإسناد.

وستقابل هذه الصيغة باستمرار في شيفرة الآخرين وفي التوثيق قبل أن تختار كتابتها بزمن طويل، وهو السبب الحقيقي لتعلمها الآن. فتوقيع دالة يقرأ function Card({ title, children }) تفكيك، والتعرف عليه هو الفرق بين قراءة المثال وأن يوقفك.

Try it live / جرّب بنفسك

<pre id="out"></pre>

<script>
  const lines = [];

  function oldWay(name, price, origin) {
    return name + ' ' + price;
  }

  function newWay({ name, price, origin = 'unknown' }) {
    return name + ' ' + price + ' (' + origin + ')';
  }

  lines.push(newWay({ name: 'Medjool', price: 120 }));

  document.getElementById('out').textContent = lines.join('\n');
</script>

Preview / المعاينة

Check yourself / اختبر نفسك

1. What does const { name, price } = product do?

ماذا يفعل const { name, price } = product؟

2. Why does const { name } = order.customer sometimes crash?

لماذا ينهار const { name } = order.customer أحيانًا؟

3. Where does destructuring help most?

Your task / مهمتك

Take three functions from earlier in this course that take several parameters and rewrite them to destructure a single object instead, showing a call to each before and after. Then loop over a list of objects using destructuring in the loop header. Finally, cause the undefined crash on purpose, show the message, and fix it two different ways.

خذ ثلاث دوال من هذه الدورة تأخذ عدة وسائط وأعد كتابتها لتفكك كائنًا واحدًا بدلًا منها، مع إظهار استدعاء لكل واحدة قبل وبعد. ثم دُر على قائمة كائنات مستخدمًا التفكيك في ترويسة الحلقة. وأخيرًا تسبب في انهيار undefined عمدًا، وأظهر الرسالة، وأصلحه بطريقتين مختلفتين.

Three functions rewritten, calls shown both ways ثلاث دوال معادة، والاستدعاءات بالطريقتين
A loop destructuring in its header حلقة تفكك في ترويستها
At least one default value used قيمة افتراضية واحدة على الأقل مستخدمة
The crash reproduced and fixed two ways الانهيار مُعاد إنتاجه ومُصلَح بطريقتين