Free JS-Dev-101 Practice Test Questions and Answers (2026)

The getAttribute('value') method retrieves the value of the HTML value attribute as it was defined in the initial page source. It does not reflect the live, current text a user has typed into the input field. To get the current value of an input element, you must use the .value property of the DOM element object. This property always holds the up-to-date content of the form control.

A. addCallback is not a standard DOM method for event handling; the correct method is addEventListener.

B. getElementByIdName is not a valid DOM method. Methods like getElementById or getElementsByName exist, but not this one.

D. The event type for addEventListener is "click". "onclick" is the name of the HTML attribute or object property, not the event type string.

1. MDN Web Docs, HTMLInputElement.value. "The value property of the HTMLInputElement interface gets or sets the current value of the element."

2. MDN Web Docs, Element.getAttribute(). "It is recommended that you use element.value to get the current value of a text input, because the value attribute does not dynamically update as the user types."

3. W3C, HTML Living Standard, Section 4.10.5.1.10 "The value attribute". "The value IDL attribute must reflect the current value of the element."

The code uses a ternary operator to set the display style property. The condition accountName.includes(parsedSearchString) is true when an account should be visible. Therefore, the value for the true case must be a valid CSS display value that makes the element visible, such as 'block'. The value for the false case (when the account does not match) must hide the element, for which 'none' is the correct CSS display value. The syntax is condition ? valueiftrue : valueiffalse.

B. 'none' : 'block'

This inverts the logic, hiding matching accounts and showing non-matching ones, which is the opposite of the requirement.

C. 'hidden' : 'visible'

'hidden' and 'visible' are values for the CSS visibility property, not the display property. They are not the correct values here.

D. 'visible' : 'hidden'

Similar to C, these are values for the visibility property and are incorrect for manipulating the display style property.

1. MDN Web Docs, "Conditional (ternary) operator": "The conditional (ternary) operator is the only JavaScript operator that takes three operands: a condition followed by a question mark (?), then an expression to execute if the condition is truthy followed by a colon (:), and finally the expression to execute if the condition is falsy." (Section: Syntax)

2. MDN Web Docs, "display - CSS: Cascading Style Sheets": "The display CSS property sets whether an element is treated as a block or inline element and the layout used for its children... A value of none turns off the display of an element so that it has no effect on layout."

3. Salesforce, Lightning Web Components Dev Guide, "Conditionally Render DOM Elements": "To conditionally render a DOM element in a template, add the if:true|false directive to a nested tag that encloses the conditional content." (While this is the LWC way, the question uses standard DOM manipulation, for which the CSS display property is correct.)

The execution flow logs the counter value at different points in time.

1. logCounter() is called immediately, logging the initial value of counter, which is 0.

2. setInterval starts, and after 1 second, it increments counter to 1 and logs 1.

3. After another second (at T=2s), setInterval increments counter to 2 and logs 2.

4. At T=2.1s, the setTimeout callback executes. It logs the current value of counter, which is 2.

The first four logged numbers are therefore 0, 1, 2, 2.

B. 0123: This would happen if setTimeout executed after the third setInterval tick, but its delay is 2100ms, which is before the T=3000ms tick.

C. 0112: This incorrectly assumes the counter is not updated before the second setInterval tick.

D. 0012: This would imply setTimeout ran before the first setInterval tick, which is incorrect as 2100ms is greater than 1000ms.

MDN Web Docs, setTimeout(): "The setTimeout() method of the WindowOrWorkerGlobalScope mixin sets a timer which executes a function or specified piece of code once the timer expires." (GlobalObjects/setTimeout)

MDN Web Docs, setInterval(): "The setInterval() method...repeatedly calls a function or executes a code snippet, with a fixed time delay between each call." (API/setInterval)

MDN Web Docs, Concurrency model and the event loop: "JavaScript has a runtime model based on an event loop, which is responsible for executing the code, collecting and processing events, and executing queued sub-tasks." (JavaScript/EventLoop)

Node.js heavily uses an event-driven architecture, particularly for asynchronous operations like starting a server. The EventEmitter class is the foundation for this pattern. Objects that are event emitters, like the server object described, use the .on(eventName, listener) method to register a callback function (the listener) that executes when a specific event is emitted. The conventional name for error events is 'error'. Therefore, server.on('error', callback) is the standard, idiomatic way to listen for and handle asynchronous errors from such an object.

