Article Categories

Selected Reading

Object initializer in JavaScript

Javascript Web Development Object Oriented Programming

An object initializer is an expression that allows us to initialize a newly created object. It is a comma-separated list of zero or more pairs of property names and associated values of an object, enclosed in a pair of curly braces {}.

Basic Syntax

const objectName = {
    property1: value1,
    property2: value2,
    // ... more properties
};

Simple Object Creation

Here's a basic example of creating an object using object initializer syntax:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Object Initializer Example</title>
</head>
<body>
    <h1>Object Initializer in JavaScript</h1>
    <div id="result"></div>
    <button onclick="createAndDisplayObject()">Create Object</button>

    <script>
        function createAndDisplayObject() {
            // Creating object using object initializer
            const person = {
                name: "John Doe",
                age: 30,
                city: "New York",
                occupation: "Developer"
            };
            
            // Display object properties
            const resultDiv = document.getElementById("result");
            resultDiv.innerHTML = `
                <h3>Person Object:</h3>
                <p>Name: ${person.name}</p>
                <p>Age: ${person.age}</p>
                <p>City: ${person.city}</p>
                <p>Occupation: ${person.occupation}</p>
            `;
        }
    </script>
</body>
</html>

Using Variable Names as Property Names

When the property name matches the variable name, you can use shorthand syntax:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shorthand Property Names</title>
</head>
<body>
    <h1>Shorthand Property Names</h1>
    <div id="output"></div>
    <button onclick="demonstrateShorthand()">Show Shorthand Example</button>

    <script>
        function demonstrateShorthand() {
            let name = "Alice";
            let age = 25;
            let country = "Canada";
            
            // Shorthand syntax - property names match variable names
            const user = { name, age, country };
            
            // This is equivalent to:
            // const user = { name: name, age: age, country: country };
            
            document.getElementById("output").innerHTML = `
                <h3>User Object (using shorthand):</h3>
                <p>Name: ${user.name}</p>
                <p>Age: ${user.age}</p>
                <p>Country: ${user.country}</p>
            `;
        }
    </script>
</body>
</html>

Methods in Object Initializers

Objects can also contain methods (functions) defined using object initializer syntax:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Object Methods</title>
</head>
<body>
    <h1>Object with Methods</h1>
    <div id="methodResult"></div>
    <button onclick="callObjectMethods()">Call Object Methods</button>

    <script>
        function callObjectMethods() {
            const calculator = {
                num1: 10,
                num2: 5,
                add: function() {
                    return this.num1 + this.num2;
                },
                multiply() {
                    // ES6 shorthand method syntax
                    return this.num1 * this.num2;
                }
            };
            
            document.getElementById("methodResult").innerHTML = `
                <h3>Calculator Results:</h3>
                <p>Addition: ${calculator.num1} + ${calculator.num2} = ${calculator.add()}</p>
                <p>Multiplication: ${calculator.num1} × ${calculator.num2} = ${calculator.multiply()}</p>
            `;
        }
    </script>
</body>
</html>

Dynamic Property Names

You can use computed property names with square brackets in object initializers:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Property Names</title>
</head>
<body>
    <h1>Dynamic Property Names</h1>
    <div id="dynamicResult"></div>
    <button onclick="createDynamicObject()">Create Dynamic Object</button>

    <script>
        function createDynamicObject() {
            const propertyName = "dynamicProp";
            const prefix = "user_";
            
            const dynamicObj = {
                [propertyName]: "This is a dynamic property",
                [prefix + "id"]: 123,
                ["computed_" + "value"]: "Computed property name"
            };
            
            document.getElementById("dynamicResult").innerHTML = `
                <h3>Dynamic Object Properties:</h3>
                <p>${propertyName}: ${dynamicObj.dynamicProp}</p>
                <p>user_id: ${dynamicObj.user_id}</p>
                <p>computed_value: ${dynamicObj.computed_value}</p>
            `;
        }
    </script>
</body>
</html>

Key Features

Concise Syntax: Clean and readable way to create objects
Property Shorthand: Use variable names directly as property names
Method Definitions: Include functions as object methods
Computed Properties: Use dynamic property names with square brackets
Flexible: Mix different types of values in the same object

Conclusion

Object initializers provide a powerful and flexible way to create objects in JavaScript. They support shorthand syntax, methods, and computed property names, making them essential for modern JavaScript development.

AmitDiwan

Updated on: 2026-03-15T23:18:59+05:30

354 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next