Unpacking objects using destructuring in JavaScript
ES6 සමග #JavaScript සදහා ලැබුණ #Destructuring feature එකක් වන object #unpacking ගැන අපි බලමු.
අපිට array එකක තිබෙන elements තනි තනි variables වලට දා ගන්න ඕනෑනම් array index එක භාවිතා කරලා කර ගන්න පුළුවන්. ඒවගේම object එකක properties වෙන වෙනම ගන්න ඕන නම් property name එක භාවිතා කරලා ගන්න පුළුවන්.
අපිට ඉතා පහසුවෙන් ඒවා කර ගන්න පහසුකමක් අපිට destructuring සමග ලබා දීලා තියෙනවා.
Object එකක තියෙන properties එම නමින්ම variables වලට assign කර ගන්න පුළුවන් වගේම අපට අවශ්‍ය custom names සහිත variables වලටත් assign කර ගන්න පුළුවන්.
<script>
// unpacking an array
const arr1 = [10, 20, 30];
//with index and value
let Num1=arr1[0], Num2=arr1[1], Num3=arr1[2];
console.log(Num1, Num2, Num3); // 10 20 30
// with desctructuring
let [num1, num2, num3] = arr1;
console.log(num1, num2, num3); //10 20 30
// --------------------------------------------
// unpacking an object
const student ={fName: "Lakshman", lName:"Prabas"};
//with property name and value
let Fname=student.fName, Lname=student.lName;
console.log(Fname, Lname);// Lakshman Prabas
// with desctructuring
let{fName, lName} = student;
console.log(fName, lName); // Lakshman Prabas
// with desctructuring and variables with custom name
let{fName:first_name, lName:last_name} = student;
console.log(first_name, last_name); // Lakshman Prabas
</script>අපිට අවශ්‍ය නැති array elements ignore කරන්නත් පුළුවන්. Objects වල නම් අපිට අනවශ්‍ය property එක variable එකක් විදිහට නොදී ඉන්න පුළුවන් නේ.
<script>
const arr1 = [10, 20, 30];
// ignore elements
let[number1, , number2]=arr1;
console.log(number1, number2); // 10 30
</script>අපිට අවශ්‍ය නම් සම්පුර්ණ array එක unpack නොකර elements කිහිපයක් පමණක් variables වලට ගෙන ඉතිරි ටික වෙනත් array එකකට ගන්නත් පුළුවන්. නමුත් මෙහිදී අවධානය යොමු කල යුතු කරුණක් තියෙනවා. අපිට පුළුවන් වෙන්නේ array එකේ මුල් elements අවශ්‍ය ප්‍රමාණයක් variables වලට ගන්නත් , අවසානයේ ඉතිරි ටික array එකකට ගන්නත් පමණයි.
<script>
// unpacking to variables and an array
const arr2 = [10, 20, 30, 40, 50, 60];
let [firstNum, secNum, ...arr3] = arr2;
console.log(firstNum, secNum, arr3); //10 20 (4) [30, 40, 50, 60]
</script>ඒවගේම object එකක property values අරගෙන array එකකට දාන්නත් මෙම පහසුකම භාවිතා කරන්න පුළුවන්. Destructuring කරන satatement එකේ “( )” ගැන විශේෂ අවධානය යොමු කරන්න.
<script>
// object to array insertion
const arr4=[];
const obj1={fName:"Lakshman", lName:"Prabas", regNo:"R3147"};
({fName:arr4[0], lName:arr4[1], regNo:arr4[2]}=obj1);
console.log(arr4); // (3) ['Lakshman', 'Prabas', 'R3147']
</script>Destructuring ගැන තව විස්තර මීලග artical එකකින් කතා කරමු.
මේ පිලිබදව වැඩි තොරතුරු පහත මුලාශ්‍ර වලින් හොයාගන්න පුළුවන්.
ඉහත කරුණු අතර, ඔබට එකග විය නොහැකි යමක් හෝ අලුතින් එක්විය යුතු දෙයක් ඇත්නම් කරුණාකර Response (comment) එකක් මගින් දැනුවත් කරන්න. වැරදි/අඩුපාඩු සහිත තොරතුරක් සමාජ ගතවීම වැලක්වීමට ඔබටද එමගින් දායක විය හැකියි.
