JS-Dev-101 Practice Questions

The document.cookie property is an accessor, not a simple data property. When you read it, you get a string of all cookies for the document. When you assign a value to it, you are not overwriting all cookies. Instead, the browser parses the string and adds the new cookie or updates an existing cookie with the same name. All other cookies remain unaffected by this operation. The value 'John Smith' is valid, as modern browsers will handle the space.

B. The assignment will typically succeed. While URL encoding is best practice, browsers are lenient with spaces in cookie values and will often handle them correctly.

C. The property is document.cookie (singular), not cookies. The assignment operation adds or updates a single cookie; it does not wipe existing ones.

D. Assigning to document.cookie does not wipe or overwrite all other existing cookies; it only adds or updates the specified cookie.

1. MDN Web Docs, Document.cookie, "Using document.cookie" section. States: "You can set a new cookie by assigning a string with the cookie value to document.cookie... Note that this will not remove or change other cookies that are already stored."

2. Salesforce Lightning Web Components Dev Guide, Communicate with Cookies, "Set a Cookie" section. Demonstrates the same additive behavior of assigning to document.cookie.

Array.prototype.reduce’s callback must return the accumulator each iteration. Adding “return result;” (line 05) hands the updated value back to reduce, eliminating the undefined that occurs when nothing is returned.

A. Early-returning for an empty array has no effect on the missing return that causes undefined.

B. result = result + current still needs to be returned; omission keeps undefined.

C. map returns a new array, not a single sum; also fails to return inside reduce.

1. ECMA-262, 13th ed., §23.1.3.19 “Array.prototype.reduce”, steps 5–6 (accumulator is the value returned each callback).

2. Stanford CS193p “JavaScript ES6 Review” slides, p. 22 (reduce requires returning accumulator).

The execution order is determined by the JavaScript event loop and the nature of async/await.

1. console.log(4) executes first.

2. callDelay() is invoked. console.log(2) runs.

3. delay() is called. console.log(1) runs.

4. await pauses callDelay() and returns control to the main thread.

5. console.log(5) executes.

6. After the 1000ms timeout, the promise resolves, callDelay() resumes, and console.log(3) runs.

The final sequence logged is 4, 2, 1, 5, 3.

B. 4 2 1 5 3: This is the same as the correct answer, likely a typo in the question's options. It is correct.

C. 1 4 2 3 5: This order is incorrect as it misunderstands when async functions execute and when await yields control.

D. 4 5 1 2 3: This order is incorrect. It wrongly assumes the main thread completes entirely before any part of the async function runs.

MDN Web Docs, "Asynchronous JavaScript", JavaScript. Explains the event loop, callbacks, and async/await behavior.

MDN Web Docs, "async function", JavaScript Reference. Details that an async function executes synchronously until the first await expression.

Node.js Documentation, "The Node.js Event Loop, Timers, and process.nextTick()". Provides an in-depth guide on the phases of the event loop.

When new Pet() is called, the Pet constructor executes. It first calls the Animal constructor via Animal.call(this, ...). The Animal constructor sets two "own" properties on the new instance: this.type (to 'Animal', since the argument was undefined) and this.canTalk (to false). Then, the Pet constructor continues and sets the this.name and this.owner properties (both to undefined). Therefore, canTalk, type, name, and owner are all properties set directly on the pet1 instance. The question is flawed as it asks for three properties when four of the options are correct.

A. speak is a method inherited via the prototype chain (Pet.prototype which is created from Animal.prototype). It is not an "own" property set directly on the pet1 instance.

Note: The question is flawed as it asks for three properties, but B, C, D, and E are all properties set for the pet1 instance during its construction.

1. MDN Web Docs. (2023). new operator. Mozilla. Retrieved from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new. (See section "Description" for the steps of object creation).

2. MDN Web Docs. (2023). Function.prototype.call(). Mozilla. Retrieved from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/GlobalObjects/Function/call. (See section "Using call() to chain constructors for an object").