A. server.error() is not a standard method in the Node.js EventEmitter API for registering an error listener.

B. server.catch() is the syntax for handling rejected Promises. The question specifies the library uses "events and callbacks," not Promises.

C. try...catch blocks only handle synchronous errors. An error during server boot-up (e.g., port in use) is typically an asynchronous event and would not be caught by this block.

1. Node.js Official Documentation, events module. The documentation clearly shows that emitter.on(eventName, listener) is the method to add a listener function for a named event.

2. Node.js Official Documentation, Error Handling. The section on Error Events states, "When an asynchronous method has an error, the error is passed to the callback... For EventEmitter classes, errors are routed to the 'error' event."

The literal 'use strict' inside myFunction activates strict mode only for that function’s body (ECMAScript allows function-level strictness).

Outside the function, code executes in non-strict (sloppy) mode.

• Line 08 assigns z = x (3.14) successfully, so z == 3.14 (B).

• Strict mode applies to every statement inside myFunction (lines 05 only), not to outer code—thus it “has effect only on line 05” (D).

• Inside strict code, assigning to an undeclared identifier (y = x) throws a ReferenceError (E).

A. Directive is not global; it does not affect lines before/after the function.

C. Scope is limited to the function, not the entire file after line 04.

1. ECMAScript 2021 §12.1.1 “Directive Prologues and Strict Mode” – strict mode can be function-local.

2. ECMAScript 2021 §15.1.1.1 – in strict mode, assignment to an undeclared variable throws ReferenceError.

3. Stanford CS142 lecture notes, “JavaScript Strict Mode,” Slide 6 – emphasises function-level granularity and resulting errors.

The import statement is used to import bindings that are exported by another module. When a module uses a default export for a function, you can import it without curly braces {} and assign it any local name. The question states printDate() is the default export. The code import printDate from ... correctly imports the default function and names it printDate locally. It is then invoked directly as printDate().

A. import DatePrettyPrint() from ... is invalid syntax; parentheses are not used when importing a function.

B. This syntax implies DatePrettyPrint is an object with a printDate method, which contradicts that printDate itself is the default export.

C. This imports the function as printDate but then incorrectly tries to call it as a method on an undefined DatePrettyPrint object.

1. MDN Web Docs, "JavaScript reference", import statement. Section: "Importing defaults". It shows the syntax import myDefault from '/modules/my-module.js';.

2. MDN Web Docs, "JavaScript reference", export statement. Section: "Default exports (one per module)". It clarifies that a default export can be a function, class, or object.

Promise.race() returns a promise that settles (fulfills or rejects) as soon as one of the input promises settles. In this scenario, car2 resolves in 1500ms, which is faster than car1 rejecting (2000ms) and car3 resolving (3000ms). Therefore, the Promise.race fulfills with the value of car2 ("Car 2 completed"). The .then() block is executed, and assuming the single quotes in the result assignment are a typo for backticks (template literal), the value of result becomes "Car 2 completed the race.".

B. car3 is the slowest promise to resolve (3000ms), so it cannot win the race.

C. The .catch() block is not executed because the race is won by a resolving promise (car2), not a rejecting one.

D. car1 rejects at 2000ms, which is slower than car2 resolving at 1500ms. The race is already over before car1 crashes.

1. MDN Web Docs, Promise.race(). "The Promise.race() static method takes an iterable of promises as input and returns a single Promise. This returned promise settles with the eventual state of the first promise that settles." (First paragraph).

2. ECMAScript® 2023 Language Specification, Section 27.2.4.6 Promise.race ( iterable ).

JavaScript execution is single-threaded and uses an event loop.

1. total is initialized to 10.

2. setInterval is called. Its callback function is placed in a macrotask queue to be executed later, even with a 0ms delay. It does not execute immediately.

3. The main script continues. total++ on line 07 is executed, incrementing total to 11.

4. console.log(total) on line 08 is executed. At this moment, the value of total is 11.

The setInterval callback only runs after the current call stack is empty, which happens after the entire main script, including the console.log, has finished executing.

B. The value 12 would be reached inside the setInterval callback, but the console.log executes before the callback runs.

