Top 25+ Frontend Developer Interview Q&A | Personalized AI Help

Top 20 Frontend Developer Interview Questions & Answers to Ace Your Interview

Q1: What is the Document Object Model (DOM)?

The Document Object Model (DOM) is a programming interface for web documents. It represents the structure of a document as a tree of objects, where each node corresponds to a part of the document (e.g., an element, attribute, or text). The DOM allows scripts to update the content, structure, and style of a document dynamically.

  • Tree Structure: The DOM represents the HTML or XML document as a hierarchical tree.
  • Manipulation: Developers can use JavaScript to manipulate the DOM, adding, removing, or modifying elements and their attributes.
  • Event Handling: The DOM provides a way to handle events such as clicks, form submissions, and keyboard inputs.

Q2: Explain the concept of CSS specificity.

CSS specificity is a set of rules that determines which CSS styles are applied to an element when there are conflicting styles. It is calculated based on the types of selectors used.

  • Specificity is calculated as follows:
    • Inline styles (e.g.,
      ) have the highest specificity.
    • ID selectors (e.g., #id ) are more specific than class selectors.
    • Class selectors (e.g., .class ), attribute selectors (e.g., [type="text"] ), and pseudo-classes (e.g., :hover ) are less specific than ID selectors.
    • Type selectors (e.g., div ) and pseudo-elements (e.g., ::before ) have the lowest specificity.
  • Specificity is calculated as a four-part value (a, b, c, d):
    • a represents the inline styles.
    • b represents the number of ID selectors.
    • c represents the number of class selectors, attributes, and pseudo-classes.
    • d represents the number of type selectors and pseudo-elements.

/* Specificity: 0, 1, 0, 0 */
#header {
  color: blue;
}

/* Specificity: 0, 0, 1, 0 */
.header {
  color: green;
}

/* Specificity: 0, 0, 0, 1 */
header {
  color: red;
}

/* The color of #header will be blue due to higher specificity */
    

Q3: What are the differences between var, let, and const in JavaScript?

In JavaScript, var , let , and const are used to declare variables, but they have different characteristics.

  • var:
    • Function-scoped: Variables declared with var are scoped to the function in which they are declared.
    • Hoisting: Variables declared with var are hoisted to the top of their scope and initialized with undefined .
    • Re-declaration: Variables declared with var can be re-declared within the same scope.
  • let:
    • Block-scoped: Variables declared with let are scoped to the block in which they are declared.
    • Hoisting: Variables declared with let are hoisted but not initialized. Accessing them before declaration results in a ReferenceError .
    • Re-declaration: Variables declared with let cannot be re-declared within the same scope.
  • const:
    • Block-scoped: Variables declared with const are scoped to the block in which they are declared.
    • Hoisting: Variables declared with const are hoisted but not initialized. Accessing them before declaration results in a ReferenceError .
    • Immutability: Variables declared with const must be initialized at the time of declaration and cannot be reassigned. However, objects and arrays declared with const can have their properties or elements modified.

function example() {
  var x = 1;
  let y = 2;
  const z = 3;

  if (true) {
    var x = 10; // Same variable as above
    let y = 20; // Different variable, block-scoped
    const z = 30; // Different variable, block-scoped
    console.log(x, y, z); // 10, 20, 30
  }

  console.log(x, y, z); // 10, 2, 3
}
example();
    

Q4: What is the purpose of the box-sizing property in CSS?

The box-sizing property in CSS defines how the total width and height of an element are calculated. It affects the way padding and borders are included in the element's total width and height.

  • Values:
    • content-box (default): The width and height properties include only the content, not the padding, border, or margin.
    • border-box : The width and height properties include the content, padding, and border, but not the margin.

Using border-box can simplify layout design, as the total width and height of an element will always be consistent with the specified dimensions, regardless of padding and border.


/* Default behavior (content-box) */
div {
  width: 200px;
  padding: 10px;
  border: 5px solid black;
  /* Total width: 200px + 10px * 2 + 5px * 2 = 230px */
}

/* Using border-box */
div.border-box {
  box-sizing: border-box;
  width: 200px;
  padding: 10px;
  border: 5px solid black;
  /* Total width: 200px (includes padding and border) */
}
    

