Object Definitions

Methods for Defining JavaScript Objects

• Using an Object Literal
• Using the new Keyword
• Using an Object Constructor
• Using Object.assign()
• Using Object.create()
• Using Object.fromEntries()

Using an Object Literal

An object literal is a list of property key:values inside curly braces { }.

{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

Example

// Create an Object

const person = {

  firstName: "John",

  lastName: "Doe",

  age: 50,

  eyeColor: "blue"

};

Using the new Keyword

Example

// Create an Object

const person = new Object({

  firstName: "John",

  lastName: "Doe",

  age: 50,

  eyeColor: "blue"

});

Note: The examples above do exactly the same. But, there is no need to use new Object(). For readability, simplicity and execution speed, use the object literal method.

Objects written as name value pairs are similar to:

• Associative arrays in PHP
• Dictionaries in Python
• Hash tables in C
• Hash maps in Java
• Hashes in Ruby and Perl

JavaScript Object.create()

The Object.create() method creates an object from an existing object.

Example

// Create an Object:

const person = {

  firstName: "John",

  lastName: "Doe"

};

// Create new Object

const man = Object.create(person);

man.firstName = "Peter";

JavaScript Object fromEntries()

ES2019 added the Object method fromEntries() to JavaScript.

The fromEntries() method creates an object from iterable key / value pairs.

Example

const fruits = [

["apples", 300],

["pears", 900],

["bananas", 500]

];

const myObj = Object.fromEntries(fruits);

Browser Support

fromEntries() is an ECMAScript 2019 feature.

ES2019 is supported in all modern browsers since January 2020:

JavaScript Object.assign()

The Object.assign() method copies properties from one or more source objects to a target object.

Example

// Create Target Object

const person1 = {

  firstName: "John",

  lastName: "Doe",

  age: 50,

  eyeColor: "blue"

};

// Create Source Object

const person2 = {firstName: "Anne",lastName: "Smith"};

// Assign Source to Target

Object.assign(person1, person2);

In JavaScript, Objects are King.

If you Understand Objects, you Understand JavaScript.

In JavaScript, almost "everything" is an object.

• Objects are objects
• Maths are objects
• Functions are objects
• Dates are objects
• Arrays are objects
• Maps are objects
• Sets are objects

All JavaScript values, except primitives, are objects.

JavaScript Primitives

A primitive data type is data type that can only store a single primitive value.

JavaScript defines 7 types of primitive data types:

Note: Immutable Primitive values are immutable (they are hardcoded and cannot be changed). if x = 3.14, you can change the value of x, but you cannot change the value of 3.14.

JavaScript Objects are Mutable

Objects are mutable: They are addressed by reference, not by value.

If person is an object, the following statement will not create a copy of person:

const x = person;

The object x is not a copy of person. The object x is person.

The object x and the object person share the same memory address.

Any changes to x will also change person:

Example

//Create an Object

const person = {

  firstName:"John",

  lastName:"Doe",

  age:50, eyeColor:"blue"

}

// Try to create a copy

const x = person;

// This will change age in person:

x.age = 10;

Note: Advanced Chapters: JavaScript Object Definitions JavaScript Object Advanced this JavaScript Object Iterations JavaScript Object Getters & Setters JavaScript Object Management JavaScript Object Protection JavaScript Object Prototypes JavaScript Object Reference