Загрузка...

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 академия
Страницу в закладки Мои закладки
Все заметки Новая заметка Страницу в заметки