JavaScript is one of the building blocks of the web, it’s an open-source programming language and It’s widely used for creating interactive web applications, from simple websites to complex web services.

In this guide to help you prepare for your next interview, we've compiled a list of 50+ JavaScript interview questions and answers.

JavaScript is a lightweight, interpreted programming language used primarily for adding interactivity to web pages e.g. clicking on a button and seeing a pop up all is the work of JS.

There’s a lot more in JavaScript and it opens the door to being a frontend and backend developer.

2. What are the different data types available in JavaScript?

For variables that are only declared and not defined or initialized,

allows you to work with arbitrarily large integers.

3. Explain the concept of variables in JavaScript. What are var, let, and const?

s used for variables that shouldn’t change.

4. How do you create a function in JavaScript? Provide an example.

5. What is the difference between == and ===?

 checks for value equality with type coercion, 

 checks for both value and type equality.

6. What are the different types of operators in JavaScript?

There are different arithmetic operators including:

Arithmetic operators are used to perform mathematical operations on numbers.

Comparison operators are used to compare two values and return a boolean result.

Logical operators are used to perform logical operations, typically with boolean values.

 Assignment operators are used to assign values to variables.

The conditional (ternary) operator assigns a value to a variable based on a condition.

7. What is the difference between null and undefined?

 is an assignment value indicating no value, while undefined means a variable has been declared but not assigned a value.

Explain the concept of scope in JavaScript.

Scope determines the visibility of variables. JavaScript has

What are template literals in JavaScript and how are they used?

Template literals allow embedding expressions within string literals using backticks.

10. What are arrow functions, and how do they differ from regular functions?

Arrow functions are a shorthand for writing functions and do not have their own this context.

11. What is an object in JavaScript and how do you create one?

An object is a collection of properties, where a property is an association between a name (or key) and a value. You can create an object using object literal syntax or the new 

12. Explain the concept of prototypes in JavaScript.

Every JavaScript object has a prototype. A prototype is also an object. All JavaScript objects inherit their properties and methods from their prototype.

13. What is inheritance in JavaScript? How do you implement it?

Inheritance is a feature that allows one class to inherit the properties and methods of another class. In JavaScript, you can implement inheritance using prototypes or the class syntax.

14. What are classes in JavaScript? How do you define a class?

Classes are templates for creating objects.

15. What is the difference between a constructor function and a class?

Constructor functions are the old way of creating objects, while classes are syntactic sugar for constructor functions.

16. Explain the concept of method overriding in JavaScript.

Method overriding occurs when a subclass provides a specific implementation of a method that is already defined in its superclass. This allows the subclass to provide a specific behavior while reusing the method name.

17. What are getters and setters in JavaScript?

Getters and setters are special methods that allow you to get and set the values of an object's properties. They provide a way to control access to an object's properties.

 keyword in JavaScript? How does it work?

 refers to the context in which a function is called.

19. How do you create and use modules in JavaScript?

Modules are created using export and import.

Mixins are a way to add properties and methods to a class by merging objects. They allow you to create reusable chunks of functionality.

21. What is a closure in JavaScript? Provide an example.

A closure is a function that retains access to its lexical scope.

22. Explain the concept of promises in JavaScript.

 represent the eventual completion or failure of an asynchronous operation.

23. What are async/await in JavaScript? How do they work?

 is syntactic sugar for working with promises, making asynchronous code look synchronous.


24. What is event delegation in JavaScript?

Event delegation allows you to handle events at a higher level in the DOM hierarchy.

25. What is the call, apply, and bind method in JavaScript?

 invoke functions with a specific this context. bind returns a new function with this bound to a specific value.

26. What are higher-order functions in JavaScript?

Higher-order functions are functions that take other functions as arguments or return them.

27. What is the event loop in JavaScript?

The event loop is a mechanism that handles asynchronous operations by putting them in a queue and executing them in order.

28. Explain the concept of currying in JavaScript.

Currying transforms a function with multiple arguments into a sequence of functions with single arguments.

29. What is a generator function in JavaScript?

Generator functions can be paused and resumed, using the function* syntax.

Dive into our programming articles for insights and tips. Covering a range of topics, they're perfect for learners at any level eager to expand their knowledge.

Dive into our programming articles for insights and tips.

Articles

50 Javascript interview questions and Answers

, is one of the largest software registries on the internet. It houses over a million packages. In this guide, you will learn how to create and publish your own 

, allowing others to download and use it.

Before we begin, you need to have the following ready:

