Javascript Destructuring assignment

Hussein Nasser · Intermediate ·🏗️ Systems Design & Architecture ·7y ago

Key Takeaways

The video discusses the concept of destructuring assignment in JavaScript, a feature that allows developers to unpack values from arrays or properties from objects into distinct variables. Hussein Nasser provides examples of how to use this syntax to simplify code and make it more readable.

Full Transcript

what's up y'all mrs. Hussein also from IG on to where we're just a software engineering by example in this video we will learn about a new concept in JavaScript ESX and it's called destruction assignments alright so let's just get into it guys and show you how this works and Before we jump into this and show you how this new feature works let's let's show you for example guys just how we use to do things guys right like this is this is this is a classic object let's get let's say I have a an object that is called movie and I literally just put a bunch of properties say movie at the title year and rating okay so I just declared the movies right that's that's it so movie Doge here will give you that full video title will give you that right let's just clear very simple stuff so if you won't declare like a variable called Y and you say movie dot here you can do that right you can save the year property or the year object or the U key in a variable that is called Y okay and you can do the same thing right if you print Y says like yeah if you do that like for example you want the rating movie dog waiting and so on right so you can just save all this parameters and this way so that T equal movie dog title okay so this is what how we basically used to do things it's very simple stuff right but what what the destruction assignment allow you to do is kind of unpack that object very nicely using this new format so this is how you're doing this initial you do lead but you understood you declare a variable with a curly braces button you give it a name and that name is very critical that has to exist in one of those properties that you can't just give it any name right this name has to literally exist as wonderful a property which is we know that there is a movie dot here so you can literally do let curly braces here and what will happen here the year will be night people like so this is kind of useless if you think about like a okay I mean yeah alright saves me like what one line of code it's the same thing right but the coolest thing about it is that you can do this guy you can do title coma right only year let's do so what does the other think I'm ready right you can do this and you can unpack as many properties as you want and just like that with one line of code I have the title in a variable and another title another variable so that is a pretty cool ish is in a guys isn't it I think it's pretty cool alright so another property of the destruction assignment I don't know why they called destruction I saw an ant right so I think it's just like you can unpack stuff and put it like into its distinct variables if you will right so so let's let's try to do another kind of destruction many times this video will be very short guys so another way of just unpacking subtle using arrays right you can do stuff with array so you can you can do something like that guys so you can do a be equal and our way that is called I don't know number seven and nine you can do that right so a now is equal seven and be Zack or nine right and here's the coolest part about this guy's you can do a B is equal BA well well what this will do guys what do you think this will do I mean people who are done does Python probably will know what this does right we we JavaScript boys are kind of late in the game for this but this actually doesn't swap if you think about it so now a is a nine and B is a seven right so again you can do all kind of schoolish stuff guys with this so this is what I want to talk about to do it guys so very simple stuff right just like new ways that simplifies your life so guys hope you enjoy this video but I see on the next video with some more cooler steps see you there guys goodbye

Original Description

💻 More Software engineering videos https://www.youtube.com/playlist?list=PLQnljOFTspQXOkIpdwjsMlVqkIffdqZ2K The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables. You might have seen this syntax in some code and you wonder what does it do. 1. Classically here is what we used to, we have an object called movie 2. you can do the same thing by using the unpack syntax 3. you can also unpack multiple ones at once.. 4. arrays can be unpacked.. [a, b, c] = [1,2,3] https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment Stay Awesome! Hussein
Watch on YouTube ↗ (saves to browser)
Sign in to unlock AI tutor explanation · ⚡30

Playlist

Uploads from Hussein Nasser · Hussein Nasser · 0 of 60

