Day 1: Building the Foundation — JavaScript Fundamentals

Welcome to the first day of our journey to becoming JavaScript interview-ready! Before we dive into advanced topics, it’s essential to build a strong foundation. Today, we’ll cover the core basics that every JavaScript developer must know, complete with examples and tricky questions that might come up during interviews.

1. Variables and Data Types

JavaScript variables are the building blocks of any program. Understanding how to declare and use them is crucial.

Variable Declaration

JavaScript provides three ways to declare variables:

• var (function-scoped, hoisted)
• let (block-scoped, not hoisted)
• const (block-scoped, immutable for primitive values)

Example

var x = 10; // Function-scoped
let y = 20; // Block-scoped
const z = 30; // Immutable

if (true) {
    var x = 40; // Reassigns globally
    let y = 50; // Scoped to this block
    console.log(y); // 50
}
console.log(x); // 40
// console.log(y); // ReferenceError

Question

Q: What will this code output, and why?

console.log(a);
var a = 10;
let b = 20;
console.log(b);

• console.log(a); outputs undefined because var is hoisted, but its value is not initialised.
• console.log(b); throws a ReferenceError because let is not accessible before initialisation (Temporal Dead Zone).

Interview Tip

Always clarify the differences between var, let, and const during interviews. Highlight the scope and hoisting behavior.

2. Data Types and Type Coercion

JavaScript has dynamic typing, which means variables can hold values of any type. Understanding type coercion and type checking is crucial for avoiding bugs.

Data Types

• Primitive Types: string, number, boolean, null, undefined, bigint, symbol
• Non-Primitive Types: Objects, Arrays, Functions

Example

const a = 42; // Number
const b = "42"; // String

console.log(a == b);  // true (type coercion)
console.log(a === b); // false (strict equality)

Question

What is the output of this code?

console.log(0 == false);
console.log(0 === false);
console.log(null == undefined);
console.log(null === undefined);

• 0 == false: true (type coercion)
• 0 === false: false (strict comparison)
• null == undefined: true (loose equality treats them as equal)
• null === undefined: false (strict comparison checks type)

Interview Tip

Practice explaining the difference between loose (==) and strict equality (===). Show you understand implicit type conversions.

3. Functions and Scope

Functions are the core of JavaScript. Understanding how scope and closures work is vital for solving complex problems.

Example

function outer() {
    let count = 0;
return function inner() {
        count++;
        console.log(count);
    };
}
const increment = outer();
increment(); // 1
increment(); // 2

Question

Explain closures and why the following code behaves as it does:

function createFunctions() {
    const arr = [];

for (let i = 0; i < 3; i++) {
        arr.push(() => i);
    }
    return arr;
}
const functions = createFunctions();
console.log(functions[0]()); // ?
console.log(functions[1]()); // ?
console.log(functions[2]()); // ?

• The output is 0, 1, 2 because let creates a new block scope for each iteration, so the closures capture distinct values of i.
• If var were used, the output would be 3, 3, 3 because var is function-scoped and i would reference the same variable.

Interview Tip

Be ready to demonstrate how closures work with examples. Understand scope differences between let, const, and var.

4. Control Flow and Error Handling

Control flow statements like if, switch, and loops are foundational, as is error handling using try-catch.

Example

function divide(a, b) {
    try {
        if (b === 0) {
            throw new Error("Cannot divide by zero");
        }
        return a / b;
    } catch (error) {
        console.error(error.message);
    }
}

divide(4, 2); // 2
divide(4, 0); // "Cannot divide by zero"

Question

How does the finally block behave in try-catch-finally?

try {
    console.log("Try block");
    throw new Error("An error occurred");
} catch (error) {
    console.log("Catch block");
} finally {
    console.log("Finally block");
}

The finally block executes regardless of whether an error is thrown or not. Output:

Try block
Catch block
Finally block

Interview Tip

Show you understand error handling best practices and the significance of finally for cleanup tasks.

5. Tricky Problems for Practice

Here are a couple of tricky problems to challenge yourself:

Problem 1: FizzBuzz

Write a function that prints numbers from 1 to 100. For multiples of 3, print “Fizz”; for multiples of 5, print “Buzz”; and for multiples of both, print “FizzBuzz”.

Problem 2: Reverse a String

Write a function that reverses a string without using built-in methods.

function reverseString(str) {
    let reversed = "";
    for (let i = str.length - 1; i >= 0; i--) {
        reversed += str[i];
    }
    return reversed;
}

console.log(reverseString("hello")); // "olleh"

Next Steps

That’s it for Day 1! We’ve covered the essential building blocks of JavaScript. These fundamentals will form the backbone of everything we learn in this series. Make sure to practice the examples and tricky questions, as they’re designed to test your understanding.

In the next post, we’ll dive deeper into functions, exploring advanced concepts like higher-order functions, callbacks, and recursion. Stay tuned, and let’s keep building together!

Feel free to connect with me on LinkedIn or X if you have any questions or need help. Let’s ace those interviews!