Object in JavaScript

Video Tutorial
FREE
Objects in JavaScript thumbnail
This video belongs to
JavaScript Course With Certification: Unlocking the Power of JavaScript
9 modules
Certificate
Topics Covered

Object in javascript are collections of key-value pairs, where keys are strings (or symbols), and values can be of any data type, including other objects. It can be used extensively in building applications. This article will explain the objects in JavaScript and its syntax.

Syntax of Object in JavaScript

  • Curly braces {} are used to denote the beginning and end of the object literal.
  • Inside the braces, you specify key-value pairs separated by commas.
  • Each key is a string (or a symbol in ES6+).
  • Keys are followed by a colon : and then their corresponding values.
  • Values can be of any data type, including strings, numbers, booleans, arrays, functions, or even other objects.

Example:

Output

JavaScript Primitives

In JavaScript, primitives are the most basic data types and are immutable, meaning their values cannot be changed.

Examples

PrimitiveExampleDescription
String'Hello'A sequence of characters
Number42Numeric data, including integers and floats
Booleantrue or falseRepresents true or false
UndefinedundefinedRepresents an uninitialized value
NullnullRepresents an intentional absence of any value
SymbolSymbol('id')Represents a unique identifier
BigInt10nRepresents integers with arbitrary precision

Objects are Variables

Let's learn how to create object in javascript using variables:

  • Variables are containers for storing data values.
  • Objects are one type of data value that can be stored in variables

Object Properties

  • Object properties are the key-value pairs contained within an object.
  • They define the characteristics or attributes of the object.
PropertyValue
makeToyota
modelCorolla
year2020
colorblue

In this example:

  • The object represents a car with properties such as make, model, year, and color.
  • Each property has a corresponding value, such as 'Toyota', 'Corolla', 2020, and 'blue'.

Inherited Properties

Here's a basic example illustrating inheritance in JavaScript:

Inheritance in JavaScript allows objects to share properties and methods, promoting code reuse and providing a flexible way to structure and extend functionality.

Object Methods

Object methods in JavaScript are functions defined as objects' properties. These methods perform actions or computations related to the object's data. Here's an example:

In this example:

  • calculator is an object with two methods: add and subtract.
  • Each method is a function that performs a specific operation.
  • Object methods are accessed using dot notation (calculator.add) followed by parentheses to invoke the function (calculator.add()).

Creating a JavaScript Object

JavaScript offers multiple ways to create objects, providing flexibility and versatility. The various methods of creating objects in javascript are:

  1. Using an Object Literal
  2. Using the JavaScript Keyword new
  3. Creating an object with a constructor

Using an Object Literal

An object literal in JavaScript is the simplest way to create an object in JavaScript. It involves defining key-value pairs within curly braces {}.

Example:

In this example, person is an object with three properties: name, age, and city. Each property is assigned a value using the colon : syntax.

Using the JavaScript Keyword new

You can also create objects using constructor functions with the new keyword. Constructor functions allow you to create multiple objects with similar properties and methods.

Example:

JavaScript Objects are Mutable

JavaScript objects are mutable, meaning their properties can be changed after the object is created. This includes adding or removing properties as well as modifying existing ones.

Example:

Conclusion

  • JavaScript offers multiple methods for creating objects like using object literals and constructor functions with the new keyword.
  • Object literals in JavaScript provide a straightforward way to define key-value pairs within curly braces {}.
  • Constructor functions allow the creation of multiple objects with similar properties and methods.
  • JavaScript objects are mutable.