Master object spread to seamlessly combine properties in JavaScript, enhance your coding skills, and boost your development efficiency today!

Object Spread

[00:00] Let's jump in. Alright. We've got our user type, ID, email, name, settings, theme, all that stuff. So we've got, like, sub objects here, which is kinda cool. And we've got our user, user one, Alice, Alice at example, etcetera, etcetera, etcetera.

[00:13] So So we're gonna create an updated user. We want to have a user just like this one except with a couple properties that are different. So we're gonna have our updated user. It's gonna be a user type. Again, you don't always have to specify that.

[00:26] But we're we're able to specify it. It's fine. We're gonna spread all the properties from the user, but we're gonna specify email. So we're effectively making a new copy of the user. So that's what this part does.

[00:38] That's we're making an object. We're gonna take all the properties from the user object. We're gonna spread them across on this new object we're making. And then we're going to, on top of that, spread across Well, we're not actually spreading anymore. We're just setting the email to be alice.

[00:55] Newexample dot com. And so what this does is it takes all the properties here and copies them over to this new object but then email is defined over here but we're defining it after we've spread it. So we spread it and then we're like, actually I'm gonna take that email and I'm gonna set it to something specific. And so we're over effectively overriding the email that comes from the original user. So let's actually export that.

[01:21] We're gonna get an error here. So I'm gonna, copy this. Actually, you know what? Just for the purposes of this, I'll just stick an export right here. There we go.

[01:29] Updated user. So if we take a look at that, we've got ID, Alice. Email is alice..new@example. K. So we're getting everything that we are expecting out of that.

[01:38] So that's good. Let's continue. We've got our, yeah. Oh, and one other thing I wanted to mention, that, or just like preview, is that this settings object right here is not exactly a copy. It's more of a reference, a copy to the reference.

[01:57] So this object right here is the same one as this object right here. And that can cause some problems sometimes. So we'll we'll talk about that here in a bit. Okay. Great.

[02:07] So we've got our config, API URL, time out, and retries. Here's our default config, which is that config. User config overrides some properties, not all of them. So we're gonna take that default config and, create a final config out of the user config. So user config is just overriding the time out.

[02:26] So I'm gonna say default config plus the user config. And, the order actually matters. So we're exporting this one. If we look at the final config, see API URL is the API example, time out and retries. You see that the time out has been overridden, from 5,000 to 10,000.

[02:45] Oh, here's a pro tip. We don't have a lesson for this, but fun syntax pro tip. If you're looking at this and you're like, is that 10,000 or 1,000? Well, there's something you can do and that is add an underscore. And you can add actually add underscores anywhere you like in a number and it will just be ignored.

[03:01] So it's useful for, just being able to read the number a little bit nicer. I don't personally do that a whole lot because normally if I'm do talking about time, then I probably do 1,000 milliseconds times ten seconds. That's how I would represent ten seconds. But, yeah, sometimes sometimes I'll toss a little underscore in there for fun. Anyway, the the important thing to call out here is that, the time out is being overwritten in the default config.

[03:30] But if we were to switch these, default config. There we go. You'll notice now the time out is not being overridden. So the values in the user config, that'll include a time out, but then it gets overridden by the time out that's in the default config because the default config comes second. So whatever comes second ends up winning in the event of a conflict.

[03:53] And it's actually kind of interesting. You notice that, before let's go back there. We have API URL as the first property of the object and then time out. But after, time out actually comes first. And the interesting reason for that is because when we're making this object, it says, okay.

[04:10] I'll take all the properties of the user config. Boom. It's just got a time out. Great. And then, we take all the properties of the default config and add them.

[04:18] And when it runs into the time out, it's like, oh, okay. Yeah. We'll just override the time out. Well, that one came first. So that's I don't think that that's actually in the JavaScript spec which is called ECMAScript.

[04:30] I don't think that's in the ECMAScript spec that it's supposed to behave that way. As far as I know, it's not. But, it's interesting that it does behave that way in this browser. Okay. Great.

[04:42] We're making good progress here. Now let's create a user with dark mode. We've got our user. We're gonna spread all the user. And then we have our settings.

[04:50] We're gonna spread the user settings. So here, I'm, the AI, it's it knows what we actually need to do, but I'm gonna get rid of this. And I'm just gonna say, hey, I just wanna override the settings. Well, TypeScript doesn't like that much. Here, let's export this so we can see.

[05:06] The end result works like it's gonna run. TypeScript doesn't like it though and the reason it doesn't like it is because of what I'm about to show you. So what happens here is the user properties are getting spread across and then we're gonna override the settings properties. But we're not, like, combining the existing settings that we have right here with this user. We're actually overriding the entire object.

