Programming Programming Knowledge

Objects and Arrays | Property access in Javascript

October 15, 2018
Objects and Arrays in JavaScript

Today I’m going to talk about Objects and Arrays. You won’t believe that arrays are not what you think it is. In JS, it is something different. But first, let’s go through some fundamental understanding.

Overview:

In this series, we’ll be taking a deep look at-

  1. Property Access
  2. Dot notation and bracket notation
  3. Destructuring.
  4. Nesting -loops
  5. Nesting – Destructuring

Property Access

There are two ways you can access a property of an object or an array. One is using the dot notation and the other one is the bracket notation. Let’s look at this code.

In this example, I’ve shown 2 ways to assign data into a property. Here, the first one is called assignment with dots and the second one is object literal notation. Probably everyone has already seen these code everywhere. But now I’ll ask some question and before reading the answers try to ask yourself what are the answer?

Q1. Do we need name enclosed with “” in the 2nd approach?
Q2. Did you see any other ways dots used in JS?

 

1 -> answer: No. We don’t need it inside of “”. Cause the name is 1 word, that’s why we don’t need to enclose it.

2 -> answer: When we access a method of an object or promise, in using native methods like array.push(). Besides, in ES6 we can use the dot as a spread operator.

One thing to always remember that whenever we use dot notation, it is an object. Now as we know, in the array.push() we are using dot notation. So the question is “is array an object?”. I’ll answer that question later.

Another example

Now let’s take a look at another example.

Now in this example in line 6, ‘who’ variable will be executed and we will be able to see that who is evaluated to “Mr. Homes”. It’s easy. Now let’s add more code to this example.

 

” Mr. Homes” or “Mr. Watson”?

Can you guess what value is stored in who? Is it ” Mr. Homes” or “Mr. Watson”?

 "<yoastmark

Before I answer that, let me tell you how it works in the JS. When we write the second line, in the RAM, ” Mr. Homes” is saved in a memory and person.name is a pointer value that points to that memory. (memory address of ‘Mr. Homes”). So when we execute the 4th line, ‘who’ have only the memory address of Mr. Homes nothing else. So when 8th line is executed, person.name has the memory address of “Mr. Watson”. Thus value just changed. But the value of the pointer stored in ‘who’ is not changed. So when we execute the 10th line we will get the same value as previously i.e: “Mr. Homes”.

This storing a value is called by reference or by value. Which is actually important when we started passing data through our program. As we need to know if a data is saved by reference or by value.! We store primitive value by value. A primitive value can be a string, number, boolean, null, undefined and non-primitive value is an array of function, promise etc.

  • A primitive value is passed by value
  • Non-Primitive value is passed by reference

Keep this above 2 lines in your head always. a primitive value gets its own space in the RAM every time, on the other hand, an object or function is often shared between multiple places. So that, when you work with the same object in multiple places, changing the objects property or something might affect everyone that is using this object.

Lesson:

  • Don’t expect Primitive and non-primitive values will exhibit the same behavior
  • A primitive value is passed by value
  • Non-Primitive value is passed by reference
  • To avoid accidentally updating the value of an object we should copy the actual object into the function that we are working then work on it. (It’s one of the lessons of Functional Programming)

My next blog post is out. It is about the mysterious behavior about the arrays in JavaScript.

You Might Also Like

No Comments

Leave a Reply