Front End Developer Interview Questions and Answers

In JavaScript, hoisting is the behaviour of moving declarations to the top of the current scope. This means that declarations of variables and functions are automatically moved to the top of their containing scope, regardless of where they appear in the code. 

For example, consider the following code: 

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

Even though the declaration of the x variable appears after the first line of code, the x variable is actually defined at the top of the current scope (in this case, the global scope). This means that the first line of code will output undefined, rather than throwing a reference error. 

Hoisting only affects declarations, not assignments. This means that the following code will throw a reference error, because the assignment to x is not hoisted: 

   console.log(x);           // Uncaught ReferenceError: x is not defined 
   x = 5; 

Overall, hoisting is an important concept to understand in JavaScript, as it can affect the way your code is executed and can lead to some subtle bugs if you're not careful. 

In JavaScript, the spread operator (represented by three dots: "...") allows you to expand or "spread" an iterable object (such as an array or string) into individual elements. It can be used in a variety of ways, including in function calls, array literals, and object literals. 

Here are a few examples of how the spread operator can be used: 

• In function calls: 

let numbers = [1, 2, 3, 4]; 
// Without spread operator 
Math.max(numbers);        // Returns NaN (not a number) 
// With spread operator 
Math.max(...numbers);       // Returns 4 

• In array literals: 

let array1 = [1, 2, 3]; 
let array2 = [4, 5, 6]; 
// Without spread operator 
let combined = [array1, array2];                 // [[1, 2, 3], [4, 5, 6]] 
// With spread operator 
let combined = [...array1, ...array2];             // [1, 2, 3, 4, 5, 6] 

• In object literals (when used in combination with the "Object.assign" function): 

let obj1 = { a: 5, b: 10 }; 
let obj2 = { c: 3, d: 4 }; 
// Without spread operator 
let merged = Object.assign(obj1, obj2);          // { a: 5, b: 10, c: 3, d: 4 } 
// With spread operator 
let merged = { ...obj1, ...obj2 };                       // { a: 5, b: 10, c: 3, d: 4 } 

The rest operator (also represented by three dots: "...") is like the spread operator, but it works in the opposite direction. It allows you to "gather" or condense multiple elements into a single element. It is primarily used in function parameter lists to represent an indefinite number of arguments as an array. 

Below is an example of how the rest operator can be used: 

function sum(...numbers) { 
  let result = 0; 
  for (const number of numbers) { 
    result += number; 
  } 
  return result; 
} 
console.log(sum(1, 2, 3, 4, 5));  // 15 

In JavaScript, this keyword refers to the object that is currently executing the code. In different contexts, this Keyword might have a different value. 

Below are a few examples of how this keyword can be used in JavaScript: 

• In a global context (outside of any function), this refers to the global object (usually a window in a web browser). 

Console.log(this);            //Outputs the global object (usually ‘window’) 

• When calling a function, this is the object that is called the function. 

const person = { 
  name: 'John', 
  greet: function() {  console.log(`Hello, my name is ${this.name}`); } 
}; 
person.greet();        // Outputs "Hello, my name is John" 

• In a constructor function (a function used to create objects), this refers to the object being created. 

function Person(name) { 
  this.name = name; 
  this.greet = function() { 
    console.log(`Hello, my name is ${this.name}`); 
  }; 
} 
const john = new Person('John'); 
john.greet();         // Outputs "Hello, my name is John" 

Front-end development interview questions like this are posed to test your coding skills, be ready to tackle it.  

To focus an input element on a web page when the user clicks on the corner of the page without using JavaScript, you can use the :target pseudo-class in CSS. 

Here is an example: 

• Create a link element that will be used to trigger the focus event when clicked. This link should point to an element with an ID that corresponds to the input element you want to focus. 
• Create the input element and give it an ID that matches the href of the link element. 
• Use the :target pseudo-class to specify the styles for the input element when it is targeted by the link element. In this case, we can use the :focus pseudo-class to style the input element when it is focused. 

  <a href="#input1">Click here to focus input</a> 
  <input type="text" id="input1"> 
  #input1:target:focus { 
       /* styles for the input element when it is targeted and focused */ 
  } 