[05:30] And so this is no longer a user object because we only have the dark mode theme. We're overriding the entire object. We're not, like, doing some kind of deep merge of, like, oh, that's an object. Well, let's just merge all these properties. So you do have to manually say, oh, well, for this object, if you wanna override it, you have to either override the whole thing or you have to bring in the, settings from the original user.

[05:55] So we're gonna say spread the user settings and we're gonna override the theme. And that will take care of TypeScript, that will take care of us, and we're a lot happier now. The other thing I wanted to show you here, is, I want you to take a look at the updated user. In fact, we'll put the the console log right up here. So I kinda previewed this a little bit, but if we do a console log, updated user dot, email is triple equal to the original user email, we're gonna get a false there.

[06:28] That makes sense. Right? Because we changed the email. And we over overwrote that. Settings or actually here, let's look at name, should equal name, and that should be true.

[06:39] Right? We did not override that. The interesting thing about settings, though, settings will also be true. You can see that right here. But, when when we're talking about a primitive value, of course, it's gonna be equal.

[06:54] That's like saying console dot log, Alice equals Alice. Right? That makes sense. Alright? But when we're trying to do objects, if I were to do the same thing with an object, those two objects are triple equal.

[07:12] Wow. This is not liking that at all. Yeah. Oh, because yeah. Exactly what I'm telling you.

[07:18] In this case, those are gonna triple equal, as false. Like, they do not equal each other because they are two distinct objects in memory. One object is sitting over here. This is one basket and here's another basket. So when you're talking about just a string of characters, yeah, that's that's just what it is.

[07:34] It's not a basket. It's just like that's what it is. But when you're talking about objects, you can have multiple objects that all look exactly the same, but they are actually different things. And so when we try to do a triple equals on them, we're gonna get, false every time. So what, why this matters is because the updated user dot settings triple equals the user settings.

[07:57] And what that means is if I say, updated user settings theme dark, then we look at the updated, updated user, settings theme. Of course, you would expect that to be dark because I just updated it. But look at this. If the user settings oh. So I just made a copy of the user.

[08:24] I made a copy of that user, and I brought all of their settings over, but I didn't copy their settings. Right? I didn't make a copy of the settings. I have a settings property that points to the same object. And so, if I mutate or make a change to the updated user settings, that's also gonna change the original user settings.

[08:43] So this is a danger point that you just have to be aware of when we're talking about objects and what we call referential equality. Is that these things will just sometimes that you'll run into a situation where you have two variables that are pointing to the same thing and modifying one through this variable will actually modify the value that this one is pointing to as well. And so when we're talking about doing this spread action, we are not making a deep copy. We're just making a copy of all the properties. So if you wanted a deep copy, then you will do what we are doing below here, which is, to make a copy of the user settings.

[09:21] Now, what if I wanted a copy but I didn't wanna override it? Well, then you can just do this. And that will do a copy. And if you look at that, we'll see we have dark, we have light. If we say console dot log, there are settings that is gonna be false.

[09:35] We have a different version of that object. And here's the rub. What if settings has a property which is also an object and that one had an object and object. And it just keep going down forever. You just have so many objects.

[09:47] Do you wanna really have to do this? No. You don't. You're gonna write a utility function that will help you do that or just use one on the Internet. They're just like really small small functions.

[09:57] Not not that hard. But it's just something to keep in mind, when you're talking about spread of objects is you're not actually necessarily, when you copy properties from one object to another, you're copying just the shallow properties, not any sub objects that live underneath them. Okay. Great. Hopefully, that was all interesting and useful to you.

[10:22] It just blew up because I messed all sorts of things up because we have these exports. It really doesn't matter because we're about to be done right now, but I'm gonna fix it anyway. Ta da. There it is. Alright.

[10:32] Thank you so much for, enjoying this, nice toast with object spread butter on it, and we'll see you in the next one.

[00:00] Here comes another one of my favorite features, object spread. This is like spreading some butter on your toast or, you know, like butter stretched over too much bread. I don't know. If you got that reference, like, send me a a message on social media or something. Anyway, we're going to spread properties from one object onto another and it's one of my favorite features.

[00:21] I use this all the time. And in fact, there's a little Kent C Dodds lore that, this feature, had a part to play in my, job that I got at PayPal. So if you want to, you can ask me about that some other time. But, object spread, we're going to create new objects, with some updated values by combining objects together and stuff. And I think that you're gonna have a good time with this one.

[00:44] So why don't you jump in and we'll see you when you're done.

Real-world applications don't run on isolated strings and numbers. They run on users with profiles, shopping carts full of products, and lists of data that need to be searched, filtered, and transformed.

