“Top Frontend Interview Questions : (Part 1) — Boost Your Knowledge and Ace Your Next Job Interview!”

Hey there! Are you excited about your upcoming job interview in the field of frontend development? and so am I! And I’ve got some exciting news for you — I’m also preparing for interviews, and I’ll be sharing all the interview questions I learn each day with you! This way, we can both learn together and be better prepared for our interviews.

Now, I know that preparing for interviews can be a bit daunting, but don’t worry — we’ll make it easy. We’ll break down each question into simple terms that anyone can understand, and we’ll have a blast doing it. So what are we waiting for, let’s get started!

1. What are the Semantic elements in HTML : Semantic elements in HTML are simply tags that have meaningful names which tells about what type of content it stores. For example header, footer, table, nav, … etc. HTML5 introduces many semantic elements which make the code easier to write and understand for the developer as well as instructs the browser on how to treat them.
2. Difference between position relative and position absolute : Relative Position : For relative-positioned elements, the origin is their original position in the normal flow of the document. If you apply top: 10px to it, it will move 10px down from it's original position, not affecting the normal flow of the document. Absolute Position : However, for absolute-positioned elements, the origin is it’s first parent which has a relative,absolute,or fixed position. If you apply top: 10px to it, it will move 10px down from it's parent's top. So it goes out of the normal document flow, affecting the other elements' location. Fixed Position : position: fixed; property applied to an element will cause it to always stay in the same place even if the page is scrolled. To position the element we use top, right, bottom, left properties.

relative vs absolute positioning

1. What is flexbox : CSS Flexbox is a one dimentional CSS layout module that is used to arrange and organize items on web pages in one direction, i.e., horizontally and vertically (row or column) and control how they stretch, shrink, or wrap. The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.\
2. What is Box-model in CSS : In CSS, the term “box model” is used when talking about design and layout. The CSS box model is essentially a box that wraps around every HTML element. It consists of : margins, borders, padding, and the actual content. The content is what’s inside the box, like text or an image. The padding is the space between the content and the border. The border is the line that surrounds the box, and the margin is the space between the border and other elements on the page. CSS Box Model CSS Box Model
3. What is Event Loop : The Event Loop is a key concept in JavaScript that helps with handling asynchronous code. In simple terms, it’s a loop that constantly checks if any code needs to be executed, and if so, it executes that code. Here’s how it works: when you run a piece of code that takes some time to complete, like fetching data from a server or waiting for a user’s input, JavaScript doesn’t just stop and wait for that code to finish. Instead, it moves on to the next line of code, and checks back later to see if the previous code has finished executing. This checking process is done by the Event Loop. It constantly checks the queue of tasks that need to be executed, and when it finds one, it puts it in the Call Stack, which is a data structure that keeps track of all the code being executed. The Call Stack then executes that code, and once it’s done, it removes it from the stack and moves on to the next task. In summary, the Event Loop is what allows JavaScript to handle asynchronous code by constantly checking for tasks that need to be executed, and executing them in the right order.

Now, within the event loop, there are two types of tasks — microtasks and macrotasks. Microtasks are small, high-priority tasks that need to be executed immediately. Examples of microtasks include promise callbacks, mutation observers, and queueMicrotask(). While macrotasks are larger, lower-priority tasks that can be executed later. These tasks include things like setTimeout(), setInterval(), and requestAnimationFrame(). Understanding the difference between these two types of tasks is important for writing efficient, performant JavaScript code.

1. What is DOM : The Document Object Model, or DOM for short, is like a tree structure that represents the content of a webpage in code. This structure includes all the elements, like headings and paragraphs, and allows developers to access and modify them using JavaScript. The DOM helps to create dynamic and interactive webpages without having to reload the entire page. Think of it as a way for developers to talk to a webpage and make changes to it in real-time.
2. What is Hoisting in JavaScript : Hoisting is a concept which enables us to extract values of variables and functions even before initialising/assigning value without getting error and this is happening due to the 1st phase (memory creation phase) of the Execution Context. The execution context gets created in two phase, so even before code execution, memory is created so in case of variable, it will be initialized as undefined while in case of function the whole function code is placed in the memory.
3. What is Closures : Function bundled along with it’s lexical scope is closure. JavaScript has a lexical scope environment. If a function needs to access a variable, it first goes to its local memory. When it does not find it there, it goes to the memory of its lexical parent. See Below code, Over here function y along with its lexical scope i.e. (function x) would be called a closure. A closure is a function that has access to its outer function scope even after the function has returned. Meaning, A closure can remember and access variables and arguments reference of its outer function even after the function has returned. See Below code, Over here function y along with its lexical scope i.e. (function x) would be called a closure. function x() { var a = 7; function y() { console.log(a); } return y; } var z = x(); console.log(z); // value of z is entire code of function y. In above code, When y is returned, not only is the function returned but the entire closure (fun y + its lexical scope) is returned and put inside z. So when z is used somewhere else in program, it still remembers var a inside x().
4. What is Callback Hell : Callback Hell is a situation that can occur in JavaScript programming when there are too many nested callbacks. It can happen when you have to execute multiple asynchronous functions one after another and each function depends on the result of the previous function. To avoid Callback Hell, we can use promises, async/await, or other techniques to make the code more readable and manageable.
5. Difference between map, filter and reduce : Map, filter & reducer are Higher Order Functions. Map: The map function takes an array and creates a new array with each element transformed based on a function provided. For example, if you had an array of numbers, you could use map to create a new array with each number multiplied by 2. Filter: The filter function takes an array and creates a new array with only the elements that pass a test based on a function provided. For example, if you had an array of numbers, you could use filter to create a new array with only the even numbers. Reduce: The reduce function takes an array and returns a single value by performing a specified operation on each element of the array. For example, if you had an array of numbers, you could use reduce to find the sum of all the numbers in the array.