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

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

3.2 Objects

Objects are a fundamental concept in JavaScript, and ultimately, most entities are objects in one way or another. In this lesson we’ll focus on how objects can be created, and the different ways that their properties can be accessed.

Syntax

  • Object
  • {}

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


3.2 Objects

Hi folks. In this lesson, we're going to take a look at the all important objects. We looked at them very briefly earlier. Let's just recap on some of the basics quickly, first of all. So objects in JavaScript consist of a series of comma separated key-value pairs within curly braces. The key-value pairs are known as properties, and consist of an identifier and a value. The identifiers are also called keys. The values can consist of any other data type including objects and even functions. This way of creating objects is known as object literal syntax. And it's the recommended way to create objects. Like with a arrays, there is also a constructor that can be used. Also, just like with arrays, it is recommended to always use the literal form. There are two different ways to access the values held within an object, and two different ways to add new values. We can use dot notation to access them. And we can also use square bracket notation. So both of these forms are treated identically by the JavaScript engine. We can also use both these forms to set new values. So these are equally as valid. Dot notation is more commonly used to get or set property values. But square bracket notation can be very useful if we want to use a variable to access or set object properties. Let's just look at a quick example of this. So here we've declared a simple function called getThingByColor, which accepts a single parameter called color. We've also defined an object inside the function called things. And this object has a key called red, a key called green, and key called blue. And each of these properties has string values. We can use the return keyword to either return the thing from the object, or the default string, sorry no thing of that color exists. So the useful thing here is that when the function gets invoked, we can pass through either red, green, or blue, and we will get the corresponding value from the objects. Inside the function, however, we don't know which color is gonna be passed, and so we just use the color parameter with square bracket notation to get the matching property from the objects. Notice how we use the logical or operator here to return the default message if a color is passed to the function which doesn't have a corresponding key in the objects. This works because if we try to access a property of an object that doesn't exist, we get undefined, and undefined evaluates to false. And let's just check in the browser that it is working the way that we expect. And we can see that the function is working in the way that we expect. So, in this lesson, we looked at some object basics in JavaScript. We saw the different ways that we can get the values stored inside the objects, and how we can add new properties. And we saw that both of these things can be accomplished with either dot notation or square-bracket notation. In the next lesson, we'll look at sets. Thanks for watching.

Back to the top
View on GitHub