From bfde38e2c60305f818412514af49f8f0806dbba5 Mon Sep 17 00:00:00 2001 From: Saiful Date: Sat, 8 May 2021 01:43:10 +0600 Subject: [PATCH] Destructuring assignment --- .../10-destructuring-assignment/article.md | 195 +++++++++--------- 1 file changed, 97 insertions(+), 98 deletions(-) diff --git a/1-js/05-data-types/10-destructuring-assignment/article.md b/1-js/05-data-types/10-destructuring-assignment/article.md index 46aa760a9..bf68d4bb4 100644 --- a/1-js/05-data-types/10-destructuring-assignment/article.md +++ b/1-js/05-data-types/10-destructuring-assignment/article.md @@ -1,25 +1,25 @@ # Destructuring assignment -The two most used data structures in JavaScript are `Object` and `Array`. +জাভাস্ক্রিপ্টে সবচেয়ে বেশি ব্যবহৃত দুটি ডাটা স্ট্রাকচার হল `Object` এবং `Array`। -Objects allow us to create a single entity that stores data items by key, and arrays allow us to gather data items into an ordered collection. +সাধারণত অবজেক্ট কী(key) এবং ভ্যালু আকারে এবং অ্যারে ক্রম অনুসারে ডাটা সংরক্ষণ করে। -But when we pass those to a function, it may need not an object/array as a whole, but rather individual pieces. +কিন্তু, অনেক সময় এদের কোন একটি ফাংশনে আর্গুমেন্ট হিসেবে পাঠাতে চাইলে সম্পূর্ণ অবজেক্ট বা অ্যারের পরিবর্তে নির্দিষ্ট অংশ প্রয়োজন হয়। -*Destructuring assignment* is a special syntax that allows us to "unpack" arrays or objects into a bunch of variables, as sometimes that's more convenient. Destructuring also works great with complex functions that have a lot of parameters, default values, and so on. +*Destructuring assignment* একটি বিশেষ সিনট্যাক্স যার মাধ্যমে অবজেক্ট বা অ্যারের নির্দিষ্ট অংশকে সহজে ভ্যারিয়েবলে অ্যাসাইন করতে পারি, যা অনেক সময় সুবিধাজনক। এছাড়াও অনেক প্যারামিটার, ডিফল্ট ভ্যালু ইত্যাদি আছে এমন জটিল ফাংশনকে *Destructuring* সহজে হ্যান্ডেল করার সুবিধা দেয়। ## Array destructuring -An example of how the array is destructured into variables: +অ্যারেকে কিভাবে destructured করে ভ্যারিয়েবলে সেট করতে পারি তার একটি উদাহরণ দেখুন: ```js -// we have an array with the name and surname +// name এবং surname এর একটি অ্যারে আছে let arr = ["Ilya", "Kantor"] *!* // destructuring assignment -// sets firstName = arr[0] -// and surname = arr[1] +// firstName = arr[0] সেট হল +// এবং surname = arr[1] let [firstName, surname] = arr; */!* @@ -27,18 +27,18 @@ alert(firstName); // Ilya alert(surname); // Kantor ``` -Now we can work with variables instead of array members. +এখন আমরা অ্যারের আইটেমগুলোর পরিবর্তে ভ্যারিয়েবল নিয়ে কাজ করতে পারি। -It looks great when combined with `split` or other array-returning methods: +এছাড়াও `split` বা যেসব মেথড অ্যারে রিটার্ন করে এদের সাথেও এটি কাজ করে। ```js let [firstName, surname] = "Ilya Kantor".split(' '); ``` -````smart header="\"Destructuring\" does not mean \"destructive\"." -It's called "destructuring assignment," because it "destructurizes" by copying items into variables. But the array itself is not modified. +````smart header="\"Destructuring\" দ্বারা \"destructive\" বুঝানো হয় না" +এটিকে বলা হয় "destructuring assignment", কেননা এটি "destructurizes" এর মাধ্যমে আইটেমকে ভ্যারিয়েবলে রূপান্তর করে। কিন্তু অরিজিনাল অ্যারের কোন পরিবর্তন হয় না। -It's just a shorter way to write: +আসলে এটি সংক্ষেপে লেখার একটি পদ্ধতি, যেমন: ```js // let [firstName, surname] = arr; let firstName = arr[0]; @@ -46,24 +46,24 @@ let surname = arr[1]; ``` ```` -````smart header="Ignore elements using commas" -Unwanted elements of the array can also be thrown away via an extra comma: +````smart header="অপ্রয়োজনীয় এলিমেন্টকে কমার সাহায্যে বাদ দেয়া" +অ্যারের অপ্রয়োজনীয় এলিমেন্টকে অতিরিক্ত কমা সংযুক্ত করে বাদ দিতে পারি: ```js run *!* -// second element is not needed +// দ্বিতীয় এলিমেন্টকে বাদ দিতে চাই let [firstName, , title] = ["Julius", "Caesar", "Consul", "of the Roman Republic"]; */!* alert( title ); // Consul ``` -In the code above, the second element of the array is skipped, the third one is assigned to `title`, and the rest of the array items is also skipped (as there are no variables for them). +উপরের কোডে, দ্বিতীয় এলিমেন্টকে উপেক্ষা করা হয়েছে, এবং তৃতীয় এলিমেন্টটি `title` এ সংযুক্ত হয়েছে, এছাড়াও অ্যারের অন্যান্য এলিমেন্টও উপেক্ষা হবে (যেহেতু তাদের জন্য কোন ভ্যারিয়েবলে অ্যাসাইন করা হয়নি)। ```` -````smart header="Works with any iterable on the right-side" +````smart header="যেকোন ধরণের ইটারেবলের সাথে এই ধরণের অ্যাসাইনমেন্ট কাজ করে" -...Actually, we can use it with any iterable, not only arrays: +...এটি শুধুমাত্র অ্যারে না যেকোন ধরণের ইটারেবলের সাথে কাজ করে: ```js let [a, b, c] = "abc"; // ["a", "b", "c"] @@ -73,11 +73,11 @@ let [one, two, three] = new Set([1, 2, 3]); ```` -````smart header="Assign to anything at the left-side" +````smart header="এছাড়াও বাম পাশের প্যাটার্নের কোন কিছুকে অ্যাসাইন করতে পারি" -We can use any "assignables" at the left side. +আমরা বাম পাশের প্যাটার্নের কোন কিছুকে অ্যাসাইন করতে পারি। -For instance, an object property: +যেমন একটি অবজেক্টের প্রপার্টি হিসেবে: ```js run let user = {}; [user.name, user.surname] = "Ilya Kantor".split(' '); @@ -87,11 +87,11 @@ alert(user.name); // Ilya ```` -````smart header="Looping with .entries()" +````smart header=".entries() লুপ" -In the previous chapter we saw the [Object.entries(obj)](mdn:js/Object/entries) method. +পূর্বের অধ্যায়ে আমরা এই মেথডটি দেখেছি [Object.entries(obj)](mdn:js/Object/entries)। -We can use it with destructuring to loop over keys-and-values of an object: +আমরা লুপের মধ্যে অবজেক্টকে keys-values আকারে destructuring করতে পারি: ```js run let user = { @@ -99,7 +99,7 @@ let user = { age: 30 }; -// loop over keys-and-values +// লুপে keys-and-values *!* for (let [key, value] of Object.entries(user)) { */!* @@ -107,7 +107,7 @@ for (let [key, value] of Object.entries(user)) { } ``` -...And the same for a map: +...অনুরূপ Map এর ক্ষেত্রেও: ```js run let user = new Map(); @@ -122,27 +122,26 @@ for (let [key, value] of user) { ``` ```` -```smart header="Swap variables trick" -A well-known trick for swapping values of two variables: +```smart header="ভ্যারিয়েবল অদল বদল" +দুটি ভ্যারিয়েবলের মান অদল বদল(swap) করার শর্টকার্ট পদ্ধতি: ```js run let guest = "Jane"; let admin = "Pete"; -// Swap values: make guest=Pete, admin=Jane +// দুটি ভ্যারিয়েবলের মান অদল বদল করছি: guest=Pete, admin=Jane [guest, admin] = [admin, guest]; -alert(`${guest} ${admin}`); // Pete Jane (successfully swapped!) +alert(`${guest} ${admin}`); // Pete Jane (এটি কাজ করছে) ``` -Here we create a temporary array of two variables and immediately destructure it in swapped order. - -We can swap more than two variables this way. +এখানে একটি টেম্পোরারি অ্যারের সাহায্যে ভ্যারিয়েবল গুলোকে destructure করে তাদের মধ্যে swap করা হল। +এভাবে আমরা একাধিক ভ্যারিয়েবলকেও swap করতে পারি। ### The rest '...' -If we want not just to get first values, but also to gather all that follows -- we can add one more parameter that gets "the rest" using three dots `"..."`: +যদি আমরা শুধুমাত্র প্রথম বা দ্বিতীয় ভ্যালুর পাশাপাশি বাকী কালেকশনকে destructuring করতে চাই, তাহলে আমরা আরো একটি ভ্যারিয়েবলকে `"..."` তিনটি ডট সহ `"...rest"` লিখব, একে বলা হয় "rest", যেমন: ```js run let [name1, name2, *!*...rest*/!*] = ["Julius", "Caesar", *!*"Consul", "of the Roman Republic"*/!*]; @@ -151,18 +150,18 @@ alert(name1); // Julius alert(name2); // Caesar *!* -// Note that type of `rest` is Array. +// নোট `rest` হল একটি অ্যারে। alert(rest[0]); // Consul alert(rest[1]); // of the Roman Republic alert(rest.length); // 2 */!* ``` -The value of `rest` is the array of the remaining array elements. We can use any other variable name in place of `rest`, just make sure it has three dots before it and goes last in the destructuring assignment. +`rest` এর মান হবে অ্যারের অবশিষ্ট এলিমেন্টসমূহের একটি অ্যারে। আমরা ভ্যারিয়েবলটির মান `rest` এর পরিবর্তে যেকোন কিছু দিতে পারি, তবে মনে রাখতে হবে যেন ভ্যারিয়েবলের আগে যেন তিনটি ডট থাকে এবং এটি যেন destructuring এর শেষ এলিমেন্ট হয়। -### Default values +### ডিফল্ট ভ্যালু -If there are fewer values in the array than variables in the assignment, there will be no error. Absent values are considered undefined: +যদি অ্যারের `length` এর চেয়ে আমাদের অ্যাসাইনমেন্ট ভ্যারিয়েবলের সংখ্যা বেশি হয়, তাহলে কোন এরর থ্রো হবে না। তার পরিবর্তে ভ্যারিয়েবলের মান হবে undefined: ```js run *!* @@ -173,7 +172,7 @@ alert(firstName); // undefined alert(surname); // undefined ``` -If we want a "default" value to replace the missing one, we can provide it using `=`: +যদি আমরা undefined এর পরিবর্তে কোন একটি ডিফল্ট মান অ্যাসাইন করতে চাই, তাহলে এভাবে করতে পারি: ```js run *!* @@ -185,33 +184,33 @@ alert(name); // Julius (from array) alert(surname); // Anonymous (default used) ``` -Default values can be more complex expressions or even function calls. They are evaluated only if the value is not provided. +ডিফল্ট ভ্যালু জটিল এক্সপ্রেশন বা ফাংশন কলের সাথেও কাজ করবে। ডিফল্ট ভ্যালু অ্যাসাইন হবে যদি কোন কারণে মানটি অনুপস্থিত থাকে। -For instance, here we use the `prompt` function for two defaults. But it will run only for the missing one: +যেমন, এখানে `prompt` এর সাহায্যে দুটি ডিফল্ট মান অ্যাসাইন করা হচ্ছে। তবে এখানে শুধুমাত্র দ্বিতীয়টির জন্য ডিফল্ট মানটি কাজ করবে: ```js run -// runs only prompt for surname +// শুধুমাত্র surname এর জন্য prompt এক্সিকিউট হবে let [name = prompt('name?'), surname = prompt('surname?')] = ["Julius"]; alert(name); // Julius (from array) -alert(surname); // whatever prompt gets +alert(surname); // prompt এর মান ``` ## Object destructuring -The destructuring assignment also works with objects. +destructuring assignment অবজেক্টের সাথেও কাজ করে। -The basic syntax is: +এর সিন্ট্যাক্সটি হল: ```js let {var1, var2} = {var1:…, var2:…} ``` -We have an existing object at the right side, that we want to split into variables. The left side contains a "pattern" for corresponding properties. In the simple case, that's a list of variable names in `{...}`. +আমাদের ডান পাশে একটি অবজেক্ট আছে, এর মানকে আমরা ভ্যারিয়েবলে অ্যাসাইন করতে চাই। বাম পাশে প্রপার্টিগুলোর জন্য একটি প্যাটার্ন আছে। সাধারণত `{...}` প্যারেন্টেসিসের মধ্যে অবজেক্টের প্রপার্টিগুলো ভ্যারিয়েবল হিসেবে ডিক্লেয়ার করা হয়। -For instance: +যেমন: ```js run let options = { @@ -229,16 +228,16 @@ alert(width); // 100 alert(height); // 200 ``` -Properties `options.title`, `options.width` and `options.height` are assigned to the corresponding variables. The order does not matter. This works too: +`options.title`, `options.width` এবং `options.height` প্রপার্টিগুলো একই নামের ভ্যারিয়েবলে অ্যাসাইন হবে। এখানে অ্যাসাইন ক্রম মূখ্য নই। এটিও কাজ করবে: ```js -// changed the order in let {...} +// let {...} এর মধ্যে ভ্যারিয়েবলের ক্রম পরিবর্তন let {height, width, title} = { title: "Menu", height: 200, width: 100 } ``` -The pattern on the left side may be more complex and specify the mapping between properties and variables. +বাম পাশের প্যাটার্নটিতে প্রপার্টি এবং ভ্যারিয়েবল আরো জটিল হতে পারে। -If we want to assign a property to a variable with another name, for instance, `options.width` to go into the variable named `w`, then we can set it using a colon: +যদি আমরা কোন একটি প্রপার্টিকে অন্য নামে অ্যাসাইন করতে চায়, ধরুন `options.width` কে `w` নামে, তাহলে আমরা কোলন দ্বারা লিখতে পারি, যেমন: ```js run let options = { @@ -261,9 +260,9 @@ alert(w); // 100 alert(h); // 200 ``` -The colon shows "what : goes where". In the example above the property `width` goes to `w`, property `height` goes to `h`, and `title` is assigned to the same name. +কোলন দ্বারা বুঝায় "what : goes where"। উপরের উদাহরণে `width` হয়ে যাবে `w`, এবং `height` হবে `h`, এবং `title` একই নামে অ্যাসাইন হবে। -For potentially missing properties we can set default values using `"="`, like this: +অনুপস্থিত প্রপার্টির ডিফল্ট মান সেট করতে পারি `"="` এর মাধ্যমে, যেমন: ```js run let options = { @@ -279,9 +278,9 @@ alert(width); // 100 alert(height); // 200 ``` -Just like with arrays or function parameters, default values can be any expressions or even function calls. They will be evaluated if the value is not provided. +অ্যারের মত ডিফল্ট ভ্যালু জটিল এক্সপ্রেশন বা ফাংশন কলের সাথেও কাজ করবে। ডিফল্ট ভ্যালু অ্যাসাইন হবে যদি কোন কারণে প্রপার্টি অনুপস্থিত থাকে। -In the code below `prompt` asks for `width`, but not for `title`: +নিচের কোডে `title` এর জন্য `prompt` রান হবে না, হবে `width` এর জন্য: ```js run let options = { @@ -296,7 +295,7 @@ alert(title); // Menu alert(width); // (whatever the result of prompt is) ``` -We also can combine both the colon and equality: +এছাড়াও আমরা কোলন এবং ডিফল্ট অ্যাসাইনমেন্ট একসাথে লিখতে পারি: ```js run let options = { @@ -312,7 +311,7 @@ alert(w); // 100 alert(h); // 200 ``` -If we have a complex object with many properties, we can extract only what we need: +যদি আমাদের একাধিক প্রপার্টি হতে শুধুমাত্র একটি মান লাগে তাহলে সেটিও করা সম্ভব: ```js run let options = { @@ -321,7 +320,7 @@ let options = { height: 200 }; -// only extract title as a variable +// শুধুমাত্র title এর মান অ্যাসাইন হবে let { title } = options; alert(title); // Menu @@ -329,11 +328,11 @@ alert(title); // Menu ### The rest pattern "..." -What if the object has more properties than we have variables? Can we take some and then assign the "rest" somewhere? +আমরা নির্দিষ্ট প্রপার্টিকে ভ্যারিয়েবলে সেটের পাশাপাশি যদি বাকী প্রপার্টিগুলোকে কোন একটি ভ্যারিয়েবলে destructuring করতে চায় তা কী সম্ভব? -We can use the rest pattern, just like we did with arrays. It's not supported by some older browsers (IE, use Babel to polyfill it), but works in modern ones. +হ্যা সম্ভব, এক্ষেত্রে আমরা *rest pattern* ব্যবহার করতে পারি, যা ইতোমধ্যে অ্যারের ক্ষেত্রে দেখেছি। তবে এটি মডার্ন ব্রাউজারে কাজ করে, কিন্তু কিছু পুরনো ব্রাউজারে কাজ করে না (IE, পলিফিলের জন্য Babel ব্যবহার করতে পারি)। -It looks like this: +নিচের উদাহরণটি দেখুন: ```js run let options = { @@ -343,8 +342,8 @@ let options = { }; *!* -// title = property named title -// rest = object with the rest of properties +// title = title প্রপার্টি অ্যাসাইন হবে +// rest = অবজেক্টের বাকী প্রপার্টি অ্যাসাইন হবে let {title, ...rest} = options; */!* @@ -353,10 +352,10 @@ alert(rest.height); // 200 alert(rest.width); // 100 ``` -````smart header="Gotcha if there's no `let`" -In the examples above variables were declared right in the assignment: `let {…} = {…}`. Of course, we could use existing variables too, without `let`. But there's a catch. +````smart header="যদি `let` ব্যবহার না করি কি হবে!" +উপরের কোডে আমরা ভ্যারিয়েবলকে ডিক্লেয়ার করছি destructuring অ্যাসাইনমেন্টের সময়: `let {…} = {…}`। আমরা আমাদের পূর্বে ডিক্লেয়ারকৃত ভ্যারিয়েবলকে `let` ছাড়া ব্যবহার করতে পারি। তবে এক্ষেত্রে একটি সীমাবদ্ধতা রয়েছে। -This won't work: +এটি কাজ করবে না: ```js run let title, width, height; @@ -364,7 +363,7 @@ let title, width, height; {title, width, height} = {title: "Menu", width: 200, height: 100}; ``` -The problem is that JavaScript treats `{...}` in the main code flow (not inside another expression) as a code block. Such code blocks can be used to group statements, like this: +জাভাস্ক্রিপ্ট `{...}` কে আমাদের মূল কোডের কোড ব্লক হিসেবে ধরে নেয়। এই ধরণের কোড ব্লক আমরা গ্রুপ স্টেটমেন্টের জন্য ব্যবহার করি, যেমন: ```js run { @@ -375,9 +374,9 @@ The problem is that JavaScript treats `{...}` in the main code flow (not inside } ``` -So here JavaScript assumes that we have a code block, that's why there's an error. We want destructuring instead. +এখানে জাভাস্ক্রিপ্ট `{...}` কে কোড ব্লক হিসেবে ধরে নেয়, যার ফলে এটি এরর থ্রো করে। -To show JavaScript that it's not a code block, we can wrap the expression in parentheses `(...)`: +এটি আলাদা কোড ব্লক না তা জাভাস্ক্রিপ্টকে বুঝাতে একে প্যারেন্টেসিসের মধ্যে `(...)` লিখব: ```js run let title, width, height; @@ -391,9 +390,9 @@ alert( title ); // Menu ## Nested destructuring -If an object or an array contain other nested objects and arrays, we can use more complex left-side patterns to extract deeper portions. +নেস্টেড অবজেক্ট বা অ্যারের জন্য আমরা বাম পাশের প্যাটার্নকে আরো জটিল ভাবে ডিক্লেয়ার করতে পারি। -In the code below `options` has another object in the property `size` and an array in the property `items`. The pattern at the left side of the assignment has the same structure to extract values from them: +নিচের কোডে `options` অবজেক্টের একটি নেস্টেড অবজেক্ট আছে `size` এবং আরো একটি অ্যারে প্রপার্টি আছে `items`। এক্ষেত্রে আমাদের বামের অ্যাসাইনমেন্ট প্যাটার্নটি ডানের স্ট্রাকচারের মত হতে হবে: ```js run let options = { @@ -402,10 +401,10 @@ let options = { height: 200 }, items: ["Cake", "Donut"], - extra: true + extra: true }; -// destructuring assignment split in multiple lines for clarity +// কোড পাঠযোগ্য হওয়ার জন্য destructuring assignment কে একাধিক লাইনে লিখেছি let { size: { // put size here width, @@ -422,19 +421,19 @@ alert(item1); // Cake alert(item2); // Donut ``` -All properties of `options` object except `extra` that is absent in the left part, are assigned to corresponding variables: +এখন আমরা `options` অবজেক্টের সকল প্রপার্টিকে(`extra` বাদে ) বাম পাশে অ্যাসাইন করছি: ![](destructuring-complex.svg) -Finally, we have `width`, `height`, `item1`, `item2` and `title` from the default value. +এখন আমরা `width`, `height`, `item1`, `item2` এবং `title` এর ডিফল্ট মান পাব। -Note that there are no variables for `size` and `items`, as we take their content instead. +নোট: এখানে আমরা আলাদা করে `size` এবং `items` নামের আলাদা ভ্যারিয়েবল পাব না, তার পরিবর্তে তাদের কন্টেন্ট সেট হবে। ## Smart function parameters -There are times when a function has many parameters, most of which are optional. That's especially true for user interfaces. Imagine a function that creates a menu. It may have a width, a height, a title, items list and so on. +অনেক সময় আমাদের এমন ফাংশন থাকে, যাদের বেশিরভাগ প্যারামিটার অপশনাল। বিশেষত UI এর ফাংশনের জন্য। মনে করুন আমরা একটি মেনু তৈরি করব। যার width, height, title, items ইত্যাদি প্যারামিটার আছে। -Here's a bad way to write such function: +এই ধরণের ফাংশন অনেক সময় এভাবে লিখা হয়, যা bad practice: ```js function showMenu(title = "Untitled", width = 200, height = 100, items = []) { @@ -442,20 +441,20 @@ function showMenu(title = "Untitled", width = 200, height = 100, items = []) { } ``` -In real-life, the problem is how to remember the order of arguments. Usually IDEs try to help us, especially if the code is well-documented, but still... Another problem is how to call a function when most parameters are ok by default. +বাস্তবিকক্ষেত্রে আমাদের আর্গুমেন্ট মনে রাখা কষ্টসাধ্য। সাধারণত ডকুমেন্টেড কোডের জন্য IDE সহায়ক হতে পারে, কিন্তু তারপরও সমস্যা আছে যদি ফাংশনের বেশিরভাগ প্যারামিটার ডিফল্ট হয় সেক্ষেত্রে কি হবে? -Like this? +যেমন এটি দেখুন। ```js // undefined where default values are fine showMenu("My Menu", undefined, undefined, ["Item1", "Item2"]) ``` -That's ugly. And becomes unreadable when we deal with more parameters. +এছাড়াও, এটি আর পঠনযোগ্য থাকে না। -Destructuring comes to the rescue! +এক্ষেত্রে Destructuring আমাদের জন্য সুবিধাজনক! -We can pass parameters as an object, and the function immediately destructurizes them into variables: +আমরা ফাংশনের আর্গুমেন্ট হিসেবে অবজেক্টকে পাঠাতে পারি, এবং ফাংশনে তাদের কে destructurizes করে নিতে পারি: ```js run // we pass object to function @@ -475,7 +474,7 @@ function showMenu(*!*{title = "Untitled", width = 200, height = 100, items = []} showMenu(options); ``` -We can also use more complex destructuring with nested objects and colon mappings: +এছাড়াও আমরা destructurizes এর সময় নেস্টেড এবং কোলন ম্যাপিং করতে পারি, যেমন: ```js run let options = { @@ -499,7 +498,7 @@ function showMenu({ showMenu(options); ``` -The full syntax is the same as for a destructuring assignment: +এটির সিনট্যাক্স সম্পূর্ন destructuring assignment এর মত: ```js function({ incomingProperty: varName = defaultValue @@ -507,9 +506,9 @@ function({ }) ``` -Then, for an object of parameters, there will be a variable `varName` for property `incomingProperty`, with `defaultValue` by default. +এখানে একটি অবজেক্টকে প্যারামিটার হিসেবে নেয়, এবং `incomingProperty` প্রপার্টিটি `varName` ভ্যারিয়েবল হিসেবে সেট হবে, এবং ডিফল্ট ভ্যালু হবে `defaultValue`। -Please note that such destructuring assumes that `showMenu()` does have an argument. If we want all values by default, then we should specify an empty object: +নোট: মনে করুন আমরা ফাংশন ডিক্লেয়ারেশনে destructuring করেছি এক্ষেত্রে আমাদের অবশ্যই প্যারামিটার হিসেবে একটি এম্পটি অবজেক্ট `{}` পাস করতে হবে, অন্যথায় একটি এরর থ্রো হবে: ```js showMenu({}); // ok, all values are default @@ -517,7 +516,7 @@ showMenu({}); // ok, all values are default showMenu(); // this would give an error ``` -We can fix this by making `{}` the default value for the whole object of parameters: +আমরা অন্যভাবে এটিকে সমাধান করতে পারি, প্যারামিটারের ডিফল্ট ভ্যালু হিসেবে অবজেক্ট অ্যাসাইন করার মাধ্যমে `{}`: ```js run function showMenu({ title = "Menu", width = 100, height = 200 }*!* = {}*/!*) { @@ -527,26 +526,26 @@ function showMenu({ title = "Menu", width = 100, height = 200 }*!* = {}*/!*) { showMenu(); // Menu 100 200 ``` -In the code above, the whole arguments object is `{}` by default, so there's always something to destructurize. +উপরের কোডে আমরা ফাংশন ডিক্লেয়ারেশনে অবজেক্ট আর্গুমেন্টটি ডিফল্ট হিসেবে `{}` সেট করছি, সুতরাং এটি প্যারামিটার পাস না করলে ডিফল্ট অবজেক্টকে destructuring করবে। -## Summary +## সারাংশ -- Destructuring assignment allows for instantly mapping an object or array onto many variables. -- The full object syntax: +- Destructuring assignment এর সাহায্যে অবজেক্ট বা অ্যারের কালেকশনের কোন একটি বা সম্পূর্ণ অংশকে ভ্যারিয়েবলে রূপান্তর করতে পারি। +- সিনট্যাক্স: ```js let {prop : varName = default, ...rest} = object ``` - This means that property `prop` should go into the variable `varName` and, if no such property exists, then the `default` value should be used. + এখানে বুঝানো হচ্ছে `prop` এর ভ্যারিয়েবল হবে `varName` এবং, যদি অবজেক্টে `prop` প্রপার্টি না থাকে তাহলে ডিফল্ট মানটি অ্যাসাইন হবে। - Object properties that have no mapping are copied to the `rest` object. + অবজেক্টের যেসব মান Destructuring হবে না তারা `rest` এ অবজেক্ট হিসেবে কপি হবে। -- The full array syntax: +- অ্যারের সিনট্যাক্স: ```js let [item1 = default, item2, ...rest] = array ``` - The first item goes to `item1`; the second goes into `item2`, all the rest makes the array `rest`. + অ্যারের প্রথম আইটেমটি অ্যাসাইন হবে `item1` এ; অ্যারের দ্বিতীয় আইটেমটি অ্যাসাইন হবে `item2` এ, এবং অবশিষ্ট আইটেম `rest` এ অ্যারে হিসেবে কপি হবে। -- It's possible to extract data from nested arrays/objects, for that the left side must have the same structure as the right one. +- নেস্টেড arrays/objects কেও এক্সট্রাক্ট করা সম্ভব, এক্ষেত্রে আমাদের বামের প্যাটার্নটি ডানের স্ট্রাকচারের মত হতে হবে।