Frontend Interview Questions

Answer:

Answer:

Answer:

Answer:

Answer:

Answer:

let is block scope

var is function scope

in let we can’t access value before declaration.

// using test before declaring
console.log(test);   // undefined
var test;

JavaScript is a popular single-threaded programming language commonly used for web development. In web browsers, JavaScript runs in the main thread and handles tasks like user interactions, DOM manipulation, and HTTP requests.

In JavaScript, asynchronous operations are commonly handled using a combination of callbacks, Promises, and async/await syntax. Here’s how they work:

Callbacks: Callbacks are functions that are passed as arguments to other functions and are executed when the asynchronous operation completes. They’ve been traditionally used in JavaScript for handling asynchronous code. For example:

function fetchData(callback) {
  setTimeout(() => {
    callback("Data received");
  }, 1000);
}

function processData(data) {
  console.log(data);
}

fetchData(processData);

Promises: Promises provide a cleaner and more structured way to handle asynchronous operations compared to callbacks. A Promise represents a value that might not be available yet, but will be resolved at some point, either successfully or unsuccessfully. You can chain .then() and .catch() methods to handle the resolved value or error respectively. For example:

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Data received");
    }, 1000);
  });
}

fetchData()
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.error(error);
  });

Async/Await: Async functions allow you to write asynchronous code in a synchronous-like manner, making it easier to understand and maintain. You mark a function as async to indicate that it contains asynchronous operations, and you can use the await keyword to pause the execution of the function until a Promise is resolved. For example:

async function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Data received");
    }, 1000);
  });
}

async function processData() {
  const data = await fetchData();
  console.log(data);
}

processData();

• Use ternary operators to set a value to a variable, or to reduce code if necessary.
• Use if-else statements for everything else
• If-else is “statements”
• ternary operator is expression.

var a = 20;

function foo() {
  console.log(a);
  var a = 10;
}

foo();

//Output: undefined

function outer() {
  function inner() {
    console.log(x)
  }
  
  const x = 5
  return inner
}

const inner = outer()
inner()

Here’s the breakdown of what happens:

1. When outer() is called and assigned to inner, inner becomes a closure, capturing the scope of outer. This means that inner retains access to all variables declared within outer, even after outer has finished executing.
2. Inside outer, x is declared and assigned a value of 5.
3. Then, inner is returned from outer.
4. When inner() is called, it tries to log the value of x. Even though x is not directly declared within inner, inner has access to the scope of outer, including the variable x.
5. So, when inner() executes, it successfully logs 5.

for(var i = 1; i <= 3; i++){
  setTimeout(function() {
    console.log(i);
  },1000);
}

//issue is it output: 4, 4, 4
//Actual output required: 1, 2, 3

// Solution
for(let i = 1; i <= 3; i++){
  setTimeout(function() {
    console.log(i);
  },1000);
}

// Change variation value to let

// Solution
for(var i = 1; i <= 3; i++){
  (function(j) {
    setTimeout(function() {
      console.log(j);
    },1000);
  })(i);
}


// In this modified version, the value of i at each iteration is passed into the IIFE as a parameter j, which creates a new scope for each iteration, preserving the correct value of i for each setTimeout callback.
// https://chethanspoojary.com/blog/what-is-an-iife-in-javascript/

If I want to cause delay in the console

let time = 0
for(let i = 1; i <= 3; i++){
      time = time + 1000;
  (function(j, time) {
    setTimeout(function() {
      console.log(j, time);
    },time);

    
  })(i, time);
}

// we adding time + 1000

Without using time variable

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

  (function(j) {
    setTimeout(function() {
      console.log(j);
    },1000 * i);

    
  })(i);
}