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