← Previous Next →
1 Extending ArcObjects (IGeometry) - 01 - Getting Started
Extending ArcObjects (IGeometry) - 01 - Getting Started
Hussein Nasser
2 Extending ArcObjects  (IGeometry) - 02 - The Document, The Map and The Layers
Extending ArcObjects (IGeometry) - 02 - The Document, The Map and The Layers
Hussein Nasser
3 Channel Update - New Book, New Job, New Videos
Channel Update - New Book, New Job, New Videos
Hussein Nasser
4 Learn Programming with VB.NET - 01 - Getting Started
Learn Programming with VB.NET - 01 - Getting Started
Hussein Nasser
5 Learn Programming with VB.NET - 02 - Classes and Objects (Part 1)
Learn Programming with VB.NET - 02 - Classes and Objects (Part 1)
Hussein Nasser
6 Learn Programming with VB.NET - 03 - Classes and Objects (Part 2)
Learn Programming with VB.NET - 03 - Classes and Objects (Part 2)
Hussein Nasser
7 Learn Programming with VB.NET - 04 - User Interface
Learn Programming with VB.NET - 04 - User Interface
Hussein Nasser
8 Learn Programming with VB.NET - 05 - By Value v. By Reference
Learn Programming with VB.NET - 05 - By Value v. By Reference
Hussein Nasser
9 Learn Programming with VB.NET - 06 - Variable size, 32 bit vs 64 bit
Learn Programming with VB.NET - 06 - Variable size, 32 bit vs 64 bit
Hussein Nasser
10 Learn Programming with VB.NET - 07 - Conditional Statements
Learn Programming with VB.NET - 07 - Conditional Statements
Hussein Nasser
11 Learn Programming with VB.NET - 08 - Inheritance
Learn Programming with VB.NET - 08 - Inheritance
Hussein Nasser
12 Learn Programming with VB.NET - 09 - Strategy Design Pattern
Learn Programming with VB.NET - 09 - Strategy Design Pattern
Hussein Nasser
13 Learn Programming with VB.NET - 10 -  How did I learn programming
Learn Programming with VB.NET - 10 - How did I learn programming
Hussein Nasser
14 IGeometry 2016 Retrospective - Channel Update
IGeometry 2016 Retrospective - Channel Update
Hussein Nasser
15 Javascript by Example - The Vook
Javascript by Example - The Vook
Hussein Nasser
16 Vlog - Keep your servers close and your database closer
Vlog - Keep your servers close and your database closer
Hussein Nasser
17 Vlog - Client/Server Programming Languages
Vlog - Client/Server Programming Languages
Hussein Nasser
18 Javascript By Example L1E01 - Getting Started
Javascript By Example L1E01 - Getting Started
Hussein Nasser
19 Persistent Connections (Pros and Cons)
Persistent Connections (Pros and Cons)
Hussein Nasser
20 Javascript By Example L1E02 - Building the Calculator Interface
Javascript By Example L1E02 - Building the Calculator Interface
Hussein Nasser
21 Happy new Year from IGeometry!
Happy new Year from IGeometry!
Hussein Nasser
22 Synchronous v. Asynchronous
Synchronous v. Asynchronous
Hussein Nasser
23 Javascript By Example L1E03 - Displaying the Digits on Calculator Screen
Javascript By Example L1E03 - Displaying the Digits on Calculator Screen
Hussein Nasser
24 Show Your Work. Blog, Vlog, Write, Create and Develop!
Show Your Work. Blog, Vlog, Write, Create and Develop!
Hussein Nasser
25 Relational Database Atomicity Explained By Example
Relational Database Atomicity Explained By Example
Hussein Nasser
26 Javascript By Example L1E04 - Operators, All Clear with Arrow Functions
Javascript By Example L1E04 - Operators, All Clear with Arrow Functions
Hussein Nasser
27 What Comes First, User Experience or Software Architecture?
What Comes First, User Experience or Software Architecture?
Hussein Nasser
28 Javascript By Example L1E05 -  Evaluate the Calculator Expressions with eval
Javascript By Example L1E05 - Evaluate the Calculator Expressions with eval
Hussein Nasser
29 Fastest Way to Learn Programming Language or Technology
Fastest Way to Learn Programming Language or Technology
Hussein Nasser
30 Javascript By Example L1E06 -  Fix Leading Zero Bug with Conditions
Javascript By Example L1E06 - Fix Leading Zero Bug with Conditions
Hussein Nasser
31 Stateful vs Stateless Applications (Explained by Example)
Stateful vs Stateless Applications (Explained by Example)
Hussein Nasser
32 Javascript By Example L1E07 - Running our Calculator on the Mobile Phone
Javascript By Example L1E07 - Running our Calculator on the Mobile Phone
Hussein Nasser
33 Advice for New Software Engineers and Developers
Advice for New Software Engineers and Developers
Hussein Nasser
34 Why JSON is so Popular?
Why JSON is so Popular?
Hussein Nasser
35 Building Scalable Software - SLA, HS, VS
Building Scalable Software - SLA, HS, VS
Hussein Nasser
36 Vlog (Istanbul) - Datacenter Proximity
Vlog (Istanbul) - Datacenter Proximity
Hussein Nasser
37 Should Software Engineers Learn Bleeding-Edge Technologies?
Should Software Engineers Learn Bleeding-Edge Technologies?
Hussein Nasser
38 Do Developers Build Bad User Interfaces/Experience?
Do Developers Build Bad User Interfaces/Experience?
Hussein Nasser
39 Learn By Doing.
Learn By Doing.
Hussein Nasser
40 I Wrote Bad Front-End Code That Broke Chrome
I Wrote Bad Front-End Code That Broke Chrome
Hussein Nasser
41 My Story
My Story
Hussein Nasser
42 Vlog - Horizontal vs Vertical Scaling
Vlog - Horizontal vs Vertical Scaling
Hussein Nasser
43 Can User Experience Help Build Better Rest API?
Can User Experience Help Build Better Rest API?
Hussein Nasser
44 Reverse engineering Instagram in flight mode
Reverse engineering Instagram in flight mode
Hussein Nasser
45 The Benefits of the 3-Tier Architecture (e.g. REST API)
The Benefits of the 3-Tier Architecture (e.g. REST API)
Hussein Nasser
46 Stateless v. Stateful Architecture (Podcast)
Stateless v. Stateful Architecture (Podcast)
Hussein Nasser
47 The evolution from virtual machines to containers
The evolution from virtual machines to containers
Hussein Nasser
48 Proxy vs. Reverse Proxy (Explained by Example)
Proxy vs. Reverse Proxy (Explained by Example)
Hussein Nasser
49 Canary Deployment (Explained by Example)
Canary Deployment (Explained by Example)
Hussein Nasser
50 No Excuses
No Excuses
Hussein Nasser
51 Synchronous vs Asynchronous Applications (Explained by Example)
Synchronous vs Asynchronous Applications (Explained by Example)
Hussein Nasser
52 What is an Asynchronous service?
What is an Asynchronous service?
Hussein Nasser
53 Difference between Client Polling vs Server Push in Notifications
Difference between Client Polling vs Server Push in Notifications
Hussein Nasser
54 Software vs. Hardware AdBlockers (Explained by Example)
Software vs. Hardware AdBlockers (Explained by Example)
Hussein Nasser
55 HTTP Caching with E-Tags -  (Explained by Example)
HTTP Caching with E-Tags - (Explained by Example)
Hussein Nasser
56 Simple Object Access Protocol Pros and Cons (Explained by Example)
Simple Object Access Protocol Pros and Cons (Explained by Example)
Hussein Nasser
57 Nodejs Express "Hello, World"
Nodejs Express "Hello, World"
Hussein Nasser
58 Reverse Engineering Instagram feed
Reverse Engineering Instagram feed
Hussein Nasser
59 Popup Modal Dialog with Javascript and HTML
Popup Modal Dialog with Javascript and HTML
Hussein Nasser
60 MIME and Media Type sniffing explained and the type of attacks it leads to
MIME and Media Type sniffing explained and the type of attacks it leads to
Hussein Nasser

