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

The typeof operator in JavaScript returns a string indicating the type of an operand. In the provided code, the variable x is initialized with the primitive value null. A well-known, long-standing quirk in JavaScript is that the typeof operator returns 'object' for a null value. This is a bug from the first version of JavaScript that was preserved for backward compatibility. Although null represents the intentional absence of any object value and is a primitive type itself, typeof null evaluates to 'object'.

A. 'x': The typeof operator evaluates the value of the variable x, not its identifier. It returns a string representing the data type.

B. 'null': While this would be a more logical return value, it is not how the typeof operator is specified to behave with a null value.

D. 'undefined': The type 'undefined' is returned for variables that have been declared but not initialized, or for accessing non-existent properties. x is explicitly initialized to null.

1. ECMAScript® 2024 Language Specification (ECMA-262, 15th edition, April 2024):

In Section 13.5.3, "The typeof Operator", the runtime semantics table specifies the return value for different operand types. For the Type "Null", the specified Result is the string "object".

2. MDN Web Docs (Mozilla):

On the page for the typeof operator, it explicitly states: typeof null; // "object" (see below). The document further explains, "In the first implementation of JavaScript, JavaScript values were represented as a type tag and a value. The type tag for objects was 0. null was represented as the NULL pointer (0x00 in most platforms). Consequently, null had 0 as a type tag, hence the typeof return value 'object'." (Source: typeof operator page, "typeof null" section).

3. Eloquent JavaScript, 3rd Edition by Marijn Haverbeke (a widely respected text often used in university curricula):

Chapter 1, "Values, Types, and Operators", notes this specific behavior: "There is one odd thing about null: console.log(typeof null) prints object. This is a historical accident in JavaScript and it has unfortunately not been fixed."