Without a solid grasp of how to structure and manipulate data, you'll constantly fight your own code. You'll write brittle programs that fall apart the moment requirements change. You'll loop through arrays manually when a single method call would do the job. And you'll create bugs that stem from not understanding how objects reference memory.

The Structured Data Workshop picks up right where Programming Foundations left off. You'll learn how to organize data using objects, arrays, and purpose-built data structures like Maps and Sets-- then master the patterns for manipulating that data efficiently.

This workshop is hands-on from the start. Every section builds on the last, taking you from creating your first object literal through chaining `map`, `filter`, and `reduce` to transform complex datasets in a single expression.

## Objects

Objects are the most fundamental data structure in JavaScript. You've been using one every time you type `console.log`-- console is an object and log is a property on it. But creating and working with your own objects is where things get interesting.

In this section, you'll build a user management system while learning how objects work from the ground up:

- Creating object literals with properties and values
- Accessing properties with dot notation and bracket notation
- Defining reusable object types in TypeScript
- Working with optional properties and the optional chaining operator
- Using dynamic keys with computed property names

## Arrays

If objects are baskets of named things, arrays are baskets of numbered things. They're everywhere in JavaScript-- lists of users, collections of products, sets of search results. Knowing how to create, access, and iterate over them is essential.

This section takes you from basic array creation through typed arrays of objects and multiple approaches to iteration:

- Creating arrays and accessing items by index
- Adding items with `push` and reading length
- Typing arrays with TypeScript generics (`Array<Product>`)
- Building arrays of objects and accessing nested properties
- Iterating with `for...of` loops and traditional `for` loops
- Filtering items into new arrays based on conditions

## Spread & Rest

Before spread and rest syntax existed, combining arrays and objects was tedious and error-prone. You'd have to manually index into arrays or copy properties one by one. Three little dots changed everything.

This is one of the most practical features in modern JavaScript. You'll use it constantly for merging configurations, copying objects, and writing flexible functions:

- Spreading object properties to create copies with overrides
- Understanding property order and which values win in conflicts
- Shallow copying vs. deep copying and the pitfalls of nested objects
- Accepting any number of arguments with rest parameters
- Spreading arrays into function arguments and new arrays
- Combining rest and spread for flexible utility functions

## Destructuring

Pulling values out of objects and arrays one property at a time gets old fast. Destructuring lets you extract multiple values in a single statement-- and it's especially powerful in function parameter lists where you can pluck off exactly the options you need.

Here you'll practice the patterns you'll use daily in real TypeScript codebases:

- Extracting multiple properties from objects in a single declaration
- Renaming properties with aliases during destructuring
- Setting default values for missing or undefined properties
- Destructuring directly in function parameter lists
- Array destructuring with positional variable assignment
- Using rest syntax (`...rest`) to collect remaining properties

## Array Methods: Map

Transforming data is one of the most common tasks in any application. The `map` method lets you take an array and produce a new array where every item has been transformed-- without mutating the original.

This section teaches you the most-used array method in JavaScript and the patterns that make it powerful:

- Mapping an array of objects to an array of specific properties
- Transforming values during iteration (formatting prices, extracting labels)
- Creating new objects from existing data with `map`
- Implicit returns with arrow functions and the parenthesized object expression trick
- When to use `map` vs. a `for` loop

## Array Methods: Filter & Reduce

Filtering narrows an array down to just the items you care about. Reducing collapses an entire array into a single value-- a total, a grouped object, or anything else. Together with `map`, they form the core toolkit for data transformation.

This section covers the remaining two powerhouse array methods and how to chain them together:

- Filtering arrays by property values, price ranges, and boolean flags
- Chaining `filter` and `map` for concise data pipelines
- Understanding `reduce` with the accumulator pattern
- Reducing arrays into totals, objects, and grouped categories
- When to reach for `reduce` vs. a `for...of` loop
- Passing `Boolean` to `filter` to strip falsy values

## Maps & Sets

Plain objects and arrays cover most situations, but JavaScript provides two purpose-built data structures for when you need fast lookups or guaranteed uniqueness. Maps let you use anything as a key-- not just strings. Sets automatically deduplicate your data.

In this section, you'll learn when and why to reach for these specialized structures:

- Creating a Map from an array of key-value pairs
- Looking up, checking, and deleting entries in a Map
- Using objects as Map keys for metadata storage
- Removing duplicates from an array with a Set
- Converting between Sets and arrays with `Array.from` and spread
- Understanding referential equality and why identical-looking objects aren't deduplicated

Learn to handle real-world data using objects, arrays, maps, sets, destructuring, spread, rest, and array methods for cleaner, more reliable code for real teams

Structured Data

Programming Foundations

Type Safety

Object Oriented TypeScript

Advanced TypeScript

Practical TypeScript: Foundations to Fluency

