Learn JavaScript: Objects

Learn about JavaScript ES6 object syntax to model real-world items.

Start

Key Concepts

Review core concepts you need to learn to master this subject

javascript this keyword

javascript function this

javascript getters and setters restricted

getters and setters intercept property access

javascript factory functions

JavaScript destructuring assignment shorthand syntax

shorthand property name syntax for object creation

JavaScript objects

javascript this keyword

//Using 'this' keyword inside the object function to refer to the myCat object and access its 'name' property. 
const myCat = {
  name: 'Rosy',
  age: 8,
  whatName(){
    return this.name  
  }
}

console.log(myCat.whatName()); //Will output 'Rosy'.

The JavaScript reserved keyword this refers to a method's calling object, and it can be used to access properties belonging to that object.

javascript function this

//Using 'this' keyword inside the object function to refer to the myCat object and access its 'name' property. 
const myCat = {
  name: 'Rosy',
  age: 8,
  whatName(){
    return this.name  
  }
}

console.log(myCat.whatName()); //Will output 'Rosy'.

Every JavaScript function or method has a this context. For a function defined inside of an object, this will refer to that object itself. For a function defined outside of an object, this will refer to the global object (window in a browser, global in Node.js).

javascript getters and setters restricted

//Using 'this' keyword inside the object function to refer to the myCat object and access its 'name' property. 
const myCat = {
  name: 'Rosy',
  age: 8,
  whatName(){
    return this.name  
  }
}

console.log(myCat.whatName()); //Will output 'Rosy'.

JavaScript object properties are not private or protected. Since JavaScript objects are passed by reference, there is no way to fully prevent incorrect interactions with object properties.

One way to implement more restricted interactions with object properties is to use getter and setter methods.

Typically, the internal value is stored as a property with an identifier that matches the getter and setter method names, but begins with an underscore (_).

getters and setters intercept property access

//Using 'this' keyword inside the object function to refer to the myCat object and access its 'name' property. 
const myCat = {
  name: 'Rosy',
  age: 8,
  whatName(){
    return this.name  
  }
}

console.log(myCat.whatName()); //Will output 'Rosy'.

JavaScript getter and setter methods are helpful in part because they offer a way to intercept property access and assignment, and allow for additional actions to be performed before these changes go into effect.

javascript factory functions

//Using 'this' keyword inside the object function to refer to the myCat object and access its 'name' property. 
const myCat = {
  name: 'Rosy',
  age: 8,
  whatName(){
    return this.name  
  }
}

console.log(myCat.whatName()); //Will output 'Rosy'.

A JavaScript function that returns an object is known as a factory function. Factory functions often accept parameters in order to customize the returned object.

JavaScript destructuring assignment shorthand syntax

//Using 'this' keyword inside the object function to refer to the myCat object and access its 'name' property. 
const myCat = {
  name: 'Rosy',
  age: 8,
  whatName(){
    return this.name  
  }
}

console.log(myCat.whatName()); //Will output 'Rosy'.

The JavaScript destructuring assignment is a shorthand syntax that allows object properties to be extracted into specific variable values.

It uses a pair of curly braces ({}) with property names on the left-hand side of an assignment to extract values from objects. The number of variables can be less than the total properties of an object.

shorthand property name syntax for object creation

//Using 'this' keyword inside the object function to refer to the myCat object and access its 'name' property. 
const myCat = {
  name: 'Rosy',
  age: 8,
  whatName(){
    return this.name  
  }
}

console.log(myCat.whatName()); //Will output 'Rosy'.

The shorthand property name syntax in JavaScript allows creating objects without explicitly specifying the property names (ie. explicitly declaring the value after the key). In this process, an object is created where the property names of that object match variables which already exist in that context. Shorthand property names populate an object with a key matching the identifier and a value matching the identifier's value.

JavaScript objects

//Using 'this' keyword inside the object function to refer to the myCat object and access its 'name' property. 
const myCat = {
  name: 'Rosy',
  age: 8,
  whatName(){
    return this.name  
  }
}

console.log(myCat.whatName()); //Will output 'Rosy'.

A JavaScript object is a built-in data type for storing key-value pairs. Data inside objects are unordered, and the values can be of any type.

Properties and values of a JavaScript object

