Javascript Interview Questions: 30 Practice Questions with Answers and Code Examples

Here are 30 Javascript interview questions, each with answers and code examples. These questions cover all aspects of Javascript, including basics, DOM manipulation, event handling, asynchronous programming, object-oriented programming, and more.

1. What is Javascript?

Javascript is a scripting language used to write interactive web applications in web browsers.

1. How to declare variables?

Variables are declared using the var, let, or const keywords.

var x = 10;
let y = 20;
const z = 30;

1. How to create functions?

Create functions using the function keyword.

function add(x, y) {
    
    
  return x + y;
}

1. How to call the function?

Functions are called using the function name and parentheses.

var result = add(2, 3);

1. What is DOM?

DOM (Document Object Model) is an API for manipulating HTML and XML documents in Javascript.

1. How to select elements?

Select elements using the document.getElementById(), document.getElementsByClassName(), document.getElementsByTagName(), or document.querySelector() methods.

var element = document.getElementById("myElement");
var elements = document.getElementsByClassName("myClass");
var elements = document.getElementsByTagName("p");
var element = document.querySelector("#myElement");

1. How to set attributes of elements?

Use the element.setAttribute() method to set an element's attribute.

var element = document.getElementById("myElement");
element.setAttribute("class", "newClass");

1. How to add elements to DOM?

Add elements to the DOM using the document.createElement() , element.appendChild() or element.insertBefore() methods.

var element = document.createElement("div");
element.textContent = "Hello World";
document.body.appendChild(element);

1. How to remove element from DOM?

Use the element.parentNode.removeChild(element) method to remove an element from the DOM.

var element = document.getElementById("myElement");
element.parentNode.removeChild(element);

1. What is an event?

Events are actions that occur on HTML elements, such as mouse clicks, key presses, scrolling, etc.

1. How to add event handlers to elements?

Add event handlers to elements using the element.addEventListener() method.

var element = document.getElementById("myElement");
element.addEventListener("click", function() {
    
    
  alert("Hello World");
});

1. How to prevent default behavior of events?

Use the event.preventDefault() method to prevent the event's default behavior.

var link = document.getElementById("myLink");
link.addEventListener("click", function(event) {
    
    
  event.preventDefault();
});

1. How to stop event bubbling?

Use the event.stopPropagation() method to stop event bubbling.

var element1 = document.getElementById("myElement1");
var element2 = document.getElementById("myElement2");
element1.addEventListener("click", function(event) {
    
    
  event.stopPropagation();
});
element2.addEventListener("click", function(event) {
    
    
  alert("Hello World");
});

1. What are closures?

A closure is a combination of a function and its scope that can access variables in the upper scope.

function outer() {
    
    
  var x = 10;
  function inner() {
    
    
    return x;
  }
  return inner;
}
var closure = outer();
var result = closure();

1. What is a callback function?

A callback function is a function that is passed as an argument to another function and executed after that function completes.

function add(x, y, callback) {
    
    
  var result = x + y;
  callback(result);
}
function displayResult(result) {
    
    
  console.log(result);
}
add(2, 3, displayResult);

1. What is asynchronous programming?

Asynchronous programming is a programming model in which code does not wait for an operation to complete, but continues execution immediately.

1. How to use callback function for asynchronous programming?

Use a callback function as a handler for when an asynchronous operation completes.

function loadScript(url, callback) {
    
    
  var script = document.createElement("script");
  script.src = url;
  script.onload = callback;
  document.head.appendChild(script);
}
loadScript("script.js", function() {
    
    
  console.log("Script loaded");
});

1. What are Promises?

Promises are an asynchronous programming model for handling the results of asynchronous operations.

var promise = new Promise(function(resolve, reject) {
    
    
  setTimeout(function() {
    
    
    resolve("Hello World");
  }, 1000);
});
promise.then(function(result) {
    
    
  console.log(result);
});

1. What is async/await?

async/await is an asynchronous programming model for processing the results of asynchronous operations.

async function loadData() {
    
    
  var response = await fetch("data.json");
  var data = await response.json();
  console.log(data);
}
loadData();

1. What are modules?

A module is a unit of code that contains a set of related functionality and can be reused in different files through import and export operations.

// module1.js
export function add(x, y) {
    
    
  return x + y;
}

// module2.js
import {
    
     add } from "./module1.js";
var result = add(2, 3);

```javascript

1. 什么是类？

类是一个模板，用于创建具有相似属性和行为的对象。