Objects

Objects are a discrete data type in the same way that each primitive is a data type, with one critical difference: unlike primitives, objects are mutable. An object can contain data associated with identifiers, like a variable, but it keeps its object data type no matter what data it contains.

Aside from primitives, all JavaScript values are objects, though because even primitive literals exhibit object-like behavior due to prototypal inheritance, it's often said that JavaScript is effectively made up of objects.

An object literal is a pair of curly braces surrounding zero or more key-value pairs called "properties," which can contain any JavaScript value.

{
    "myProperty" : true
}

Property keys can be any symbol or string. As when assigning an identifier to a variable, the strings used as property keys should be predictable and descriptive:

let carAttributes = {
    "color" : "red"
};

carAttributes
> Object { color: "red" }

Property keys require a single (') or double quoted (") string literal, not a template literal:

let carAttributes = {
    `keyString` : false
};
> Uncaught SyntaxError: expected property name, got template literal

Property values can be any data type. The properties of an object can themselves contain objects with their own properties:

let myObject = {
    'key' : {
        'subkey' : true,
        'othersubkey' : false
    }
};

myObject;
> Object { key: Object { subkey: true, othersubkey: false } }

When the value of a property is a function, that property is called a "method."

const myObject = {
    "myProperty" : true,
    myMethod() {
        console.log( "This is a method." );
    }
}

myObject.myProperty;
> true

myObject.myMethod();
> "This is a method."

You can also create an object using the new keyword:

let myObject = new Object();

In the previous examples, the newly-created object literals have been assigned to variables. This isn't required, because like any other data type, you can use an object without an identifier anywhere an object is expected. However, an object literal requires parentheses in any context where it could be confused for a block statement, given that the two share curly brace syntax ({}). Initializing a variable never requires this.

{ "value" : 2 }
> Uncaught SyntaxError: unexpected token: ':'

({ "value" : 2 })
> Object { value: 2 }

let valObj = { "value" : 2 };

valObj;
> Object { value: 2 }

Unlike primitives, there's no meaningful difference in the results of creating an object using new Object() and creating an object literal, because the result in either case will be an object with properties inherited from the Object prototype. However, there is one practical difference between the two syntaxes.

The new keyword must define an empty object that is filled with data later:

let myObject = new Object();

myObject.booleanValue = true;
myObject.stringValue = "My string.";

An object literal can be populated with data when it's created:

let myObject = {
    'booleanValue' : true,
    'stringValue' : "My string."
};

Though it has little practical use, new Object() can be used to turn primitive data values into Objects of their respective type, like those returned by using the new keyword along with their constructor function. For example, the following is functionally equivalent to new Number( 10 ):

let myObject = new Object( 10 );

myObject;
> Number { 10 }

null and undefined values result in an empty object, functionally identical to invoking new Object() without supplying an argument.

Passing an object literal to new Object() as an argument passes the object literal without changing it:

let myObject = new Object( { myValue : 10 } );

myObject;
> Object { myValue: 10 }

As with using constructors for primitive values, using constructors for objects rarely has any benefits over using object literal notation. Even when creating empty objects to be populated with values later, developers tend to favor object literal notation for the sake of simplicity.

Check your understanding

What kinds of notation can you use to set an object's properties?

Dot notation
Bracket notation
Period notation
Line notation

Which of the following is the correct syntax for getting the value of myProp

myObj["myProp"];
myObj{"myProp"};
myObj("myProp");