Q5: Explain the concept of event delegation in JavaScript.

Event delegation is a technique in JavaScript where a single event listener is added to a parent element to manage events for its child elements. Instead of adding individual event listeners to each child element, event delegation leverages event bubbling to handle events efficiently.

  • Event Bubbling: When an event occurs on an element, it first runs the handlers on that element, then on its parent, then on its parent's parent, and so on, up to the document root. This is known as event bubbling.
  • Benefits:
    • Performance: Reduces the number of event listeners, improving performance.
    • Dynamic Content: Handles events for dynamically added child elements.




  
    
  • Item 1
  • Item 2
  • Item 3

Request question

Please fill in the form below to submit your question.

Q6: What is the difference between synchronous and asynchronous JavaScript?

In JavaScript, operations can be either synchronous or asynchronous.

  • Synchronous JavaScript:
    • Executes code in a sequential manner.
    • Each operation waits for the previous one to complete before executing.
    • Can cause blocking behavior, where long-running tasks prevent subsequent code from running.

console.log('Start');
for (let i = 0; i < 1000000000; i++) {} // Long-running task
console.log('End');
    
  • Asynchronous JavaScript:
    • Allows tasks to run independently of the main program flow.
    • Uses callbacks, promises, or async/await to handle tasks that may take time, such as network requests or file I/O.
    • Improves performance by preventing blocking.

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

console.log('Start');
new Promise((resolve) => {
  setTimeout(() => {
    resolve('Promise resolved');
  }, 1000);
}).then((message) => {
  console.log(message);
});
console.log('End');
    

Q7: Explain the concept of closures in JavaScript.

A closure in JavaScript is a function that has access to its own scope, the scope of the outer function, and the global scope. Closures are created when a function is defined within another function, allowing the inner function to access the variables of the outer function even after the outer function has finished executing.

  • Scope Chain: The inner function has access to its own variables, the outer function's variables, and global variables.
  • Persistence: The inner function "remembers" the environment in which it was created.

function outerFunction(outerVariable) {
  return function innerFunction(innerVariable) {
    console.log('Outer Variable:', outerVariable);
    console.log('Inner Variable:', innerVariable);
  };
}

const newFunction = outerFunction('outside');
newFunction('inside');
    

In the example above, innerFunction is a closure that has access to outerVariable even after outerFunction has returned.

Q8: What are JavaScript Promises, and how do they work?

A Promise in JavaScript is an object that represents the eventual completion (or failure) of an asynchronous operation and its resulting value. Promises provide a way to handle asynchronous operations more efficiently and avoid callback hell.

  • States of a Promise:
    • Pending: The initial state; neither fulfilled nor rejected.
    • Fulfilled: The operation completed successfully.
    • Rejected: The operation failed.
  • Methods:
    • then() : Attaches callbacks for the fulfilled or rejected states.
    • catch() : Attaches a callback for only the rejected state.
    • finally() : Attaches a callback that executes regardless of the promise's outcome.

const promise = new Promise((resolve, reject) => {
  const success = true;
  if (success) {
    resolve('Operation succeeded');
  } else {
    reject('Operation failed');
  }
});

promise
  .then((message) => {
    console.log(message); // 'Operation succeeded'
  })
  .catch((error) => {
    console.error(error);
  })
  .finally(() => {
    console.log('Operation complete');
  });
    

Q9: What is the purpose of the async and await keywords in JavaScript?

The async and await keywords in JavaScript provide a way to handle asynchronous operations more efficiently, making the code easier to read and write.

  • async : Declares an asynchronous function. When called, an async function returns a Promise.
  • await : Pauses the execution of an async function and waits for the resolution of a Promise. It can only be used inside async functions.
  • Benefits:
    • Simplifies the handling of Promises.
    • Makes asynchronous code look and behave more like synchronous code.

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

fetchData();
    

In the example above, fetchData is an async function that uses await to pause execution until the Promise returned by fetch resolves.

Q10: What is the Virtual DOM, and how does it differ from the real DOM?

