Objects in JavaScript, Creating, accessing and modifying Objects and advanced features in javascripts


 Objects in JavaScript

1.) Definition:

In JavaScript, an object is a collection of properties, where each property is an association between a key (or name) and a value. These values can be of any data type, including numbers, strings, booleans, arrays, functions, or even other objects.

An object in JavaScript is a collection of key-value pairs, where:
  • Keys (or properties) are always strings or symbols.
  • Values can be any valid JavaScript data type (primitive or reference).

Syntax:

const objectName = {
  key1: value1,
  key2: value2,
  // more key-value pairs
};

2.) Creating Objects:

There are two primary ways to create objects in JavaScript:

1. Object Literal Syntax:

let person = {
  firstName: "John",
  lastName: "Doe",
  age: 30,
  city: "New York"
};

2. Object Constructor Syntax:

function Person(firstName, lastName, age, city) {
  this.firstName = firstName;
  this.lastName = lastName;
  this.age = age;
  this.city = city;
}
let person = new Person("Jane", "Smith", 25, "Los Angeles");

3. Using the new Object() Constructor

This is less common but can also be used.

const obj = new Object();
obj.name = "Alice";
obj.age = 25;

4. Using Object.create()

This method creates a new object with the specified prototype.

const parentObject = { greet: function() { return "Hello"; } };
const childObject = Object.create(parentObject);
childObject.name = "Tom";

5. Using Classes or Constructor Functions

class Animal {
  constructor(name, type) {
    this.name = name;
    this.type = type;
  }
}
const dog = new Animal("Buddy", "Dog");

Sponsor Key-Word:

"This Content Sponsored by Buymote Shopping app

BuyMote E-Shopping Application is One of the Online Shopping App

Now Available on Play Store & App Store (Buymote E-Shopping)

Click Below Link and Install Application: https://buymote.shop/links/0f5993744a9213079a6b53e8

Sponsor Content: #buymote #buymoteeshopping #buymoteonline #buymoteshopping #buymoteapplication"

3.) Accessing Object Properties

1. Dot Notation

console.log(person.name); // "John"

2. Bracket Notation

Used when property names have spaces, special characters, or are dynamic.

console.log(person["age"]); // 30

3. Dynamic Access

const key = "isEmployed";
console.log(person[key]); // true

4.) Modifying Objects

1. Add New Properties

person.gender = "Male";

2. Update Existing Properties

person.age = 35;

3. Delete Properties

delete person.isEmployed;

Sponsor Key-Word:

"This Content Sponsored by Buymote Shopping app

BuyMote E-Shopping Application is One of the Online Shopping App

Now Available on Play Store & App Store (Buymote E-Shopping)

Click Below Link and Install Application: https://buymote.shop/links/0f5993744a9213079a6b53e8

Sponsor Content: #buymote #buymoteeshopping #buymoteonline #buymoteshopping #buymoteapplication"

5.) Methods in Objects

A method is a function stored as a property of an object.
Defining and Using Methods

const calculator = {
  add: function (a, b) {
    return a + b;
  },
};
console.log(calculator.add(2, 3)); // 5

Shorter Syntax

const calculator = {
  add(a, b) {
    return a + b;
  },
};

6.) Object Methods and Built-in Functions

1. Object.keys()

Returns an array of an object’s keys.

console.log(Object.keys(person)); // ["name", "age"]

2. Object.values()

Returns an array of an object’s values.

console.log(Object.values(person)); // ["John", 30]

3. Object.entries()

Returns an array of key-value pairs.

console.log(Object.entries(person)); // [["name", "John"], ["age", 30]]

4. Object.assign()

Copies properties from one or more source objects to a target object.

const target = {};

Object.assign(target, person, { city: "New York" });

5. Object.freeze()

Prevents modifications to an object.

Object.freeze(person);

person.age = 40; // Will not change


6. Object.seal()

Prevents adding or removing properties but allows modification of existing ones.

Object.seal(person);

delete person.name; // Will not work

Sponsor Key-Word:

"This Content Sponsored by Buymote Shopping app

BuyMote E-Shopping Application is One of the Online Shopping App

Now Available on Play Store & App Store (Buymote E-Shopping)

Click Below Link and Install Application: https://buymote.shop/links/0f5993744a9213079a6b53e8

Sponsor Content: #buymote #buymoteeshopping #buymoteonline #buymoteshopping #buymoteapplication"

7.) Inheritance in Objects:-

JavaScript objects can inherit properties and methods from a prototype.

Using Prototypes

const car = {

  start: function () {

    return "Car started";

  },

};

const myCar = Object.create(car);

console.log(myCar.start()); // "Car started"

Sponsor Key-Word:

"This Content Sponsored by Buymote Shopping app

BuyMote E-Shopping Application is One of the Online Shopping App

Now Available on Play Store & App Store (Buymote E-Shopping)

Click Below Link and Install Application: https://buymote.shop/links/0f5993744a9213079a6b53e8

Sponsor Content: #buymote #buymoteeshopping #buymoteonline #buymoteshopping #buymoteapplication"

8.) Advanced Features

1. Computed Properties

Keys can be dynamically assigned using expressions.

const key = status";

const dynamicObj = {

  [key]: "active",

};

console.log(dynamicObj.status); // "active"


2. Destructuring Objects

Extracting values from an object.

const { name, age } = person;

console.log(name, age); // "John", 30


3. Spread Operator

Creates a shallow copy of an object.

const newPerson = { ...person, country: "USA" };


4. Optional Chaining (?.)

Safely access deeply nested properties.

console.log(person.address?.city); // undefined

 

9.) Best Practices

1. Use meaningful property names.

2. Use const for objects that don’t need reassignment.

3. Prefer dot notation for accessing properties unless keys are dynamic.

4. Avoid adding too many properties dynamically, as it can make the code harder to debug.

5. Use Object.freeze or Object.seal for objects you don’t want to change.


10.) Key Points:

  •   Objects are fundamental building blocks in JavaScript.
  •   They provide a way to structure and organize data.
  •   Object properties can be accessed and modified dynamically.
  •   Methods allow you to define behaviors and actions associated with objects.
  •   Objects can be nested within other objects to create complex data structures.

By understanding objects, you can create more flexible and modular JavaScript applications.

Sponsor Key-Word:

"This Content Sponsored by Buymote Shopping app

BuyMote E-Shopping Application is One of the Online Shopping App

Now Available on Play Store & App Store (Buymote E-Shopping)

Click Below Link and Install Application: https://buymote.shop/links/0f5993744a9213079a6b53e8

Sponsor Content: #buymote #buymoteeshopping #buymoteonline #buymoteshopping #buymoteapplication"



Comments