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

So, what does Objects means?

Well technically!!!...

[MdN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)

The `Object` type represents one of [JavaScript's data types](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Data_structures). 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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer).

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:

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

![](https://cdn.hashnode.com/uploads/covers/6507feb8121598e399077e8b/e2838655-8e22-4b53-93ed-cb498900340a.png align="left")

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?

![](https://cdn.hashnode.com/uploads/covers/6507feb8121598e399077e8b/1ef77f75-8c31-4749-8660-6af675469bd0.png align="left")

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?

![](https://cdn.hashnode.com/uploads/covers/6507feb8121598e399077e8b/af879847-b96b-4ce8-87d2-2169c5b166cf.png align="left")

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.

```javascript
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.

```javascript
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.**

```javascript

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.

```javascript
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?

```javascript
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.

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

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

![](https://cdn.hashnode.com/uploads/covers/6507feb8121598e399077e8b/468d0de0-ce4b-48b8-af1d-2975525a6aa3.png align="left")

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

```javascript
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:

```js
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:

```js
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:
    

```plaintext
ENGLISH: 50
MATHS: 56
```

3.  Add logic:
    
    *   If marks < 40 → print "Fail"
        
    *   Else → print "Pass"
        

Example:

```plaintext
ENGLISH: 50 - Pass
SCIENCE: 49 - Pass
```

4.  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