You’ll hear many people complaining that JavaScript is weird and sometimes worthless. People complain like this because they don’t understand how things work under the hood. Although I do agree that some scenarios in JavaScript are handled differently, that does not make it weird but rather beautiful in its own way.

To start loving a programming language, you should start by looking deep within and mastering its concepts one by one.

Here is a list of 36 JavaScript concepts that you need to master to become an all-round JavaScript expert.

Although this piece is one of my longest, I assure you that it is worthy of your time. Kudos to Stephen and Leonardo for the resources.

The resources section contains a link to the GitHub repo by Leonardo which contains learning material for all these concepts explained below. Please take your time in understanding each of the below-mentioned concepts.

1. Call Stack Execution

Everyone will have heard of the website Stack Overflow. But are you aware of the actual stack overflow? Stack overflow is an error associated with the operations of the call stack.

By understanding the call stack, you will have a working knowledge of how a high-level language like JavaScript gets executed.

2. Primitive Data Types

const foo = "bar";
foo.length; // 3
foo === "bar"; // true

Wait!

When you assign the value bar to the constant foo, it is of the primitive type string. That’s acceptable for everyone. But how can you access the property length of a primitive string?

Weird? Nah.

This feature is called autoboxing. In the above example, JavaScript wraps the constant in a temporary wrapper object and then accesses the length property of that object. Once this step is complete, the object is safely discarded.

By having a deep knowledge of the primitive data types, you will know how they are stored in memory up until the point of their binary representation. You will also know how these “weird” situations occur and the logical reason behind them.

3. Value Types and Reference Types

I recently had some confusion over how the concept “pass by reference” works in JavaScript. Although I was aware of the concepts “pass by reference” and “pass by value” in languages such as C and Java, I was not sure how it worked in JavaScript.

Did you know that variables assigned to non-primitive values in JavaScript are given a reference to that value? The reference points to the memory location where the value is stored.

var arr1 = [1,2,3];

var arr2 = arr1;
arr2.push(10);
console.log(arr2);
//[1, 2, 3, 10]
console.log(arr1);
//[1, 2, 3, 10]

As you can see from the above example, any modifications done to arr2 will be reflected on arr1 as well. This is because they only hold the reference to the value, not the actual value itself.

By understanding this concept of value types and reference types, you will have a better understanding of how variables are assigned with values and memory references.

#angular #javascript #react #programming #nodejs