Objects Destructuring in JavaScript || JS ES6 Tutorial in 2022
Welcome To Code Bengali Channel we will see Objects Destructuring.
Destructuring Objects
Here is the old way of using an object inside a function:
Before:
const vehicleOne = {
brand: 'Ford',
model: 'Mustang',
type: 'car',
year: 2021,
color: 'red'
}
myVehicle(vehicleOne);
// old way
function myVehicle(vehicle) {
const message = 'My ' + vehicle.type + ' is a ' + vehicle.color + ' ' + vehicle.brand + ' ' + vehicle.model + '.';
}
Here is the new way of using an object inside a function:
With destructuring:
const vehicleOne = {
brand: 'Ford',
model: 'Mustang',
type: 'car',
year: 2021,
color: 'red'
}
myVehicle(vehicleOne);
function myVehicle({type, color, brand, model}) {
const message = 'My ' + type + ' is a ' + color + ' ' + brand + ' ' + model + '.';
}
Notice that the object properties do not have to be declared in a specific order.
We can even destructure deeply nested objects by referencing the nested object then using a colon and curly braces to again destructure the items needed from the nested object:
Example
const vehicleOne = {
brand: 'Ford',
model: 'Mustang',
type: 'car',
year: 2021,
color: 'red',
registration: {
city: 'Houston',
state: 'Texas',
country: 'USA'
}
}
myVehicle(vehicleOne)
function myVehicle({ model, registration: { state } }) {
const message = 'My ' + model + ' is registered in ' + state + '.';
}
***************** Must Watch Video ******************
➡️ JavaScript introduction--:: https://youtu.be/kAOJe9y17_o
➡️ JavaScript Variables--:: https://youtu.be/yFRlXSFX__4
➡️ JavaScript Function create--:: https://youtu.be/rtUz7GA4IdE
➡️ JavaScript Arrow function--:: https://youtu.be/cp9rGHgFQJQ
➡️ JavaScript Template literals --:: https://youtu.be/inVynulVD38
➡️ Add Html Tags in JavaScript --:: https://youtu.be/2ZLcBg5_Txs
➡️ Comment In JavaScript --:: https://youtu.be/5tN1NsFn0S8
➡️ Data Types in JavaScript --:: https://youtu.be/DL5H70fRIRo
➡️ Arithmetic Operators in JavaScript --:: https://youtu.be/PnweyNo8QUA
➡️ Assignment Operators in JavaScript --:: https://youtu.be/p9pUSysQLy8
➡️ JavaScript Console--:: https://youtu.be/oDjVl3wuKKE
➡️ Comparison operators in JavaScript--:: https://youtu.be/N17D2cO6x8I
➡️ if else statement in JavaScript--:: https://youtu.be/_-w2dCO4M2A
➡️ Logical Operators in JavaScript--:: https://youtu.be/1YFozxPrWZ0
➡️ Ternary Operator in JavaScript--:: https://youtu.be/WICDC4T6hno
➡️ Switch Statement in JavaScript--:: https://youtu.be/glRMNGEN6rA
➡️ else if Statement in JavaScript--:: https://youtu.be/oDQpRgqH-1I
➡️ Alert Box in JavaScript--:: https://youtu.be/LQa8rBp1t64
➡️ Confirm Box in JavaScript--:: https://youtu.be/NeimH-a6lSc
➡️ Prompt Box in JavaScript--:: https://youtu.be/cAfc5RrfmzI
➡️ JavaScript Function Parameter--:: https://youtu.be/BYELk66a28w
➡️ Function Return in JavaScript--:: https://youtu.be/F6KIP8_zwtI
➡️ JavaScript Scope Local Global--:: https://youtu.be/HE1RHbcCNzQ
➡️ JavaScript Events --:: https://youtu.be/VSa2agFUdCM
➡️ While Loop in JavaScript --:: https://youtu.be/UDAa7TDJpmE
➡️ do While Loop in JavaScript --:: https://youtu.be/rXbe89ThlfI
➡️ For Loop in JavaScript --:: https://youtu.be/MVKYPW9QY-k
➡️ Even or Odd find in JavaScript --:: https://youtu.be/LHjnzGDIgfY
➡️ Break and Continue in JavaScript --:: https://youtu.be/VzIz27DQUbQ
➡️ JavaScript object--:: https://youtu.be/r6mlQdcgCaw
➡️ For In Loop in JavaScript--:: https://youtu.be/jO2RtnpQGQ4
➡️ Date Objects in JavaScript--:: https://youtu.be/0bNzhTQKpsg
➡️ Destructing Arrays in JavaScript--:: https://youtu.be/ocQmQbIh7Lw
➡️ Creating an Array in JavaScript--:: https://youtu.be/WR8UW9u7FFo
➡️ Update And Delete Arrays Element--::https://youtu.be/Sk8J3B2LwmE
➡️ Sort and reverse Array method--::https://youtu.be/A2ttwvmGL6Y
➡️ push And pop Array method--::https://youtu.be/EORxDtjaWxY
➡️shift And unshift Array method--::https://youtu.be/Pqiiqhc_bXg
➡️slice And splice Array method--::https://youtu.be/6uCGKK9DG9A
***************** React JS Tutorial ******************
➡️ React JS Environment Setup --:: https://youtu.be/8A92a534MZU
➡️ React Folder Structure And NPM --:: https://youtu.be/Gv4t40FAhfM
➡️ React JSX and React Render --:: https://youtu.be/v-MnPDHkvO4
➡️ Fragments in React --:: https://youtu.be/zBQfCRx2tss
➡️ Expressions in JSX --:: https://youtu.be/H2Utml_uxg4
➡️ JSX Attribute in React --:: https://youtu.be/a929qR_YvgM
➡️ CSS in React JS--::https://youtu.be/tqIGMppDMxs
➡️ Google Fonts in React JS--::https://youtu.be/yVfnRdcQGJ4
Please support my channel by SUBSCRIBE to my channel and share my videos in your Social Network.
Видео Objects Destructuring in JavaScript || JS ES6 Tutorial in 2022 автора Freelance академия
Видео Objects Destructuring in JavaScript || JS ES6 Tutorial in 2022 автора Freelance академия
Информация
29 ноября 2023 г. 10:07:48
00:04:03
Похожие видео