Posted on Aug 12 A large number of beginner and experienced developers have started to encounter and notice a problem with job searching. Indeed, the level of competition in the market has become much higher than it was 2-3 years ago.The best thing to do in the current reality is to keep learning.In this article, I have compiled 52 questions in a "question:answer" format for frontend developers that I have come across during interviews. The questions are mainly geared towards Junior level and partially towards Middle level.P.S. Despite the fact that most of the questions are aimed at the Junior level, by preparing for these questions and thoroughly studying the topics, I was able to secure a job as a Middle Frontend Developer.const bigInt = 1234567890123456789012345678901234567890n;Learn moreThe operator "==" checks for abstract equality, while "===" checks for strict equality. In other words, the "==" operator performs necessary type conversions before comparison, whereas "===" does not perform type conversion. Therefore, if two values are not of the same type, it will return false when using the "===" operator.Learn moreThere are 4 ways to declare a variable:Declaring a variable using the "var" keyword is similar to the first method. Variables declared this way have global or Function scope and lack block scope, which is a disadvantage. "let" and "const" are preferable ways to declare variables. They have block scope, meaning that a variable declared inside, for example, a function, will not be visible outside of that function. "const" variables are immutable, but if it's an Object, you can change its properties, and if it's an array, you can modify and add elements. Learn moreBoth options represent an empty value. If we initialize a variable but don't assign a value to it, it will be assigned a special marker - undefined. Null is assigned manually.Null is a special value that represents "nothing," "empty," or "unknown value." If we need to clear the value of a variable, we set foo = null.Learn moreLearn moreA closure is a function along with all the external variables that it has access to. For example, there is a function that has a nested function which will close over and retain the variables from its parent.Learn moreTemplate literals are enclosed in backticks () and allow for multiline strings. They also allow for embedding expressions within them.Learn moreMap is a collection, a data structure that operates on the principle of key-value pairs, similar to Objects. However, the main difference between Map and Object is that Map allows the use of keys of any type.Set is a type of collection without keys, an array where each value can only appear once. Set stores unique values within itself.Learn moreThe first way is to use the hasOwnProperty function, which is available for every object.The second way is to use the in operator. However, when using the in operator, caution must be exercised as it checks all prototypes in the chain.Learn moreThe first way is static, using dot notation: obj.a.The second way is dynamic, using square brackets: obj['a'].Learn moreLearn moreUsing a constructor function:Using object literal notation:Using a class:Using the create function:A Promise is an object designed to work with asynchronous code. It maintains its own state. Initially, a Promise is in the pending state, then it transitions to the fulfilled state if the asynchronous code is executed successfully, or to the rejected state if an error occurs. A Promise accepts two callback functions: The usage pattern is as follows: Learn moreasync/await is a special syntax for working with Promises. A function declared with the async syntax always returns a Promise. The keyword await makes the JavaScript interpreter wait until the Promise on the right side of await is fulfilled before continuing the execution. It will then return the result, and the code execution will proceed. await cannot be used in regular functions.Learn moreTo check whether an object is an array or not, you can use the Array.isArray() method. It takes an object as input and returns true if the object is an array, and false if it is not an array.The spread operator (...) is used to unpack arrays or objects. It allows you to expand elements that are iterable, such as arrays and strings. Learn moreIf the object does not contain nested objects, for example:In this case, you can use spread operator or Object.assign() method:If the object contains nested objects:In this case, you need to perform a deep copy.A workaround, though slower, is:This method is suitable for objects without prototypes and functions.Alternatively, you can use the lodash library's deepClone() function.A ternary operator is a shorthand notation for an if-else statement. The operator is represented by a question mark and a colon. It is called ternary because it is the only operator that takes three arguments.Condition ? Expression_1 : Expression_2Learn moreDestructuring is a syntax that allows us to unpack arrays and objects into multiple variables.Learn moreDOM stands for Document Object Model. It is a representation of an HTML document as a tree of tags.ExampleEach node in the DOM tree is an object.The basic elements of an HTML document are tags.According to the Document Object Model (DOM), each HTML tag is an object. Nested tags are "children" of their parent element. The text inside a tag is also an object. All these objects are accessible using JavaScript, and we can use them to manipulate the page.Learn moreEvent loop - a mechanism that manages the execution of code. It handles event processing and task execution in the correct order. The main idea of the event loop is that JavaScript runs in a single-threaded environment but can handle asynchronous operations. When an asynchronous operation, such as a server request, completes, it puts the corresponding event into the event queue. The event loop works in a loop, processing these events in the order they arrive. It takes an event from the queue and passes it for execution. If the event contains a callback or a handler, it is invoked, and the code associated with that event is executed. The event loop also handles other tasks, such as timers and microtasks (Promise). It manages the execution order of all these tasks to ensure consistency and prevent the blocking of the main thread of code execution.In short, the event loop in JavaScript manages asynchronous operations by handling events in the queue and executing the corresponding code in the correct order. This allows JavaScript to be responsive and effectively utilize its resources when working with asynchronous operations.I highly recommend watching the video at the link provided, as the topic is important and deserves a separate article.Learn moreEvery object in JavaScript has a property - a prototype. Methods and properties can be added to the prototype. Other objects can be created based on the prototype. The created object automatically inherits the methods and properties of its prototype. If a property is absent in the object, its search will be performed in the prototype.Learn moreThe Optional Chaining operator ?. stops the evaluation and returns undefined if the part after ?. is either undefined or null.Let's consider a user object. Most users have an address user.address, with a street user.address.street, but some users have not provided an address. In such cases, the Optional Chaining operator can help us avoid an error when trying to access the user's street who hasn't specified one in their address.Learn moreShadow DOM is a set of web standards that allows for encapsulating the structure and styles of elements on a web page. It represents a special segment of the DOM that resides inside an element and is separate from the rest of the page. Shadow DOM is used to create components and widgets with isolated and stylized content that does not conflict with the overall structure of the page.Learn moreRecursion is an approach to problem-solving where a function solves a problem by reusing itself within its own function body. In simple terms, it's when a function calls itself.A recursive function consists of:The base case is a necessary condition; otherwise, it will lead to stack overflow due to an infinite loop of function calls.Learn moreFunction Declaration is the traditional way of declaring a function.Function Expression:With Function Declaration, the function is created and assigned to a variable, just like any other value. Essentially, it doesn't matter how the function is defined, as it is a value stored in the variable "foo". Function Declarations, however, are processed before the code block is executed, meaning that they are visible throughout the entire code block. On the other hand, Function Expressions are created only when the execution flow reaches them.Learn moreConstructor functions are regular functions that are used to create objects. However, there are two rules for using them:When a constructor function is created using the new operator, the following happens:Learn moreYou can use Object.keys() to get a list of keys and Object.values() to get a list of values.Learn moreThe most common ones:Learn moreClass inheritance is done using the "extends" keyword followed by the name of the parent class.Learn moreAnd even moreIn JavaScript, microtasks and macrotasks refer to types of tasks that need to be executed in the event loop. Microtasks are tasks that need to be executed within the current event loop before the browser repaints the page. They are usually added to the execution queue using methods such as Promise.then(), process.nextTick() (in Node.js), or MutationObserver. Examples of microtasks include executing promise handlers and DOM mutations. On the other hand, macrotasks are tasks that need to be executed after the current event loop is finished and before changes are rendered on the screen. This includes tasks added to the event queue using setTimeout, setInterval, requestAnimationFrame, as well as handling input events and network requests. Macrotasks are executed after all microtasks in the current event loop have been processed. The difference between microtasks and macrotasks is important because it determines the order of execution and allows for managing the priority of different tasks in JavaScript. Microtasks have a higher priority and are executed before macrotasks, which allows for faster interface updates and prevents blocking the main JavaScript execution thread.Learn moreGenerators produce a sequence of values one by one as needed. Generators work well with objects and make it easy to create data streams.To declare a generator, a special syntax is used - a generator function.next() is the main method of a generator. When called, next() starts executing the code until the nearest yield statement. The value may be absent, in which case it is represented as undefined. When a yield is reached, the function execution is paused, and the corresponding value is returned to the outer code.Learn moreThere are several methods of storing data in a browser:Learn moreLearn moreLearn moreSessionStorage and localStorage allow storing objects in key-value format in the browser.The main differences are:Regular expressions are strings defined by special rules and patterns. They are a powerful tool that allows detecting and working with complex constructions within strings.Lean moreThe first difference between WeakMap and Map is that the keys in WeakMap must be objects, not primitive values.The second difference is in the memory storage of the data structures. The JavaScript engine keeps values in memory as long as they are reachable, meaning they can be used.Usually, object properties, array elements, or other data structures are considered reachable and are kept in memory as long as the data structure exists, even if there are no other references to them.In the case of WeakMap and WeakSet, it works differently. Once an object becomes unreachable, it is removed from the data structure.Learn moreObjects are compared based on references to the memory area. For JavaScript, test1 and test2 objects are different, even though they have the same fields. Objects are only equal if they are the same object.JavaScript allows working with primitive data types - strings, numbers, etc. - as if they were objects. Primitive data types have methods.To make this functionality available, each primitive data type has its own wrapper object: String, Number, Boolean, and Symbol. Thanks to these wrapper objects, primitive data types have different sets of methods, such as toLowerCase() or toUpperCase().Learn moreYou can check which class an object was created from using the instanceof operator, taking inheritance into account.Learn moreLearn moreA pure function is a function that satisfies two conditions:A higher-order function is a function that takes another function as an argument or returns a function as a result.If we want to asynchronously fetch some data from a server using callback functions, it would result in the following:This is called callback hell, as each callback is nested inside another, and each inner callback depends on the parent function.Using Promises, we can rewrite the code above:With Promises, the execution sequence is clear, making the code more readable.Learn moreTo implement it, we can use closure and the apply() method to bind the function to the context.You can use the sort() method and Math.random() for this.We should iterate through every nested array, get the greatest value of each nested array and delete it.Lets create a function reverseLinkedList that takes a linked list as input and returns the reversed version of that list. Approach:In summary, the function reverses the linked list by iterating through each node from the head to the tail, creating a new list node for each value and updating the pointers accordingly.Lets create a function sortList that takes a linked list as input and returns the sorted version of that list. Approach:Preparing for these questions, studying the topics covered, and reviewing relevant resources can improve your chances of successfully passing the interview. This post is part of a series of posts on interview questions.I look forward to your reactions and comments. Good luck in your interview!Templates let you quickly answer FAQs or store snippets for re-use.Amazing JobVery helpful, thank you Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well Confirm For further actions, you may consider blocking this person and/or reporting abuse VyacheslavKonyshev - Jul 10 Kinanee Samson - Aug 2 Syed Muhammad Ali Raza - Jul 14 Saurabh Misra - Jul 14 Once suspended, m_midas will not be able to comment or publish posts until their suspension is removed. Once unsuspended, m_midas will be able to comment and publish posts again. Once unpublished, all posts by m_midas will become hidden and only accessible to themselves. If m_midas is not suspended, they can still re-publish their posts from their dashboard. Note: Once unpublished, this post will become invisible to the public and only accessible to Yan Levin. They can still re-publish the post if they are not suspended. Thanks for keeping DEV Community safe. Here is what you can do to flag m_midas: m_midas consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy. Unflagging m_midas will restore default visibility to their posts. DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey. Built on Forem — the open source software that powers DEV and other inclusive communities.Made with love and Ruby on Rails. DEV Community © 2016 - 2023. We're a place where coders share, stay up-to-date and grow their careers.