//Using 'this' keyword inside the object function to refer to the myCat object and access its 'name' property. 
const myCat = {
  name: 'Rosy',
  age: 8,
  whatName(){
    return this.name  
  }
}

console.log(myCat.whatName()); //Will output 'Rosy'.

A JavaScript object literal is enclosed with curly braces {}. Values are mapped to keys in the object with a colon (:), and the key-value pairs are separated by commas. All the keys are unique, but values are not.

Key-value pairs of an object are also referred to as properties.

Restrictions in naming JavaScript properties

//Using 'this' keyword inside the object function to refer to the myCat object and access its 'name' property. 
const myCat = {
  name: 'Rosy',
  age: 8,
  whatName(){
    return this.name  
  }
}

console.log(myCat.whatName()); //Will output 'Rosy'.

JavaScript object key names must adhere to some restrictions to be valid. Key names must either be strings or valid identifier or variable names (i.e. special characters such as - are not allowed in key names that are not strings).

Dot notation for accessing JavaScript object properties

//Using 'this' keyword inside the object function to refer to the myCat object and access its 'name' property. 
const myCat = {
  name: 'Rosy',
  age: 8,
  whatName(){
    return this.name  
  }
}

console.log(myCat.whatName()); //Will output 'Rosy'.

Properties of a JavaScript object can be accessed using the dot notation in this manner: object.propertyName. Nested properties of an object can be accessed by chaining key names in the correct order.

Delete operator

//Using 'this' keyword inside the object function to refer to the myCat object and access its 'name' property. 
const myCat = {
  name: 'Rosy',
  age: 8,
  whatName(){
    return this.name  
  }
}

console.log(myCat.whatName()); //Will output 'Rosy'.

Once an object is created in JavaScript, it is possible to remove properties from the object using the delete operator. The delete keyword deletes both the value of the property and the property itself from the object. The delete operator only works on properties, not on variables or functions.

Accessing non-existent JavaScript properties

//Using 'this' keyword inside the object function to refer to the myCat object and access its 'name' property. 
const myCat = {
  name: 'Rosy',
  age: 8,
  whatName(){
    return this.name  
  }
}

console.log(myCat.whatName()); //Will output 'Rosy'.

When trying to access a JavaScript object property that has not been defined yet, the value of undefined will be returned by default.

JavaScript Objects are Mutable

//Using 'this' keyword inside the object function to refer to the myCat object and access its 'name' property. 
const myCat = {
  name: 'Rosy',
  age: 8,
  whatName(){
    return this.name  
  }
}

console.log(myCat.whatName()); //Will output 'Rosy'.

JavaScript objects are mutable, meaning their contents can be changed, even when they are declared as const. New properties can be added, and existing property values can be changed or deleted.

It is the reference to the object, bound to the variable, that cannot be changed.

JavaScript Object Methods

//Using 'this' keyword inside the object function to refer to the myCat object and access its 'name' property. 
const myCat = {
  name: 'Rosy',
  age: 8,
  whatName(){
    return this.name  
  }
}

console.log(myCat.whatName()); //Will output 'Rosy'.

JavaScript objects may have property values that are functions. These are referred to as object methods.

Methods may be defined using anonymous arrow function expressions, or with shorthand method syntax.

Object methods are invoked with the syntax: objectName.methodName(arguments).

javascript passing objects as arguments

//Using 'this' keyword inside the object function to refer to the myCat object and access its 'name' property. 
const myCat = {
  name: 'Rosy',
  age: 8,
  whatName(){
    return this.name  
  }
}

console.log(myCat.whatName()); //Will output 'Rosy'.

When JavaScript objects are passed as arguments to functions or methods, they are passed by reference, not by value. This means that the object itself (not a copy) is accessible and mutable (can be changed) inside that function.

JavaScript `for...in` loop

//Using 'this' keyword inside the object function to refer to the myCat object and access its 'name' property. 
const myCat = {
  name: 'Rosy',
  age: 8,
  whatName(){
    return this.name  
  }
}

console.log(myCat.whatName()); //Will output 'Rosy'.

The JavaScript for...in loop can be used to iterate over the keys of an object. In each iteration, one of the properties from the object is assigned to the variable of that loop.

Objects

Lesson 1 of 2

