Here are 50 intermediate-level JavaScript questions along with their answers and code examples:<\/p>\n\n\n\n
console.log(myVar); \/\/ undefined\n var myVar = 5;\n console.log(myVar); \/\/ 5<\/pre><\/div>\n\n\n\n\n
- What are JavaScript Prototypes?<\/strong> \n
\n
- Prototypes are the mechanism by which JavaScript objects inherit features from one another. The prototype is a property on a constructor function that sets what will become the
__proto__<\/code> property on the constructed object.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\nfunction Person(firstName, lastName) {\n this.firstName = firstName;\n this.lastName = lastName;\n }\n\n Person.prototype.fullName = function() {\n return this.firstName + ' ' + this.lastName;\n }\n\n const person = new Person('John', 'Doe');\n console.log(person.fullName()); \/\/ "John Doe"<\/pre><\/div>\n\n\n\n\n
- What is Event Bubbling in JavaScript?<\/strong> \n
\n
- Event bubbling is a type of event propagation in the HTML DOM API, when an event occurs in an element inside another element, and both elements have registered a handle for that event. With bubbling, the event is first captured and handled by the innermost element and then propagated to outer elements.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n
document.querySelector("#parent").addEventListener('click', (event) => {\n alert("Parent Clicked!");\n }, false);\n\n document.querySelector("#child").addEventListener('click', (event) => {\n alert("Child Clicked!");\n event.stopPropagation();\n }, false);<\/pre><\/div>\n\n\n\n\n
- What is Event Delegation in JavaScript?<\/strong> \n
\n
- Event delegation is a technique involving adding event listeners to a parent element instead of adding them to the descendant elements. The listener will fire whenever the event is fired on the descendant elements due to event bubbling up the DOM.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n
document.querySelector("#parent").addEventListener('click', function(event) {\n if (event.target.matches("#child")) {\n alert("Child Clicked!");\n }\n });<\/pre><\/div>\n\n\n\n\n
- What is a JavaScript Class?<\/strong> \n
\n
- JavaScript Classes are a template for creating objects. They encapsulate data with code to manipulate that data. Classes in JS are built on prototypes but also have some syntax and semantics that are not shared with ES5 class-like semantics.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n
class Rectangle {\n constructor(height, width) {\n this.height = height;\n this.width = width;\n }\n\n area() {\n return this.height * this.width;\n }\n }\n\n const rectangle = new Rectangle(5, 8);\n console.log(rectangle.area()); \/\/ 40<\/pre><\/div>\n\n\n\n\n
- What is a JavaScript Promise?<\/strong> \n
\n
- A Promise in JavaScript represents a value which may not be available yet, but will be available in the future, or it will never be available.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n
var promise = new Promise(function(resolve, reject) {\n \/\/ a mock async action using setTimeout\n setTimeout(function() {\n resolve('Done!');\n }, 1000);\n });\n\n promise.then(function(value) {\n console.log(value);\n \/\/ "Done!"\n });<\/pre><\/div>\n\n\n\n\n
- What is ‘this’ keyword in JavaScript?<\/strong> \n
\n
- The JavaScript
this<\/code> keyword refers to the object it belongs to. It has different values depending on where it is used: In a method,this<\/code> refers to the owner object and in a function,this<\/code> refers to the global object.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n\/\/ In object method\n var person = {\n firstName: "John",\n lastName : "Doe",\n id : 5566,\n fullName : function() {\n return this.firstName + " " + this.lastName;\n }\n };\n console.log(person.fullName()); \/\/ John Doe\n\n \/\/ In regular function\n function myFunction() {\n return this;\n }\n console.log(myFunction() === window); \/\/ true in a browser<\/pre><\/div>\n\n\n\n\n
- What is an Immediately Invoked Function Expression (IIFE)?<\/strong> \n
\n
- An IIFE is a function in JavaScript that runs as soon as it is defined.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n
(function () {\n var name = 'Hello World';\n console.log(name);\n })(); \/\/ Hello World<\/pre><\/div>\n\n\n\n\n
- What are JavaScript data types?<\/strong> \n
\n
- JavaScript data types include:<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n
\n
- Number<\/li>\n\n\n\n
- String<\/li>\n\n\n\n
- Boolean<\/li>\n\n\n\n
- Object<\/li>\n\n\n\n
- Undefined<\/li>\n\n\n\n
- Null<\/li>\n\n\n\n
- Symbol<\/li>\n<\/ul>\n\n\n\n
\n
- What is a constructor function in JavaScript?<\/strong> \n
\n
- A constructor function is a function that is used to instantiate new objects with properties and methods defined by that function.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n
function Car(make, model, year) {\n this.make = make;\n this.model = model;\n this.year = year;\n }\n\n var myCar = new Car('Toyota', 'Corolla', 2005);\n console.log(myCar.model); \/\/ "Corolla"<\/pre><\/div>\n\n\n\n\n
- What are getter and setter methods in JavaScript?<\/strong> \n
\n
- Getters and setters are functions or methods used to get and set the values of variables. The
get<\/code> andset<\/code> syntax binds an object property to a function that will be called when that property is looked up or set.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\nclass Circle {\n constructor(radius) {\n this._radius = radius;\n }\n\n get radius()\n\n {\n return this._radius;\n }\n\n set radius(radius) {\n if (radius > 0) {\n this._radius = radius;\n }\n }\n }\n\n let circle = new Circle(5);\n console.log(circle.radius); \/\/ 5\n circle.radius = 10;\n console.log(circle.radius); \/\/ 10<\/pre><\/div>\n\n\n\n\n
- What are Arrow Functions in JavaScript?<\/strong> \n
\n
- Arrow functions were introduced with ES6 as a new syntax for writing JavaScript functions. They save developers time and simplify function scope.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n
const greet = () => 'Hello, World!';\n console.log(greet()); \/\/ "Hello, World!"<\/pre><\/div>\n\n\n\n\n
- What is a closure in JavaScript?<\/strong> \n
\n
- A closure is the combination of a function and the lexical environment within which that function was declared. In other words, a closure gives you access to an outer function\u2019s scope from an inner function.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n
function makeAdder(x) {\n return function(y) {\n return x + y;\n };\n }\n\n var add5 = makeAdder(5);\n console.log(add5(2)); \/\/ 7<\/pre><\/div>\n\n\n\n\n
- How can you make a property of a JavaScript object private?<\/strong> \n
\n
- In JavaScript, we can’t make object properties truly private, but we can emulate this behavior using closures.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n
function Person(name) {\n var _name = name;\n\n this.getName = function() {\n return _name;\n };\n }\n\n var john = new Person('John');\n console.log(john.getName()); \/\/ "John"\n console.log(john._name); \/\/ undefined<\/pre><\/div>\n\n\n\n\n
- What is a callback function in JavaScript?<\/strong> \n
\n
- A callback function is a function that is passed as an argument to another function, to be “called back” at a later time.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n
function greet(name, callback) {\n console.log('Hello ' + name);\n callback();\n }\n\n greet('John', function() {\n console.log('The callback was invoked!');\n });<\/pre><\/div>\n\n\n\n\n
- What is the difference between
==<\/code> and===<\/code> in JavaScript?<\/strong> \n\n
==<\/code> compares values after performing any necessary type conversions.===<\/code> does not do any type conversion (so if two values are not the same type,===<\/code> will simply returnfalse<\/code>).<\/li>\n<\/ul>\n<\/li>\n\n\n\n- What is the
map()<\/code> method in JavaScript?<\/strong> \n\n
- The
map()<\/code> method creates a new array with the results of calling a provided function on every element in the calling array.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\nvar numbers = [1, 4, 9];\n var roots = numbers.map(Math.sqrt);\n console.log(roots); \/\/ [1, 2, 3]<\/pre><\/div>\n\n\n\n\n
- What is the
reduce()<\/code> method in JavaScript?<\/strong> \n\n
- The
reduce()<\/code> method applies a function against an accumulator and each element in the array (from left to right) to reduce it to a single value.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\nvar numbers = [1, 2, 3, 4];\n var sum = numbers.reduce(function(prev, curr) {\n return prev + curr;\n });\n console.log(sum); \/\/ 10<\/pre><\/div>\n\n\n\n\n
- What are JavaScript Promises?<\/strong> \n
\n
- A Promise is an object representing the eventual completion or failure of an asynchronous operation. Essentially, a promise is a returned object from a function, to which you attach callbacks, instead of passing callbacks into a function.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n
var promise = new Promise(function(resolve, reject) {\n var success = true;\n\n if (success) {\n resolve('Success!');\n } else {\n reject('Failure!');\n }\n });\n\n promise.then(function(value) {\n console.log(value); \/\/ "Success!"\n }, function(value) {\n console.log(value); \/\/ "Failure!"\n });<\/pre><\/div>\n\n\n\n\n
- What are JavaScript generators?<\/strong> \n
\n
- JavaScript generators are a special class of functions that simplify the task of writing iterators. A generator is a function that produces a sequence of results instead of a single value.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n
function* idMaker() {\n let id = 0;\n\n while (true) {\n yield id++;\n }\n }\n\n const gen = idMaker();\n\n console.log(gen.next().value); \/\/ 0\n console.log(gen.next().value); \/\/ 1<\/pre><\/div>\n\n\n\n\n
- What is ‘use strict’ in JavaScript?<\/strong> \n
\n
- ‘use strict’ is a literal expression that was introduced in ECMAScript 5, which helps you write safer JavaScript code by throwing an error if a global variable is created by mistake. For example:<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n
'use strict';\n x = 3.14; \/\/ This will cause an error because x is not declared<\/pre><\/div>\n\n\n\n\n
- What is a JavaScript Module?<\/strong> \n
\n
- JavaScript modules are reusable pieces of code that can be exported from one program and imported for use in another program. Modules are particularly useful for a number of reasons: maintaining a code\u2019s organization, keeping the global scope clean, and for reusability.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n
\/\/ lib.js\n export function hello() {\n return 'Hello, World!';\n }\n\n \/\/ main.js\n import { hello } from '.\/lib';\n\n console.log(hello()); \/\/ "Hello, World!"<\/pre><\/div>\n\n\n\n\n
- What is the difference between JavaScript’s
window<\/code>,screen<\/code>, anddocument<\/code> objects?<\/strong> \n\n
- The
window<\/code> object represents a window containing a DOM document. Thedocument<\/code> object represents the DOM in your web page. Thescreen<\/code> object contains information about the user’s display.<\/li>\n<\/ul>\n<\/li>\n\n\n\n- What is the JavaScript
event loop<\/code>?<\/strong> \n\n
- The event loop is a single-threaded loop that monitors the call stack and checks if there is any work to be done in the task queue. If the call stack is empty and there are callback functions in the task queue, a function is dequeued and pushed onto the call stack to be executed.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
- What are
async<\/code> functions in JavaScript?<\/strong> \n\n
- Async functions enable us to write promise-based asynchronous code as if it were synchronous, but without blocking the main thread. They make code much cleaner and easy to read.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n
async function myFunction() {\n const value = await someAsyncOperation();\n console.log(value);\n }<\/pre><\/div>\n\n\n\n\n
- What are JavaScript
async<\/code>\/await<\/code> keywords used for?<\/strong> \n\n
async<\/code> andawait<\/code> make promises easier to write.async<\/code> makes a function return a Promise, andawait<\/code> makes a function wait for a Promise.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\nasync function myFunction() {\n const value = await someAsyncOperation();\n console.log(value);\n }<\/pre><\/div>\n\n\n\n\n
- What are JavaScript decorators?<\/strong> \n
\n
- Decorators are a design pattern in JavaScript, achieved by annotating and modifying classes at design time.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n
function readonly(target, key, descriptor) {\n descriptor.writable = false;\n return descriptor;\n }\n\n class Cat {\n @readonly\n meow() {\n console.log('Meow!');\n }\n }\n\n const cat = new Cat();\n cat.meow = function() { console.log('Woof!')\n\n }; \/\/ Error: Cannot assign to read only property 'meow' ...<\/pre><\/div>\n\n\n\n\n
- What is a
Set<\/code> in JavaScript?<\/strong> \n\n
- A Set is a built-in JavaScript object that stores multiple values in a single variable. Set items are unique. Duplicates are not allowed.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n
let mySet = new Set();\n mySet.add(1); \n mySet.add(2);\n mySet.add(3);\n mySet.add(2); \/\/ Duplicate, won't be added.\n console.log(mySet); \/\/ Set(3) {1, 2, 3}<\/pre><\/div>\n\n\n\n\n
- What is a
Map<\/code> in JavaScript?<\/strong> \n\n
- The
Map<\/code> object holds key-value pairs. Any value (both objects and primitive values) may be used as either a key or a value.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\nlet map = new Map();\n map.set('name', 'John');\n map.set('age', 25);\n console.log(map.get('name')); \/\/ John\n console.log(map.get('age')); \/\/ 25<\/pre><\/div>\n\n\n\n\n
- What are JavaScript Symbols?<\/strong> \n
\n
- A Symbol is a unique and immutable primitive value and may be used as a key for an Object property.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n
let sym1 = Symbol('Hello');\n let sym2 = Symbol('Hello');\n console.log(sym1 === sym2); \/\/ false, every symbol is unique<\/pre><\/div>\n\n\n\n\n
- What is the
instanceof<\/code> operator in JavaScript?<\/strong> \n\n
- The
instanceof<\/code> operator tests whether the prototype property of a constructor appears anywhere in the prototype chain of an object.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\nfunction Car(make, model, year) {\n this.make = make;\n this.model = model;\n this.year = year;\n }\n\n let auto = new Car('Honda', 'Accord', 1998);\n\n console.log(auto instanceof Car); \/\/ true<\/pre><\/div>\n\n\n\n\n
- What are JavaScript template literals?<\/strong> \n
\n
- Template literals are string literals allowing embedded expressions. They were called “template strings” in prior editions of the ES2015 specification.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n
let name = 'John';\n console.log(`Hello, ${name}!`); \/\/ "Hello, John!"<\/pre><\/div>\n\n\n\n\n
- How can you share code between files?<\/strong> \n
\n
- You can share code between files by exporting them from one file and importing them in another.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n