🚀 JavaScript Fundamentals (Week-03): Building a Strong Foundation

"Before learning frameworks like React or backend technologies like Node.js, it's essential to build a strong understanding of JavaScript fundamentals. A solid foundation makes advanced concepts much easier to learn."

Introduction

During Week-03 of my Full Stack Development learning journey, I focused on understanding the fundamental concepts of JavaScript. Instead of only writing code, I wanted to understand how JavaScript works behind the scenes.

In this week, I learned about variables, hoisting, different types of scope, execution context, call stack, closures, the this keyword, call(), apply(), bind(), module patterns, and clean coding principles like DRY and KISS.

In this blog, I'll explain each concept in a simple and beginner-friendly way with examples.

📚 Topics Covered

• What is JavaScript?
• Variables (var, let, const)
• Hoisting
• Scope
  • Global Scope
  • Function Scope
  • Block Scope
  • Lexical Scope
  • Scope Chain
• Execution Context
• Call Stack
• The this Keyword
• call(), apply(), and bind()
• Closures
• Module Pattern
• Common var vs let Bugs
• DRY Principle
• KISS Principle
• Conclusion

📌 What is JavaScript?

JavaScript is a high-level, interpreted, single-threaded programming language used to build interactive and dynamic web applications.

Initially, JavaScript was designed to run only in web browsers, but today it can also run on servers using Node.js.

Some common uses of JavaScript include:

• Creating interactive web pages
• Form validation
• DOM manipulation
• API communication
• Web application development
• Backend development with Node.js

Example

console.log("Hello, JavaScript!");

Output

Hello, JavaScript!

📦 Variables

Variables are containers used to store data.

JavaScript provides three ways to declare variables:

• var
• let
• const

var

Characteristics

• Function Scoped
• Can be redeclared
• Can be reassigned
• Hoisted

var name = "Sai";
var name = "Rahul";

console.log(name);

Output

Rahul

let

Characteristics

• Block Scoped
• Cannot be redeclared
• Can be reassigned

let age = 22;

age = 23;

console.log(age);

Output

23

const

Characteristics

• Block Scoped
• Cannot be redeclared
• Cannot be reassigned

const PI = 3.14;

console.log(PI);

Output

3.14

🚀 Hoisting

Hoisting is JavaScript's default behavior of moving declarations to the top of their scope before executing the code.

Example

console.log(a);

var a = 10;

Output

undefined

Internally, JavaScript interprets it like this:

var a;

console.log(a);

a = 10;

Variables declared using let and const are also hoisted, but they remain inside the Temporal Dead Zone (TDZ) until they are initialized.

🌍 Scope

Scope determines where a variable can be accessed in a program.

JavaScript provides four different types of scope.

Global Scope

Variables declared outside any function or block belong to the global scope.

let college = "MBU";

function showCollege() {
    console.log(college);
}

showCollege();

Output

MBU

Function Scope

Variables declared inside a function using var are accessible only within that function.

function student() {

    var name = "Sai";

    console.log(name);

}

student();

Trying to access name outside the function results in a ReferenceError.

Block Scope

Variables declared using let and const are block scoped.

{

    let city = "Hyderabad";

    console.log(city);

}

Outside the block, city is not accessible.

Lexical Scope

Lexical Scope means an inner function can access variables from its outer function because of where it is defined.

function outer() {

    let name = "Sai";

    function inner() {

        console.log(name);

    }

    inner();

}

outer();

Output

Sai

Lexical Scope is the foundation of Closures.

⚙️ Execution Context

Execution Context is the environment in which JavaScript code executes.

Every execution context has two phases:

Memory Creation Phase

During this phase:

• Variables are initialized with undefined
• Function declarations are stored in memory

Execution Phase

During this phase:

• Variables receive values
• Functions are executed
• Expressions are evaluated

📚 Call Stack

JavaScript executes functions using a Call Stack, which follows the Last In, First Out (LIFO) principle.

Example

function one() {
    two();
}

function two() {
    three();
}

function three() {
    console.log("Hello");
}

one();

Execution Order

one()

↓

two()

↓

three()

↓

Return

↓

Return

↓

Return

🎯 The this Keyword

The this keyword refers to the object that invokes the function.

Example

const person = {

    name: "Sai",

    show() {

        console.log(this.name);

    }

};

person.show();

Output

Sai

Arrow functions don't create their own this; they inherit it from the surrounding scope.

🔄 call(), apply(), and bind()

These methods allow us to explicitly set the value of this.

call()

Executes immediately.

Arguments are passed individually.

greet.call(person, "Hyderabad");

apply()

Executes immediately.

Arguments are passed as an array.

greet.apply(person, ["Hyderabad"]);

bind()

Returns a new function.

const greetPerson = greet.bind(person, "Hyderabad");

greetPerson();

🔒 Closures

A Closure is a function that remembers variables from its outer function even after the outer function has finished execution.

function counter() {

    let count = 0;

    return function () {

        count++;

        console.log(count);

    };

}

const increment = counter();

increment();
increment();
increment();

Output

1
2
3

Closures are commonly used for:

• Data Privacy
• Counters
• Event Handlers
• Module Pattern

📦 Module Pattern

The Module Pattern uses Closures to keep data private.

function UserModule() {

    let users = [];

    return {

        add(user) {
            users.push(user);
        },

        show() {
            console.log(users);
        }

    };

}

Here, users is private, while add() and show() are public methods.

⚠️ Common var vs let Bug

Using var

for (var i = 1; i <= 3; i++) {

    setTimeout(() => {

        console.log(i);

    }, 1000);

}

Output

4
4
4

Using let

for (let i = 1; i <= 3; i++) {

    setTimeout(() => {

        console.log(i);

    }, 1000);

}

Output

1
2
3

💡 DRY Principle

DRY stands for Don't Repeat Yourself.

Instead of writing duplicate code, write reusable functions.

function greet(name) {
    console.log(`Welcome ${name}`);
}

greet("Sai");
greet("Rahul");

Benefits:

• Reusable code
• Easy maintenance
• Fewer bugs

✨ KISS Principle

KISS stands for Keep It Simple.

Write code that is simple, readable, and easy to maintain.

Instead of:

function isEven(num) {

    if (num % 2 === 0) {

        return true;

    } else {

        return false;

    }

}

Write:

function isEven(num) {
    return num % 2 === 0;
}

Simple code is easier to understand, debug, and maintain.

🎯 Key Takeaways

After completing Week-03, I gained a better understanding of:

• JavaScript fundamentals
• Variable declarations
• Hoisting and TDZ
• Scope and Lexical Scope
• Execution Context
• Call Stack
• The this keyword
• call(), apply(), and bind()
• Closures and Module Pattern
• Clean coding principles like DRY and KISS

📝 Conclusion

Week-03 helped me understand how JavaScript works internally rather than just focusing on syntax. Concepts like scope, execution context, closures, and this have given me a strong foundation for learning advanced topics such as asynchronous JavaScript, React, and Node.js.

Building custom implementations of call(), apply(), and bind() also helped me understand how JavaScript manages function execution and context.

I hope this blog helps beginners who are starting their JavaScript journey. If you're learning JavaScript too, feel free to share your thoughts or connect with me.

Happy Coding! 🚀