JavaScript Fundamentals (Week-03)

Sai Swaroop Bijinapalli — Tue, 21 Jul 2026 06:09:44 +0000

🚀 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

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();

Method	Executes Immediately	Arguments
call()	✅	Individual
apply()	✅	Array
bind()	❌ Returns a Function	Individual

🔒 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! 🚀

DEV Community: Sai Swaroop Bijinapalli

JavaScript Fundamentals (Week-03)

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

Introduction

📚 Topics Covered

📌 What is JavaScript?

Example

📦 Variables

var

Characteristics

let

Characteristics

const

Characteristics

🚀 Hoisting

🌍 Scope

Global Scope

Function Scope

Block Scope

Lexical Scope

⚙️ Execution Context

Memory Creation Phase

Execution Phase

📚 Call Stack

🎯 The this Keyword

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

call()

apply()

bind()

🔒 Closures

📦 Module Pattern

⚠️ Common var vs let Bug

💡 DRY Principle

✨ KISS Principle

🎯 Key Takeaways

📝 Conclusion

🎯 The `this` Keyword