The Virtual DOM is an in-memory representation of the real DOM elements generated by a library like React. It is a lightweight copy of the real DOM and helps optimize rendering performance.

  • Virtual DOM: A JavaScript object that represents the real DOM structure. Changes are first applied to the Virtual DOM.
  • Real DOM: The actual DOM rendered in the browser. Direct manipulation of the real DOM is slower and more resource-intensive.
  • How it Works:
    • The Virtual DOM is updated when the state of a component changes.
    • A diffing algorithm compares the new Virtual DOM with the previous version to identify changes.
    • Only the necessary updates are applied to the real DOM, minimizing reflows and repaints.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      

{this.state.count}

); } }

In this example, updating the state ( this.setState ) triggers a re-render of the Virtual DOM. React's diffing algorithm then updates only the necessary parts of the real DOM.

Request question

Please fill in the form below to submit your question.

Q11: Explain the concept of CSS Flexbox and its key properties.

CSS Flexbox (Flexible Box Layout) is a layout model designed to provide a more efficient way to distribute space and align items within a container, even when their size is unknown or dynamic. It simplifies complex layouts and offers a flexible and responsive design.

  • Key Properties:
    • Container Properties:
      • display: flex; : Defines a flex container and enables flexbox for its children.
      • flex-direction : Specifies the direction of the flex items ( row , row-reverse , column , column-reverse ).
      • justify-content : Aligns flex items along the main axis ( flex-start , flex-end , center , space-between , space-around , space-evenly ).
      • align-items : Aligns flex items along the cross axis ( flex-start , flex-end , center , baseline , stretch ).
      • flex-wrap : Controls whether flex items should wrap or not ( nowrap , wrap , wrap-reverse ).
    • Item Properties:
      • order : Controls the order of flex items (default is 0).
      • flex-grow : Defines the ability of a flex item to grow relative to the rest.
      • flex-shrink : Defines the ability of a flex item to shrink relative to the rest.
      • flex-basis : Specifies the initial size of a flex item before space distribution.
      • align-self : Overrides the align-items value for a specific flex item.

Q12: What are CSS Grid Layout and its advantages over Flexbox?

CSS Grid Layout is a two-dimensional layout system for the web. It allows you to create complex layouts on a grid structure with rows and columns. It provides more control over both horizontal and vertical alignment of items, making it more powerful for creating complex and responsive layouts.

  • Advantages over Flexbox:
    • Two-Dimensional: While Flexbox is one-dimensional (either row or column), CSS Grid handles both rows and columns simultaneously.
    • Explicit Placement: Grid provides more control over the placement of items within the layout using grid lines and grid areas.
    • Overlapping Items: Grid allows items to overlap each other, providing more design possibilities.
    • Alignment: Grid provides more options for aligning items along both axes, including aligning tracks and cells.
  • Key Properties:
    • Container Properties:
      • display: grid; : Defines a grid container and enables grid layout for its children.
      • grid-template-columns : Defines the columns of the grid.
      • grid-template-rows : Defines the rows of the grid.
      • grid-gap : Specifies the gap between rows and columns.
      • grid-template-areas : Allows you to define named grid areas for layout.
    • Item Properties:
      • grid-column : Specifies the start and end positions of a grid item along the column axis.
      • grid-row : Specifies the start and end positions of a grid item along the row axis.
      • grid-area : Allows an item to be placed in a named grid area.

Q13: What are higher-order components (HOCs) in React?

Higher-Order Components (HOCs) in React are advanced techniques for reusing component logic. An HOC is a function that takes a component and returns a new component with enhanced behavior.

  • Reusability: HOCs help in reusing component logic across different parts of an application.
  • Abstraction: HOCs abstract away common functionality, making components more focused on their core responsibilities.
  • Composition: HOCs can be composed to enhance components with multiple behaviors.

import React from 'react';

// Higher-Order Component that adds logging
function withLogging(WrappedComponent) {
  return class extends React.Component {
    componentDidMount() {
      console.log(`Component ${WrappedComponent.name} mounted`);
    }

    render() {
      return ;
    }
  };
}

// Regular component
class MyComponent extends React.Component {
  render() {
    return 
Hello, {this.props.name}
; } } // Enhanced component with logging const MyComponentWithLogging = withLogging(MyComponent); // Usage function App() { return ; } export default App;

