JavaScript ES6 Objects

Objects allow you to define your own data types in JavaScript. Similar to a dictionary or hash map, objects are a collection of key/value pairs which can be modified throughout the object's life cycle.

let person = {
  name: "Sam",
  age: 33,
  printName: function() {
    console.log("Hello, my name is " + this.name + ".");
  }
}

person.name
//returns 'Sam'

person.age
//returns 33

person.printName()
//logs 'Hello, my name is Sam.'

Creating Objects

You can use the {} syntax to define an object like this:

let myObject = {}

You can also use the Object constructor to create an object like this:

let myObject = new Object();

You can also define an object via a constructor function:

function Person(name, age){
  this.name = name
  this.age = age
}

let jeff = new Person("Jeff", 25)

jeff.name
//returns "Jeff"

jeff.age
//returns 25

Constructor functions optionally accept parameters. Notice how our constructor function for Person takes two parameters (name, age). We set properties for these arguments via this. When we initialize or create a new instance of Person, the properties name and age get set based on the supplied arguments.

We can also use the Object.create() method to create new objects from a prototype. This allows us to create prototypes without a constructor function:

let person = {
  name: "Sam",
  age: 50
}

let sam = Object.create(person)

sam.name
//returns 'Sam'

sam.age
//returns 50

let fred = Object.create(person)

fred.name = "Fred"

fred.name
//returns 'Fred'

Notice how we override the default name Sam for our second object.

Accessing Object Properties

You can access object properties via dot notation:

let myObj = {prop1:"hello", prop2:"goodbye"}

myObj.prop1
//returns 'hello'

You can also access properties like this:

myObj["prop1"]
//returns 'hello'

Changing Object Properties

You can change an object property's value the same way you reassign a variable:

let person = {name:"Steve", age:35}

person.name = "Sam"

person.name
//returns 'Sam'

person["name"] = 'Ted'

person.name
//returns 'Ted'

Adding Object Properties

You can dynamically create new properties as well:

let person = {name:"Steve", age:35}

person.lastName = "Smith"

console.log(person)
//logs {name: 'Steve', age: 35, lastName: 'Smith'}

Deleting Object Properties

You can delete object properties via the delete operator:

let person = {name:"Steve", age:35}

delete person.name;

"name" in person
//returns false

Comparing Objects

In JavaScript, each object you create points to a different memory address. This means objects with identical properties are still not considered equal:

let myObj = {a:1, b:2}
let myObj2 = {a:1, b:2}
let objRef = myObj2

myObj == myObj2
//returns false

myObj === myObj2
//returns false

objRef == myObj2
//returns true

objRef === myObj2
//returns true

Cloning Objects

You can clone an object with the Object.assign() method:

let myObj = {a:1, b:2}
let copy = Object.assign({}, myObj)

console.log(copy)

//logs {a: 1, b: 2}

ES6 Shortcuts

ES6 introduces a few shortcuts for working with objects:

let name = "John"
let person = { name }

console.log(person)

//logs {name: 'John'}

Conclusion

Objects allow you to build and extend custom data types. Objects make it easy to create and dynamically change properties and are fundamental to JavaScript programming.

Join the conversation...