C. The value is 10 initially, but total++ on line 07 executes before the console.log, making the value 11.

D. The value 13 is the final value of total after the callback has fully executed, which occurs after the console.log statement.

1. MDN Web Docs, The event loop. "The event loop's job is to look at the call stack and the callback queue. If the call stack is empty, it will take the first event from the queue and will push it to the call stack, which effectively runs it." (developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop)

2. Node.js Documentation, The Node.js Event Loop, Timers, and process.nextTick(). "When you call setTimeout(), the timer is inserted into the Timers phase... A timer callback will be run as early as it can be scheduled after the specified amount of time has passed." (nodejs.org/en/docs/guides/event-loop-timers-and-nexttick/)

In JavaScript, there are two categories of data types: primitive types and objects. null is a primitive value that represents the intentional absence of any object value. However, due to a bug in the original implementation of JavaScript (ECMAScript), the typeof operator incorrectly returns the string "object" for the primitive value null. This behavior has been maintained for backward compatibility and is a well-known language quirk. Therefore, typeof null evaluates to "object".

B. "undefined": The typeof operator returns "undefined" only for the primitive value undefined or for undeclared variables.

C. "x": The typeof operator returns a string representing the data type of its operand, not the name of the variable itself.

D. "null": While logical, this is not the actual return value. To check specifically for null, one must use the strict equality operator (x === null).

Mozilla Developer Network (MDN): typeof operator, "typeof null" section.

ECMAScript® 2023 Language Specification: Section 13.5.3 The typeof Operator, Table 37: typeof Operator Results (Note for Null: "object").

Axel Rauschmayer, "Speaking JavaScript: An In-Depth Guide for Programmers", O'Reilly Media, 2014, Chapter 1, Section "A Bug: typeof null".

The code iterates through the array to remove all elements with the value 4. When array.splice(i, 1) is called, it removes an element, shortening the array and shifting subsequent elements to the left. The next line, i--, is crucial. It decrements the loop counter to ensure that the loop re-evaluates the element that has just shifted into the current index i. This prevents skipping over consecutive duplicate values, resulting in the correct removal of all four instances of 4.

A: This would be the result if the loop did not correctly handle consecutive 4s, likely by omitting the i-- statement.

C: This would be the result if only the first 4 was removed, which is incorrect as the loop continues to run.

D: This would be the result if the loop only removed one of the two consecutive 4s, which the i-- statement correctly prevents.

Mozilla Developer Network (MDN). (n.d.). Array.prototype.splice(). "The splice() method changes the contents of an array by removing or replacing existing elements and/or adding new elements in place." Retrieved from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/GlobalObjects/Array/splice

Flanagan, D. (2020). JavaScript: The Definitive Guide (7th ed.). O'Reilly Media. Chapter 7, Section 7.8 discusses array iteration and modification, noting the pitfalls of modifying an array while iterating and the common pattern of decrementing the index to compensate.

When execution pauses at a debugger statement, the developer console has access to the current execution scope.

- The carSpeed variable has been initialized on line 05 and holds a reference to a DOM element. Therefore, all properties of that DOM element, including its style and attributes, are available for inspection.

- Global objects, such as the window object and its properties like localStorage, are always accessible from any scope in the console.

The fourWheels variable is not yet declared (that happens on line 07), so it is not available.

A. A variable displaying the number of instances created for the Car object

No instances of Car have been created yet, as the new Car(...) call on line 07 has not been executed.

C. The values of the carSpeed and fourWheels variables

The carSpeed variable is available, but fourWheels is not, because its declaration and initialization on line 07 have not been reached.

1. MDN Web Docs, "Debugging JavaScript - Getting started": "Breakpoints are a core part of debugging. The simplest breakpoint is a line of code where you want to pause execution... You can also pause execution by calling debugger; in your code." (Section: Breakpoints)

2. MDN Web Docs, "Window: localStorage property": "localStorage is a property of the global window object. The read-only localStorage property allows you to access a Storage object for the Document's origin." (This confirms its global availability.)

3. Salesforce, Lightning Web Components Dev Guide, "Debug Lightning Web Components": "Use console.log() to send output to the browser’s developer console... Use the debugger; statement to pause code execution." (Section: Debug Your Code)

