JavaScript ES6 Objects

Objects in JavaScript allow you to group data and functions, making it easier to manage complex data structures. Essentially, they're collections of key/value pairs, similar to dictionaries or hash maps, where you can dynamically add, update, or remove properties.

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

person.name
// returns 'Sam'

person.age
// returns 33

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

Key Takeaways

• JavaScript objects are key/value pairs like dictionaries.
• Objects can be created using literal syntax, constructors, or Object.create().
• Properties of objects can be added, changed, or deleted dynamically.
• Object methods like Object.assign() facilitate cloning.

Creating Objects

The most common way to define an object is using the literal syntax:

let myObject = {};

Alternatively, you can use the Object constructor:

let myObject = new Object();

Or define objects using constructor functions, which can include parameters:

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

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

jeff.name;
// returns "Jeff"

jeff.age;
// returns 25

To create an object from a prototype, use Object.create():

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

let sam = Object.create(person);

sam.name;
// returns 'Sam'

let fred = Object.create(person);

fred.name = "Fred";

fred.name;
// returns 'Fred'

Accessing Object Properties

Access object properties using dot notation:

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

myObj.prop1;
// returns 'hello'

Or access them using bracket notation:

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

Changing Object Properties

Changing the value of an object property is straightforward:

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 add new properties simply by assigning a value to a new key:

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

person.lastName = "Smith";

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

Deleting Object Properties

Delete properties using the delete operator:

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

delete person.name;

"name" in person;
// returns false

Comparing Objects

In JavaScript, objects are compared by reference, not by value:

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

To clone objects, use Object.assign() or the spread operator:

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

console.log(copy1);
// logs { a: 1, b: 2 }

console.log(copy2);
// logs { a: 1, b: 2 }

ES6 Shortcuts

With ES6, shorthand property names let you write cleaner code:

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

console.log(person);
// logs { name: 'John' }

FAQ

What are the benefits of using objects in JavaScript?

Objects provide a way to group related data and functions, making code easier to manage and extend. They also allow for dynamic data manipulation throughout an object's lifecycle.

Can object properties store functions?

Yes, object properties can store functions, which are then referred to as methods of the object. This allows objects to have behavior in addition to data.

What's the difference between dot notation and bracket notation?

Dot notation and bracket notation are two ways to access object properties. Dot notation is cleaner and more common, but bracket notation is necessary when property names are stored in variables or contain invalid characters.