3. ECMA-262, 13th Edition. (June 2022). ECMAScript® 2022 Language Specification. Section 10.1.13 OrdinaryCreateFromConstructor.

The code iterates through the array to remove all elements with the value 4. The splice(i, 1) method removes the element at the current index i, modifying the array in place. When an element is removed, subsequent elements shift to the left. The crucial part is i--, which decrements the index. This ensures that after removing an element, the loop re-evaluates the same index on the next iteration, correctly checking the element that shifted into the current position. This process correctly removes all four instances of the number 4.

A. This result would occur if only the first 4 was removed, which is incorrect as the loop continues.

B. This result is not achievable with the given logic; it implies a specific 4 was skipped incorrectly.

C. This result would occur if the i-- was missing, causing the loop to skip the adjacent 4 after the first one was removed.

1. MDN Web Docs, Array.prototype.splice(). The documentation explains that splice() changes the contents of an array by removing or replacing existing elements, returning an array containing the deleted elements. It modifies the array in-place.

2. Eloquent JavaScript, 3rd Edition, by Marijn Haverbeke, Chapter 4: Data Structures: Objects and Arrays. The chapter discusses array methods and the consequences of modifying arrays while iterating over them.

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.

In JavaScript, NaN (Not-a-Number) has the unique property of not being equal to itself, so direct comparison (== or ===) fails. The global isNaN() function correctly identifies NaN, but it has a notable quirk: it coerces its argument to a number, so isNaN('hello') returns true. A more robust and modern method is Object.is(value, NaN), introduced in ES2015 (ES6). It determines if two values are the same without type coercion and correctly identifies NaN without the side effects of the global isNaN() function.

A. value === Number.NaN will always evaluate to false because NaN is never strictly equal to itself or any other value.

B. value == NaN will always evaluate to false because NaN is never loosely equal to itself or any other value.

1. ECMA-262, 11th Edition. (June 2020). ECMAScript® 2020 Language Specification. Section 7.2.14, "SameValueZero(x, y)" and Section 20.1.2.12, "Object.is ( value1, value2 )". (The specification details why Object.is(NaN, NaN) is true).

2. MDN Web Docs. (2023). NaN. Mozilla. Retrieved from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/GlobalObjects/NaN. (Section: "Testing against NaN").

3. MDN Web Docs. (2023). Object.is(). Mozilla. Retrieved from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/GlobalObjects/Object/is. (Section: "Description" and "Examples").

4. Haverbeke, M. (2018). Eloquent JavaScript (3rd ed.). No Starch Press. Chapter 1, "Values, Types, and Operators," Section "Special numbers".

import as alias from "module" gathers every named export into a single namespace object (alias). Functions foo and bar are accessed as properties (alias.foo(), alias.bar()).

B. import syntax requires “as ”; without it the statement is invalid.

C. “all” is not valid ES6 import syntax; compilation error.

D. Destructuring import brings in only foo and bar, not every function as required.

1. ECMA-262, 13th ed., §15.2.2.14 “ImportDeclaration”, Grammar: import as IdentifierName from ModuleSpecifier.

2. Salesforce Lightning Web Components Dev Guide, “ES Modules”, section “Namespace imports” (alias.foo()).

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 defines a getter for the fullName property. A getter binds an object property to a function that is executed when that property is looked up. It is accessed like a standard property, without parentheses, which invokes the underlying function and returns its result. Calling it as a function cat.fullName() would result in a TypeError because the property's value is the string returned by the getter, not the function itself.

A. cat.fullName() attempts to call the property as a method, which is incorrect for a getter and will cause a TypeError.

B. cat.get.fullName is invalid syntax; get is a keyword for defining the accessor, not a property on the object instance.

C. cat.function.fullName() is invalid syntax; function is not a property on the cat object that would contain fullName.

1. MDN Web Docs. (2023). get - JavaScript | MDN. Mozilla. Retrieved from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get. (See "Syntax" and "Examples" sections).

2. ECMA-262, 13th Edition. (June 2022). ECMAScript® 2022 Language Specification. Section 13.2.6.4 Object Literal: MethodDefinition.