Intro to JavaScript Objects Fundamentals

Learning objective: By the end of this lesson, students will be able to apply the basics of object creation, access, and assignment.

Object literal notation

Let’s create an object by using Object Literal notation, also known as an Object Initializer:

const music = {};
console.log(typeof music); // 'object'

As you can see, Object Literal notation consists of a set of opening and closing curly braces, {}. We just used curly braces to create an empty music object.

Let’s change the code so that music has a property:

const music = { currentTrack: 'Just Ken' };
console.log(music);

Properties are separated by commas:

const music = {
  currentTrack: 'Just Ken',
  volume: 70
};

Syntactically, trailing commas are permitted and encouraged:

const music = {
  currentTrack: 'Just Ken',
  volume: 70, // <-----
};

Why? Check out this commit for a look into how this looks to version control software when modified. It’s also just less work later!

Dot notation

The primary way to access, add, or modify an existing object’s properties is dot notation.

Let’s use dot notation to add another property to the music object:

music.currentPlaylist = ['Just Ken', 'Hey Blondie', 'What Was I Made For', 'Dance The Night'];

We can then access the value using the same dot notation syntax:

console.log(music.currentPlaylist)  // ['Just Ken', 'Hey Blondie', 'What Was I Made For', 'Dance The Night']

🎓 You Do

Using dot notation: