Vanilla Javascript interview questions and answers

The difference between var, let, and const in JavaScript primarily revolves around scope, hoisting, and mutability.

1. var:
- Scope: Variables declared with var are function-scoped or globally-scoped if declared outside a function. This means that var does not have block scope; it is accessible outside of the block in which it is declared.
- Hoisting: var variables are hoisted, meaning they can be used before they are declared. However, their value will be undefined until the declaration is reached.
- Example:

console.log(x); // undefined
var x = 5;
console.log(x); // 5

2. let:
- Scope: Variables declared with let have block scope, meaning they are only accessible within the nearest enclosing block (i.e., curly braces {}).
- Hoisting: let variables are also hoisted, but they cannot be used until they have been declared due to the "temporal dead zone" which exists until the declaration is encountered.
- Example:

if (true) {
    let y = 10;
    console.log(y); // 10
}
console.log(y); // ReferenceError: y is not defined

3. const:
- Scope: Like let, const variables are block-scoped.
- Hoisting: const variables are hoisted and also fall under the temporal dead zone until they are declared.
- Mutability: The key difference with const is that it signifies that the variable cannot be reassigned after its initial assignment. However, if the const variable holds an object or array, the contents of that object or array can still be mutated.
- Example:

const z = 20;
// z = 30; // TypeError: Assignment to constant variable.

const obj = { key: 'value' };
obj.key = 'new value'; // This is allowed.
console.log(obj.key); // 'new value'

In summary, use var for function-scoped variables (though it's generally recommended to avoid it in modern JavaScript), let for block-scoped variables that might be reassigned, and const for block-scoped variables that should not be reassigned.

To create a function in JavaScript, you can use the function declaration or function expression methods. Here's an overview of both approaches:

1. Function Declaration:
You can define a function using the function keyword followed by the function name, parentheses () for parameters, and curly braces {} for the function body.

function greet(name) {
    console.log("Hello, " + name + "!");
}

In this example, greet is the function name and it takes one parameter, name. When this function is called, it logs a greeting message to the console.

2. Function Expression:
A function can also be defined as an expression, which can be anonymous or named, and usually assigned to a variable.

const greet = function(name) {
    console.log("Hello, " + name + "!");
};

In this case, the function is assigned to the variable greet.

To call a function, you simply use its name followed by parentheses, passing any necessary arguments inside the parentheses.

For example:

greet("Alice"); // Output: Hello, Alice!

This calls the greet function with the argument "Alice" and produces the output in the console.

In summary, functions in JavaScript can be created using either declarations or expressions, and they are called by referencing their name followed by parentheses, potentially including arguments as needed.

Certainly! Hoisting is a fundamental concept in JavaScript that relates to the way variable and function declarations are processed before the execution of the code. In JavaScript, variable and function declarations are moved, or "hoisted," to the top of their containing scope during the compilation phase, which means that you can use variables and functions before you declare them in your code.

For example, consider the following code snippet:

console.log(myVar); // Output: undefined
var myVar = 5;
console.log(myVar); // Output: 5

In this case, the declaration of myVar is hoisted to the top, but its assignment (myVar = 5) is not. So, when the first console.log is executed, myVar exists but is undefined. After the assignment, the second console.log outputs 5.

Hoisting also applies to function declarations:

console.log(myFunction()); // Output: "Hello!"

function myFunction() {
    return "Hello!";
}

Here, the function myFunction can be called before its declaration due to hoisting, which moves the function declaration to the top of the scope.

However, it's important to note that hoisting works differently with let and const declarations. They are also hoisted to the top of their block scope but are not initialized, leading to a "Temporal Dead Zone":

console.log(myLetVar); // ReferenceError: Cannot access 'myLetVar' before initialization
let myLetVar = 10;

In summary, hoisting allows you to reference functions and variables before declaring them. However, the specific behavior varies depending on whether you're using var, let, or const.

An array is a data structure in JavaScript that allows you to store multiple values in a single variable. Arrays can hold elements of any data type, including numbers, strings, objects, and even other arrays. They are ordered, meaning each element is accessible by an index, which starts at 0 for the first element.

You can create an array in JavaScript in a few different ways:

1. Using Array Literal Syntax:
This is the most common way to create an array.

let fruits = ['apple', 'banana', 'cherry'];

2. Using the Array Constructor:
You can also create an array using the Array constructor.

let numbers = new Array(1, 2, 3, 4, 5);

3. Creating an Empty Array:
You can create an empty array and then add elements to it later.

let colors = [];
colors.push('red');
colors.push('blue');

Here are a few examples of common operations you can perform with arrays:

- Accessing an element by index:

console.log(fruits[1]); // Output: banana

- Modifying an element:

fruits[0] = 'kiwi';
console.log(fruits); // Output: ['kiwi', 'banana', 'cherry']

- Looping through an array:

for (let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
}

Overall, arrays are a fundamental part of JavaScript, enabling efficient storage and manipulation of collections of data.

In JavaScript, there are several ways to loop through an array. Here are some of the most common methods:

1. For Loop: This is the traditional way to loop through an array using a counter.

const array = [1, 2, 3, 4, 5];
for (let i = 0; i < array.length; i++) {
    console.log(array[i]);
}

2. ForEach Method: This method executes a provided function once for each array element.

const array = [1, 2, 3, 4, 5];
array.forEach(function(item) {
    console.log(item);
});

You can also use an arrow function:

array.forEach(item => console.log(item));

3. For...of Loop: This is a clean and concise way to iterate over iterable objects like arrays.

const array = [1, 2, 3, 4, 5];
for (const item of array) {
    console.log(item);
}

4. For...in Loop: This loop is generally used for iterating over the properties of an object, but can be used with arrays as well. However, it's not recommended due to potential issues with inherited properties.

const array = [1, 2, 3, 4, 5];
for (const index in array) {
    console.log(array[index]);
}

5. Map Method: This method creates a new array populated with the results of calling a provided function on every element in the calling array.

const array = [1, 2, 3, 4, 5];
const newArray = array.map(item => item * 2);
console.log(newArray);

In summary, the method you choose to loop through an array can depend on your specific use case, such as whether you need to modify the array or just access its elements.

JavaScript objects are collections of key-value pairs, where each key is a string (or a Symbol) and each value can be of any data type, including other objects, arrays, functions, or primitive values (numbers, strings, booleans, null, undefined). Objects are fundamental to JavaScript and allow for the organization and structuring of code.

There are several ways to create objects in JavaScript:

1. Object Literal Notation: This is the simplest way to create an object by defining it directly.

const person = {
    firstName: 'John',
    lastName: 'Doe',
    age: 30,
    greet: function() {
        console.log(`Hello, my name is ${this.firstName} ${this.lastName}`);
    }
};

2. Constructor Function: You can define a function to create objects. This approach allows you to create multiple objects with the same structure.

function Person(firstName, lastName, age) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.age = age;
    this.greet = function() {
        console.log(`Hello, my name is ${this.firstName} ${this.lastName}`);
    };
}