Master structured data in TypeScript and JavaScript with hands-on exercises on objects, arrays, and powerful methods to enhance your coding skills.

Intro to Structured Data

Introduction to Structured Data

Master JavaScript objects by organizing data effectively, accessing properties, and leveraging optional properties for cleaner code in this engaging exercise.

Intro to Objects

Master object literals by creating user objects in a hands-on exercise, enhancing your web development skills and understanding of JavaScript syntax.

Object Literals

Master property access in JavaScript objects to enhance your coding skills and manipulate data efficiently. Dive into practical exercises now!

Property Access

Master object types by creating a type definition that enhances your coding skills. Dive in and elevate your development expertise today!

Object Types

Master optional properties in TypeScript by exploring user profiles. Enhance your coding skills and effectively handle dynamic object types.

Optional Properties

Master dynamic keys in JavaScript by creating an error pages object with bracket syntax, overcoming syntactical limitations and enhancing your coding skills.

Dynamic Keys

Master object manipulation in programming and enhance your skills. Break down concepts and solidify your knowledge with engaging exercises and community support

Break Objects

1. Objects

Master arrays in TypeScript! Discover their structure, syntax, and how to ensure type safety while managing data efficiently in your projects.

Intro to Arrays

Master array fundamentals by building an inventory system. Interact with essential data structures and enhance your coding skills today!

Array Basics

Master array types in JavaScript by exploring objects within arrays. Enhance your coding skills and build dynamic applications with this engaging exercise.

Array Types

Master array iteration with hands-on exercises using loops. Enhance your coding skills by exploring array manipulation and discover new possibilities.

Iteration

Master array manipulation in JavaScript and TypeScript to enhance your coding skills, complete fun exercises, and boost your programming confidence.

Break Arrays

2. Arrays

Master JavaScript's rest and spread operators to effortlessly combine arrays and manage object properties, enhancing your coding efficiency and elegance.

Intro to Spread and Rest

Master rest parameters to create flexible functions that accept any number of arguments, simplifying your JavaScript code and enhancing functionality.

Rest Parameters

Master the art of retention with Break Spread and Rest. Enhance your learning, boost memory, and prepare for your next development challenge!

Break Spread and Rest

3. Spread and Rest

Master JavaScript destructuring to simplify variable assignments, enhance function parameters, and streamline your coding workflow—boost your efficiency today!

Intro to Destructuring

Master object destructuring to simplify your JavaScript code. Transform property access into concise variable assignments with ease and efficiency.

Object Destructuring

Master array destructuring syntax, uncover its differences from object destructuring, and enhance your JavaScript skills with this engaging exercise.

Array Destructuring

Enhance your skills with effective retention strategies and discover how to apply your knowledge to real projects for greater success in web development.

Outro

4. Destructuring

Master essential array methods like map, filter, and reduce to transform data efficiently and unlock powerful JavaScript programming techniques.

Intro to Array Methods

Transform your arrays efficiently with the powerful map method. Discover how to reshape data and enhance your JavaScript skills today!

Master array filtering to streamline data manipulation. Enhance your coding skills by learning to efficiently extract and refine information with ease.

Filter

Master the reduce method by comparing it with for loops and map/filter techniques, enhancing your JavaScript skills and coding efficiency.

Reduce

Master array methods in JavaScript and TypeScript to enhance your coding skills. Gain confidence with practical exercises and engaging insights.

Break Array Methods

5. Array Methods

Master object methods in JavaScript to efficiently manipulate data. Discover keys, values, and entries to transform objects into arrays for powerful coding solu

Intro to .object-methods

Master object keys and values methods to enhance your JavaScript skills, streamline your code, and improve object manipulation efficiency.

Keys Values

Master object entries and from entries in JavaScript to transform arrays effectively. Enhance your coding skills and debug with confidence!

Entries From Entries

Master object methods in JavaScript and enhance your coding skills. Engage with interactive quizzes and retain key concepts effectively.

Break Object Methods

6. Object Methods

Master maps and sets in JavaScript to enhance data efficiency and eliminate duplicates. Unlock powerful data structures for smarter coding!

Intro to Maps and Sets

Master JavaScript maps by efficiently creating data structures to quickly access user information. Boost your coding skills and enhance your development toolkit

Maps

Explore the power of sets in programming, a unique data structure that enhances array management and optimizes data retrieval for faster performance.

Sets

Master the use of maps and sets in web development, enhancing your coding skills and optimizing data handling for your projects.

Break Maps and Sets

7. Maps and Sets

Wrap up your structured data journey with key takeaways, solidify your knowledge, and prepare to build amazing projects. Keep coding and exploring!

Structured Data

Structured Data

Transcript

Object Spread

Transcript