1
It’s time to learn more about the basic structure that permeates nearly every aspect of JavaScript programming: objects. You're probably already more comfortable with objects than you think, becau...
2
Objects can be assigned to variables just like any JavaScript type. We use curly braces, [...] , to designate an object literal: [...] We fill an object with unordered data. This data is organ...
3
There are two ways we can access an object's property. Let's explore the first way— dot notation, [...] . You've used dot notation to access the properties and methods of built-in objects a...
4
The second way to access a key's value is by using bracket notation, [...] . You've used bracket notation when indexing an array: [...] To use bracket notation to access an object's property, w...
5
Once we've defined an object, we're not stuck with all the properties we wrote. Objects are mutable meaning we can update them after we create them! We can use either dot notation, [...] , or ...
6
When the data stored on an object is a function we call that a method. A property is what an object has, while a method is what an object does. Do object methods seem familiar? That’s because y...
7
In application code, objects are often nested— an object might have another object as a property which in turn could have a property that's an array of even more objects! In our [...] obj...
8
Objects are passed by reference. This means when we pass a variable assigned to an object into a function as an argument, the computer interprets the parameter name as pointing to the space in me...
9
Loops are programming tools that repeat a block of code until a condition is met. We learned how to iterate through arrays using their numerical indexing, but the key-value pairs in objects aren't ...
10
Way to go! You're well on your way to understanding the mechanics of objects in JavaScript. By building your own objects, you will have a better understanding of how JavaScript built-in objects wor...

1
Remember, objects in JavaScript are containers that store data and functionality. In this lesson, we will build upon the fundamentals of creating objects and explore some advanced concepts. So if ...
2
Objects are collections of related data and functionality. We store that functionality in methods on our objects: [...] In our [...] object we have a [...] method. We can invoke the [...] ...
3
We saw in the previous exercise that for a method, the calling object is the object the method belongs to. If we use the [...] keyword in a method then the value of [...] is the calling object....
4
Accessing and updating properties is fundamental in working with objects. However, there are cases in which we don't want other code simply accessing and updating an object's properties. When discu...
5
Getters are methods that get and return the internal properties of an object. But they can do more than just retrieve the value of a property! Let's take a look at a getter method: [...] [...] ...
6
Along with getter methods, we can also create setter methods which reassign values of existing properties within an object. Let's see an example of a setter method: [...] Notice that in the e...
7
So far we've been creating objects individually, but there are times where we want to create many instances of an object quickly. Here's where factory functions come in. A real world factory manu...
8
ES6 introduced some new shortcuts for assigning properties to variables known as destructuring. In the previous exercise, we created a factory function that helped us create objects. We had to ...
9
We often want to extract key-value pairs from objects and save them as properties. Take for example the following object: [...] If we wanted to extract the [...] property as a variable, we coul...
10
In the previous exercises we've been creating instances of objects that have their own methods. But, we can also take advantage of built-in methods for Objects! For example, we have access to obje...
11
Congratulations on finishing Advanced Objects! Let's review the concepts covered in this lesson: The object that a method belongs to is called the calling object. The [...] keyword refers...

What you'll create

Portfolio projects that showcase your new skills

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory

Objects
Which of the following statements is correct?

Learn JavaScript: Objects

Start

Learn JavaScript: Objects

Key Concepts

javascript this keyword

javascript function this

javascript getters and setters restricted

getters and setters intercept property access

javascript factory functions

JavaScript destructuring assignment shorthand syntax

shorthand property name syntax for object creation

JavaScript objects

Properties and values of a JavaScript object

Restrictions in naming JavaScript properties

Dot notation for accessing JavaScript object properties

Delete operator

Accessing non-existent JavaScript properties

JavaScript Objects are Mutable

JavaScript Object Methods

javascript passing objects as arguments

JavaScript `for...in` loop

What you'll create

Meal Maker

Team Stats

How you'll master it

Objects

Learn JavaScript: Objects

javascript this keyword

javascript function this

javascript getters and setters restricted

getters and setters intercept property access

javascript factory functions

JavaScript destructuring assignment shorthand syntax

shorthand property name syntax for object creation

JavaScript objects

Properties and values of a JavaScript object

Restrictions in naming JavaScript properties

Dot notation for accessing JavaScript object properties

Delete operator

Accessing non-existent JavaScript properties

JavaScript Objects are Mutable

JavaScript Object Methods

javascript passing objects as arguments

JavaScript for...in loop

Meal Maker

Team Stats

Objects

JavaScript `for...in` loop