When the user clicks on the link element, the input element will be targeted and focused, and the styles specified in the :target:focus rule will be applied to it. 

To find the kth closest element to a particular value in an array, we can use the following approach: 

1. Sort the array in ascending order. 
2. Find the index of the value in the sorted array using the Array.prototype.indexOf() method. 
3. If the value is not found in the array, return null. 
4. If the value is found, return the element at index k from the value's index else return null. 

function findKthClosest(array, value, k) { 
  const sortedArray = array.sort((a, b) => a - b); 
  const index = sortedArray.indexOf(value); 
  if (index === -1) { 
    return null; 
  } 
  return sortedArray[index + k] || null; 
} 
 
const array = [1, 3, 5, 7, 9]; 
const value = 5; 
const k = 2; 
const result = findKthClosest(array, value, k); 
console.log(result); // 7 

Let us now move up the ladder from intermediate to advanced. Listed below are a few interview questions for senior front end developers. 

In React, data is passed from a parent component to a child component through props, which are short for "properties." 

Props are a way for a parent component to pass data to its children, and for the children to receive and use that data. Props are passed to a child component as an object, and the child component can access the data within the object using the this.props property. 

Here is an example of how a parent component might pass data to a child component using props: 

import React from 'react'; 
// Parent component 
class Parent extends React.Component { 
render() { 
return ( 
<Child name="John" age={30} /> 
); 
} 
} 
// Child component 
class Child extends React.Component { 
render() { 
return ( 
<p>Hello, my name is {this.props.name} and I am {this.props.age} years old.</p> 
); 
} 
} 

It is important to note that props are read-only, meaning that a child component cannot modify its props. If a child component needs to modify data that was passed to it via props, it should communicate this back to the parent component, which can then pass the updated data back down to the child via props. This is known as "props drilling" 

One way for a child component to pass data back to its parent component is by using a callback function. A callback function is a function that is passed as a prop to the child component, and it is called by the child component when it needs to pass data back to the parent.

import React from 'react'; 
// Parent component 
class Parent extends React.Component { 
// Define a callback function that will be passed to the child component 
handleDataFromChild(data) { 
// Do something with the data passed from the child component 
} 
render() { 
return ( 
<Child onDataFromChild={this.handleDataFromChild} /> 
); 
} 
} 
// Child component 
class Child extends React.Component { 
// When the child component needs to pass data back to the parent, it calls the callback function 
handleButtonClick() { 
this.props.onDataFromChild({ some: 'data' }); 
} 
render() { 
return ( 
<button onClick={this.handleButtonClick}>Send data to parent</button> 
); 
} 
} 

In this example, the parent component defines a callback function called handleDataFromChild, which it passes to the child component as a prop. The child component can then call this callback function whenever it needs to pass data back to the parent. 

Another way for a child component to communicate data back to its parent is by using the React context API, or by using a state management library like Redux, which are typically only needed in larger applications with complex data flows and may not be necessary for smaller or simpler applications. 

This is one of the frequently asked Front-end interview questions.

It is generally not recommended to call setState inside the render method of a React component. This is because render is called every time the component's state or props are updated, and calling setState inside render can cause an infinite loop.

For example, consider the following component: 

class MyComponent extends React.Component { 
state = { 
count: 0, 
}; 
render() { 
this.setState({ count: this.state.count + 1 }); // Don't do this! 
return <div>{this.state.count}</div>; 
} 
} 

In this component, render is called every time the component's state is updated. However, inside the render method, we are calling setState, which updates the state and triggers another call to render. This creates an infinite loop, causing the component to re-render constantly without ever stopping. 

To avoid this issue, it is generally recommended to avoid calling setState inside the render method. Instead, setState should be called in response to user interactions like (clicking a button) or other events that trigger a state update. 

