Javascript Objects And Object Literals Complete Guide

JavaScript Objects and Object Literals: Explained in Detail

What is an Object?

An object in JavaScript is a standalone entity, with properties and/or methods. Properties are variables associated with an object, while methods are functions that belong to an object.

Creating an Object

There are multiple ways to create an object in JavaScript:

1. Object Literals: The simplest method, involving placing curly braces {} and populating it with properties and their values.

const person = {
    firstName: 'John',
    lastName: 'Doe',
    age: 30,
    getFullName: function() {
        return this.firstName + ' ' + this.lastName;
    }
};

2. Object Constructor: This method involves creating a function and using the new keyword to instantiate an object.

function Person(firstName, lastName, age) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.age = age;
    this.getFullName = function() {
        return this.firstName + ' ' + this.lastName;
    };
}

const john = new Person('John', 'Doe', 30);

3. Using Object.create(): This method allows you to create a new object using an existing object as its prototype.

const personPrototype = {
    getFullName: function() {
        return this.firstName + ' ' + this.lastName;
    }
};

const person = Object.create(personPrototype);
person.firstName = 'John';
person.lastName = 'Doe';
person.age = 30;

Object Literals

An object literal is a comma-separated list of name-value pairs inside curly braces {}. It's a common way to create objects in JavaScript and doesn't require a class or constructor function.

Syntax:

const objectName = {
    propertyName1: propertyValue1,
    propertyName2: propertyValue2,
    methodName1: function() {...},
    methodName2: function() {...}
};

Example:

const car = {
    make: 'Toyota',
    model: 'Corolla',
    year: 2020,
    startEngine: function() {
        console.log('Engine started!');
    },
    stopEngine: function() {
        console.log('Engine stopped!');
    }
};

console.log(car.make); // Toyota
car.startEngine(); // Engine started!

Key-Value Pairs

Each property in an object is a key-value pair. Keys are usually strings (or symbols), and they map to values, which can be any data type including other objects or functions.

const example = {
    stringKey: 'value',
    numberKey: 123,
    booleanKey: true,
    arrayKey: [1, 2, 3],
    objectKey: { anotherKey: 'anotherValue' },
    functionKey: function() { return 'This is a function'; }
};

Accessing Properties and Methods

Properties and methods within an object are accessed using dot notation . or bracket notation [].

Dot Notation:

console.log(person.firstName); // John
person.startEngine(); // Engine started!

Bracket Notation: Bracket notation is flexible and useful if keys contain spaces or special characters.

console.log(person['firstName']); // John
person['startEngine'](); // Engine started!
const key = 'lastName';
console.log(person[key]); // Doe

Adding New Properties or Methods

New properties and methods can be added after the object has been created.

car.color = 'black';
console.log(car.color); // black
car.paint = function(color) {
    this.color = color;
};
car.paint('red');
console.log(car.color); // red

Deleting Properties or Methods

Properties and methods can also be deleted using the delete operator.

delete car.year;
console.log(car.year); // undefined
delete car.stopEngine;
console.log(car.stopEngine); // undefined

Object Methods

Some common built-in methods for working with objects include:

• Object.keys(object): Returns an array of a given object’s own enumerable property names.

console.log(Object.keys(car)); // ['make', 'model', 'color', 'startEngine', 'paint']

• Object.values(object): Returns an array containing all the enumerable property values of the given object.

console.log(Object.values(car)); // ['Toyota', 'Corolla', 'red', ƒ, ƒ]

• Object.entries(object): Returns an array of a given object's own enumerable string-keyed property [key, value] pairs.

console.log(Object.entries(car));
// [['make', 'Toyota'], ['model', 'Corolla'], ['color', 'red'], ['startEngine', ƒ], ['paint', ƒ]]

• object.hasOwnProperty(prop): Returns a boolean indicating whether the object has the specified property as its own property.

console.log(car.hasOwnProperty('make')); // true
console.log(car.hasOwnProperty('year')); // false

• Object.assign(target, ...sources): Copies the values of all enumerable own properties from one or more source objects to a target object.

const additionalInfo = {
    year: 2021,
    horsepower: 123
};

const updatedCar = Object.assign({}, car, additionalInfo);
console.log(updatedCar); // {make: "Toyota", model: "Corolla", ..., horsepower: 123}

• JSON.stringify(object): Converts an object to a JSON string.

const jsonString = JSON.stringify(car);
console.log(jsonString); // "{'make':'Toyota','model':'Corolla',...}"

Prototypes & Inheritance

In JavaScript, every object has a prototype. A prototype is essentially a template object shared by all objects of a certain type, allowing them to inherit properties and methods.

Prototypes establish a chain, where each object can fall back to its prototype to get a property it doesn’t have. This is how JavaScript implements inheritance.

Importance of JavaScript Objects and Object Literals

1. Data Representation: Objects allow us to represent complex data in a structured form, making it easier to manipulate and track.
2. Modularity: Using objects helps in breaking down code into smaller, manageable units promoting modularity.
3. Inheritance: JavaScript's prototype-based inheritance allows objects to inherit properties and methods from other objects, facilitating code reuse.
4. Encapsulation: Objects can encapsulate data and related functionality, protecting internal state from outside interference.
5. Dynamic Nature: Objects in JavaScript are dynamic, meaning properties and methods can be added or removed at runtime providing flexibility.
6. Performance: Direct property access in objects is generally faster than accessing values from other data structures.
7. Compatibility: Objects are a fundamental part of JavaScript, supported across all modern browsers and environments.

Summary

JavaScript objects and object literals are powerful constructs essential for building complex applications. They offer a rich set of functionalities and features like properties, methods, inheritance, and modularity. Understanding them deeply helps in writing efficient and maintainable JavaScript code. Always opt for clear, meaningful naming conventions for properties and methods to improve readability and maintainability of your objects.