Promises in JavaScript have a built-in mechanism for handling errors (rejected states). The standard and most robust way to handle a potential rejection in a promise chain is to append a .catch() handler. This handler will be executed if the promise at any point in the preceding chain is rejected. It provides a clean, readable, and asynchronous-safe way to centralize error handling for the promise-based operation. Using .catch() ensures that both network errors from the request and runtime errors within any preceding .then() callbacks are gracefully handled.

A. A try/catch block only works for synchronous code. It will not catch a rejection that occurs asynchronously inside the .then() callback of a promise.

B. This is a duplicate of option A and is incorrect for the same reason.

D. The .finally() handler is executed whether the promise is fulfilled or rejected. It is intended for cleanup code, not for handling the error itself.

1. Mozilla Developer Network (MDN). Promise.prototype.catch(). Section: "Description". This document explicitly states that .catch() is used for handling errors in promise chains and is syntactic sugar for .then(null, onRejected).

2. Mozilla Developer Network (MDN). Using Promises. Section: "Chaining". This guide demonstrates the proper use of .then() and .catch() for successful promise resolution and error handling.

3. Mozilla Developer Network (MDN). Promise.prototype.finally(). This document clarifies that .finally() is for code that should run regardless of the promise's outcome and is not for handling the rejected value.

The original code passes the world function object itself as the name argument to sayHello. Consequently, console.log prints the function's definition. To print the result of the world function, it must be invoked. Changing line 2 to console.log('Hello', name()); invokes the passed function (name which holds world), retrieves its return value 'World', and logs the desired "Hello World" message.

B. This creates a syntax error. An Immediately Invoked Function Expression (IIFE) would require a different structure, such as const world = (() => { return 'World'; })();.

C. The sayHello function does not return a value (it returns undefined), so attempting to invoke its result with () will cause a TypeError.

D. Changing the function declaration syntax from an arrow function to a standard function does not change the fact that the function object itself is being passed, not its return value.

1. MDN Web Docs, "Functions", Section: "Function parameters". This documentation explains the difference between passing a function reference and invoking a function with ().

2. ECMAScript® 2023 Language Specification, Section 13.3.1 "Arrow Function Definitions". This details the syntax and evaluation of arrow functions, showing that the original code is syntactically correct but logically flawed for the intended output.

The question asks for valid implementations to export two functions, foo and bar.

Option A uses named exports, which is the standard way to export multiple, distinct functions or variables from a module. They are imported using the same names: import {foo, bar} from './utils.js';.

Option D uses a default export of an anonymous class. This class contains foo and bar as methods. This is a valid way to group and export related functionality. It would be imported and instantiated like: import MyUtils from './utils.js'; const utils = new MyUtils(); utils.foo();.

B. export default {foo, bar}; exports a single object as the default. While it works, named exports (A) or a class (D) are more conventional patterns for exporting distinct functions or a cohesive set of methods.

C. import {foo} from "./helpers/utils.js"; export {foo, bar}; is incorrect because it attempts to export bar without it being defined or imported in the module's scope, which would result in a reference error.

MDN Web Docs, export statement. The page details named exports (like option A) and default exports (like option D). See sections "Using named exports" and "Default exports".

Salesforce Lightning Web Components Dev Guide, "Share JavaScript Code". This guide illustrates the use of ES6 modules, showing examples of both named and default exports for sharing utility functions and classes.

The setInterval() method returns a unique interval ID. To stop the execution of the function specified in setInterval(), you must call the clearInterval() method. This method requires the interval ID returned by setInterval() as its only argument. In the provided code, timerId holds this unique ID, making clearInterval(timerId) the correct statement to cancel the timer.

B. removeInterval(timerId); is incorrect because removeInterval is not a standard function in the JavaScript WindowOrWorkerGlobalScope mixin for handling timers.

C. removeInterval(timedFunction); is incorrect for two reasons: the function name removeInterval is wrong, and the argument should be the timer ID, not the function reference.

D. clearInterval(timedFunction); is incorrect because the clearInterval function requires the interval ID as its argument, not the function that was scheduled to run.

