🚀 5 Javascript concepts every web developer should know! 👨‍💻

TL;DR

This article contains a list of 10 Javascript concepts that can take you from a Javascript newbie to a pro.

Hey Folks! 👋

This article contains top 10 Javascript concepts for web developers. It contains something for everyone so whether you've just started your journey or are a seasoned developer, you'll still find something of use here.

1. Call stack:

Call stack is a data structure that keeps track of where the program is currently in its execution journey. Every time a function is called, an entry (called 'stack frame') is added to the call stack.

When the function completes execution, its corresponding stack frame is removed (or 'popped') from the call stack, and control returns to the previous function in the stack.

Key Points:

• LIFO (Last In, First Out): The call stack operates on this principle, where the last function pushed is the first one popped.


• Every active function call resides here, maintaining execution order.


• If too many function calls are added without being removed (e.g., infinite recursion), the stack runs out of memory, causing a stack overflow.


• Call Stack Trace: Debugging tools use the stack to show the order of function calls leading to an error.

2. Execution Context:

Execution context defines the environment within which JavaScript code is executed. It consists of everything needed to execute the code, such as variable definitions, the 'this' keyword, and function references.

There are three primary types of execution contexts in JavaScript:

i) Global Execution Context: Created by default when the script starts. It contains global variables and functions.

ii) Function Execution Context: Created whenever a function is called. Each function call gets its unique context.

iii) Eval Execution Context: Created when code is executed inside an eval() function.

• Call stack and execution context work together. Call stack manages the order of execution, while the execution context manages the details of execution.


• When a function is invoked, a new execution context is created and pushed onto the stack.


• The code runs in the current execution context.


• When the function finishes, its context is removed from the stack.

3. typeof, loose and strict equality:

While most developers do know what these are, pro developers, in addition to knowing the basics, also know the limitations and when to use what.

typeof:

The typeof operator returns a string indicating the type of its operand. It’s the easiest way to know the data type of a variable or an expression.

Key Points about typeof:

• The output is always a string, such as "number", "string", "boolean", "object", "function", or "undefined".


• Despite being an object reference, typeof null returns "object".


• You can pass any value or expression to typeof.
  

typeof 42; // "number"

typeof "Hello"; // "string"

typeof {}; // "object"

loose equality:

The == operator checks if two values are loosely equal, meaning it compares their values after performing type coercion (converting both operands to the same type).

Key Points about ==:

• Converts one or both operands to the same type before comparing.


• The implicit type conversion can lead to unexpected results.


• Use === instead for clarity and reliability.
  

42 == "42"; // true (string is coerced to a number)

null == undefined; // true (special case of loose equality)

0 == false; // true (type coercion happens)

Strict equality:

The === operator checks if two values are strictly equal, meaning it evaluates both value and type without performing type coercion.

Key Points about ===:

• Both value and type must match exactly.


• Ensures clarity and prevents unexpected behavior.


• Handles everything from numbers and strings to arrays and objects, and is hence more reliable.
  

42 === "42"; // false (different types)

null === undefined; // false (different values and types)

0 === false; // false (different types)

When to Use Each Operator:

• Use typeof when inspecting or debugging variable types.


• Use === for comparisons to ensure both value and type match.


• Avoid == unless you’re confident type coercion will lead to the intended outcome (e.g., when comparing null and undefined).

4. Pure and Impure functions:

A pure function is a function that has no side effects and always returns the same output for a given input (i.e., it has deterministic output).

// pure function

function add(a, b) {

  return a + b; // Only depends on input arguments

}



// impure function

let counter = 0;  

function increment() {

  counter++; // Modifies external state (impure)

}

Benefits of Pure Functions

• Easier to Test: Since the output only depends on the input, you don’t need to mock external dependencies.
  Example: Testing add(2, 3) always results in 5.


• Predictability: No unintended consequences from hidden state or side effects.


• Improved Debugging: Pure functions are isolated, making it easier to trace issues.


• Reusability: Pure functions are self-contained and can be reused confidently in different contexts.


• Facilitates Functional Programming: Encourages immutability and declarative programming paradigms.

5. Event propagation:

Event propagation refers to the way in which events are handled in a program.

In JavaScript, events can bubble up through the DOM (Document Object Model) or they can be captured and handled at each level.

• Event Handling Efficiency: Use event delegation to manage events on many child elements with a single parent listener.


• Debugging Propagation Issues: Understanding propagation helps resolve issues where unintended elements respond to events.


• Fine Control: Choose capturing or bubbling phases to handle events at specific points in the DOM hierarchy.


• 
  event.stopPropagation(): Stops further propagation in both capturing and bubbling phases.


• 
  event.stopImmediatePropagation(): Stops propagation and prevents other listeners on the same element from being called.

With that, I'm concluding this article today. Don't forget to check out my other articles and remember to join the community.

Also, this isn't a definitive list and I'm sure I've missed many concepts that ought to be here, please add them in the comments down below.

Thanks for reading and see you in the next one!

Bye! 👋

~ SS