Node.js: If you haven't already, install it. NPM usually comes pre-installed with Node.

NPM is a collection of files, mostly written in 

, that provides specific functionality. This can be a library e.g. JQuery , utility or a tool that will help developers integrate into their code to fulfil certain functionalities.

NPM comes along with a lot of benefits, including:

. This will allow you to share your code with the community of developers and reusing existing packages.

 You can easily manage the different versions of the packages you publish.

. You will be able to collaborate or use other developer’s packages in your package.

Make sure it hasn't been used already. You can search the NPM registry to verify its availability.

2. Create a new project folder for your package and navigate into it. 

 file. Provide relevant information such as 

 file which will contain something similar to this:

You will be prompted to answer some few setup questions. Answer them accordingly but if you would like to get default values you can skip by pressing enter or run the following command 

We can then modify some few things in our 

The next thing to do is to create the code functionality for our package.

We then need to create the necessary files that will be loaded when other applications would need your modules. You should ensure your entry point matches the one specified in 

After writing your code, you then need to export it for other users who would download it.

It is usually the best practice to include a readme file for your package to make it easier for others to understand what your package does.

That is basically all we need to publish our package to npm.

, if not create one where you can publish your package.

Now that we’re set up, you can publish your package with this command:

By default, NPM publishes to the public registry. If you want to publish a scoped package with public visibility, use:

And that's it! Your package is now available for others to use.

Now that your package is available on the registry, others or even you can download and use it by running the following command:

This will install your package including all the dependencies in it. That’s it. You can go beyond this.

We’ve done all it takes to set up, write our package and publish it. In a simple way, all we have done is initialized our package, written our functionality and finally published it.

How to create and publish an NPM package

In today’s fast-paced world, digital platforms have dominated every aspect of our lives including the real estate industry. Web applications have improved how users search for rental properties, making them more efficient and convenient. 

In light of this digital transformation is the integration of rental listing components within web applications. Real estate listing components provide users with faster access to rental property details allowing users to find listings based on their preferences such as location, price range, and property type. This accessibility and convenience enable users to find suitable rental accommodations quickly. 

This article will look into building a Rental listing component with HTML, CSS, and JavaScript.

We will start by creating a folder called real-state listing and cd into it.

We will create a CSS subfolder, a JS subfolder assets folder, and a html file which will be the root entry of our application.

The next step is to set up the backbone structure of our website and basic configuration.

: This declaration specifies the HTML version used in the document, which is HTML5 in this case.

: This tag specifies the language of the content as English(en) and it defines the root element of the HTML document.

: This section contains meta information about the document, such as links to external sources, viewport settings, character encoding, viewport settings, and the webpage title.

: This meta tag specifies the character encoding of the document as UTF-8, which supports a wide range of characters.

: This meta tag sets the viewport properties for responsive web design, ensuring that the page renders properly on different screen sizes.

<title>Real Estate listing component</title>

: This tag sets the title of the HTML document, which appears in the browser's title bar or tab.

: This link tag specifies the favicon (shortcut icon) for the webpage.

: This link tag imports the Roboto font family from Google Fonts, making it available for use on the webpage.

: This link tag imports the Font Awesome CSS file, providing access to the Font Awesome icon library.