1. MDN Web Docs, WindowOrWorkerGlobalScope.clearInterval(). "The clearInterval() method of the WindowOrWorkerGlobalScope mixin cancels a timed, repeating action which was previously established by a call to setInterval()." (Section: Syntax, clearInterval(intervalID);)

2. MDN Web Docs, WindowOrWorkerGlobalScope.setInterval(). "The returned intervalID is a numeric, non-zero value which identifies the timer created by the call to setInterval()... This value can be passed to clearInterval() to cancel the interval." (Section: Return value)

In Node.js, objects that emit events are instances of the EventEmitter class. The standard way to subscribe to an event is by using the .on() method. The first argument is the name of the event, and the second is a callback function to execute when the event is emitted. For handling errors in an event-driven architecture, the conventional event name is 'error'. This code correctly attaches a listener to the error event on the server object.

A. server.catch(...) is the syntax for handling promise rejections, not for listening to events from an EventEmitter.

B. server.error(...) is not a standard method on the EventEmitter class for listening to error events.

D. try...catch blocks are used for handling synchronous exceptions, not for handling asynchronously emitted 'error' events.

1. Node.js v18.17.1 Documentation, "Events" module, Class: EventEmitter, emitter.on(eventName, listener). Section: "The EventEmitter class".

2. Node.js v18.17.1 Documentation, "Error handling", Section: "Errors in synchronous vs. asynchronous code". It distinguishes between synchronous try...catch and asynchronous patterns like the 'error' event.

JavaScript ES6 modules are implicitly in strict mode. There is no need to add the "use strict"; directive. This design choice helps create more robust and maintainable code by preventing common errors and enforcing better coding practices. You cannot opt out of strict mode for modules; any code within a module file is automatically parsed in strict mode by the JavaScript engine.

A. use non-strict; is not a valid JavaScript directive. There is no way to disable strict mode within an ES6 module.

C. use strict = false; is not a valid JavaScript statement or directive for controlling strict mode.

D. The concept of notStrict() functions is not a feature of JavaScript. Strict mode applies to the entire module's scope.

1. MDN Web Docs, "JavaScript modules", Section: "Other differences between modules and standard scripts". It states, "Modules are automatically in strict mode... There's no way to opt-out of strict mode for modules."

2. ECMAScript® 2015 Language Specification, Section 15.2.1.8 "Module Semantics". The specification dictates that module code is always evaluated as strict mode code.

To ensure an event listener fires only once, two primary methods can be used. The first is to pass an options object as the third argument to addEventListener with the once property set to true. This instructs the browser to automatically remove the listener after it has been invoked. The second method is to explicitly call removeEventListener from within the event handler function itself, which achieves the same result by manually cleaning up the listener after its first execution.

A. event.stopPropagation() prevents the event from bubbling up the DOM tree to parent elements, but it does not remove the listener itself.

B. The Event object does not have a first property. This is not a standard way to track event listener invocations.

1. MDN Web Docs, "EventTarget.addEventListener()", Section: "The options object". The documentation details the once option: "A boolean value indicating that the listener should be invoked at most once after being added. If true, the listener would be automatically removed when invoked."

2. MDN Web Docs, "EventTarget.removeEventListener()", Syntax section. This page explains how to remove an event listener that was previously added with addEventListener(). Using it inside the handler is a common pattern for one-time events.

JavaScript has only one type of number, which is Number. Unlike other programming languages, it does not have distinct types for integers, floats, doubles, or decimals. All numbers are implemented as 64-bit floating-point values according to the IEEE 754 standard. The variable pi is assigned a floating-point literal, which falls under the Number primitive data type.

A. Float: This is a concept for a type of number, but it is not a distinct primitive data type in the JavaScript language itself.

B. Double: Similar to Float, this describes the precision of a number but is not a formal JavaScript data type. All numbers are effectively doubles.

C. Decimal: This is not a primitive data type in JavaScript. While there are libraries for handling high-precision decimals, it's not a native type.

1. MDN Web Docs, "JavaScript data types and data structures", Section: "Number type". States, "The Number numeric type has exactly one type: a double-precision 64-bit binary format IEEE 754 value... There is no specific integer type."

2. ECMAScript® 2024 Language Specification, Section 6.1.6, "The Number Type". Defines the Number type as representing all numbers using the "double-precision 64-bit format IEEE 754-2019 value".