Expect to come across this, one of the most popular front-end interview questions.  

In a React application, a saga is a piece of code that is responsible for managing side effects. Side effects are actions that have an impact outside of the application, such as making a network request or interacting with a database. 

Sagas are needed in React applications because side effects can often be complex and hard to manage, especially when they involve multiple steps or need to be coordinated with other actions in the application. By encapsulating side effects in a separate piece of code, called a saga, it becomes easier to manage and maintain the application. 

Sagas are implemented using a library called redux saga, which is a middleware that sits between the React application and the Redux store. Redux-saga uses a combination of generator functions and an event-loop to manage side effects in a declarative and efficient way. 

Below is an example of a simple saga that listens for a FETCH_USER action and makes a network request to fetch the user data: 

import { takeEvery, call, put } from 'redux-saga/effects'; 
import api from '../api'; 
function* fetchUser(action) { 
try { 
const user = yield call(api.fetchUser, action.payload.userId); 
yield put({ type: 'FETCH_USER_SUCCESS', user }); 
} catch (error) { 
yield put({ type: 'FETCH_USER_ERROR', error }); 
} 
} 
function* watchFetchUser() { 
yield takeEvery('FETCH_USER', fetchUser); 
} 
export default watchFetchUser; 

A reducer in Redux is a pure function that takes in the current state of the application, an action, and returns the next state of the application. There are no side effects associated with a pure function since it always returns the same output from the same input.  

There are a few reasons why reducers are designed to be pure functions: 

• Predictability: Because a reducer is a pure function, it is easy to predict what the next stage of the application will be based on the current state and the action. This makes it easier to reason about the behavior of the application and to write tests for the reducer. 
• Consistency: Because a reducer does not have side effects, it does not rely on external factors or mutate the state in an unpredictable way. This makes the behavior of the reducer more consistent and easier to understand. 
• Performance: Because a reducer is a pure function, it can be easily optimized by the JavaScript runtime. For example, the runtime can cache the results of the reducer and avoid recomputing them if the input does not change. 

A must-know for anyone heading into the technical interview, this is one of the most frequently asked UI developer questions.

Redux is a state management library that is often used in React applications. It provides a simple and predictable way to manage the state of the application and to update the state in response to actions.

The basic flow of Redux can be summarized as follows: 

1. An action is dispatched: An action is an object that describes an event that has occurred in the application. It typically includes a type field that describes the type of event that has occurred and may also include additional data payload. 
2. The reducer processes the action: The reducer is a pure function that takes in the current state of the application and the action and returns the next state of the application. It is responsible for updating the state based on the action. 
3. The store updates the state: A store is an object that holds the current state of the application and provides methods for accessing and updating the state. When the reducer returns the next state, the store updates its internal state to match the new state. 
4. The component re-renders: If the component is connected to the store using the react-redux library, it will be notified of the state change and re-render to reflect the updated state. 

Here is a simple example of a Redux flow in a React application: 

// Action 
const action = { 
type: 'ADD_TODO', 
payload: { 
text: 'Learn Redux' 
} 
}; 
// Reducer 
function reducer(state, action) { 
switch (action.type) { 
case 'ADD_TODO': 
return { 
...state, 
todos: [...state.todos, { text: action.payload.text }] 
}; 
default: 
return state; 
} 
} 
// Store 
const store = createStore(reducer, { todos: [] }); 
// Component 
class TodoList extends React.Component { 
render() { 
const { todos } = this.props; 
return ( 
<ul> 
{todos.map(todo => ( 
<li key={todo.text}>{todo.text}</li> 
))} 
</ul> 
); 
} 
} 
const mapStateToProps = state => ({ 
todos: state.todos 
}); 
const ConnectedTodoList = connect(mapStateToProps)(TodoList); 
// Dispatch action 
store.dispatch(action); 

In this example, the ADD_TODO action is dispatched when the user clicks a button. The reducer processes the action and updates the todos array in the state. The store updates its internal state and the TodoList component re-renders to display the updated list of todos.

