Deep Dive into JavaScript Objects

Objects are one of the most powerful features in JavaScript. You’ve already seen basic object usage — here we’ll dive deeper into how objects work and how to manipulate them.

1. Creating Objects

There are different ways to create objects in JavaScript:

    // Using object literal
    const person = {
    firstName: "Steve",
    lastName: "Jobs"
    };

    // Using constructor function
    function Student() {
    this.name = "John";
    this.gender = "Male";
    this.sayHi = function() {
        alert('Hi');
    };
    }

    const student1 = new Student();
    console.log(student1.name);    // Output: John
    console.log(student1.gender);  // Output: Male
    student1.sayHi();              // Alert: Hi

Thepersonobject is created using an object literal. TheStudentobject is created using a constructor function. A function that creates an object like this is called a constructor function.

2. UsingObject.keys()

To list all the property names of an object:

    function Student() {
    this.title = "Mr.";
    this.name = "Steve";
    this.gender = "Male";
    this.sayHi = function() {
        alert('Hi');
    };
    }

    const student1 = new Student();

    console.log(Object.keys(student1));
    // Output: ["title", "name", "gender", "sayHi"]

3. Looping Through Properties

Usefor...into loop through all enumerable properties:

    for (let prop in student1) {
    console.log(prop);
    }
    // Output: title, name, gender, sayHi

4. Understanding Property Descriptors

Every property in an object has a property descriptor that describes its behavior:

    const person = {
    firstName: 'Steve',
    lastName: 'Jobs'
    };

    function Student() {
    this.name = "John";
    this.gender = "Male";
    this.sayHi = function() {
        alert("Hi");
    };
    }

    const student1 = new Student();

    console.log(Object.getOwnPropertyDescriptor(person, 'firstName'));
    console.log(Object.getOwnPropertyDescriptor(student1, 'name'));
    console.log(Object.getOwnPropertyDescriptor(student1, 'sayHi'));
Each descriptor contains these attributes:
  • value: The actual value of the property.
  • writable: Can the value be changed?
  • enumerable: Will it show in loops likefor...in?
  • configurable: Can the descriptor itself be changed?

5. Modifying Descriptors withObject.defineProperty()

    'use strict';

    function Student() {
    this.name = "Steve";
    this.gender = "Male";
    }

    const student1 = new Student();

    Object.defineProperty(student1, 'name', { writable: false });

    try {
    student1.name = "James"; // Throws an error in strict mode
    console.log(student1.name);
    } catch (e) {
    console.log(e.message);
    }

Since we madenamenon-writable, trying to change its value throws an error in strict mode.

6. Hiding a Property (Non-enumerable)

    function Student() {
    this.name = "Steve";
    this.gender = "Male";
    }

    const student1 = new Student();

    console.log("Before making 'name' non-enumerable:");
    for (let prop in student1) {
    console.log(prop);
    }

    Object.defineProperty(student1, 'name', { enumerable: false });

    console.log("After making 'name' non-enumerable:");
    for (let prop in student1) {
    console.log(prop);
    }

After settingenumerabletofalse, thenameproperty will no longer show in loops orObject.keys().

7. Making a Property Non-configurable

    'use strict';

    function Student() {
    this.name = "Steve";
    this.gender = "Male";
    }

    const student1 = new Student();

    Object.defineProperty(student1, 'name', { configurable: false });

    try {
    // Trying to change writable attribute now will fail
    Object.defineProperty(student1, 'name', { writable: false });
    } catch (e) {
    console.log(e.message); // Cannot redefine property: name
    }

Once a property is non-configurable, you can’t change its descriptor again (e.g., writable, enumerable).

Summary

  • Objects store data as key-value pairs.
  • Use constructor functions to create multiple similar objects.
  • Object.keys()andfor...incan list object properties.
  • Each property has a descriptor with settings like writable and enumerable.
  • UseObject.defineProperty()to control how properties behave.