Objects in Javascript

Objects in JavaScript are the most important data type and form the building blocks for modern JavaScript. Unlike primitive data types (Number, String, Boolean, null, undefined, and symbol), which hold a single value, objects can hold multiple values as properties. This makes objects incredibly useful for grouping related data and operations, leading to more organized and maintainable code.

What Are Objects in JavaScript?

In JavaScript, an object is a collection of related data and functions, known as properties and methods, respectively. Properties are “key: value” pairs that store data, while methods are functions associated with the object that can manipulate its properties.

Syntax

new Object(value)
Object(value)
let object_name = {
    key_name : value,
    ...
}

Note:- Object()  can be called with or without new. Both create a new object.

Example: Below is an example of Objects in JavaScript.

const o = new Object();
o.foo = 42;

console.log(o);
// { foo: 42 }

{ foo: 42 }

Example: In this example “name”, “location”, and “established” are all “keys” and “Vivekananda School”, “Delhi” and 1971 are values of these keys respectively. Each of these keys is referred to as properties of the object. An object in JavaScript may also have a function as a member, in which case it will be known as a method of that object. Here  “displayinfo” is a method of the school object that is being used to work with the object’s data, stored in its properties.

// JavaScript code demonstrating a simple object
let school = {
    name: 'Vivekananda School',
    location: 'Delhi',
    established: '1971',
    displayInfo: function () {
        console.log(`${school.name} was established 
              in ${school.established} at ${school.location}`);
    }
}
school.displayInfo();   

Vivekananda School was established 
              in 1971 at Delhi

• Objects are more complex and each object may contain any combination of these primitive data-types as well as reference data-types.
• An object is a reference data type. Variables that are assigned a reference value are given a reference or a pointer to that value. That reference or pointer points to the location in memory where the object is stored. The variables don’t actually store the value.
• Loosely speaking, objects in JavaScript may be defined as an unordered collection of related data, of primitive or reference types, in the form of “key: value” pairs. These keys can be variables or functions and are called properties and methods, respectively, in the context of an object.

An object can be created with figure brackets {…} with an optional list of properties. A property is a “key: value” pair, where a key is a string or a symbol (also called a “property name”), and the value can be anything including numbers, strings, booleans, functions, arrays, or even other objects. .

Objects as Reference Types

Objects in JavaScript are reference types. This means that when you assign an object to a variable, the variable holds a reference (or pointer) to the memory location where the object is stored, not the actual object itself.

JavaScript Object Properties

Properties are defined as key-value pairs, where the key is a string or symbol and the value can be any data type, including numbers, strings, booleans, functions, arrays, or other objects.

Example: Below is the example of object properties.

let school = {
    name: 'Vivekananda School',
    location: 'Delhi',
    established: '1971',
    20: 1000,
    displayInfo: function () {
        console.log(`The value of the key 20 is ${school['20']}`);
    }
}
school.displayInfo();   

The value of the key 20 is 1000

But more on the bracket notation later. Property names can also be strings with more than one space separated words. In which case, these property names must be enclosed in quotes :

let school = {
    "school name" : "Vivekananda School",
}

Example: In this example, we are accessing ‘Vivekananda’ from ‘Vivekananda School’.

// Bracket notation 
let school = {
    name: 'Vivekananda School',
    displayInfo: function () {
        console.log(`${school.name.split(' ')[0]}`);
    }
}
school.displayInfo(); // Vivekananda

Vivekananda

In the above code, we made use of bracket notation and also split method provided by JavaScript which you will learn about in the strings article.

Inherited Properties

JavaScript objects can inherit properties from their prototypes. These are known as inherited properties. To check if a property is an object’s own property (not inherited), you can use the hasOwnProperty method.

Example:

let school = {
    "name": "Vivekananda School"
};
console.log(school.hasOwnProperty("name")); 
console.log(school.hasOwnProperty("toString"));

true
false

Property Attributes

In JavaScript, each property has attributes that define its behavior:

1. value: The property’s value.
2. writable: When true, the property’s value can be changed
3. enumerable: When true, the property can be iterated over by “for-in” enumeration. Otherwise, the property is said to be non-enumerable.
4. configurable: If false, attempts to delete the property, change the property to be an access-or property, or change its attributes (other than [[Value]], or changing [[Writable]] to false) will fail.

Example of Property Attributes:

let person = {
    name: "John"
};
Object.defineProperty(person, 'name', {
    writable: false,
    enumerable: true,
    configurable: false
});

Creating Objects: For creating objects refer to the following article. Ref: Creating objects in JavaScript

Accessing Object Members

Object members (properties or methods) can be accessed using dot notation or bracket notation.

(objectName.memberName);

Example: Below is the example of accessing object members.

let school = { 
    name : "Vivekanada", 
    location : "Delhi", 
    established : 1971,
    20 : 1000, 
    displayinfo : function() { 
        console.log(`${school.name} was established 
        in ${school.established} at ${school.location}`); 
    } 

} 
console.log(school.name); 

console.log(school.established); 

Vivekanada
1971

Bracket Notation

Syntax:

 objectName["memberName"]

Example: Below is the example of Bracket Notation.

let school = {
    name: "Vivekanada School",
    location: "Delhi",
    established: 1995,
    20: 1000,
    displayinfo: function () {
        document.write(`${school.name} was established 
        in ${school.established} at ${school.location}`);
    }
}

// Output : Vivekanada School 
console.log(school['name']);

// Output: 1000 
console.log(school['20']); 

Vivekanada School
1000

Unlike dot notation, the bracket keyword works with any string combination, including, but not limited to multi-word strings.

somePerson.first name // invalid
somePerson["first name"] // valid

Unlike dot notation, bracket notation can also contain names that are the results of any expressions variables whose values are computed at run-time.

let key = "first name" somePerson[key] = "Name Surname"

Similar operations are not possible while using the dot notation.

Iterating Over All Keys of an Object

To iterate over all enumerable properties of an object, you can use the for…in loop. This loop will iterate over both the object’s own properties and any enumerable properties it has inherited.

Example: Below is the example.

let person = {
    gender: "male"
}

let person1 = Object.create(person);
person1.name = "Adam";
person1.age = 45;
person1.nationality = "Australian";

for (let key in person1) {
    // Output : name, age, nationality 
    // and gender
    console.log(key);
}          

name
age
nationality
gender

Deleting Properties

To delete a property of an object, use the delete operator. Note that you cannot delete inherited properties or non-configurable properties.

Example: Below is the example of deleting properties.

let obj1 = { 
    propfirst : "Name"
} 

// Output : Name 
console.log(obj1.propfirst); 
delete obj1.propfirst 

// Output : undefined 
console.log(obj1.propfirst);             

Name
undefined

Example: In this example, we can not delete inherited properties or non-configurable properties

let obj1 = { 
    propfirst : "Name"
} 
// Output : Name 
console.log(obj1.propfirst) 
let obj2 = Object.create(obj1); 

// Output : Name 
console.log(obj2.propfirst); 
    
// Output : true. 
console.log(delete obj2.propfirst); 

    // Surprisingly Note that this will return true 
    // regardless of whether the deletion was successful 

    // Output : Name     
    console.log(obj2.propfirst); 

Name
Name
true
Name

Understanding objects in JavaScript is essential for effective programming. They enable you to create complex data structures and perform a variety of operations. For more advanced JavaScript tutorials and examples, explore our JavaScript Tutorial and JavaScript Examples.

D

Daipayan

Follow

Improve