Objects

Anonymous contributor's avatar
Anonymous contributor
Published May 6, 2021Updated Jul 23, 2024
Contribute to Docs

A JavaScript object is a non-primitive data type that can assume the properties and behaviors required for a given programming need. An object can be created or defined with an object literal:

const person = {
firstName: 'Elizabeth',
lastName: 'Harmon',
age: 22,
eyeColor: 'Hazel',
};

Spaces and line breaks are not important. An object definition can span multiple lines:

const person = {
firstName: 'Elizabeth',
lastName: 'Harmon',
age: 22,
eyeColor: 'Hazel',
};

Object Properties

The key: value pairs in JavaScript objects are called properties:

Property Key Property Value
firstName "Elizabeth"
lastName "Harmon"
age 22
eyeColor "Hazel"

Accessing Object Properties

Object properties can be accessed using the dot notation:

objectName.propertyName
person.lastName;

Bracket notation must be used if the property name has spaces, special characters, or begins with a number:

objectName['property Name']
person['last Name'];

Object Methods

Object methods are actions that can be performed on objects.

Methods are stored in properties as function definitions.

const person = {
firstName: 'Elizabeth',
lastName: 'Harmon',
age: 22,
eyeColor: 'Hazel',
greeting: function () {
return `Hi, I am ${this.firstName} ${this.lastName}.`;
},
};
console.log(person.greeting());
  • The greeting key holds a function value that returns a template literal using backticks.
  • When person.greeting value is invoked, the corresponding function will run.

This will output:

Hi, I am Elizabeth Harmon.

Object Classes

Classes are essentially boilerplate object templates. If a car is an object, then a car factory is an object class.

A class can be constructed with the following notation. The person object example will be used.

Note: Anonymous functions can’t be used in classes.

class Person {
greeting() {
return `Hi, I am ${this.firstName} ${this.lastName}.`;
}
}

To use a class, an instance of it needs to be created. To demonstrate how an instance of a class is an object, its properties will be defined using the dot notation.

const person = new Person();
person.firstName = 'Elizabeth';
person.lastName = 'Harmon';
person.age = 22;
person.eyeColor = 'Hazel';
console.log(person);
/*
Output:
Person {
firstName: 'Elizabeth',
lastName: 'Harmon',
age: 22,
eyeColor: 'Hazel'
}
*/

An additional step can be made to optimize this procedure through the use of constructors.

A constructor function initializes a set of variables at the creation of a class. Thanks to constructors, object properties can be defined when a new instance is made. This makes code precise and concise.

class Person {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
greeting() {
return `Hi, I am ${this.firstName} ${this.lastName}.`;
}
}

To summarize what’s been done, when making a new instance, the constructor assigns the new object the two new properties firstName and lastName whose values are inputted at the time of creating the instance.

const person = new Person('Elizabeth', 'Harmon');
console.log(person);
/*
Output:
Person {
firstName: 'Elizabeth',
lastName: 'Harmon',
__proto__: {
constructor: ƒ Person(),
greeting: ƒ greeting()
}
}
*/
console.log(person.greeting());
// Output: Hi, I am Elizabeth Harmon.

Video Walkthrough

Watch this video to learn how to create JavaScript objects containing different types of data and functions, and access their properties.

Codebyte Example

The following example showcases how object properties are defined and applied in JavaScript:

Code
Output
Loading...

Objects

.assign()
Returns an object that contains the contents of the objects passed.
.create()
Creates a new object with the specified prototype object and properties.
.defineProperties()
Defines new or modifies existing properties directly on an object.
.defineProperty()
Defines a property of an object either by creating or modifying.
.entries()
Returns an array containing arrays of key-value pairs that belong to the object.
.freeze()
This method is used to freeze an object and it returns the object that was passed to the function.
.fromEntries()
Returns a new object with properties from a given iterable.
.getOwnPropertyDescriptor()
Enables access to full information of a property.
.getOwnPropertyDescriptors()
Returns all own property descriptors of a given object.
.getOwnPropertyNames()
Returns an array of strings that corresponds to the properties found directly in the given object.
.getOwnPropertySymbols()
Returns an array of all symbol property found directly upon a given object.
.getPrototypeOf()
Returns the prototype value of the specified object
.groupBy()
Used to group objects based on a key extracted from each object using a provided callback function.
.hasOwn()
Returns a boolean value based on whether the specified property is directly owned by the object or not.
.is()
This method is used to verify that two values are identical.
.isExtensible()
Returns a boolean value depending on whether a given object can have properties added to it.
.isFrozen()
Returns a boolean value depending on whether a given object is frozen.
.isSealed()
Returns true if an object is sealed, and false if that object is not sealed.
.keys()
Extracts keys from an object and returns them as an array

All contributors

Contribute to Docs

Learn JavaScript on Codecademy