The JSON.parse() method parses a string that must conform to the JSON data interchange format. According to the JSON standard (RFC 8259), a string value must be enclosed in double quotes (").

Option D provides the JavaScript string literal '“foo”'. The content passed to JSON.parse() is “foo”, which is a valid JSON string. The method will successfully parse this and return the JavaScript string foo. The other options provide strings whose contents are not valid JSON values, resulting in a SyntaxError.

Why Incorrect Options are Wrong

A. JSON.parse ( ‘ foo ’ );

The content of the string is foo, which is not a valid JSON value as it lacks the required double quotes for a string.

B. JSON.parse ( “ foo ” );

Similar to option A, the string content foo is not a valid JSON value because it is not a recognized JSON primitive.

C. JSON.parse( “ ‘ foo ’ ” );

The content is 'foo'. The JSON standard requires double quotes (") for strings; single quotes (') are not permitted.

---

References

1. MDN Web Docs, JSON.parse(): "The JSON.parse() static method parses a JSON string, constructing the JavaScript value or object described by the string." The syntax and examples demonstrate that the input must be a string representing valid JSON.

Source: Mozilla Developer Network. (n.d.). JSON.parse(). Retrieved from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/GlobalObjects/JSON/parse

Section: See the "Syntax" and "Examples" sections, which illustrate valid JSON string inputs.

2. The JSON Data Interchange Standard (RFC 8259): This standard defines the JSON grammar. It explicitly states that a string value must be enclosed in double quotes.

Source: Internet Engineering Task Force (IETF). (December 2017). RFC 8259: The JavaScript Object Notation (JSON) Data Interchange Format.

Section: 7. Strings. "A string begins and ends with quotation marks. ... All characters may be placed within the quotation marks...". The grammar diagrams throughout the document use quotation-mark which is defined as U+0022 (the double quote).

3. ECMAScript® 2024 Language Specification (ECMA-262): The official JavaScript standard defines the behavior of JSON.parse.

Source: Ecma International. (2024). ECMAScript® 2024 Language Specification.

Section: 25.5.1 JSON.parse ( text [ , reviver ] ). This section specifies that the text argument is parsed as a JSON-text according to the grammar defined in the specification, which aligns with the JSON standard (RFC 8259) where strings are double-quoted.

The execution order is determined by the JavaScript event loop and the non-blocking nature of asynchronous operations.

1. callDelay() is invoked. It encounters await, which pauses its execution for 1000ms and yields control to the main thread.

2. The synchronous console.log(2) runs immediately, printing 2 first.

3. callDelay2() is invoked, pausing its execution for 500ms.

4. The main thread is now empty. The event loop waits for timers.

5. The 500ms timer from callDelay2 finishes first. Its promise resolves, console.log(3) is executed, and 3 is printed.

6. The 1000ms timer from callDelay finishes last. Its promise resolves, console.log(1) is executed, and 1 is printed.

The final output is 2, 3, 1.

A. 1 2 3 implies fully synchronous, in-order execution, which is incorrect as await makes the function asynchronous and non-blocking.

B. 1 3 2 incorrectly suggests an async function call (callDelay) blocks the main thread, preventing console.log(2) from running.

C. 2 1 3 incorrectly assumes the 1000ms timer would finish before the 500ms timer, violating the logic of setTimeout.

1. MDN Web Docs, async function: The async keyword enables asynchronous, promise-based behavior. When an async function is called, it returns a Promise. When it encounters an await expression, the function's execution is paused, and control is yielded to the event loop. (See "Description" section, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/asyncfunction).

2. MDN Web Docs, await operator: The await operator is used to wait for a Promise. It can only be used inside an async function. It pauses the async function execution until the Promise is settled (resolved or rejected). (See "Syntax" and "Description" sections, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await).

3. Salesforce Lightning Web Components Developer Guide: "When JavaScript encounters an await keyword, it pauses the execution of the async function... While the async function is paused, JavaScript can execute other code." (See "Work with Promises", async/await subsection, https://developer.salesforce.com/docs/platform/lwc/guide/js-promises.html).

4. MDN Web Docs, Concurrency model and the event loop: This document explains how JavaScript handles asynchronous operations. setTimeout schedules a task to be added to the Macrotask Queue after its timer expires, allowing other synchronous code to execute first. (See "The event loop" section, https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop).

Node.js offers several compelling benefits for building a backend server, especially for a team already proficient in JavaScript.

1. It includes Node Package Manager (npm), the world's largest software registry, which simplifies the process of incorporating and managing third-party libraries, accelerating development.

2. It allows developers to use JavaScript on both the client and server sides. This unifies the development stack, enabling the team to leverage existing skills and share code, which reduces the learning curve and increases efficiency.

3. Its event-driven, non-blocking I/O model is a core architectural advantage. It allows the server to handle numerous concurrent API requests efficiently without getting blocked by input/output operations, leading to high performance and scalability for web applications.

B. Ensures stability with one major release every few years.

This is factually incorrect. Node.js has a rapid release cycle, with a new major version released approximately every six months, including Long-Term Support (LTS) versions.

C. Performs a static analysis on code before execution to look for runtime errors.

This is incorrect. Node.js executes JavaScript, which is a dynamically-typed language. The V8 engine parses and compiles code, catching syntax errors, but it does not perform static analysis to find potential runtime errors (like type mismatches) before execution.

1. Node.js Official Documentation, "About Node.js": "As an asynchronous event-driven JavaScript runtime, Node.js is designed to build scalable network applications." This statement supports option E's claim about non-blocking functionality for performance and option D's claim about executing server-side JavaScript.

Source: Node.js Foundation, https://nodejs.org/en/about/

2. Node.js Official Documentation, "Introduction to Node.js": "Node.js has a built-in package manager called npm, which comes installed with Node.js by default. It helps you manage your project's dependencies." This directly supports option A.

Source: Node.js Foundation, https://nodejs.dev/en/learn/introduction-to-nodejs/

3. Node.js Official Documentation, "Node.js Release Working Group": The official release schedule clearly shows a new major version is released every April and October. This contradicts the claim in option B that major releases occur "every few years."

Source: Node.js Foundation, https://github.com/nodejs/release#release-schedule

4. MDN Web Docs, "JavaScript data types and data structures": "JavaScript is a dynamically typed language. This means you don't have to specify the data type of a variable when you declare it... Data types are converted automatically as needed during script execution." This principle explains why the Node.js runtime does not perform the static analysis described in option C.

Source: Mozilla, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Datastructures#dynamictyping

The code will throw a TypeError on line 07. The for...of statement is designed to iterate over iterable objects. The Map.prototype.entries is a method, not a property that holds an iterable object. To get the required iterator, the method must be invoked with parentheses: myMap.entries().

Because the code references the method myMap.entries itself rather than calling it to get an iterator, the JavaScript engine attempts to iterate over a function object, which is not iterable. This causes a runtime error, and the script execution halts before any elements can be pushed to the output array.

A. [1, 2]: This would be the output if the code correctly called myMap.entries() and pushed the value from each entry, but the syntax is incorrect.

B. ['foo', 'bar']: This would be the expected output if the code correctly invoked myMap.entries(), as the loop is set to push the key. However, the error prevents the loop from running.

C. ['foo':1, 'bar':2']: This is not valid JavaScript syntax for an array. It incorrectly mixes object-like key-value notation within array literals.

1. Mozilla Developer Network (MDN) Web Docs: The documentation for Map.prototype.entries() explicitly shows it as a method that must be called. It states, "The entries() method returns a new map iterator object that contains the [key, value] pairs for each element in the Map object in insertion order."

Source: MDN Web Docs, Map.prototype.entries(), "Syntax" section. (developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/GlobalObjects/Map/entries)

2. Mozilla Developer Network (MDN) Web Docs: The documentation for the for...of statement specifies that it operates on iterable objects. A function object is not iterable by default. It notes, "The for...of statement executes a loop that operates on a sequence of values sourced from an iterable object." A TypeError is thrown if the right-hand side of the of is not iterable.

Source: MDN Web Docs, for...of, "Iterating over a Map" and "Description" sections. (developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of)

3. ECMAScript® 2024 Language Specification (ECMA-262): The official JavaScript standard defines the iteration protocol. The for...of statement relies on the object having a @@iterator method (accessible via Symbol.iterator). A standard function object does not have this method, hence it is not iterable.

Source: ECMA-262, 14th edition, June 2023, Section 14.7.5.4 "ForIn/OfBodyEvaluation". (tc39.es/ecma262/#sec-forin-of-body-evaluation)

The constructor method is a special method within a JavaScript class specifically for creating and initializing an object instance of that class. When a new instance is created using the new keyword (e.g., new Post(...)), the constructor is automatically called.

The provided code requires initializing the body, author, and viewCount properties. By defining constructor(body, author, viewCount), the class can accept these three values as arguments during instantiation. Inside the constructor, this refers to the new object being created, and this.property = value assigns the passed-in arguments to the corresponding properties of the new instance.

Why Incorrect Options are Wrong

A. super (body, author, viewCount) {

The super keyword is used to call the constructor of a parent class within a subclass, not to define the constructor for the current class.

B. Function Post (body, author, viewCount) {

This syntax defines a traditional constructor function (pre-ES6). It is not the correct syntax for defining a constructor method inside an ES6 class declaration.

D. constructor() {

This defines a constructor that accepts no parameters. The subsequent lines would cause a ReferenceError because the variables body, author, and viewCount would be undefined.

---

References

1. Mozilla Developer Network (MDN) Web Docs:

Source: constructor - JavaScript | MDN

Reference: In the "Syntax" and "Description" sections, it is explicitly stated: "The constructor method is a special method of a class for creating and initializing an object instance of that class... There can be only one special method with the name 'constructor' in a class." The examples provided match the correct answer's syntax.

2. ECMAScript® 2023 Language Specification (ECMA-262, 14th edition):

Source: ECMA-262, 14th Edition, June 2023

Reference: Section 15.7.1, "Static Semantics: IsConstructor". This section defines the formal grammar for a class constructor. It specifies that a MethodDefinition within a ClassBody is a constructor if its PropName is "constructor". This confirms that constructor is the required, reserved keyword.

3. The Modern JavaScript Tutorial (javascript.info):

Source: Class basic syntax

Reference: In the section "What is a class?", the article states, "The constructor() method is called automatically by new, so we can initialize the object there." The provided examples clearly show the constructor(parameters) { ... } syntax for initializing object properties. This resource is widely referenced in academic curricula.

The code execution throws a ReferenceError and halts. Inside the Person constructor, the statement this.eyeColor = eyeColor; attempts to access a variable named eyeColor. However, the corresponding function parameter is named eyecolor (with a lowercase 'c'). JavaScript is a case-sensitive language, meaning eyeColor and eyecolor are treated as two distinct variables. Since eyeColor has not been declared in any accessible scope, attempting to read its value results in a ReferenceError. This error occurs during the object creation (new Person(...)) and stops the script before the console.log line is ever reached.

B. ReferenceError: assignment to undeclared variable “Person”

The function Person is correctly declared using the function keyword, so it is not an undeclared variable.

C. Developer

Execution halts before the console.log. Even if it ran, myFather.job is undefined because job is a static property on the Person constructor, not on the instance.

D. Undefined

The script throws a ReferenceError and terminates before the console.log statement can be executed and output undefined.

1. MDN Web Docs, ReferenceError: "The ReferenceError object represents an error when a non-existent variable is referenced." The code references the undeclared variable eyeColor. (Source: Mozilla, MDN Web Docs, "ReferenceError: "x" is not defined", Section: "Invalid assignments").

2. MDN Web Docs, JavaScript Guide, "Grammar and types": "JavaScript is a case-sensitive language. This means that language keywords, variables, function names, and other identifiers must always be typed with a consistent capitalization of letters." This confirms that eyecolor and eyeColor are different identifiers. (Source: Mozilla, MDN Web Docs, "JavaScript Guide > Grammar and types", Section: "Case sensitivity").

3. MDN Web Docs, JavaScript Guide, "Classes": "Static methods and properties are defined on the class itself, not on the instance." This explains why, if the code were to execute past the error, myFather.job would be undefined as job is a static property on the Person constructor. (Source: Mozilla, MDN Web Docs, "JavaScript Guide > Classes", Section: "Static methods and properties").

The code uses a conditional (ternary) operator to set the CSS display property of each list item (

A. 'None' : 'block' reverses the logic; it would hide matching accounts and show non-matching ones.

B. 'Visible : 'hidden' uses values for the CSS visibility property, which are not valid for the display property being set.

C. 'Hidden, visible uses a comma instead of a colon, which is invalid syntax for the ternary operator.

1. Mozilla Developer Network (MDN) Web Docs: The display property's values are defined in the CSS specification. 'block' makes an element generate a block-level box, while 'none' turns off the display of an element so it has no effect on layout.

Source: MDN Web Docs, "display - CSS: Cascading Style Sheets", Values section. (developer.mozilla.org/en-US/docs/Web/CSS/display)

2. Mozilla Developer Network (MDN) Web Docs: 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.

Source: MDN Web Docs, "Conditional (ternary) operator", Syntax section. (developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/ConditionalOperator)

3. Salesforce Lightning Web Components Developer Guide: The code uses this.template.querySelectorAll() to access elements within the component's shadow DOM. This is the standard and recommended way to perform DOM manipulation in Lightning Web Components.

Source: Salesforce Developers, Lightning Web Components Dev Guide, "Access Elements the Component Owns". (developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.domaccess)

The npm install command installs dependencies listed in the package.json file. There are two primary reasons a dependency might not be installed for other team members.

First, if the developer used an older version of npm (pre-v5) and forgot the --save flag when running npm install , the dependency would be installed locally but not added to package.json. Consequently, it would not be installed for others.

Second, if the dependency was added as a development dependency (--save-dev), it is listed under devDependencies. By default, npm install will skip installing these packages if the NODEENV environment variable is set to production.

A. The --add option is not a valid or recognized flag for the npm install command to save a dependency to package.json.

D. This is a duplicate of option B. While the statement is correct, it represents the same underlying reason, and the question asks for two distinct explanations.

1. Official npm, Inc. Documentation: In the documentation for npm install, it is specified that with NODEENV set to production, npm will not install modules listed in devDependencies.

Source: npm Docs, npm-install command.

Section: See the description of the --production flag which states, "the NODEENV environment variable is set to production, this flag will be set by default." and its effect on devDependencies.

2. Official npm, Inc. Documentation: The documentation clarifies the role of --save and devDependencies. Before npm v5.0.0, packages were not added to package.json without the --save flag.

Source: npm Docs, npm-install command.

Section: See the description of the --save (or -S) flag and historical behavior notes in the documentation archives.

3. Salesforce Lightning Web Components Developer Guide: The guide explicitly details using npm and package.json to manage project dependencies, including devDependencies for tools like Prettier and ESLint, which are not needed in a production build.

Source: Lightning Web Components Developer Guide.

Section: Set Up Your Development Environment > Set Up the Project > package.json.

In JavaScript, declarations using the var keyword are "hoisted" to the top of their function scope. This means the interpreter processes var msg; at the beginning of the getAvailabilityMessage function. However, the assignment msg = "Username available"; remains inside the if block.

Since getAvailability("newUserName") returns false, the condition for the if statement is not met, and its code block is never executed. Consequently, msg is declared but never assigned a value. When the function attempts to return msg;, it returns the value of a declared but uninitialized variable, which is undefined.

A. “Username available”: This value is only assigned if the if condition is true, but the scenario specifies it is false.

B. “newUserName”: This is the value of the input parameter item, not the msg variable that the function is designed to return.

C. “Msg is not defined”: This would be a ReferenceError. Because of hoisting, the variable msg is declared and exists within the function's scope; it is defined but has no assigned value.

1. Mozilla Developer Network (MDN) Web Docs: "A variable declared using var or let with no assigned value has the value undefined."

Source: MDN Web Docs, undefined global property. Retrieved from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/GlobalObjects/undefined

2. Mozilla Developer Network (MDN) Web Docs: "Because variable declarations (and declarations in general) are processed before any code is executed, declaring a variable anywhere in the code is equivalent to declaring it at the top. This also means that a variable can appear to be used before it's declared. This behavior is called 'hoisting'..."

Source: MDN Web Docs, var statement, Section: "var hoisting". Retrieved from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var#varhoisting

3. Eloquent JavaScript, 3rd Edition by Marijn Haverbeke (a resource used in university curricula): "Functions see the bindings that are local to them and the bindings in their surrounding scopes... The set of bindings visible inside a block is determined by the place of that block in the program text... Before ES6, only functions created new scopes, so old-style bindings, created with the var keyword, are visible throughout the whole function that they appear in—or throughout the global scope, if they are not in a function."

Source: Haverbeke, M. (2018). Eloquent JavaScript (3rd ed.). No Starch Press. Chapter 3: Functions, Section: "Bindings and Scopes". Retrieved from https://eloquentjavascript.net/03functions.html#hnS3a4z3525

The question states that the DataPrettyPrint module has one default export, the function printDate(). According to the ECMAScript (ES6) module specification, which Lightning Web Components use, a default export is imported without curly braces {}. The developer can assign any valid name to the imported function. Option B correctly imports the default function, assigns it the local name myPrintDate, and then invokes it. This syntax is the standard and correct way to handle default imports.

A: This syntax, using curly braces {}, is for importing named exports. The question specifies a default export, making this syntax incorrect.

C: While the import statement itself is syntactically correct for a default export, the function call DataPrettyPrint.printDate() is wrong. The default export is assigned directly to the printDate identifier, not as a property of an object named after the module.

D: This syntax import { ... as ... } is used for importing and renaming a named export. It is not the correct syntax for a default export.

1. Salesforce Lightning Web Components Dev Guide: In the "Share JavaScript Code" section, under "JavaScript Modules," the documentation explicitly differentiates between named and default exports. It states, "To import the default export, don’t use curly braces." It provides an example: import util from 'c/utils';, which directly matches the syntax used in the correct answer.

Reference: Lightning Web Components Dev Guide > Developer Tools > Share JavaScript Code > JavaScript Modules.

2. MDN Web Docs (Mozilla): The official Mozilla documentation for JavaScript provides a definitive guide on import and export syntax.

For import, it specifies the syntax for importing defaults as: import defaultExport from "module-name";. This confirms that a custom name can be assigned to the default export without using curly braces.

Reference: MDN Web Docs, import statement, "Importing defaults" section.

3. Exploring ES6 (by Dr. Axel Rauschmayer): This peer-reviewed book on JavaScript features is a highly respected academic resource.

In Chapter 17, "Modules," Section 17.3.2, "Default exports (one per module)," it explains that a default export is imported with the syntax import myIdentifier from 'src/mylib';. This directly supports the structure of the correct answer.

Reference: Rauschmayer, A. (2015). Exploring ES6. Chapter 17, Section 17.3.2.

The setTimeout function schedules a function to be executed after a specified delay. The first argument must be a function reference.

Option C correctly uses an anonymous arrow function () => { formatName("John', 'Doe') } as the callback. This creates a new function that, when executed by setTimeout after 5000ms, will then call formatName with the desired arguments. This is a standard and secure method for deferring a function execution with parameters. Note that the option contains typos (setTimout and mismatched quotes), but the programming pattern it represents is the correct one among the choices.

A. setTimeout (formatName(), 5000, "John", "BDoe");

This option invokes formatName() immediately and passes its return value (a string) to setTimeout, not the function itself.

B. setTimeout (formatName('John', ‘'Doe'), 5000);

Similar to option A, this invokes formatName() immediately. The function should be executed after the delay, not before.

D. setTimeout ('formatName', 5000, 'John", "Doe');

Using a string as the first argument is a legacy, insecure practice equivalent to eval(). Furthermore, passing additional parameters to the callback is not supported with this string syntax.

---

1. MDN Web Docs, WindowOrWorkerGlobalScope.setTimeout():

Section: Syntax: The documentation specifies the recommended syntax as setTimeout(functionRef, delay, param1, param2, ...) where functionRef is a reference to a function.

Section: The 'this' problem: This section provides an example of using a wrapper function (anonymous function) to solve context and parameter issues, validating the pattern in option C: setTimeout(() => { myObj.myMethod('param1', 'param2'); }, 0);

Section: Notes (on string literals): The documentation explicitly warns against using strings: "For historical reasons, you can pass a string instead of a function... This is not recommended for the same reasons that using eval() is a security risk." It also states, "Passing additional parameters to the function in the first parameter is not supported in this syntax," which directly invalidates option D.

2. Salesforce Lightning Web Components Developer Guide:

Section: Use Third-Party JavaScript Libraries > setTimeout() and setInterval(): The guide demonstrates the use of standard JavaScript setTimeout, including clearing it in the disconnectedCallback, confirming that standard, modern JavaScript practices (like the one in option C) are expected. It does not mention or endorse the legacy string syntax.

Explanation:

Z is equal to 3.14

Use strict has effect only on line 5.

Line 5 throws an error

The Array.prototype.reduce() method executes a user-supplied "reducer" callback function on each element of the array, in order, passing in the return value from the calculation on the preceding element. The final result of running the reducer across all elements of the array is a single value.

When reduce() is called on an empty array and an initialValue is provided (in this case, 10), the callback function is never executed. Instead, the method immediately returns the provided initialValue. Therefore, calling myFunction with an empty array results in the return value of 10.

A. Returns 0: The provided initial value is 10. The function would only return 0 if that were the specified initial value.

B. Throws an error: A TypeError is thrown only when reduce() is called on an empty array without providing an initial value.

D. Returns NaN: NaN is not a possible outcome in this scenario, as the function is designed to return the defined initial value.

1. MDN Web Docs (Mozilla): Array.prototype.reduce()

Section: "Return value"

Content: "If the array is empty and initialValue is provided, initialValue will be returned without calling callbackFn." This directly confirms that for an empty array, the provided initial value is the return value.

2. ECMAScript® 2023 Language Specification (ECMA-262, 14th edition):

Section: 23.1.3.25 Array.prototype.reduce ( callbackfn [ , initialValue ] )

Content: The specification details the algorithm for reduce. In step 8, if the array length len is 0 and initialValue is not present, a TypeError is thrown. However, if initialValue is present (as it is in the question), step 9 states to return initialValue. This is the formal definition of the behavior.

3. University of Washington, CSE 154: Web Programming: Higher-Order Functions in JavaScript

Section: "Array reduce function"

Content: Course materials often explain that providing an initial value is a best practice to handle empty arrays gracefully, preventing errors and ensuring a predictable default return value, which is exactly the behavior tested in this question.

The JSON.stringify() method converts a JavaScript object to a JSON string. According to the JSON standard, functions are not a supported data type. Therefore, when the user object is stringified, the fullName property, which holds a function, is omitted from the resulting JSON string.

The JSON.parse() method then creates a new object, copiedUser, from this string. This new object will only contain the firstName and lastName properties. The subsequent line attempts to call copiedUser.fullName(), but since this property does not exist on copiedUser, its value is undefined. Attempting to invoke undefined as a function throws a TypeError.

A. Hello John Doe

This is incorrect because the fullName function is lost during the JSON.stringify process and does not exist on the copiedUser object, preventing a successful call.

B. Hello Dan

This is incorrect as the name "Dan" is not present in the code, and more importantly, the code fails with an error before it can produce any output.

C. Hello Dan Doe

This is incorrect for the same reasons as option B; the name is not in the code, and the execution halts due to a TypeError.

D. SyntaxError: Unexpected token in JSON

This is incorrect because the error is a TypeError, not a SyntaxError. A SyntaxError would occur if JSON.parse() received a malformed JSON string, but JSON.stringify() produces valid JSON.

1. MDN Web Docs (Mozilla): The JSON.stringify() documentation explicitly states its behavior with unsupported types.

Source: MDN Web Docs, JSON.stringify() method.

Reference: Under the "Description" section, it notes: "undefined, Function, and Symbol values are not valid JSON values. ...if any such values are encountered during conversion they are either omitted (when found in an object)..." This confirms the fullName property will be removed.

2. ECMAScript® 2023 Language Specification (ECMA-262, 14th edition): The official standard for JavaScript defines this behavior.

Source: ECMA-262, 14th Edition, June 2023.

Reference: Section 25.5.2, JSON.stringify ( value [ , replacer [ , space ] ] ). The internal abstract operation SerializeJSONProperty dictates that if the value of a property is a function, undefined, or a symbol, it returns undefined, which causes the property to be excluded from the final JSON object string.

The Promise.prototype.finally() method is invoked when a promise is settled. A promise is considered settled when it is no longer pending, meaning it has either been fulfilled (resolved) or rejected. The callback function provided to .finally() will execute regardless of the promise's outcome, making it suitable for cleanup operations that must occur after an asynchronous action completes, successful or not. In the provided code, the finally() block will run after either the .then() block (on resolution) or the .catch() block (on rejection) has executed.

A. When rejected: This is incomplete. The .finally() method also executes when the promise is successfully resolved.

B. When resolved and settled: This phrasing is redundant. A resolved promise is, by definition, a settled promise. This option incorrectly excludes the rejection case.

C. When resolved: This is incomplete. The .finally() method also executes when the promise is rejected.

1. MDN Web Docs (Mozilla): "The finally() method of a Promise schedules a function to be called when the promise is settled (either fulfilled or rejected). It immediately returns an equivalent Promise object, allowing you to chain calls to other promise methods."

Source: Promise.prototype.finally(), MDN Web Docs.

2. Salesforce Lightning Web Components Developer Guide: "To execute code whether the promise is fulfilled or rejected, use finally()."

Source: "Work with Promises" section, Lightning Web Components Developer Guide.

3. ECMAScript® 2022 Language Specification (ECMA-262, 13th edition): The specification defines the behavior of Promise.prototype.finally. The internal operations ensure that the onFinally function is called for both the fulfillment and rejection paths of the promise.

Source: Section 27.2.5.3, Promise.prototype.finally ( onFinally ).

Explanation:

Str.substring(0,5);

Str.substr(0,5);

The issue lies in how the input field's value is retrieved. The getAttribute('value') method reads the initial value of the value attribute as defined in the HTML source code, which is "Hello". This attribute value does not update when the user types into the field.

To access the current, live text content of the input field, you must use the element's value property (input.value). This property reflects the real-time data entered by the user and is the correct way to get the dynamic value from form elements.

B. getElementByName is not a valid DOM method. The correct method is getElementsByName, which returns a NodeList (a collection), not a single element, and does not solve the core issue.

C. The correct event type string for addEventListener is 'click'. The string 'onclick' is incorrect and would prevent the event listener from being attached properly.

D. addCallback is not a standard DOM method for attaching event listeners. The correct method is addEventListener.

1. MDN Web Docs (Mozilla): The HTMLInputElement.value property documentation explicitly states it contains the current value of the control. In contrast, the Element.getAttribute() documentation explains it returns the value of the attribute as specified in the HTML, which may not reflect the current state.

Source: MDN Web Docs, HTMLInputElement.value property. Section: "Value".

Source: MDN Web Docs, Element.getAttribute() method. Section: "Return value".

2. Salesforce Lightning Web Components Developer Guide: Examples of handling DOM events consistently use the addEventListener method with the standard 'click' event type, demonstrating the correct syntax used in modern web development within the Salesforce ecosystem.

Source: Lightning Web Components Developer Guide, Section: "Work with DOM APIs", Subsection: "Add and Remove Event Listeners".

3. WHATWG - HTML Living Standard: The official standard distinguishes between content attributes (from the HTML source) and IDL (Interface Definition Language) attributes, which are the live properties on the DOM object. For input elements, the value IDL attribute (property) reflects the current value, while the value content attribute reflects the default value.

Source: HTML Living Standard, Section 4.10.5.1.13 "The value attribute".

To add a CSS class to an HTML element using standard JavaScript, you first need to select the element. The document.querySelector('#row-uc') method correctly selects the single table row element with the ID row-uc. Once the element is selected, its classList property, which is a DOMTokenList, is used to manipulate its classes. The add() method of the classList object is the standard and correct way to append the specified class, 'priority-account', to the element's list of classes.

A. classes-push is not a valid property or method in the standard Document Object Model (DOM) API for class manipulation.

B. addClass() is a common method in JavaScript libraries like jQuery, but it is not a native method on DOM elements in vanilla JavaScript.

C. querySelectorAll() returns a NodeList (a collection of elements), not a single element. A NodeList does not have a classList property.

---

1. Mozilla Developer Network (MDN) Web Docs on Element.classList: This document, considered an authoritative source for web standards, explains that classList is the standard property for accessing an element's classes and lists add() as the method for adding a class.

Source: MDN Web Docs, Element: classList property, Section: "Adding and removing classes". Available at: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

2. Mozilla Developer Network (MDN) Web Docs on Document.querySelector(): This documentation specifies that querySelector() returns the first Element that matches a specified CSS selector, which is the correct behavior needed to target a single element by its unique ID.

Source: MDN Web Docs, Document: querySelector() method. Available at: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

3. WHATWG - DOM Living Standard: The official standard for the Document Object Model defines the classList attribute on the Element interface.

Source: WHATWG, DOM Living Standard, Section 5.7.2 "The classList attribute". Available at: https://dom.spec.whatwg.org/#dom-element-classlist

The statement const arr = Array(5).fill(0) creates an array with two specific characteristics: its length is exactly 5, and every element within it is the number 0. The most accurate tests are those that precisely verify these two defining properties.

Option A, console.assert( arr.length === 5 ), correctly validates that the array has the exact length of 5.

Option B, arr.forEach(elem => console.assert(elem === 0)), iterates through every single element and asserts that its value is 0, comprehensively verifying the array's contents as intended by the .fill(0) method. Together, these two tests provide a complete and accurate validation of the array's state.

C. This assertion is logically flawed. arr[arr.length] (i.e., arr[5]) accesses an index outside the array's bounds (0-4), which returns undefined, causing the assertion undefined === 0 to fail.

D. This test is too general. While arr.length > 0 is true, it does not confirm the specific length of 5, making it less accurate than checking for the exact length.

---

1. Mozilla Developer Network (MDN) Web Docs, Array.prototype.fill(): "The fill() method changes all elements in an array to a static value, from a start index (default 0) to an end index (default array.length). It returns the modified array." This supports option B's logic of checking every element's value.

Source: Mozilla, Array.prototype.fill(), Accessed [Current Date]. Available at: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/GlobalObjects/Array/fill

2. Mozilla Developer Network (MDN) Web Docs, Array.prototype.length: "The length data property of an Array instance represents the number of elements in that array... The value of the length property is an integer with a positive sign and a value less than 2^32." This supports option A's direct and precise check of the array's size.

Source: Mozilla, Array.prototype.length, Accessed [Current Date]. Available at: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/GlobalObjects/Array/length

3. ECMAScript® 2023 Language Specification (ECMA-262, 14th edition):

Section 10.4.2.1 [[Get]] ( P, Receiver ): This section defines array indexing. For an array of length L, valid integer indices P are from 0 to L-1. Any attempt to get an index equal to or greater than L does not retrieve an element from the array's internal storage, leading to undefined. This confirms why option C is incorrect, as arr[5] is out of bounds for an array of length 5.

Section 23.1.3.6 Array.prototype.fill ( value [ , start [ , end ] ] ): The specification details how this method fills every element from the resolved start to end index with the provided value. This underpins the correctness of option B's comprehensive check.