In this example, withLogging is an HOC that enhances MyComponent by adding logging functionality.

Q14: What is the difference between props and state in React?

In React, props and state are both used to manage data within components, but they serve different purposes.

  • props (Properties):
    • Read-Only: Props are immutable and cannot be modified by the component that receives them.
    • Parent to Child: Props are passed from parent components to child components.
    • Stateless: Props are used to pass data and event handlers to child components, making them purely presentational.

function ChildComponent(props) {
  return 
{props.message}
; } function ParentComponent() { return ; }
  • state:
    • Mutable: State is managed within the component and can be modified using setState .
    • Component-Specific: State is specific to the component and is not passed to child components.
    • Dynamic: State is used to manage dynamic data that can change over time, such as form inputs or user interactions.

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      

Count: {this.state.count}

); } }

In this example, Counter uses state to manage the count value and update it when the button is clicked.

Q15: What are React hooks, and why are they used?

React Hooks are functions that let you use state and other React features in functional components. They allow you to manage component state, handle side effects, and reuse logic without writing class components.

  • Key Hooks:
    • useState : Manages state in functional components.
    • useEffect : Handles side effects like data fetching, subscriptions, and manual DOM manipulations.
    • useContext : Accesses context values without using the Consumer component.
    • useReducer : Manages state with a reducer function, useful for complex state logic.
  • Why Use Hooks:
    • Simpler Components: Hooks allow you to write stateful logic in functional components, making the code easier to understand and maintain.
    • Reusability: Hooks enable the reuse of stateful logic across multiple components.
    • Cleaner Code: Hooks reduce the need for lifecycle methods, leading to cleaner and more readable code.

import React, { useState, useEffect } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);

  return (
    

Count: {count}

); } export default Counter;

In this example, useState is used to manage the count state, and useEffect is used to update the document title whenever the count changes.

Request question

Please fill in the form below to submit your question.

Q16: What are the key differences between client-side rendering and server-side rendering?

Client-side rendering (CSR) and server-side rendering (SSR) are two approaches for rendering web pages, each with its own advantages and use cases.

  • Client-Side Rendering (CSR):
    • Rendering: The initial HTML is a minimal shell with JavaScript, which fetches and renders content on the client side.
    • Performance: Faster initial load for the shell, but slower time to interactive as JavaScript needs to load and execute.
    • SEO: Less SEO-friendly out of the box, as search engines might have difficulty indexing content that is rendered on the client side.
    • Interactivity: Richer and more dynamic user experiences as rendering happens in the browser.
  • Server-Side Rendering (SSR):
    • Rendering: The server generates the full HTML for a page, which is sent to the client.
    • Performance: Slower initial load but faster time to interactive since the HTML is already rendered.
    • SEO: More SEO-friendly as search engines can index the pre-rendered HTML content.
    • Interactivity: Initial load might be slower, but subsequent interactions can be faster, and the content is immediately visible.




  
    CSR Example
  
  
    

In CSR, bundle.js contains JavaScript that will render the content inside the #app div.


import React from 'react';