Redux flow is one of the most mentioned topics among Front-end developer questions, so make sure you master this topic as well.

In React, the lifecycle of a component refers to the different stages of its existence, from the moment it is created to the moment it is destroyed. In the past, React provided a set of lifecycle methods that could be used to manage the lifecycle of a component, such as componentDidMount, componentDidUpdate, and componentWillUnmount. 

Starting from React 16.8, it is also possible to manage the lifecycle of a component using hooks. Hooks are functions that allow you to use state and other React features in functional components. 

Below is an example of how to use the useEffect hook to manage the lifecycle of a component: 

import { useEffect } from 'react'; 
function MyComponent() { 
useEffect(() => { 
// componentDidMount and componentDidUpdate 
return () => { 
// componentWillUnmount 
}; 
}); 
return <div>My component</div>; 
} 

The useEffect hook takes a callback function as an argument, which will be called after the component is rendered. The callback function can perform side effects, such as making a network request or setting up an event listener. 

The useEffect hook can also accept a second argument, which is an array of dependencies. If the dependencies change, the callback function will be called again. This allows you to specify when the effect should be run. If the array is empty, the effect will only be run once, when the component is mounted. 

Here is an example of how to use the useEffect hook with dependencies: 

import { useEffect, useState } from 'react'; 
function MyComponent() { 
const [count, setCount] = useState(0); 
useEffect(() => { 
console.log(`Count is ${count}`); 
// componentDidUpdate 
}, [count]); // Only re-run the effect if count changes 
return ( 
<div> 
<button onClick={() => setCount(count + 1)}>Increment</button> 
</div> 
); 
} 

In React, the setState method is used to update the state of a component. It takes two arguments: the first argument is an object that specifies the state changes to be made, and the second argument is a callback function that will be called after the state has been updated. 

Here is an example of how to use setState with a callback function: 

class MyComponent extends React.Component { 
constructor(props) { 
super(props); 
this.state = { count: 0 }; 
} 
incrementCount = () => { 
this.setState({ count: this.state.count + 1 }, () => { 
console.log(`Count is now ${this.state.count}`); 
}); 
}; 
render() { 
return ( 
<div> 
<button onClick={this.incrementCount}>Increment</button> 
</div> 
); 
} 
} 

In this example, the incrementCount method updates the count state variable and logs the new value to the console using a callback function. The callback function is called after the state has been updated and the component has re-rendered. 

The second argument to setState is optional, and you can omit it if you do not need to perform any actions after the state has been updated. 

In a React application, a controlled component is a component that is controlled by the React state. This means that the component's value and behavior are determined by the state, and the component does not maintain its own internal state. 

An uncontrolled component, on the other hand, is a component that maintains its own internal state. The value of the component is not controlled by the React state, and the component can update its own value independently of the React state. 

Below is an example of a controlled text input component: 

class ControlledInput extends React.Component { 
constructor(props) { 
super(props); 
this.state = { value: '' }; 
} 
handleChange = event => { 
this.setState({ value: event.target.value }); 
}; 
render() { 
return ( 
<input 
type="text" 
value={this.state.value} 
onChange={this.handleChange} 
/> 
); 
} 
} 

In this example, the value of the input is controlled by the value state variable, and the onChange event handler is used to update the state when the input value changes. 

Below is an example of an uncontrolled text input component: 

class UncontrolledInput extends React.Component { 
inputRef = React.createRef(); 
handleSubmit = event => { 
event.preventDefault(); 
console.log(this.inputRef.current.value); 
}; 
render() { 
return ( 
<form onSubmit={this.handleSubmit}> 
<input type="text" ref={this.inputRef} /> 
<button type="submit">Submit</button> 
</form> 
); 
} 
} 

In this example, the input does not have a value prop and is not controlled by the React state. Instead, the input's value is accessed directly using the ref system. When the form is submitted, the value of the input is logged to the console using the ref object. 

