Scribd
Upload
5 views7 pages

Object

Uploaded by

Raghu Ram cheedella
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
5 views7 pages

Object

Uploaded by

Raghu Ram cheedella
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

8/30/23, 6:51 AM Revolutionizing the Job Market | NxtWave

Objects | Cheat Sheet


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.


JAVASCRIPT

1 let person = {
2 firstName: "Rahul",
3 lastName: "Attuluri",
4 age: 28,
5 };
6
7 console.log(person); // O

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:
JAVASCRIPT

1 firstName;
2 $firstName;
3 firstName;
https://learning.ccbp.in/course?c_id=5e93210e-f183-433d-a12d-79d81deb01be&t_id=79fb8730-bdad-4ef8-a1ea-7e79d207fd8b&s_id=2a65b1b9-f… 1/7
8/30/23, 6:51 AM Revolutionizing the Job Market | NxtWave
3 _firstName;
4 firstName12;

Invalid Identifiers:
JAVASCRIPT

1 12firstName;
2 firstName 12;

To use an Invalid identifier as a key, we have


to specify it in quotes.
JAVASCRIPT

1 let person = {
2 firstName: "Rahul",
3 lastName: "Attuluri",
4 age: 28,
5 "1": "value1",
6 "my choice": "value2",
7 };
8
9 console.log(person); // O

2. Accessing Object Properties

2.1 Dot Notation


JAVASCRIPT

1 let person = {
2 firstName: "Rahul",
3 lastName: "Attuluri",
4 age: 28,
5 "1": "value1",
6 "my choice": "value2",
7 };
8
9 console.log(person.firstNa

Use Dot notation when the key is a valid


Identifier.

2.2 Bracket Notation


JAVASCRIPT

1 let person = {
2 firstName: "Rahul",
3 lastName: "Attuluri",
4 age: 28,
5 "1": "value1",
6 "my choice": "value2",
https://learning.ccbp.in/course?c_id=5e93210e-f183-433d-a12d-79d81deb01be&t_id=79fb8730-bdad-4ef8-a1ea-7e79d207fd8b&s_id=2a65b1b9-f… 2/7
8/30/23, 6:51 AM Revolutionizing the Job Market | NxtWave

7 };
8
9 console.log(person["firstN

2.3 Accessing Non-existent Properties

Dot Notation:
JAVASCRIPT

1 let person = {
2 firstName: "Rahul",
3 lastName: "Attuluri",
4 age: 28,
5 "1": "value1",
6 "my choice": "value2",
7 };
8
9 console.log(person.gender)

Bracket Notation:
JAVASCRIPT

1 let person = {
2 firstName: "Rahul",
3 lastName: "Attuluri",
4 age: 28,
5 "1": "value1",
6 "my choice": "value2",
7 };
8
9 console.log(person["gender

2.4 Variable as a Key


JAVASCRIPT

1 let person = {
2 firstName: "Rahul",
3 lastName: "Attuluri",
4 age: 28,
5 };
6
7 let a = "firstName";
8
9 console.log(person[a]);
10
Expand

2.5 Object Destructuring

To unpack properties from Objects, we use


Object Destructuring. The variable name

https://learning.ccbp.in/course?c_id=5e93210e-f183-433d-a12d-79d81deb01be&t_id=79fb8730-bdad-4ef8-a1ea-7e79d207fd8b&s_id=2a65b1b9-f… 3/7
8/30/23, 6:51 AM Revolutionizing the Job Market | NxtWave

should match with the key of an object.


JAVASCRIPT

1 let person = {
2 firstName: "Rahul",
3 lastName: "Attuluri",
4 age: 28,
5 };
6
7 let { gender, age } = p
8
9 console.log(gender); /
10
Expand

Try out creating and accessing the Object in


different ways like Object destructuring, dot
notation etc. in the below Code Playground.

HTML CSS JAVASCRIPT

1 <!DOCTYPE html>
2 <html>
3 <head></head>
4 <body>
5 Your HTML code goes here. W
6 </body>
7 </html>

3. Modifying Objects

3.1 Modifying Object Property

Dot Notation:
JAVASCRIPT

1 let person = {
2 firstName: "Rahul",
3 lastName: "Attuluri",
https://learning.ccbp.in/course?c_id=5e93210e-f183-433d-a12d-79d81deb01be&t_id=79fb8730-bdad-4ef8-a1ea-7e79d207fd8b&s_id=2a65b1b9-f… 4/7
8/30/23, 6:51 AM Revolutionizing the Job Market | NxtWave
4 age: 28,
5 };
6
7 person.firstName = "Abhi";
8
9 console.log(person.firstNa

Bracket Notation:
JAVASCRIPT

1 let person = {
2 firstName: "Rahul",
3 lastName: "Attuluri",
4 age: 28,
5 };
6
7 person["firstName"] = "Abh
8
9 console.log(person["firstN

3.2 Adding Object Property

Dot Notation:
JAVASCRIPT

1 let person = {
2 firstName: "Rahul",
3 lastName: "Attuluri",
4 age: 28,
5 };
6
7 person.gender = "Male";
8
9 console.log(person); // O

Bracket Notation:
JAVASCRIPT

1 let person = {
2 firstName: "Rahul",
3 lastName: "Attuluri",
4 age: 28,
5 };
6
7 person["gender"] = "Male";
8
9 console.log(person); // O

4. Property Value
The Value of Object Property can be

https://learning.ccbp.in/course?c_id=5e93210e-f183-433d-a12d-79d81deb01be&t_id=79fb8730-bdad-4ef8-a1ea-7e79d207fd8b&s_id=2a65b1b9-f… 5/7
8/30/23, 6:51 AM Revolutionizing the Job Market | NxtWave

Function

Array

Object

4.1 Function as a Value


JAVASCRIPT

1 let person = {
2 firstName: "Rahul",
3 lastName: "Attuluri",
4 age: 28,
5 run: function () {
6 console.log("Start Ru
7 },
8 };
9
10 person.run(); // Start R

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


JAVASCRIPT

1 let person = {
2 firstName: "Rahul",
3 lastName: "Attuluri",
4 age: 28,
5 habits: ["Playing Che
6 };
7
8 console.log(person.habi
9
10 console.log(person.habi

Expand

4.3 Object as a Value


JAVASCRIPT

1 let person = {
2 firstName: "Rahul",
3 lastName: "Attuluri",
4 age: 28,
5 habits: ["Playing Che
6 car: {
https://learning.ccbp.in/course?c_id=5e93210e-f183-433d-a12d-79d81deb01be&t_id=79fb8730-bdad-4ef8-a1ea-7e79d207fd8b&s_id=2a65b1b9-f… 6/7
8/30/23, 6:51 AM Revolutionizing the Job Market | NxtWave

7 name: "Audi",
8 model: "A6",
9 color: "White",
10 },

Expand

HTML CSS JAVASCRIPT

1 <!DOCTYPE html>
2 <html>
3 <head></head>
4 <body>
5 Your HTML code goes here. W
6 </body>
7 </html>

https://learning.ccbp.in/course?c_id=5e93210e-f183-433d-a12d-79d81deb01be&t_id=79fb8730-bdad-4ef8-a1ea-7e79d207fd8b&s_id=2a65b1b9-f… 7/7

You might also like