Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

5.7 Object Literal Extensions

Recent versions of JavaScript have introduced some new tools that we can make use of when creating object literals, including shortcuts for defining properties and methods, dynamic keys, and the new assign method.

Syntax

  • assign

1.Introduction
2 lessons, 07:42

1.1
Introduction
02:12

1.2
Setup
05:30

2.Language Fundamentals
8 lessons, 1:00:53

2.1
Variables
06:33

2.2
Data Types
11:28

2.3
Arithmetic, Assignment, and Comparison Operators
10:24

2.4
Unary, Logical, Comma, and Spread Operators
09:02

2.5
Operator Precedence
03:50

2.6
Reserved Words
04:17

2.7
Strict Mode
04:34

2.8
Functions
10:45

3.Data Structures
5 lessons, 22:52

3.1
Arrays
04:29

3.2
Objects
04:30

3.3
Sets
04:57

3.4
Maps
04:21

3.5
Weak Maps and Weak Sets
04:35

4.Controlling Program Execution
7 lessons, 37:06

4.1
Conditionals
07:49

4.2
Switch Statements
04:41

4.3
The For Loop
06:39

4.4
The `for .. in` Loop
05:17

4.5
The `for .. of` Loop
04:02

4.6
Iterators
05:03

4.7
While Loops
03:35

5.Using JavaScript
13 lessons, 1:44:36

5.1
Working With Strings
09:32

5.2
Template Literals
05:46

5.3
Working With Numbers
06:57

5.4
Working With Arrays
12:53

5.5
Iterating and Transforming Arrays
07:33

5.6
Working With the Object Type
13:55

5.7
Object Literal Extensions
06:45

5.8
Working With Object Instances
06:45

5.9
Getters and Setters
05:00

5.10
Custom Objects
11:28

5.11
The `Math` API
04:54

5.12
Working With Dates and Times
08:10

5.13
The `Array` Constructor
04:58

6.Functions
8 lessons, 56:07

6.1
The `this` Object
06:15

6.2
Working With Functions
10:11

6.3
Scope
07:37

6.4
Arrow Functions
06:59

6.5
Generator Functions
08:13

6.6
Closures
05:00

6.7
Prototypes
06:26

6.8
Default and Rest Parameters
05:26

7.Miscellaneous
6 lessons, 52:39

7.1
Destructuring Assignments
08:09

7.2
AJAX
08:30

7.3
Regular Expressions
10:51

7.4
More About Regular Expressions
08:38

7.5
Classes
06:48

7.6
ES Modules
09:43

8.Working With the DOM
6 lessons, 37:39

8.1
Selecting HTML Elements
05:02

8.2
Manipulating HTML Elements
07:40

8.3
DOM Traversal
05:25

8.4
Adding and Removing Elements
04:45

8.5
Creating Elements and Other Nodes
04:39

8.6
DOM Events
10:08

9.Web APIs
4 lessons, 17:41

9.1
The Selector API
03:03

9.2
Geolocation
05:29

9.3
Web Storage
05:24

9.4
Web Workers
03:45

10.Asynchronous JavaScript
5 lessons, 26:23

10.1
Promises
09:52

10.2
Promise Chaining
05:11

10.3
The async Keyword
03:21

10.4
The await Keyword
04:04

10.5
More About async and await
03:55

11.Conclusion
1 lesson, 00:43

11.1
Conclusion
00:43


5.7 Object Literal Extensions

Hi, folks, in this lesson we're going to look at some cool things we can do when defining object literals. One feature is a shorter syntax for defining object properties that we saw when we looked at objects earlier on in the course. Let's look at that first, instead of specifically setting properties and values, we can simply supply the value. And the key will be created for us automatically. Let's take a look, so let's start out by defining a couple of variables. So later, we might want to create a new object literal which contains these values. In previous versions of JavaScript, we would've had to do something like this. So we've defined an object literal called obj. And we want it to have two properties, one with the key x and one with the key y. And we want to give the x key the value of the x variable, and the y key the value of the y variable. So in this case, it's not too bad, because the key names and variable names are quite short. But there is a lot of duplication there. And if we were adding more variables, and we wanted to use longer key names, and we had different variable names, there could be a lot more repetition. So in the latest version of JavaScript, we can shorten that to just do this instead. When the key name is the same as the variable name, we can just supply that once and JavaScript will figure it out for us. And let's just log it to the console to ensure that it's working in the way that we expect. And we can see that our object has been created, and it has x and y keys. And it has the values of the x and y variables, as we would expect. So we've saved ourselves a bit of repetitive typing, which can be useful. It seems like a small thing, but in regular day to day JavaScript, it can save you a lot of repetition. And that's really why this feature was introduced. Another time saving and repetition saving addition is a new way of defining methods. So, in earlier versions of JavaScript, if we wanted to define a method, which is simply a function attached to the proxy of an object, we would have had to have done something like this. So, in this case, we've defined a new method on our objects. And this method is stored in a property simply called method. And we have to use the whole function keyword. So if we were adding a lot of methods we'd have to repeat that function keyword over and over again. Well, in the latest version of JavaScript, we can get rid of that function keyword all together. And that allows us to do this instead. So we simply add the parenthesis after the method. And we don't have to worry about a function keyword at all. So, again, in this case, it hasn't really saved us much time or effort. But if we were adding lots and lots of methods to this object, it would save us a considerable number of keystrokes. And it just looks a bit nicer, and it's a bit easier to read. One other new feature that we have with objects is having computed property names. So in this case we use square brackets to say that we want the key name to be a combination of the x and the y variables concatenated together. And let's just look at the output in the browser. And we can see that our object now has a key called test42, which is the output of computing x plus y. Again, a small thing, but it can be very useful. Before we finish up for the day, let's just take a quick look at another static method that we can make use of from the built in object constructor that we looked at in the last lesson. This is the assign method, and we can use it to assign the properties of one or more objects to another object, a bit like jQuery's clone method. Again, this is largely provided as a syntactic convenience to avoid having to copy the properties of objects to new objects manually. So let's take a quick recap of what we've done here. We've created a new object called composedObj. And we've used the objects.assign method, this method takes three parameters in this example. This method takes three arguments in this example. The first argument is an empty object. So this is the target object, this is the object that the method will return. The second and third arguments are the objects that we'd like to merge together. So we're merging our obj example objects and then a new object literal that just has a single property called someOtherProp. And let's just log out the value of the composed object to the console. And we can see that this new object is a combination of both our existing example object and the new object literal that we passed as the third argument. If the target object already contains a property that one of the other objects contains, it will be overwritten with a property from the last object that we passed. So in this lesson we looked at some mostly syntactic improvements to object literals which were added in ES2015. Including the shorthand for assignment, where when the key name and the variable that we'd like to add to that key are the same, we can just provide one of those. We don't have to duplicate them. And we looked at computed properties. We finished up by taking a look at the assign method, which can be used to merge two objects together to form a new object. In the next lesson, we're going to move on to look at object instances. Thanks for watching.

Back to the top
View on GitHub