// Example with Next.js (a React framework that supports SSR):
// pages/index.js
function HomePage({ data }) {
  return 
{data}
; } export async function getServerSideProps() { // Fetch data from an API const res = await fetch('https://api.example.com/data'); const data = await res.json(); return { props: { data }, // Will be passed to the page component as props }; } export default HomePage;

In SSR, the HTML is generated on the server and sent to the client, ensuring the content is available immediately.

Q17: What is JSX in React, and how is it different from HTML?

JSX (JavaScript XML) is a syntax extension for JavaScript used in React to describe what the UI should look like. It allows developers to write HTML-like code within JavaScript.

  • Key Differences Between JSX and HTML:
    • Syntax: JSX syntax is similar to HTML but follows JavaScript rules. For example, attributes are camelCase (e.g., className instead of class ).
    • Embedding JavaScript: JSX allows you to embed JavaScript expressions within curly braces ( {} ), making it easy to integrate dynamic content.
    • React Components: JSX can be used to render React components, which are not possible in plain HTML.

// JSX
const element = 

Hello, {name}!

; // HTML

Hello, John!

Usage in React: JSX is transpiled by tools like Babel into JavaScript code that React can understand. For example, the JSX above is transpiled into:


const element = React.createElement('h1', null, `Hello, ${name}!`);
    

Q18: Explain the concept of "lifting state up" in React.

"Lifting state up" in React refers to moving state from child components to a common parent component. This is done to share state between multiple child components and ensure they have access to the same state data.

  • Why Lift State Up?:
    • State Sharing: When multiple components need to access or update the same state, lifting the state to their common ancestor allows them to share it.
    • Single Source of Truth: Ensures that there is a single source of truth for the state, preventing inconsistencies and making the code easier to debug.

// ParentComponent.js
import React, { useState } from 'react';
import ChildComponentA from './ChildComponentA';
import ChildComponentB from './ChildComponentB';

function ParentComponent() {
  const [sharedState, setSharedState] = useState('');

  return (
    
); } export default ParentComponent; // ChildComponentA.js function ChildComponentA({ sharedState, setSharedState }) { return ( setSharedState(e.target.value)} /> ); } // ChildComponentB.js function ChildComponentB({ sharedState }) { return

{sharedState}

; }

In this example, the state is lifted to ParentComponent and passed down to ChildComponentA and ChildComponentB .

Q19: What are the different lifecycle methods in React class components?

React class components have several lifecycle methods that allow developers to run code at specific points during a component's life cycle. These methods are categorized into three phases: mounting, updating, and unmounting.

  • Mounting:
    • constructor: Called before the component is mounted. Used to initialize state and bind event handlers.
    • static getDerivedStateFromProps: Called right before rendering. Used to update state based on props.
    • render: Renders the component's UI. Pure function without side effects.
    • componentDidMount: Called after the component is mounted. Used for side effects like fetching data or setting up subscriptions.
  • Updating:
    • static getDerivedStateFromProps: Called right before rendering due to state or prop changes.
    • shouldComponentUpdate: Determines whether the component should re-render. Used for performance optimization.
    • render: Renders the component's UI.
    • getSnapshotBeforeUpdate: Called right before the DOM updates. Used to capture some information from the DOM (e.g., scroll position).
    • componentDidUpdate: Called after the component updates. Used for side effects that need to occur after the DOM updates.
  • Unmounting:
    • componentWillUnmount: Called right before the component unmounts. Used for cleanup, such as cancelling network requests or removing event listeners.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    // Update state based on props
    if (nextProps.value !== prevState.value) {
      return { count: nextProps.value };
    }
    return null;
  }

  shouldComponentUpdate(nextProps, nextState) {
    // Optimize performance
    return nextState.count !== this.state.count;
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    // Capture some information from the DOM
    return null;
  }

  componentDidMount() {
    // Fetch data or set up subscriptions
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    // Handle side effects
  }

  componentWillUnmount() {
    // Clean up resources
  }

  render() {
    return 
{this.state.count}
; } }

Q20: What are React Fragments, and why are they used?

React Fragments are a way to group multiple elements without adding extra nodes to the DOM. They allow you to return multiple elements from a component's render method without needing a wrapper element like a div .

  • Benefits of React Fragments:
    • Avoid Unnecessary DOM Nodes: Prevents the addition of unnecessary DOM elements, which can affect CSS styling and performance.
    • Cleaner Markup: Keeps the markup clean and semantic without extra wrapper elements.
  • Usage:
    • : The full syntax for using a fragment.
    • Short Syntax: You can use the shorthand <>... instead of ... .