: This link tag imports an external CSS file (

 directory, which contains styles for the webpage's layout

: This opening tag marks the beginning of the document's body content, where the visible content of the webpage is placed.

The initial structure of the body tag. According to the  Real estate listing component design, there is an image stacked on top of a card that has the real estate listing details. This is what we will first define in the body tag.

: This div element has a class attribute set to "image_container". It contains an image for the listing component.

: This div element has a class attribute set to "listing_details_card". It contains the details of the property such as the price, location, and reviews.

The code snippet for the 1st div element encompassing the image display.

The code snippet for the 2nd div contains the details of the property listing.

The CSS rules have been defined in the index.css file in the 

 directory.  In our case, we have used the classes selector though IDs can also be used based on preference. Check out the CSS styles within the GitHub code provided for this solution challenge.

Javascript is used to add interactivity and dynamic functionalities to web pages. The script tag's src attribute refers to the path of the Javascript file.

The script tag includes an external JavaScript file located at "js/index.js" 

We have used Javascript to iterate over a list of Font Awesome star icons and append them to an HTML container element. 

This allows the creation of a rating review system on the web page.

document.querySelector('.review_icons_container') is used to select the HTML element where the star icons will be appended.

The next step is to iterate over each item in the array. For each icon class, it creates a new <i> element and adds the "fa" class to the newly created element.

 attribute to "true" for accessibility purposes.  Finally, the newly created element is appended to the iconContainer element.

This feature allows users to add properties to a list of favorites for future reference. The functionality involves toggling an icon to indicate whether a property has been added to the favorites list.

When the icon is clicked, it toggles the presence of the "active" class on the icon element.

The Real Estate Listing component when the icon is toggled.

Build a Real Estate Listing Component

JavaScript is synchronous by nature, which means operations are executed in the chronological order that they are called. The implication of the synchronous nature of JavaScript is the delay in execution as long-running tasks are run to completion before proceeding ones are executed. In this article, we will look into asynchronous programming, and why we need it in JavaScript. Let’s begin by establishing an understanding of what asynchronous programming is;

Say we have functions a, b, c, and d written and called as below. 

In the above, the functions will execute in the order provided with the console output showing;

The output is reflective of how synchronous JavaScript executes. While our code runs as expected, the challenge arising from the provided implementation is the blocking nature of synchronous code. Synchronous code is linear and sequential. Therefore code blocks are executed in a linear format based on how they are called from top to bottom. Given that some code blocks are long-running tasks that take significantly longer time to execute, the proceeding blocks of code will not be executed until the time-consuming code block is executed to completion. This often results in unresponsive applications that in turn impact user experience. Asynchronous programming solves the challenge of synchronous code.

To understand asynchronous programming, we will explore callbacks, asynchronous code, promises, and finally async/await. Let’s begin with definitions and sample code for each concept;

 are functions that are passed as arguments to other functions. A callback function gets executed at a later time in the receiving function. For instance;

 takes the parameters width, height, and displayOutput. When calling the function, we pass the arguments 5, 6, and 

 is the callback function. It is executed after the perimeter has been calculated.

 code refers to code that runs in parallel with others. The implication, therefore, is that code blocks execute without blocking each other, each at its runtime. Often, asynchronous code is used with callback functions. A perfect example is the 

 is an asynchronous function that runs in parallel with 

. Given the delay, 1 will be displayed before the message is displayed. In setTimeout, displayMessage is a callback function.

 Callback functions are not called with the (parenthesis) i.e 

 are introduced into asynchronous programming given the complexity of writing asynchronous programs. Promises allow a program to complete other tasks while waiting for a specific function to finish, and then let the program know when to execute something else. A promise promises a result regardless of the outcome; success or failure.

In the above code, the function hailCab returns a promise which takes 

 as its functional parameters. We then use 

 to handle the Promise outcome; resolved or rejected respectively. When we call the function, as it executes, other functions continue to run as expected.

To tie it all together, we will now look into async/await. 

 is built on top of promises and makes the writing of promises easier. 

 makes a function return a promise while 

 makes the function pause execution and wait for the resolved promise before it continues.

 function that determines whether one wins a contest or not using a 

 function. We then handle the result of simulating winContest in 

, we use await to wait for the promise returned by 

, we do not need to use the Promise constructor, as it is redundant, and we can directly return the resolved value. or throw an error.

As we have demonstrated above, asynchronous programming ensures that JavaScript code, which is traditionally synchronous runs asynchronously. Asynchronous programming, therefore, sufficiently improves the speed and eliminates blocking, further resulting in improved user experience.

Everything to know about Asynchronous Programming in JavaScript

In programming, patterns refer to an existing template used to solve recurring problems. Notably, patterns are backed by solid programming principles deeming them fundamental in ensuring clean, maintainable, and scalable code. There exists three categories of design patterns including creational design patterns, structural design patterns, and behavioral design patterns. In this article, we will focus on creational design patterns.

Introduction to Creational Design Patterns

Creational design patterns as their name suggests refer to design patterns relied on to ensure optimized mechanisms of object creation. Creational design patterns provide a seamless model of object creation while promoting reusability and encapsulation. Existing creational design patterns include the Factory method, Abstract Factory Pattern, Singleton Pattern, Prototype Pattern, and Builder Pattern.

As an object creation pattern, the Factory Pattern does not require the use of constructors. The pattern provides an interface for creating objects while allowing subclasses to alter the type of object created. A common implementation of a Factory Pattern is the use of a class or static methods of a class. The purpose of the Factory pattern is to abstract out repetitive operations when creating similar objects and to allow factory consumers to create objects without understanding the object internals.

In the above code block, we create a class Car that is then used to create a class CarFactory. The Factory class CarFactory instance is then used to create a new Car instance fordCar. fordCar consumes Car through CarFactory not needing to understand Car internals.

The Abstract Factory Pattern is a design pattern that provides an interface that lets you create families of related and dependent objects without specifying their concrete classes. For instance, a family of related objects could be a chair and a table. There exist multiple variants of these objects i.e. Victorian and Modern. So to create a family that can be used together, we need to create individual objects that match each other within the different variants.

Abstract Factory Pattern solves this challenge by suggesting that we declare interfaces that represent each distinct product family (variant i.e. modern). Following defining the interface for a specific item in the family, we set the other objects to follow the same interface within the same family.

In the above code block, we are creating an abstract factory 

 which defines the blueprint for creating concrete factories 

 which are then implemented by the concrete families to create distinct products.

The Abstract Factory class is used when one needs to create product families with similar functionalities yet different implementations, as is the case with the FurnitureFactory above.

The Singleton Pattern is used to ensure that a class only has a single instance, and can be accessed globally. Singletons are particularly important in managing the global application state. In such scenarios, only a single object is required to coordinate actions across the system. It is worth noting that the Singleton pattern is not modifiable. A common application of the Singleton pattern is in the state management of a React application. Changing the value of a variable updates all other elements consuming the value.

In the above snippet, we create a class Database whose constructor takes data, and its method 

returns the data. When we create instances of the class Database, both the first and the second instances; database1 and database2 return the first instance; 

In the above code, we feed different data to the instances database1 and database2, yet the output is similar, data fed into database1. Once data is fed through the database1 instance, the data cannot be modified by a second instance. The strict equality operator is used to compare database1 and database2. The output being true confirms that indeed it is the same instance of the class 

The Prototype pattern is a fundamental creational design pattern that is used to create new objects by copying existing object implementations. Prototype patterns can be considered prototypal inheritance in which we create objects that act as prototypes for other objects. The implication is the prototype object itself is used as the blueprint for all objects created by the constructor. The prototype pattern is a quick implementation of inheritance, and it allows sharing of properties among many objects.

In the above snippet, we create a class Car with a constructor function that accepts 

. The class also has a method drive. We then create an instance of the

 which accepts Ford and Mustang for the constructor values.

Note that we can log the result of calling the 

method on the car class through the prototype object 

. We then extend the car prototype with the method 

The Builder Design Pattern as a creational design pattern is used to create complex objects in steps by specifying the type and content only. The pattern separates the construction process from the object representation, making the process more manageable.

In the above code block, we define a Car class which will be used to construct subsequent Car objects. The Car class has methods used to define the properties of the car being constructed such as make, model, and year. The build() method is used to retrieve the constructed Car. Builder Pattern provides method chaining provided through the use of this in the setter methods. When building a car instance, we create a new Car class instance and use method changing to set the properties. Finally, we call build to retrieve the constructed car.

Design Patterns are fundamental in building scalable and maintainable systems. It is important to evaluate suitable scenarios to ensure they call for the different design patterns as overuse can lead to over-engineering.


Design Patterns: Creational Design Patterns (JavaScript Implementation)

Data management is a crucial aspect of software development when building applications. Dynamic applications heavily rely on real-time data exchange through a server to store, fetch, and update the data when required. This ensures users have a seamless experience when interacting with such applications.

In this article, we will compare Axios and fetch and find out how they can be used to perform different tasks. We will look into the ideal use cases to help developers make informed decisions about which data-fetching tool is suitable for their project requirements. 

: It is a promise-based HTTP client for the browser and Node.js. It can run in the browser and node.js in the same codebase making it isomorphic. On the server side, it uses the native node.js 

 module, while on the client it uses XMLHttpRequest.  

: Fetch like axios is a promised-based HTTP client. The fetch API provides a global fetch() method that offers an easy and logical way to fetch resources asynchronously across the network. 

Let's compare the basic syntax of fetch and axios. Here's an example of making a POST request using Axios, including custom headers. You do not have to convert your data into JSON manually.

First, we will install and import Axios into our project. You can install Axios using a package manager like npm or yarn.

You can create an axios instance with custom configurations.

Compare that to fetch which produces similar results.

javascript Articles

50 Javascript interview questions and Answers

How to create and publish an NPM package

Build a Real Estate Listing Component

Everything to know about Asynchronous Programming in JavaScript

Design Patterns: Creational Design Patterns (JavaScript Implementation)

Axios Vs Fetch. Which is better for making HTTP requests ?

JavaScript concepts you should know before learning React

Practical usecases of Closures in JavaScript

Practice Frontend, Android and iOS by building real world projects.