Interview Question series Frontend Developer Role

What is the difference between position: relative and position: absolute?

2 points compared & contrasted

i. Positioned relative to: Relative positioned element is positioned relative to its normal position. Absolute is relative to the first parent element that has a position other than static. In the case when there is no positioned parent element, it will be positioned related directly to the HTML element (the page itself).

ii. Effect on other elements: Even if you don’t set a z-index value, a relatively positioned element will now appear on top of any other statically positioned element. You can’t fight it by setting a higher z-index value on a statically positioned element. An element with an absolute type of positioning is not affected by other elements and it doesn’t affect other elements.
Difference between useCallback & useMemo

Intro line
useCallback and useMemo are both hooks in React used to optimize performance by reducing unnecessary re-renders through memoization ~~values and functions~~, but they serve different purposes.

3 points compared & contrasted
i. What they memoize: - useCallback is used to memoize functions, so that they are not recreated every time a component re-renders - useMemo is used to memoize values so that they are not recomputed every time a component re-renders.

ii. Usage useCallback - Arguments: takes two arguments, a function and an array of dependencies - Returns: returns a memoized version of the function that only changes if one of its dependencies changes useMemo - Arguments: takes two arguments, a function and an array of dependencies - Returns: returns a memoized value that only changes if one of its dependencies changes.
iii. Practical use case - useCallback: This can be useful for optimizing performance in components that pass functions down to child components as props - useMemo: This can be useful for optimizing performance in components that perform expensive computations or data transformations.

How you can pass data from the child component to the parent component?

How to do this?
i. Create a callback method in the parent component. This method will get the data from the Child to Parent.

ii. The callback method in the Parent will be sent to the Child component as a prop.

iii. The Child can now call the Parent's callback passed as props with the data to share as its argument.

 import {useState} from 'react';

 function Child({handleClick}) {
   return (
     <div>
       <button onClick={event => handleClick(100)}>Click</button>
     </div>
   );
 }

 export default function Parent() {
   const [count, setCount] = useState(0);

   const handleClick = num => {
     // 👇️ take the parameter passed from the Child component
     setCount(current => current + num);

     console.log('argument from Child: ', num);
   };

   return (
     <div>
       <Child handleClick={handleClick} />

       <h2>Count: {count}</h2>
     </div>
   );
 }

What are Event Loops?

Why is it needed?

The event loop is needed to facilitate a cyclic system for running asynchronous operations in JavaScript.
What is it?
An event loop in JavaScript is a mechanism through which the ‘calls waiting for execution’ in the callback queue/job queue can be put on the call stack. For any event from the callback queue/job queue to come to the call stack, the call stack will have to be empty.
How is it used?
The Event Loop constantly checks whether or not the call stack is empty. If it is empty, new functions are added from the event queue. If it is not, then the current function call is processed.
What is the difference between functional and class based components?

Intro line:
Both functional components and class based components serve the purpose of rendering UI elements, they have some differences in terms of syntax, features, and behavior.

3 points of comparison:
Syntax:
Functional components: are defined as JavaScript functions that accept props as input and return JSX elements as output.
Class-based components: are defined as JavaScript classes that extend the React.Component class and have a render() method that returns JSX elements.
Features:
Functional components: do not have state or lifecycle methods, which means that they are stateless and cannot manage their own state.
Class-based components: have state and lifecycle methods, which means that they can manage their own state and respond to changes in the component or the props.
Efficient:
Functional components: are faster and more efficient than class-based components because they are just functions and do not have the overhead of a class instance.
Class-based components: are slower and less efficient than functional components because they have to create and manage a class instance for each component.
Difference between var, let and const (re-declaration/reassignment, scope)

Intro line
One of the key concepts in JavaScript is variable declarations, which store values in a program. In JavaScript, there are three main ways to declare a variable: "var", "let", and "const".
3 points compared & contrasted

i. Scope: "var" variables have a function-level scope, while "let" and "const" variables have block-level scope.

ii. Reassignable: Variables declared with "var" and "let" can be reassigned, while "const" variables cannot be reassigned.

iii. Hoisting: Variables declared with "var" are hoisted, meaning they can be accessed before they are declared, while "let" and "const" variables cannot.

What are the different types of variables (primitive & non-primitive)?

Intro line

Every Variable has a data type that tells what kind of data is being stored in a variable. There are two types of data types in JavaScript. Primitive data types Non-primitive data types
3 points compared & contrasted

Mutability: The fundamental difference between primitives and non-primitive is that primitives are immutable and non-primitives are mutable. Mutable values are those which can be modified after creation. Immutable values are those which cannot be modified after creation.

Comparison: Primitive is compared by value. Two values are strictly equal if they have the same value. Objects are not compared by value, they are being compared by reference.

Data-types: Primitive:- (String,Boolean,Number,Null,Undefined) Non-Primitive:- Object (array, functions) also called object references.

Interview Question series Frontend Developer Role

What is the difference between position: relative and position: absolute?