This video teaches how to use destructuring assignment in JavaScript to simplify code and improve readability. By using this syntax, developers can unpack values from arrays or properties from objects into distinct variables, making their code more concise and easier to understand.

Key Takeaways
  1. Declare an object with properties
  2. Use destructuring assignment to unpack properties into variables
  3. Use destructuring assignment with arrays to swap values
  4. Apply this syntax to simplify code and improve readability
💡 Destructuring assignment is a powerful feature in JavaScript that can simplify code and improve readability by allowing developers to unpack values from arrays or properties from objects into distinct variables.

Related Reads

📰
Unlocking Modern Development: How the Odin Programming Language is Redefining Systems-Level App Innovation
Learn how Odin, a high-performance programming language, is redefining systems-level app innovation with its unique features and practical applications.
Dev.to · Tamiz Uddin
📰
Every System Design Interview Is Secretly About These 16 Companies.
System design interviews focus on real-world company examples, not just theoretical concepts, to assess problem-solving skills
Medium · Programming
📰
Skill Bodies Should Load on Demand
Learn how to optimize skill systems by loading skill bodies on demand, improving performance and scalability
Dev.to · Manuel Bruña
📰
Server Components vs Client Components: The Mental Model Shift Every Vite Developer Needs
Learn how Vite developers can shift their mental model to effectively work with server components vs client components in React
Dev.to · Digital dev
Up next
What is API and How it Works? | API Explained for Beginners | Tamil | Karthik's Show
Karthik's Show
Watch →