JavaScript Concepts Worth Knowing

I recently came across a well-known GitHub repository: 33 Concepts Every JavaScript Developer Should Know. It’s a goldmine for brushing up on JavaScript fundamentals.

Instead of just passively reading through it, I’ve decided to go a step further—I'll write down each concept I revisit in my own words. This will not only help reinforce my understanding but also serve as a personal reference.

Sure, I could’ve dumped this into Notion, but publishing it here holds me accountable. Now that I’ve started it publicly… I kinda have to finish it 😅.

So here is my plan may i will not write down every concept as there are some things about Data Structure and Alogrithms which cannot be written in any concise manner may be miss out some point or may be add some more topic from my end. Let's see how it goes. It's going to be a long journey 👨‍💻👨‍💻

For each topic I will leave which resources I followed.

1. Call Stack

JavaScript code execution hinges on the concepts of execution contexts and the call stack. When a JavaScript program starts, a global execution context is established, encompassing both memory allocation for variables and functions, and the actual line-by-line execution of the code. During the memory creation phase, variables are initialized as undefined, while function code is fully stored. As the code runs, whenever a function is invoked, a brand-new execution context is generated specifically for that function, managing its parameters, calculations, and return values.

The call stack acts as a control tower for these execution contexts. It maintains the order in which functions are called and executed. The global execution context sits at the base of the stack. Each time a function is called, its execution context is pushed onto the top of the stack. Once a function completes its execution, its context is popped off the stack. This mechanism ensures that functions are executed in the correct sequence and helps manage the program's flow until the global execution context is also popped off, signifying the end of the script's execution.

Resources I followed

https://youtu.be/iLWTnMzWtj4?si=MfFtqZ8S6jrPuU7y

2. Primitive Types and Reference Types

So let's start by understanding that JavaScript is categorised into primitive types and reference type. The main distinction is how they are stored and how equality and assignment works. So we can understand it by code more beautifully

2.1 Primitive Types

Primitive values are immutable and stored directly in the variable’s memory space (the “stack”). When you copy or pass a primitive, you copy the actual value.

JavaScript has seven primitive types:

String
Number
BigInt
Boolean
Undefined
Null
Symbol

So lets understand this by code example:

example.js

var name= "Faisal";
console.log(name) // "Faisal"
 
var secondName=name;
console.log(secondName); // "Faisal"
 
name = "Husain"
console.log(secondName); // "Faisal"

So from above example we can see when you assign one variable to another (like secondName = name), a separate copy of the value is created in memory. So when name is later changed to "Husain", it doesn't affect secondName, which still holds the original value "Faisal" because the two variables are independent after the initial assignment.

We need to understand this in order to under stand next concept of Reference Type

2.2 Reference Types

Reference (or non-primitive) values are stored in the heap, and variables hold a reference (pointer) to that location. When you copy or pass a reference type, you copy the reference, so multiple variables can point to the same object. Modifying the object through one reference affects all references.

The primary reference type is Object, but there are built‑in subtypes:

Object
Array
Function
Date, RegExp, Map, Set, etc.

So lets understand this by code example:

example.js

var person = {
  name: "Faisal"
};
var secondPerson = person;
person.name = "Husain";
console.log(secondPerson.name); // "Husain"

Now when you assign one object to another variable (like secondPerson = person), you’re copying the reference, not the actual object. Both person and secondPerson point to the same object in memory. So, when you update person.name, the change is reflected in secondPerson.name too, because they both refer to the same underlying object.

To deeply understand this topic go throught the video below.

Resources I followed

https://youtu.be/9ooYYRLdg_g?si=AFXeRt7IN5KIehjo

3. Type Coercion

Type coercion is JavaScript's automatic or implicit conversion of values from one data type to another (like string to number, boolean to number, etc.) when performing comparisons or operations.

There are two types of coercion:

3.1 Implicit Coercion (Automatic)

This happens behind the scenes when using operators like ==, +, or even in conditionals

example.js

console.log("5" == 5);       // true - string "5" is coerced to number 5
console.log(0 == false);     // true - false becomes 0
console.log(null == undefined); // true - both are loosely equal
console.log("5" + 2);        // "52" - number 2 is coerced to string
 
if ("0") {
  console.log("Truthy!");    // prints "Truthy!" - "0" is a non-empty string
}

3.2 Explicit Coercion (Manual)

This happens when you convert types yourself, using functions like Number(), String(), or Boolean().

example.js

console.log(Number("123"));     // 123 (number)
console.log(String(456));       // "456" (string)
console.log(Boolean(0));        // false
console.log(Boolean("hello"));  // true

So this automatic convertions are the reason when you type "6" + 6 it give 66 This again is high level overview watch the attached video below

Resources I followed

4. == vs ===

This cocept is based upon the above type coercion topic only Basically == is loosely equal while === is strictly equal For more info watch the video below

Resources I followed

https://www.youtube.com/watch?v=a0S1iG3TgP0

5. Message Queue and Event Loop

For this topic I would highly recommend watch the attached video below