Understanding JavaScript Objects the Fun Way (Marks, Parents & Survival 😅)JavaScript

So, what does Objects means?

Well technically!!!...

MdN

The Object type represents one of JavaScript's data types. It is used to store various keyed collections and more complex entities. Objects can be created using the Object() constructor or the object initializer / literal syntax.

This was way to technicall, right? So let's understand it in our own way.

In Simple Words, an object is a non-primitive data type that can store data in the key : pair format, within curly brackets.

Examples:

const marks = {
    english: 34,
    maths:56,
    science: 40,
    hindi: 80,
    computer: 98,
    computers: 98
}

Yes, I know that I am more skilled at computers than in other subjects. But it doesn't mean other subjects are not important, but we have an unknown relationship with Computers. At least I do have it.

So, I got 34 in English, 56 in Maths, 40 in Science, 80 in Hindi, and 98 in Computer. But I don't know why the college has given me computer marks 2 time. No problem, we will see this later on and for the time beign we will ignore that.

How do we store this data in JS or in any other programming language?

In a variable?

Then, what if we have to add a few more subject marks?

We have to create more variables, right? Is it the most efficient way? No

So, the array should work right because it is built to store similar data into one place, right?

Just the array for marks will confuse that, which marks belong to which subject. So, we also need to have the subjects array and store subjects' names in the same order as the marks is stored.

And this will make more complications because to update the marks or to add any new subject marks, we have to make sure that both the variable or array sync with each other. And we have to manage two different variables.

So, then objects come into the picture.

const marks = {};

It can be created in multiple ways, but we are going to see some common ones.

The above code you can see is what we call variable initialisation or object literal. Which means first, we are declaring the variable with a name marks , and we are assigning the empty object with curly braces.

Now that we have created an empty object, how would we store the information and retrieve it?

There are mainly two ways to do that:

1. Using square brackets []

2. Using dot . notation.

We will see both one by one.

Square brackets.

const marks = {
    english: 34,
    maths:56,
    science: 40,
    hindi: 80,
    computer: 98
}


console.log(marks['english']);
console.log(marks['math']);
console.log(marks['science']);
console.log(marks['hindi']);
console.log(marks['computer']);

Dot Notations.

const marks = {
    english: 34,
    maths:56,
    science: 40,
    hindi: 80,
    computer: 98
}

console.log(marks.english);
console.log(marks.math);
console.log(marks.science);
console.log(marks.hindi);
console.log(marks.computer);

Key name with spacing will not work in dot notation. It will only work in square bracket notation.

40 is the minimum passing mark. I failed in English and just passed in science.

I got the marks 😱😰, and it's time to show this to devils 👿 (aree bhai itna bhi nhi samjte - parents - kya gunda bana ga ree tu).

But can I show this to my parents?

Wish me RIP ☠️...

But wait..... a minute.......

Is there any way that I could change the marks I obtained?

I guess so, then let's dive into how to update the object value and save my life from the devils.

const marks = {
    english: 34,
    maths:56,
    science: 40,
    hindi: 80,
    computer: 98
}

console.log("++++++++++++++")

// Lets save ourself by dot notation
marks.english = 49
marks.science = 48

console.log(marks.english);
console.log(marks.science);

// Lets save ourself by square bracket notation
marks['english'] = 50;
marks['science'] = 49;

console.log(marks['english']);
console.log(marks['science']);

Nice, just like we access the data from the object, we can also update the values. So, now I get a little bit of relief.

Now, college is college; they are saying that we have to give you the marks, and create your marksheet by yourself.

In My Mind: Well, good, I wanted that only.

But here is the problem, they have given me computer marks two times with extra s letter with one of the marks.

So, how could we remove that?

delete A keyword that you will find in almost all programming languages for deleting things at runtime from the memory.

So, how to use that?

const marks = { 
    english: 34, 
    maths:56, 
    science: 40, 
    hindi: 80, 
    computer: 98, 
    computers: 98 
}

delete marks['computers']; // yes you can use dot notation as well  `delete marks.computers;

console.log(marks);

So let's iterate through this marks object and try to create a report card now.

There are a couple of ways to loop through this object. We are going to see an uncommon way of doing that.

Object.entries()

.entries() It is the static method in Global Object that helps to convert the object into arrays.

Each key and value pair is converted into an array of 2 elements. The first element is the key, and the second element is the array.

Now all this 2 elements array are wrapped inside another array.

const marks = { 
    english: 34, 
    maths:56, 
    science: 40, 
    hindi: 80, 
    computer: 98,
}

const marks_array = Object.entries(marks);
console.log(marks_array);

Now we can iterate through marks_array , as it is easy to iterate through an array in comparison to objects.

const marks = { 
    english: 34, 
    maths:56, 
    science: 40, 
    hindi: 80, 
    computer: 98,
}

const marks_array = Object.entries(marks);

// Instead of [key, value] we can also write mark
// and can access the value like mark[0], mark[1]
// where mark[0] - key and mark[1] - value
// try to print the value of [key, value] inside the loop.
console.log("Barun Tiwary Report Card");
for (const [key, value] in marks_array) {
    console.log(`\({key.toUpperCase()}: \){value}`);
}

console.log("Barun is one of our very hard working student");
console.log("Please ask his friends to read the blog");
console.log("We are proud to tell that he studies in our college");
console.log("Principal: Ganja Dakla");

JavaScript Objects – Assignments

---

Assignment 1: Create & Access Student Data

Objective

• Understand object creation

• Learn dot vs bracket notation

• Work with key-value pairs

Question

Create an object called studentMarks with the following data:

• english → 45

• maths → 67

• science → 52

• computer science → 90 (note the space in key)

Tasks

1. Print all values using dot notation

2. Print all values using bracket notation

3. Try accessing "computer science" using dot notation

   • What happens? Why?

4. Fix it using the correct method

---

Assignment 2: Update, Delete & Fix the Data

Objective

• Learn updating values

• Delete properties

• Handle mistakes in objects

Question

Given this object:

const marks = {
  english: 34,
  maths: 56,
  science: 40,
  hindi: 80,
  computer: 98,
  computers: 98
};

Tasks

1. Update:

   • english → 50

   • science → 49

2. Delete the incorrect key (computers)

3. Add a new subject:

   • history → 77

4. Print the final object

---

Assignment 3: Build a Report Card System

Objective

• Learn Object.entries()

• Loop through objects

• Apply real-world logic

Question

Using this object:

const marks = {
  english: 50,
  maths: 56,
  science: 49,
  hindi: 80,
  computer: 98
};

Tasks

1. Convert the object into an array using Object.entries()

2. Loop through it and print:

ENGLISH: 50
MATHS: 56

1. Add logic:

   • If marks < 40 → print "Fail"

   • Else → print "Pass"

Example:

ENGLISH: 50 - Pass
SCIENCE: 49 - Pass

1. Print a final message:

   • "Student has successfully passed the exam"

   • Or failed if any subject < 40

---

Bonus Challenge

1. Calculate average marks

2. Find highest scoring subject

3. Find lowest scoring subject