DEV Community

Yalda Khoshpey
Yalda Khoshpey

Posted on

3 Common Frontend Interview Questions🚀

#react #javascript #interview #frontend

Hey developers! 👋

Today, let's break down three common frontend interview questions. The goal isn't to memorize answers, but to deeply understand the concepts behind these questions.

Let's dive in!

Question 1: JavaScript | Difference between let, const, and var

This classic question tests your understanding of Scope and Hoisting.

Short Answer:

  • var: Has Function Scope, can be redeclared. (Older, less recommended)
  • let: Has Block Scope, cannot be redeclared, but its value can be reassigned.
  • const: Has Block Scope, must be initialized during declaration, and its assignment cannot be changed (though the contents of objects/arrays can be modified).

Detailed Explanation with Code:

// Example with var (Function Scope)
function varExample() {
  if (true) {
    var name = "Ali";
  }
  console.log(name); // "Ali" - because var escapes the if block!
}
varExample();

// Example with let and const (Block Scope)
function letConstExample() {
  if (true) {
    let age = 30;
    const city = "Tehran";
    console.log(age); // 30
    console.log(city); // Tehran
  }
  // console.log(age); // Error! age is not defined here
  // console.log(city); // Error! city is not defined here
}
letConstExample();

// const with objects and arrays
const person = { name: "Sarah" };
person.name = "Mona"; // ✅ Allowed! We're modifying the content, not reassigning the constant.
// person = { name: "Mona" }; // ❌ Error! Cannot reassign the constant variable.

const numbers = [1, 2];
numbers.push(3); // ✅ Allowed
// numbers = [4, 5]; // ❌ Error!
Enter fullscreen mode Exit fullscreen mode

Why this question is asked:
The interviewer wants to gauge your familiarity with modern ES6 concepts,memory management, and error prevention in code.

Question 2: React | Class Components vs. Hooks (like useState)

This question assesses your understanding of React's evolution and the rationale behind introducing Hooks.

Short Answer:
Hooks were introduced in React 16.8 to give functional components the ability to use state and lifecycle features.This led to reduced complexity, better reusability, and improved code readability.

Detailed Explanation with Code:

// Old way: Class Component
class OldCounter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

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

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

// Modern way: Functional Component with useState Hook
import { useState } from 'react';

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

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

Advantages of using Hooks:

· Less and cleaner code: No need for constructor and this binding.
· Reusable logic: You can build your own custom hooks.
· No this confusion: Functional components don't have this.

Question 3: CSS | Explain different position values (relative, absolute, fixed, sticky)

This question tests your understanding of Layout and element positioning.

Short Answer:

· static: Default. Element flows in normal document order.
· relative: Positioned relative to its normal position.
· absolute: Positioned relative to nearest positioned ancestor (not static).
· fixed: Positioned relative to the viewport (stays on screen during scroll).
· sticky: Hybrid of relative and fixed. Acts relative until a scroll threshold, then acts fixed.

Detailed Explanation with Code (HTML/CSS):

<div class="container">
  <div class="box static">Static</div>
  <div class="box relative">Relative (top: 10px)</div>
  <div class="box absolute">Absolute (top: 50px)</div>
  <div class="box fixed">Fixed (bottom: 10px)</div>
  <div class="box sticky">Sticky (top: 0)</div>
</div>
Enter fullscreen mode Exit fullscreen mode 
.container {
  position: relative; /* Becomes the parent for absolute positioning */
  height: 2000px; /* To see fixed and sticky effects */
}

.box {
  padding: 10px;
  margin: 10px;
  border: 1px solid black;
}

.static { position: static; }
.relative { position: relative; top: 10px; left: 20px; }
.absolute { position: absolute; top: 50px; right: 0; }
.fixed { position: fixed; bottom: 10px; right: 10px; }
.sticky { position: sticky; top: 0; }
Enter fullscreen mode Exit fullscreen mode

Why this question is asked:
Because mastering element positioning is essential for building any complex layout.

Conclusion

Learning these fundamental concepts is essential not just for interviews, but for writing clean, maintainable code. Always ask "why" behind the concepts.

Question for you: What's the most interesting interview question you've been asked that taught you something new? Share in the comments! 👇

Top comments (0)