Controlled components are generally easier to manage and test because the state of the component is fully determined by the React state. Uncontrolled components can be useful when you need to work with a DOM API or when you need to optimize performance by avoiding unnecessary re-renders.

A frequent occurrence in the list of Front-end developer technical interview questions, don't miss this one.

Generator functions are used in sagas because they provide a convenient way to pause and resume the execution of a function. This is useful when working with side effects, because it allows you to perform async operations in a declarative and efficient way.

In a saga, generator functions are used to manage the flow of the saga and to coordinate the execution of async tasks. The redux-saga library provides a set of helper functions, called effects, that can be used to pause the generator function and wait for a specific event to occur.

Server-side rendering (SSR) is a technique that allows a web server to generate and serve HTML for a webpage on demand rather than relying on the client's web browser to generate the HTML. This can be useful in various situations, including: 

• Improving the Performance and Load Time of the Webpage: By rendering the HTML on the server, the webpage can be served to the client more quickly, as the client's browser does not need to wait for the HTML to be generated and sent from the server. 
• Improving SEO of the Webpage: Search engines can have difficulty indexing and ranking pages that are generated dynamically on the client's browser. By rendering the HTML on the server, search engines can more easily index the content of the webpage. 
• Providing a Consistent Experience for Users: Some users may have browsers or devices that do not support modern JavaScript features or frameworks. By rendering the HTML on the server, you can ensure that all users have a consistent experience, regardless of their browser or device.

It's no surprise that this one pops up often in UI developer interviews.

Debouncing and throttling are techniques that can be used to reduce the frequency of function calls in JavaScript. They are often used to improve the performance and efficiency of code that is triggered by events, such as user input or window resizing. 

Debouncing is a technique that delays the execution of a function until a certain amount of time has passed without the function being called. This can be useful if you want to ensure that a function is not called too frequently, such as when handling user input events. 

For example, consider a function that is called every time the user types a character into an input field: 

document.querySelector('input').addEventListener('keyup', function() { 
search(); 
}); 
function search() { 
// Perform a search 
} 

If the user types quickly, this function could be called many times in a short period, which could cause performance issues. To address this, we can use debouncing to delay the execution of the function until the user has finished typing: 

let timeout; 
document.querySelector('input').addEventListener('keyup', function() { 
clearTimeout(timeout); 
timeout = setTimeout(search, 500); 
}); 
function search() { 
// Perform a search 
} 

In this example, the search function is called 500 milliseconds (0.5 seconds) after the user stops typing. This helps to ensure that the function is not called too frequently, while still allowing the user to receive timely feedback. 

Throttling is a technique that limits the number of times a function can be called within a certain time period. This can be useful if we want to ensure that a function is not called too frequently, but we still want it to be called at a regular interval. 

For example, consider a function that is called every time the user scrolls the page: 