// Using React.Fragment
function List() {
  return (
    
      
  • Item 1
  • Item 2
  • Item 3
  • ); } // Using short syntax function List() { return ( <>
  • Item 1
  • Item 2
  • Item 3
  • ); }

    In this example, List returns multiple

  • elements without wrapping them in an additional element.

    Request question

    Please fill in the form below to submit your question.

    Request question

    Please fill in the form below to submit your question.

    Hands-On Frontend Interview Questions: 10 Practical Tasks

    Request question

    Please fill in the form below to submit your question.

    Q1: The following code aims to toggle a CSS class on a button when it is clicked, but it doesn't work as expected. Identify and fix the error.
    (Basic)
    
    
    
    
    
      
    
    
      
    
      
    
    
    

    The issue in the code is that the class name "active" is being added and removed correctly, but the styling isn't applied due to incorrect usage of the classList property.

    Corrected code:

    
    
    
    
    
      
    
    
      
    
      
    
    
    

    The provided code is correct and should work as intended. If there's no observed change, it might be due to caching issues. Ensure the browser cache is cleared or try a different browser.

    Q2: The following code calculates the sum of an array of numbers. Optimize it for better performance.
    (Basic)
    
    function sumArray(arr) {
      let sum = 0;
      for (let i = 0; i < arr.length; i++) {
        sum += arr[i];
      }
      return sum;
    }
    
    const numbers = [1, 2, 3, 4, 5];
    console.log(sumArray(numbers)); // Output: 15
    

    The provided code is already efficient for small arrays, but we can use the reduce method for a more concise solution.

    
    function sumArray(arr) {
      return arr.reduce((sum, current) => sum + current, 0);
    }
    
    const numbers = [1, 2, 3, 4, 5];
    console.log(sumArray(numbers)); // Output: 15
    
    Q3: What will be the output of the following code? Explain why.
    (Intermediate)
    console.log(0.1 + 0.2);
    console.log(0.1 + 0.2 === 0.3);
    

    The output will be:

    
    0.30000000000000004
    false
    

    Explanation: JavaScript uses floating-point arithmetic for numbers, which can lead to precision errors. The sum of 0.1 and 0.2 is 0.30000000000000004 due to the way floating-point numbers are represented in binary. Therefore, 0.1 + 0.2 === 0.3 evaluates to false.

    Q4: Write a function that takes a string and returns a new string with the first letter of each word capitalized.
    (Intermediate)
    function capitalizeWords(str) {
    // Your code here
    }
    console.log(capitalizeWords('hello world')); // Output: 'Hello World'

    function capitalizeWords(str) {
      return str.split(' ').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ');
    }
    
    console.log(capitalizeWords('hello world')); // Output: 'Hello World'
    
    Q5: The following code finds the intersection of two arrays. Optimize it for better performance when dealing with large arrays.
    (Intermediate)
    function intersection(arr1, arr2) {
      return arr1.filter(value => arr2.includes(value));
    }
    
    const array1 = [1, 2, 3, 4, 5];
    const array2 = [4, 5, 6, 7, 8];
    console.log(intersection(array1, array2)); // Output: [4, 5]

    To improve performance, we can use a Set to reduce the time complexity of the lookup operation from O(n) to O(1).

    
    function intersection(arr1, arr2) {
      const set2 = new Set(arr2);
      return arr1.filter(value => set2.has(value));
    }
    
    const array1 = [1, 2, 3, 4, 5];
    const array2 = [4, 5, 6, 7, 8];
    console.log(intersection(array1, array2)); // Output: [4, 5]
    
    Q6: The following code aims to fetch data from an API and log it to the console, but it doesn't work as expected. Identify and fix the error.
    (Intermediate)
    async function fetchData() {
      const response = await fetch('https://api.example.com/data');
      const data = await response.json();
      console.log(data);
    }
    
    fetchData();
    

    The provided code is correct. If there's an error, it might be due to network issues or an incorrect API endpoint. For debugging, add error handling:

    async function fetchData() {
      try {
        const response = await fetch('https://api.example.com/data');
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        const data = await response.json();
        console.log(data);
      } catch (error) {
        console.error('Fetch error:', error);
      }
    }
    
    fetchData();
    
    Q7: Write a function that flattens a nested array of any depth.
    (Advanced)
    
    function flattenArray(arr) {
    // Your code here
    }
    console.log(flattenArray([1, [2, [3, [4]], 5]])); // Output: [1, 2, 3, 4, 5]
    

    
    function flattenArray(arr) {
      return arr.reduce((flat, toFlatten) => {
        return flat.concat(Array.isArray(toFlatten) ? flattenArray(toFlatten) : toFlatten);
      }, []);
    }
    
    console.log(flattenArray([1, [2, [3, [4]], 5]])); // Output: [1, 2, 3, 4, 5]
    
    Q8: What will be the output of the following code? Explain why.
    (Advanced)
    let a = 10;
    let b = a;
    a = 20;
    
    console.log(a, b);
    
    const obj1 = { name: 'Alice' };
    const obj2 = obj1;
    obj1.name = 'Bob';
    
    console.log(obj1.name, obj2.name);
    

    The output will be:

    
    20 10
    Bob Bob
    

    Explanation:

    • For primitive types (like numbers), the assignment let b = a creates a copy of the value. Changing a to 20 does not affect b , so b remains 10.
    • For objects, the assignment const obj2 = obj1 creates a reference to the same object in memory. Changing the name property of obj1 also affects obj2 , since both variables reference the same object.
    Q9: The following code concatenates all strings in an array. Optimize it for better performance when dealing with large arrays.
    (Advanced)
    function concatenateStrings(arr) {
      let result = '';
      for (let i = 0; i < arr.length; i++) {
        result += arr[i];
      }
      return result;
    }
    
    const strings = ['Hello', ' ', 'World', '!'];
    console.log(concatenateStrings(strings)); // Output: 'Hello World!'
    

    The provided code has a time complexity of O(n^2) due to string concatenation in a loop. Using join improves performance to O(n).

    function concatenateStrings(arr) {
      return arr.join('');
    }
    
    const strings = ['Hello', ' ', 'World', '!'];
    console.log(concatenateStrings(strings)); // Output: 'Hello World!'
    
    Q10: Write a function that finds the longest substring without repeating characters in a given string.
    (Advanced)
    
    function longestUniqueSubstring(s) {
    // Your code here
    }
    console.log(longestUniqueSubstring('abcabcbb')); // Output: 'abc'
    
    function longestUniqueSubstring(s) {
      let longest = '';
      let current = '';
      for (let char of s) {
        if (!current.includes(char)) {
          current += char;
          if (current.length > longest.length) {
            longest = current;
          }
        } else {
          current = current.slice(current.indexOf(char) + 1) + char;
        }
      }
      return longest;
    }
    
    console.log(longestUniqueSubstring('abcabcbb')); // Output: 'abc'
    

    Elevate Your Frontend Projects – Discover Workik AI Today!

    Join developers who are using Workik’s AI assistance everyday for programming

    Sign Up Now

    Overview of Frontend

    What is Frontend Development?

    What is the history and latest trends in Frontend Development?

    What are some of the popular frameworks and libraries associated with Frontend Development?

    • React: A JavaScript library for building user interfaces.
    • Angular: A platform for building mobile and desktop web applications.
    • Vue.js: A progressive framework for building user interfaces.
    • Svelte: A compiler that generates minimal and optimized JavaScript code.
    • Bootstrap: A front-end framework for developing responsive websites.

    What are the use cases of Frontend Development?

    • Web Applications: Creating dynamic and responsive web applications.
    • Mobile Applications: Building mobile apps using frameworks like React Native.
    • E-commerce Sites: Developing interactive and user-friendly e-commerce platforms.
    • Content Management Systems: Designing user interfaces for CMS platforms.
    • Progressive Web Apps (PWAs): Developing web applications that offer a native app-like experience.

    What are some of the tech roles associated with expertise in Frontend Development?

    • Frontend Developer: Specializes in the development of user-facing components.
    • UI/UX Designer: Focuses on the design and usability of user interfaces.
    • Full-Stack Developer: Works on both front-end and back-end development.
    • Web Developer: Builds and maintains websites.
    • Mobile Developer: Develops mobile applications using front-end technologies.

    What pay package can be expected with experience in Frontend Development?


    Source: Built In as of 2024

    • Junior Frontend Developer: Typically earns between $60,000 and $80,000 per year.
    • Mid-Level Frontend Developer: Generally earns from $80,000 to $110,000 per year.
    • Senior Frontend Developer: Often earns between $110,000 and $150,000 per year.
    • Full-Stack Developer with Frontend expertise: Generally earns between $90,000 and $130,000 per year.
    • UI/UX Designer with Frontend expertise: Typically earns between $70,000 and $100,000 per year.