JavaScript Objects Overview

Back to: JavaScript Tutorial For Beginners and Professionals

JavaScript Objects Overview

In this article, I am going to discuss JavaScript Objects Overview with Examples. Before Understanding what is JavaScript Object let’s first understand what is Object in a real-world scenario is all about.

What are Objects?

Generally, objects are things. For example, a mobile is an object. Properties are nothing but the terms that describe and define a particular object. Our mobile, for example, has a color, a name, a model, camera, a height, and a weight. In Software, objects model real-world objects or abstract concepts. Examples: Bank, Account, Customer, Cat, Bicycle, etc.

Real-world objects have states and behavior. Account’ state: holder, balance, type and Account’ behavior: withdraw, deposit, suspend.

How do software objects implement real-world objects?

1. Use variables/data to implement state
2. Use methods/functions to implement behavior

An object is a software bundle of variables and related functions

Objects Represent

What is an Object Type (Class) in JavaScript?

The formal definition of an object type (class) as per definition by Google: Object types act as templates from which an instance of an object is created at run time. Types define the properties and functions define the behavior of the object.

Object Types in JavaScript

Object types provide the structure for objects i.e. Define their prototype, act as a template. Object types define:

Set of attributes

1. Represented by variables and properties
2. Hold their state

Set of actions (behavior)

1. Represented by methods/functions

Objects

1. An object is a concrete instance of a particular object type
2. Creating an object from an object type is called instantiation
3. Objects have a state i.e. set of values associated with their attributes

Example:

1. Type: Account
2. Objects: Kathy’s account, John’s account
3. Type: Fruits

JavaScript Object Types and Objects – Example

JavaScript Objects Overview

What are Objects?

JavaScript objects can be compared to real-world objects. They have properties and methods attached to them and properties are in the form of key-value pairs collections. Let us understand this more briefly with an example. In the real world, a car is an object and it has properties like name, color, price, model, etc. The car object also has some methods like start, breaks, stops, etc. All cars will have similar properties but the values will be different for each car. This same theory is applied in programming and is known as Object-Oriented Programming.

In JavaScript, objects are parent class which means they are king. If we understand objects, we understand JavaScript. As we know from the Data Types chapter. The primitive types of JavaScript are true, false, numbers, strings, null and undefined. Every other value is an object.

Everything is an object in JavaScript

1. There is no distinction between objects and classes
2. Objects inherit from objects
3. Even functions are objects

JavaScript is designed on a simple object-based paradigm(language). An object is a collection of properties. An object property is an association between a name (or key) and a value. A value of a property can be either.

1. Property (variable / field)
2. Function (method)

JavaScript variables are containers for data values. We can also treat objects like variables, but the only difference is that objects can contain many values whereas a variable having a single value at any given point of time. An object is a complex data type in JavaScript that is used to store any combination of data in a simple key-value pair. Each key-value pair is called a property. Data inside objects are unordered, and the values can be of any type.

JavaScript is template based not class-based. That means, in JavaScript, we don’t have to create a class to get an object instead we direct create objects in JavaScript.

Types of Objects in JavaScript

1. User-defined Objects
2. Built-in Objects / Predefined Objects

User-defined Objects

An object that is defined/created by the developer to develop a software object model. developers can create their own objects, such as Bank Account, Student, houses, cars, companies, etc…

Built-in Objects / Predefined Objects

A built-in object is an object that is of the primitive and non-primitive data types, handling some specific tasks. These built-in objects are available and pre-defined by JavaScript. Lots of predefined objects available in JS. There are different types of built-in Objects in JavaScript

Common reference Objects

1. Array Object
2. Boolean Object
3. Math Object
4. Date Object
5. Number Object
6. String object
7. Regular Expression Object

DOM (Data Object Model)

1. Attributes Object
2. Element Object
3. Style Object
4. Document Object

BOM (Browser Object Model)

1. Windows Object
2. Navigator Object
3. Location Object
4. Screen Object
5. Storage Object

Features of JavaScript Object:

The object is an instance of a class that has the structure of its blueprint but also owns its unique state and behavior. Just like many other computer languages, JavaScript is based on objects. JavaScript objects are simple maps from names (or keys) to:

1. values (properties);
2. functions (methods);

Objects are containers with properties. properties can contain anything.

1. Even functions
2. Or other objects

JavaScript object is a list of values that are written as key: value pairs within a curly bracket {…}, with the keys and the values separated by colons. Property has a key (also known as “name” or “identifier”) before the colon “:” and a value to the right of it.

All keys in JavaScript objects are strings and can be only a string. If it’s not a string. It gets cast/converted to a string. This means that even though we can create an object {1: ‘is the real number’}, the key here, 1 gets turned into the string ‘1’. Values can be of any type. All the keys are unique, but values are not.

In JavaScript objects contain propertyName: propertyValue pairs. Properties and methods can change at any time

1. added by assigning to a new name;
2. removed by assigning null to the name.

A new object is created by:

1. Using object literal
2. Using new Object() method
3. Using an object constructor (using the new keyword)
4. Using Object.create() method
5. Using Factory Pattern/ Object Building Function
6. Using Prototype Pattern

JavaScript object properties can be accessed in two ways:

1. objectName.propertyName and
2. objectName[‘propertyName’]

Object.assign: recursive shallow overwrites for properties from the target, …objects

Object.is: like using the === operator, but true for NaN vs NaN, and false for +0 vs -0

Object.getOwnPropertySymbols: returns all own property symbols found on an object

Object.setPrototypeOf: changes prototype. Equivalent to Object.prototype.__proto__ setter

Note: JavaScript objects are mutable, meaning their contents can be changed, even when they are declared as const. New properties can be added, and existing property values can be changed or deleted.

In the next article, I am going to discuss How to Create JavaScript Object Using object literal with Examples. Here, in this article, I try to explain the basics of JavaScript Objects and I hope you enjoy this article.