window.addEventListener('scroll', function() { 
updatePosition(); 
}); 
function updatePosition() { // Update the element position } 

If the user scrolls quickly, this function could be called many times in a short time, which could cause performance issues. To address this, we can use throttling to limit the number of times the function is called: 

let canCall = true; 
window.addEventListener('scroll', function() { 
if (canCall) { 
updatePosition(); 
canCall = false; 
setTimeout(function() { 
canCall = true; 
}, 100); 
} 
}); 
function updatePosition() { 
// Update the position of an element 
} 

In this example, the updatePosition function is called once every 100 milliseconds (0.1 seconds) while the user is scrolling. This helps to ensure that the function is not called too frequently, while still allowing it to be called at a regular interval. 

In JavaScript, currying is a technique that allows a function to be partially applied, or "pre-filled," with some of its arguments. There are several situations where this can be useful, such as: 

• Creating functions with a fixed set of arguments that can be easily reused. 
• Abstracting away certain arguments to make a function more flexible and reusable. 
• Improving the readability and clarity of code by breaking up complex functions into smaller, more focused functions. 

To understand how currying works, consider the following example: 

function add(a, b) { 
return a + b; 
} 

The function returns the sum of two arguments (a and b). To curry this function, we can create a new function that takes one of the arguments and returns a new function that takes the other argument: 

function add(a) { 
return function(b) { 
return a + b; 
} 
} 
const add5 = add(5); 
console.log(add5(10)); // 15 
console.log(add5(20)); // 25 

In this example, the add5 function is a partially applied version of the add function, with an argument pre-filled with the value 5. This allows us to create a new function that can be easily reused to add 5 to any number. 

Currying can be implemented in a variety of ways in JavaScript, and it can be used to create a wide range of reusable and flexible functions. It is a useful technique for improving the modularity, readability, and clarity of code. 

setTimeout is a JavaScript function that allows us to schedule a function to be executed after a specified amount of time has passed. It works by adding a timer to the JavaScript event loop, which is a queue of tasks that are executed by the browser or runtime environment. 

To illustrate how setTimeout works, here is an example: 

console.log('Start'); 
setTimeout(function() { 
console.log('Timeout'); 
}, 1000); 
console.log('End'); 

In this example, the setTimeout function is called with a delay time of 1000 milliseconds (1 second). When this code is executed, the following will happen: 

1. The console.log('Start') line is executed, which prints "Start" to the console. 
2. The setTimeout function is called, which adds a timer to the event loop with a delay time of 1000 milliseconds. 
3. The console.log('End') line is executed, which prints "End" to the console. 
4. The event loop begins processing tasks. When it reaches the timer that was added by setTimeout, it waits for the delay time to pass. 
5. After the delay time has passed, the timer's callback function (console.log('Timeout')) is added to the event loop. 
6. The event loop continues processing tasks and eventually reaches the callback function, which is executed and prints "Timeout" to the console

CSS pre-processors are tools that allow us to write CSS more powerfully and expressively, and then compile it into standard CSS that can be used on a web page.  

There are several reasons why CSS pre-processors like SASS are preferred over plain CSS: 

• Improved Code Organization and Reuse: SASS allows you to use features like variables, mixins, and functions to organize and reuse code more effectively. This can help to make your CSS more maintainable and scalable. 
• Enhanced Syntax and Features: SASS offer a more powerful and expressive syntax than plain CSS, with features like nested rules, operators, and control structures. This can make it easier to write and maintain complex stylesheets. 
• Improved Performance: SASS can help to improve the performance of your stylesheets by allowing you to use techniques like code minification and source maps. 
• Better Compatibility with Modern Tools: CSS preprocessors is often used in conjunction with modern front-end tools and frameworks, such as webpack, Grunt, and Gulp. This can make it easier to integrate CSS preprocessors into your workflow and use them with other tools and libraries. 

Overall, CSS preprocessors like SASS are preferred over plain CSS because they offer a range of benefits, including improved code organization and reuse, enhanced syntax and features, improved performance, and better compatibility with modern tools. 

Prior to executing the code, we can explain the logic used in the code to the interviewer, namely using a filter method that runs on each element of the array and leaves only entries that pass the given callback function. A callback function checks whether a value has the first occurrence. If not, it must be the same value and will not be copied. This is how unique elements can be extracted from the array. 

 let myArray = ['ac', 12, 'ac', 12, '1']; 
 let uniqueEl = myArray.filter((value, index, el) => el.indexOf(value) === index); 
 console.log(uniqueEl); // unique elements are ['ac', 12, '1'] 

Is there any other way to implement the same? 

Yes, with the help of inbuilt function Set.

let myArray = ['ac', 12, 'ac', 12, '1']; 
let uniqueEl = […new Set(myArray)]; 
console.log(uniqueEl); // unique is ['ac', 12, '1'] 

Afterwards, the interviewer asked me some

 function abc(){
x = 10;
let y = 5;
}
 abc();
console.log(x, y); 

It will return referenceError: y is not defined, as y is block scoped, and we're trying to access it outside that scope. 

A staple in Front-end developer interview questions, be prepared to answer this one.  

1. console.log(20+”2");  
2. console.log(20-”2");  

The output of first statement is "202". In JavaScript, the + operator is used for both addition and concatenation, depending on the operands. When one of the operands is a string, the + operator performs concatenation, meaning it combines the two operands as strings and returns the resulting string. 

In this case, the operands are the number 20 and the string "2". Since one of the operands is a string, the + operator concatenates them, resulting in the string "202". 

The output of second statement would be 18. The - operator is used for subtraction. When both operands are numbers, the - operator performs subtraction and returns the difference. 

In this case, the operands are the number 20 and the string "2". Since the string "2" can be converted to the number 2, the - operator performs subtraction and returns the difference, which is 18. 

A polyfill is a piece of code that provides a missing functionality in older browsers that do not support that functionality natively. One way to implement a polyfill for the map() method in JavaScript is to use a simple loop to iterate over the elements of the array and call the provided function on each element: 

 if (!Array.prototype.map) { 
Array.prototype.map = function(callback, thisArg) { 
var newArray = []; 
for (var i = 0; i < this.length; i++) { 
newArray.push(callback.call(thisArg, this[i], i, this)); 
} 
return newArray; 
} 
 } 

This polyfill checks if the map() method is not already present on the Array.prototype, and if it is not, it defines the map() method as a function that takes a callback function and an optional thisArg as arguments. The callback function is called on each element of the array, and the resulting values are pushed to a new array, which is then returned. 

for (var i = 0; i < 5; i++) { 
  setTimeout(function() {  
console.log(i);  
}, i * 1000 ); 
} 

In this code, there is a for loop that iterates 5 times, from 0 to 4. For each iteration, the setTimeout() function is called with a callback function that logs the value of i. The value of i that is logged is not the value at the time the setTimeout() function is called, but rather the value of i after the for loop has completed.  

This is because the setTimeout() function is a non-blocking function, and the callback function is not executed until the specified delay has passed. Therefore, the value of i is not captured at the time the setTimeout() function is called, but rather at the time the callback function is executed. By the time the callback function is executed, the for loop has already completed, and the value of i is 5. 

So, Output is  

5 
5 
5 
5 
5 

To log the values of i at the time the setTimeout() function is called, you could use an immediately-invoked function expression (IIFE) to capture the value of i at each iteration of the for loop: 

for (var i = 0; i < 5; i++) { 
(function(x) { 
setTimeout(function() { console.log(x); }, x * 1000 ); 
})(i); 
} 

This will log the values of i at the time the setTimeout() function is called, resulting in the output: 

0 
1 
2 
3 
4 

HTML5 Provides a <iframe> tag to display nested webpages. Example: 

   <iframe src =”url of page you want to embed”> 

In HTML5, headers and footers have specific tags. Instead of using a div with an id, let's use a header footer tag. 

<header>  <h1>Monday Times</h1>  </ header >   
<body>.......</body> 
<footer>  <p>Hello World!</p>  </ footer > 

Modals are pop-up windows or dialog boxes that appear on top of the page. Our first step will be to create an HTML DOM structure and then apply CSS3 styles to it.

The HTML structure is shown below:

<div id="modal" class="modal"> 
<div class="modal-content"> 
<span class="close">&times;</span> 
<p>Modal Text..</p> 
</div> 
</div> 

Adding styling to a modal using CSS3.

.modal { 
position: fixed;  
z-index: 1;  
padding-top: 100px;  
left: 0; 
top: 0; 
width: 100%;  
height: 100%;  
overflow: auto;  
background-color: rgb(0,0,0);  
background-color: rgba(0,0,0,0.4); 
} 
.modal-content { 
background-color: #fff; 
margin: auto; 
padding: 15px; 
border: 1px solid #ccc; 
width: 85%; 
} 
.close { 
color: #aaa; 
float: right; 
font-size: 25px; 
font-weight: 700; 
cursor: pointer; 
} 

Once the coding interview is finished, the interviewer starts with the react front end interview questions. Some of the important questions listed below will help you crack your interview.