Objects in JavaScript

 

Object

An Object is a collection of properties.

A property is an association between a name (or key) and a value.

For example, a person has a name, age, city, etc. These are the properties of the person.

Key	Value
firstName	Rahul
lastName	Attuluri
age	28
city	Delhi

1. Creating an Object

We can add properties into

{}

as

key: value

pairs.

1

2

3

4

5

6

7

let person = {

firstName: "Rahul",

lastName: "Attuluri",

age: 28,

};

console.log(person); // Object {firstName: "Rahul", lastName: "Attuluri", age: 28}

JAVASCRIPT

1.1 Identifiers

A valid Identifier should follow the below rules:

• It can contain alphanumeric characters, 
  _
   and 
  $
  .
• It cannot start with a number.

Valid Identifiers:

1

2

3

4

firstName;

$firstName;

_firstName;

firstName12;

JAVASCRIPT

Invalid Identifiers:

1

2

12firstName;

firstName 12;

JAVASCRIPT

To use an Invalid identifier as a key, we have to specify it in quotes.

1

2

3

4

5

6

7

8

9

let person = {

firstName: "Rahul",

lastName: "Attuluri",

age: 28,

"1": "value1",

"my choice": "value2",

};

console.log(person); // Object {1: "value1", firstName: "Rahul", lastName: "Attuluri", age: 28, my choice: "value2"}

 

JAVASCRIPT

2. Accessing Object Properties

2.1 Dot Notation

1

2

3

4

5

6

7

8

9

let person = {

firstName: "Rahul",

lastName: "Attuluri",

age: 28,

"1": "value1",

"my choice": "value2",

};

console.log(person.firstName); // Rahul

JAVASCRIPT

Use Dot notation when the key is a valid Identifier.

2.2 Bracket Notation

1

2

3

4

5

6

7

8

9

let person = {

firstName: "Rahul",

lastName: "Attuluri",

age: 28,

"1": "value1",

"my choice": "value2",

};

console.log(person["firstName"]); // Rahul

JAVASCRIPT

2.3 Accessing Non-existent Properties

Dot Notation:

1

2

3

4

5

6

7

8

9

let person = {

firstName: "Rahul",

lastName: "Attuluri",

age: 28,

"1": "value1",

"my choice": "value2",

};

console.log(person.gender); // undefined

JAVASCRIPT

Bracket Notation:

1

2

3

4

5

6

7

8

9

let person = {

firstName: "Rahul",

lastName: "Attuluri",

age: 28,

"1": "value1",

"my choice": "value2",

};

console.log(person["gender"]); // undefined

JAVASCRIPT

2.4 Variable as a Key

1

2

3

4

5

6

7

8

9

10

11

let person = {

firstName: "Rahul",

lastName: "Attuluri",

age: 28,

};

let a = "firstName";

console.log(person[a]); // Rahul

console.log(person.a); // undefined

JAVASCRIPT

Collapse

2.5 Object Destructuring

To unpack properties from Objects, we use Object Destructuring. The variable name should match with the key of an object.

1

2

3

4

5

6

7

8

9

10

11

let person = {

firstName: "Rahul",

lastName: "Attuluri",

age: 28,

};

let { gender, age } = person;

console.log(gender); // undefined

console.log(age); // 28

JAVASCRIPT

Collapse

Try out creating and accessing the Object in different ways like Object destructuring, dot notation etc. in the below Code Playground.

3. Modifying Objects

3.1 Modifying Object Property

Dot Notation:

1

2

3

4

5

6

7

8

9

let person = {

firstName: "Rahul",

lastName: "Attuluri",

age: 28,

};

person.firstName = "Abhi";

console.log(person.firstName); // Abhi

JAVASCRIPT

Bracket Notation:

1

2

3

4

5

6

7

8

9

let person = {

firstName: "Rahul",

lastName: "Attuluri",

age: 28,

};

person["firstName"] = "Abhi";

console.log(person["firstName"]); // Abhi

JAVASCRIPT

3.2 Adding Object Property

Dot Notation:

1

2

3

4

5

6

7

8

9

let person = {

firstName: "Rahul",

lastName: "Attuluri",

age: 28,

};

person.gender = "Male";

console.log(person); // Object {firstName: "Rahul", lastName: "Attuluri", age: 28, gender: "Male"}

JAVASCRIPT

Bracket Notation:

1

2

3

4

5

6

7

8

9

let person = {

firstName: "Rahul",

lastName: "Attuluri",

age: 28,

};

person["gender"] = "Male";

console.log(person); // Object {firstName: "Rahul", lastName: "Attuluri", age: 28, gender: "Male"}

JAVASCRIPT

4. Property Value

The Value of Object Property can be

• Function
• Array
• Object

4.1 Function as a Value

1

2

3

4

5

6

7

8

9

10

let person = {

firstName: "Rahul",

lastName: "Attuluri",

age: 28,

run: function () {

console.log("Start Running.");

},

};

person.run(); // Start Running.

JAVASCRIPT

Methods:

A JavaScript method is a property containing a function definition.

For example, in

document.createElement();

, the

document

is an Object,

createElement

is a key and

createElement()

is a Method.

4.2 Array as a Value

1

2

3

4

5

6

7

8

9

10

11

12

let person = {

firstName: "Rahul",

lastName: "Attuluri",

age: 28,

habits: ["Playing Chess", "Singing"],

};

console.log(person.habits); // ["Playing Chess", "Singing"]

console.log(person.habits[0]); // Playing Chess

console.log(person["habits"][1]); // Singing

JAVASCRIPT

Collapse

4.3 Object as a Value

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

let person = {

firstName: "Rahul",

lastName: "Attuluri",

age: 28,

habits: ["Playing Chess", "Singing", "Dancing"],

car: {

name: "Audi",

model: "A6",

color: "White",

},

};

console.log(person.car.name); // Audi

console.log(person.car["model"]); // A6

JAVASCRIPT

Collapse