const person1 = new Person('Alice', 'Smith', 28);

3. Object.create() Method: This method allows you to create a new object, using an existing object as the prototype of the newly created object.

const protoPerson = {
    greet: function() {
        console.log(`Hello, my name is ${this.firstName} ${this.lastName}`);
    }
};

const person2 = Object.create(protoPerson);
person2.firstName = 'Bob';
person2.lastName = 'Jones';

4. Class Syntax: Since ES6, classes provide a clearer and more concise syntax for creating objects and handling inheritance.

class Person {
    constructor(firstName, lastName, age) {
        this.firstName = firstName;
        this.lastName = lastName;
        this.age = age;
    }
    greet() {
        console.log(`Hello, my name is ${this.firstName} ${this.lastName}`);
    }
}

const person3 = new Person('Charlie', 'Brown', 25);

In summary, JavaScript objects are versatile and can be created in various ways, each suited to different use cases depending on the needs of the application.

JSON, which stands for JavaScript Object Notation, is a lightweight data interchange format that is easy for humans to read and write, and easy for machines to parse and generate. It is often used to transmit data between a server and a web application, serving as an alternative to XML.

JSON structures data in key-value pairs, similar to how objects are defined in JavaScript. A JSON object is written inside curly braces {}, and a JSON array is written inside square brackets []. Here’s a basic example of a JSON object:

{
  "name": "John Doe",
  "age": 30,
  "isDeveloper": true,
  "skills": ["JavaScript", "React", "Node.js"]
}

