Introduction to Javascript Universe part - 2
Tags: javascript, webdev, codenewbie, beginners
Published: 2020-12-12 18:04:15

### Recap of the last post

In the first part of the series, we saw about [**values and variables in JS**](https://dev.to/aravindan07/introduction-to-javascript-universe-3h).

Points to be remembered,
+ There are a total of 9 types of values in JS, categorized into 
  primitive values, and objects & functions.

+ Primitive values contain Undefined, Null, Numbers, Strings, 
  BigInts and Symbol.

+ Apart from the above types everything else is objects. e.g., 
  _Arrays_, _Date_, _regular expressions_ come under __objects__.

+ Primitive values are immutable (cannot be modified).

+ Objects and functions are mutable (can be changed).

+ A variable must represent a value it can hold any value from 
  the above types.

In this post, we are gonna concentrate on __objects__.

#### Introduction to Objects

Arrays, Dates, regular expressions, and other non-primitive values come under objects.
```javascript
console.log(typeof({})); // "object"
console.log(typeof([])); // "object"
console.log(typeof(new Date())); // "object"
console.log(typeof(Math)); // "object"
```
We know that objects are non-primitive values which means that by default _objects are mutable_.

To create an object we need to use the { } object literal, _which creates a brand new object value_.
```javascript
let newObj = {};
let anotherObj = {};
console.log(typeof(newObj),typeof(anotherObj)); // object object
```
In the above code, _newObj and anotherObj_ are __objects__.

A diagrammatic representation of the above two variables will look like the below diagram.

![object creation](https://dev-to-uploads.s3.amazonaws.com/i/01zo619ah4zet5e745vm.png)

From the above diagram, we can conclude that each of the two variables will have a brand new object value.

#### Properties in objects

An object contains properties that are basically key-value pairs.
```javascript
let objectWithProperty = {
propertyOne: "This is property one",
propertyTwo: "This is property two"
}
```
propertyOne and propertyTwo are called _keys_. "This is property one" and "This is property two" are called _values_. A value can be of any type in this example I have a value in the _string type_ but you can store literally any type of value in the values field.

To access the properties of an object we use either dot(.) notation or bracket ([ ]) notation.
```javascript
let objectWithProperties = {
  propertyOne: "This is property one",
  propertyTwo: "This is property two"
}
console.log(objectWithProperties.propertyOne); // "This is property one" using dot notation
console.log(objectWithProperties[propertyTwo]); // "This is property two" using bracket notation
```
A diagrammatic illustration of the above code looks like this,

![Illustration of the above code](https://dev-to-uploads.s3.amazonaws.com/i/42hgtc50o425rq9wi1li.png)


Properties have names. A single object can’t have two properties with the same name.
For example, let's say we have a property called _name_ in an object. We can't declare another property with the same property name '_name_' in the same object.

If we try to do it, then Javascript will take the last key-value pair and neglects the previous key-value pairs of the same names.

```javascript
let person = {
  name: "Anne",
  age: 32,
  name: "Hathway"
}
console.log(person); // {age: 32, name: "Hathway"} 1st name property is neglected
console.log(person.name); // "Hathway" not "Anne"
```
In the above code snippet, the first name property is neglected and the last name property is taken.

The property names are always case-sensitive in Javascript. For example, name and Name would be two completely different properties from JavaScript’s point of view.

**If we don’t know a property name ahead of time but we have it in code as a string value, we can use the [] “bracket notation” to read it from an object.**

### What about missing properties?

__If we try to access the properties which are not defined in an object it will not throw an error instead it will return undefined as a value.__
Example:
```javascript
let person = {
  name: "Anne Hathway"
};
console.log(person.age); // undefined
```

__Javascript follows certain steps while dealing with objects.__ They are: 

1. Figure out the value of the part before the dot (.).
2. If that value is null or undefined, throw an error immediately.
3. Check whether a property with that name exists in our object.
* If it exists, answer with the value this property points to.
* If it doesn’t exist, answer with the undefined value.

Now consider the below code snippet,
```javascript
let person = {
 name: "Anne Hathway",
};
console.log(person.address.city); // ?
```

What will be the output of the above code snippet?

If you thought that the answer would be an error, you are right.

But, How? Read rules 1 and 2, _if the left side of the dot operator is null or undefined it will throw an error._


I hope I had given enough details about **objects in Javascript Universe.**

If you want to know more about objects read the [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object) docs.

If you like the content connect with me on [Linkedin](https://www.linkedin.com/in/aravindan33/).

See you all in my next post. Have a good day!