In JavaScript, we can parse JSON strings into JavaScript objects using the JSON.parse() method. Likewise, we can convert JavaScript objects into JSON strings using the JSON.stringify() method.

Here’s a practical example:

// A JSON string
const jsonString = '{"name":"John Doe","age":30,"isDeveloper":true,"skills":["JavaScript","React","Node.js"]}';

// Parsing JSON string to a JavaScript object
const jsonObject = JSON.parse(jsonString);
console.log(jsonObject.name); // Output: John Doe

// Converting a JavaScript object to a JSON string
const newJsonString = JSON.stringify(jsonObject);
console.log(newJsonString); // Output: '{"name":"John Doe","age":30,"isDeveloper":true,"skills":["JavaScript","React","Node.js"]}'

In summary, JSON serves as a straightforward way to represent and exchange data, and JavaScript offers built-in methods for parsing and stringifying JSON data.

In JavaScript, error handling can be effectively managed using the try and catch statements. The try block allows you to write code that might throw an error, and if an error occurs, the control is transferred to the catch block where you can handle the error gracefully.

Here’s a basic structure:

try {
    // Code that may throw an error
    let result = riskyOperation(); // Example of a function that might fail
    console.log(result);
} catch (error) {
    // Handle the error
    console.error("An error occurred:", error.message);
}

In this example, if riskyOperation() throws an error, the message in the catch block will log the error message without stopping the execution of the program.

It's important to note that you can also use a finally block after the catch block, which will run regardless of whether an error occurred or not. This is useful for cleanup code:

try {
    let data = getData(); // Function that might fail
    console.log(data);
} catch (error) {
    console.error("Error fetching data:", error.message);
} finally {
    console.log("Cleanup actions here, if necessary.");
}

This way, you ensure that your application can continue to run in a stable manner, while also providing feedback when something goes wrong.

Additionally, you can throw custom errors using the throw statement, which can also be caught and handled using the catch block:

try {
    throw new Error("Custom error message");
} catch (error) {
    console.error("Caught an error:", error.message);
}

In conclusion, using try and catch in JavaScript is a robust way to manage exceptions and ensure that we can catch errors when they occur, preserving the usability and stability of applications.

The this keyword in JavaScript is a reference to the context in which a function is executed. Its value depends on how a function is called, not where it is defined. Understanding this is crucial because it enables you to access properties and methods of the object that it refers to.

1. In a method: When this is used inside a method of an object, it refers to the object itself.

Example:

const person = {
    name: 'Alice',
    greet: function() {
        console.log('Hello, ' + this.name);
    }
};
person.greet(); // Output: Hello, Alice

2. In a function: In a regular function (not in strict mode), this defaults to the global object (in browsers, that’s window). In strict mode, this is undefined.

Example:

function show() {
    console.log(this);
}
show(); // In browser: Window object, in strict mode: undefined

3. In a constructor function: When a function is called with the new keyword, this refers to the newly created object.

Example:

function Car(brand) {
    this.brand = brand;
}
const myCar = new Car('Toyota');
console.log(myCar.brand); // Output: Toyota

4. In an event handler: When a function is called as an event handler, this refers to the element that fired the event.

Example:

const button = document.createElement('button');
button.innerText = 'Click me';
button.addEventListener('click', function() {
    console.log(this.innerText); // Output: Click me
});
document.body.appendChild(button);

5. Using call, apply, and bind: You can explicitly set the value of this using these methods.

Example with call:

function showName() {
    console.log(this.name);
}
const obj = { name: 'Bob' };
showName.call(obj); // Output: Bob

In summary, the value of this is determined by how a function is invoked, and understanding this concept is fundamental for writing effective JavaScript code.

Certainly! A callback function in JavaScript is a function that is passed as an argument to another function and is executed after some kind of event or action has taken place.

Here's a simple example:

function fetchData(callback) {
    // Simulating an asynchronous operation like fetching data
    setTimeout(() => {
        const data = { name: "John", age: 30 };
        // Calling the callback function with the fetched data
        callback(data);
    }, 1000);
}

function processData(data) {
    console.log(`Name: ${data.name}, Age: ${data.age}`);
}

// Using the fetchData function with processData as the callback
fetchData(processData);

In this example, fetchData simulates an asynchronous data fetching operation using setTimeout. Once the data is "fetched," it invokes the callback, which is processData, passing the fetched data to it. This allows processData to handle the data once it becomes available.