Unit 2 - Practice Quiz

In JavaScript, single-line comments start with //. Multi-line comments are enclosed in /* ... */. <!-- ... --> is for HTML, and # is for languages like Python.

JavaScript has several primitive data types like String, Number, Boolean, null, undefined, and Symbol. Object is a complex data type, not a primitive one.

The const keyword is used to declare a constant variable, which means its value cannot be reassigned after it's initialized. let and var declare variables that can be reassigned.

Variables declared with let (and const) are block-scoped, meaning they are only accessible within the curly braces {} of the block where they are defined.

When the + operator is used with a number and a string, JavaScript performs type coercion and concatenates them, resulting in the string '55'.

The strict equality operator === returns true only if the operands are of the same type and have the same value. The loose equality operator == performs type coercion before comparison.

The if statement is the fundamental control flow statement that allows JavaScript to make decisions and execute code conditionally.

The standard way to declare a named function is by using the function keyword, followed by the function name, parentheses (), and a code block {}.

JavaScript arrays are zero-indexed, meaning the first element is at index 0, the second at index 1, and so on. Elements are accessed using bracket notation [].

An empty object is created using curly braces {}. Square brackets [] create an empty array.

The onclick event is fired when a pointing device button (like a mouse's primary button) is pressed and released on a single element.

The window.alert() method displays an alert dialog with an optional specified message and an OK button. It's commonly used for simple notifications to the user.

The typeof operator returns a string indicating the type of the unevaluated operand. true and false are boolean values, so typeof true returns the string "boolean".

var was the original keyword for variable declaration. It has function scope, unlike let and const which have block scope and were introduced in ES6.

The modulus operator (%) is an arithmetic operator that returns the remainder when one operand is divided by another. For example, 10 % 3 evaluates to 1.

The break statement terminates the current loop, switch, or label statement and transfers program control to the statement following the terminated statement.

Arrow function syntax provides a shorter way to write functions. For a function with no arguments, you use empty parentheses () followed by the fat arrow => and the function body.

The push() method is used to add new items to the end of an array. pop() removes from the end, and shift() removes from the beginning.

A for loop in JavaScript has three parts inside the parentheses, separated by semicolons: initialization (let i = 0), condition (i < 5), and final-expression (i++).

addEventListener() is the standard and most flexible way to handle events. It allows you to add multiple event listeners for the same event to one element without overwriting existing event handlers.

The + operator performs string concatenation when one of the operands is a string, resulting in '5' + 3 becoming '53'. However, the - operator is exclusively a numeric operator, so it coerces the string '5' into the number 5 before performing subtraction, resulting in 5 - 3 which is 2.

Because var is function-scoped (or globally-scoped here), there is only one i variable shared by all loop iterations. The setTimeout callbacks are executed after the loop has finished. By that time, the value of i has become 3. Therefore, all three callbacks log the final value of i, which is 3.

Arrow functions do not have their own this binding. Instead, they inherit this from the surrounding (lexical) scope. In this case, the arrow function is defined in the global scope where this refers to the global object (window in browsers), which does not have a name property. Thus, this.name is undefined.

The slice() method returns a shallow copy of a portion of an array into a new array object without modifying the original array. The splice() method, however, changes the contents of an array by removing or replacing existing elements and/or adding new elements in place, thus mutating the original array.

The continue statement terminates the execution of the statements in the current iteration of the loop and continues execution of the loop with the next iteration. The condition i % 2 === 0 is true for i = 0, 2, 4. In these cases, count++ is skipped. The count is only incremented when i is 1 and 3. Therefore, the final value of count is 2.

The Logical OR (||) operator returns the right-hand side operand if the left-hand side is any falsy value (e.g., 0, '', false, null, undefined). Since 0 is falsy, resultA becomes 'default'. The Nullish Coalescing (??) operator, however, only returns the right-hand side operand if the left-hand side is null or undefined. Since 0 is neither null nor undefined, resultB is assigned the value of 0.

The default event propagation model in modern browsers is event bubbling. This means the event is first triggered on the innermost target element (#child), and then it 'bubbles up' to its ancestors in the DOM tree. So, the child's click handler will execute first, followed by the parent's.

The correct DOM API methods are document.createElement() to create a new element node, setting its textContent property for the text, and then using appendChild() on the parent element to insert it into the DOM. While the innerHTML option also works, the question asks to create and append, which is best represented by the first option's programmatic approach.

This demonstrates variable shadowing and lexical scope. Inside the test function, a new block-scoped variable x is declared and initialized to 20. This shadows the outer x. The first console.log(x) refers to this inner x, so it logs 20. After the function call, the second console.log(x) is in the global scope and refers to the original x declared at the top, so it logs 10.

This is a well-known historical quirk in JavaScript. The typeof null operator returns "object". It's considered a bug that has not been fixed to avoid breaking existing code on the web. The correct way to check for null is by using the strict equality operator: myVar === null.

Array destructuring allows you to unpack values from arrays. first is assigned 'a'. The comma , skips the second element ('b'). third is assigned 'c'. The rest operator ...rest collects all remaining elements into a new array. The only remaining element is 'd', so rest becomes ['d'].

The switch statement starts matching at case 2. Since there is no break statement in case 2, execution 'falls through' to case 3. The code in case 3 is executed, and then the break statement is encountered, which exits the switch block. Therefore, access is first concatenated with 'Editor ' and then with 'Admin '.

The function uses a default parameter for y. When calculate is called with only one argument (5), x is set to 5. The default value for y is then calculated based on x, so y becomes 5 * 2 = 10. The function then returns x + y, which is 5 + 10 = 15.

The post-increment operator x++ first returns the current value of x (which is 0) for the expression evaluation, and then increments x. The || operator evaluates the left side. Since 0 is a falsy value, the operator proceeds to evaluate the right side, which is 10. Thus, y is assigned 10. Independently, x was incremented to 1 after its value was used in the expression.

Setting innerHTML causes the browser to parse the assigned string as HTML and create the corresponding DOM nodes. div.innerHTML = '<strong>Hello</strong>' will result in bold text. Setting textContent treats the string as plain text; any HTML tags within it are rendered literally, not interpreted. div.textContent = '<strong>Hello</strong>' will display the literal string '<strong>Hello</strong>' on the page.

The default action of a form submission is to send the data to a server and reload the page. event.preventDefault() is used to cancel this default browser behavior. This is essential in modern single-page applications (SPAs) where form submissions are typically handled by JavaScript (e.g., using AJAX/Fetch) without a full page refresh.

This code uses a computed property name. The square brackets [] around propName in the object literal cause the expression inside them to be evaluated. The result of that evaluation (the string 'status') is then used as the property key. The value of that property is set to the value of the value variable ('active').

In JavaScript, declarations made with var are 'hoisted' to the top of their scope, but their initializations are not. The code is interpreted by the engine as if it were written like this:

javascript
var message; // Declaration is hoisted
console.log(message); // Logs undefined
message = 'Hello, Hoisting!'; // Initialization happens here

Therefore, when console.log is called, the message variable has been declared but not yet assigned a value, so its value is undefined.

The loose equality operator (==) performs type coercion. According to the specification, null is only loosely equal to undefined (and itself).

• '2' === 2 is false because strict equality (===) checks for both value and type.
  So, the correct answer is null == undefined.

This is an IIFE. The function (function(a, b) { ... }) is declared and immediately called with the arguments (5, 10). Inside the function, a is 5 and b is 10. It calculates the sum (15) and returns it. This return value is assigned to the result constant. Finally, console.log(result) prints the value that was returned from the function, which is 15.

This question tests the understanding of scope (var vs. let) and closures.

In the first loop, the variable i is declared with var, which has function scope (or global scope here). By the time the setTimeout callbacks execute, the loop has already completed, and the value of i is 3. Since all three callbacks share a closure over the same i variable, they all log 3.

In the second loop, the variable j is declared with let, which has block scope. A new lexical environment is created for each iteration of the loop. Each setTimeout callback captures a different j variable with the value from its specific iteration (0, 1, and 2). Therefore, it logs 0, 1, and 2.

This question tests knowledge of operator precedence, specifically the interaction between the logical OR (||) and the nullish coalescing operator (??). The ECMAScript specification explicitly forbids combining || and && directly with ?? without parentheses to avoid ambiguity and potential bugs. Trying to evaluate y || x ?? 'default' will result in a SyntaxError: Unexpected token '??'. The expression must be clarified with parentheses, for example, (y || x) ?? 'default' or y || (x ?? 'default').

Object.freeze() performs a shallow freeze. It makes the top-level properties of the config object immutable, but it does not recursively freeze nested objects. In this case, config.id cannot be changed, and because we are in 'use strict' mode, the attempt obj.id = 2; throws a TypeError, which is caught by the try...catch block. However, the config.settings object itself is not frozen. Therefore, the line obj.settings.retries = 5; successfully modifies the property of the nested object. The final console.log will output 5.

This question tests the lexical scoping of this in arrow functions. The greet function is an arrow function defined inside the User constructor. Arrow functions capture the this value of the enclosing execution context at the time they are created. In this case, greet captures the this from the User constructor, which refers to the newly created instance (user). The nestedGreet function, also an arrow function, is defined inside greet. It too captures its this from its enclosing context, which is greet. Since greet's this is the user instance, nestedGreet's this is also the user instance. Therefore, this.name correctly resolves to 'Alice'.

This question tests the use of labeled continue statements. The outer_loop label is applied to the outer for loop. When the condition i === 1 && j === 1 is met, the continue outer_loop; statement is executed. This statement does not just continue the inner loop; it stops the current iteration of the outer loop and begins its next iteration.

• i=0: The inner loop completes fully. result becomes o0i0i1i2.
• i=1: The outer loop adds o1. The inner loop runs for j=0, adding i0. result is now o0i0i1i2o1i0. When j=1, the continue outer_loop is triggered. The rest of the inner loop and the outer loop's current iteration are skipped.
• i=2: The outer loop starts its next iteration. It adds o2 and the inner loop completes fully, adding i0i1i2. The final result is o0i0i1i2o1i0o2i0i1i2.

This is a classic JavaScript type coercion puzzle.

For res2 = [] + {}, the + operator triggers string concatenation. [] is coerced to an empty string ''. {} is coerced to the string '[object Object]'. The result is '' + '[object Object]', which is '[object Object]'.

For res1 = {} + [], the JavaScript parser interprets the initial {} not as an object literal, but as an empty code block. Therefore, the expression is evaluated as {}; + []. The empty block does nothing. The expression then becomes + []. The unary + operator coerces its operand to a number. [] coerces to '', and +'' coerces to 0. So, res1 is 0.

This question assesses understanding of the three phases of DOM event propagation: capture, target, and bubble.

1. Capture Phase: The event travels from the root down to the target element. Listeners registered with useCapture = true (the third argument to addEventListener) are fired. Here, div1's capture listener fires first. console.log('div1 capture').
2. Target Phase: The event reaches the target element (p). The listener on p is executed. console.log('p target').
3. Bubble Phase: The event travels back up from the target to the root. Listeners registered without useCapture = true (the default) are fired. It first hits div2's parent, which is div2. console.log('div2 bubble'). Then it bubbles up to div1. console.log('div1 bubble').

The final order is: div1 capture, p target, div2 bubble, div1 bubble.

This question tests the concept of the Temporal Dead Zone (TDZ). Variables declared with let and const are block-scoped and are not initialized until their definition is evaluated. The period from the start of the block until the declaration is encountered is the TDZ for that variable. Accessing the variable a within the TDZ, as done by console.log(a), results in a ReferenceError. This is different from var, which would be hoisted and initialized with undefined, logging undefined.

This question tests the specified behavior of Array.prototype.forEach when the array is modified during iteration. According to the ECMAScript specification:

1. The range of elements processed by forEach is set before the first invocation of the callback.
2. Elements that are appended to the array after the call to forEach begins will not be visited by the callback. (arr.push(4) adds an element that will not be visited).
3. If existing elements of the array are changed, their value passed to the callback will be the value at the time that element is visited. Elements that are deleted before being visited are not visited.

Execution trace:

• Iteration 1 (index 0): num is 1. console.log(1) is executed. The if condition is true. arr.push(4) makes arr [1, 2, 3, 4]. arr.splice(1, 1) removes the element at index 1 (the 2), making arr [1, 3, 4]. The original 2 is now gone.
• Iteration 2 (index 1): forEach now needs to visit the element at index 1 of the original array range. However, the current element at index 1 is now 3. So, num is 3. console.log(3) is executed.

This question tests a key difference between regular functions and arrow functions: the arguments object. Arrow functions do not have their own arguments object. Instead, they capture the arguments object from the closest non-arrow parent function. In this case, getArrow is an arrow function inside the regular function getData. Therefore, getArrow does not have its own arguments object; it uses the arguments object of getData. When myObject.getData('outer_arg1') is called, the arguments object for getData is ['outer_arg1']. So, arguments[0] inside getArrow refers to 'outer_arg1', not 'arg1'. The arguments passed to getArrow itself are ignored by the arguments object.

This question tests the understanding of the JavaScript Event Loop, specifically the difference between the macrotask (or task) queue and the microtask queue.

1. Synchronous code runs first: 'A: Script Start' and 'E: Script End' are logged immediately.
2. setTimeout places its callback in the macrotask queue.
3. Promise.resolve().then() places its callback in the microtask queue.
4. After the current script (the initial macrotask) is finished, the JavaScript engine checks the microtask queue. It must completely empty the microtask queue before starting a new macrotask.
5. The callback for 'C: Promise.then 1' is executed. This .then() returns a new promise which resolves, and its own .then() callback ('D: Promise.then 2') is added to the end of the microtask queue.
6. The engine checks the microtask queue again and finds the second promise callback. It is executed, logging 'D: Promise.then 2'.
7. The microtask queue is now empty. The engine can now process the next macrotask, which is the setTimeout callback. 'B: setTimeout' is logged.

The final order is A, E, C, D, B.

This tests a deep understanding of operator precedence and order of evaluation in JavaScript. The + operator has left-to-right associativity. The expression is evaluated as (arr[a] + (a += 1)) + arr[a++].

1. arr[a]: a is 1. arr[1] is 3. The expression is now (3 + (a += 1)) + arr[a++].
2. (a += 1): This is the pre-increment combined with assignment. a is incremented to 2, and the new value (2) is returned. The expression is now (3 + 2) + arr[a++].
3. 3 + 2: This evaluates to 5. The expression is now 5 + arr[a++].
4. arr[a++]: This uses the post-increment operator. The current value of a (2) is used for the array index access first. arr[2] is 4. After this value is retrieved, a is incremented to 3. The expression is now 5 + 4.
5. 5 + 4: This evaluates to 9.
   So the final value of result is 9.

This question tests knowledge of Object.create(null) and its implications for an object's prototype chain.

• Object.create(null) creates an object that does not have a prototype. It does not inherit from Object.prototype, which is where methods like hasOwnProperty, toString, etc., reside.
• When obj.hasOwnProperty('prop') is called, JavaScript looks for the hasOwnProperty method on obj itself, and then on its prototype chain. Since obj has no prototype, the method is not found, resulting in a TypeError. The catch block catches this error and sets hasOwn to the error's name, which is 'TypeError'.
• The in operator, however, works differently. It checks if a specified property is in an object or its prototype chain. Since prop is an own property of obj, 'prop' in obj evaluates to true.
• The final output is TypeError, true.

This is a classic question about how numbers are represented in JavaScript. JavaScript uses the IEEE 754 standard for floating-point arithmetic. Binary representations of fractions like 0.1 and 0.2 are repeating and cannot be stored with perfect precision.

• 0.1 in binary floating point is something like 0.00011001100110011...
• 0.2 is something like 0.0011001100110011...
  When these imprecise numbers are added, the result is very close to, but not exactly, 0.3. The actual result is 0.30000000000000004. Since 0.30000000000000004 is not strictly equal (===) to 0.3, the expression evaluates to false.

The switch statement in JavaScript uses strict equality (===) for its comparisons.

• Case 1: obj === { key: 'value' }. This comparison evaluates to false. Even though the two objects have the same structure and values, they are two different instances in memory. The strict equality operator checks for reference equality for objects, not structural equality.
• Case 2: obj === obj. This comparison evaluates to true because it is comparing the object reference to itself.
  Therefore, the code inside the second case is executed, and 'Case 2' is logged to the console.

Event handlers in JavaScript run synchronously. When an async function is used as a handler, the browser invokes it, but it does not wait for the promise returned by the async function to resolve. The function executes up to the first await, then pauses, and control is returned to the event loop. The browser, having finished the synchronous part of the event handler, proceeds with the default action (e.g., ticking the checkbox). By the time the confirmAction() promise resolves and event.preventDefault() is called, it is too late to prevent the default action. To handle this correctly, one should call event.preventDefault() before the await and then manually re-trigger the action if the confirmation is successful.

Arrow functions are not constructible and do not have a [[Construct]] internal method. They also lack a prototype property. The new keyword is used to create an instance of an object from a constructor function. When you try to use new with an arrow function, JavaScript will throw a TypeError with a message like "ArrowConstructor is not a constructor". The try...catch block will catch this error, and the value of instance will become the name of the error, which is 'TypeError'.

This question tests the limitations and transformations that occur during the JSON.stringify and JSON.parse process, often used for deep cloning.

JSON.stringify has specific rules for converting values:

• Functions (getSummary) are omitted.
• undefined values (temp) are omitted.
• Date objects are converted to their ISO 8601 string representation (e.g., "2023-10-27T10:00:00.000Z").

The resulting JSON string will not contain the getSummary or temp keys, and the lastLogin value will be a string. When JSON.parse reconstructs the object from this string, the lastLogin property will be a string, not a Date object. Therefore, typeof result.details.lastLogin will be 'string'.

This question tests deep knowledge of the Abstract Equality Comparison Algorithm (==).

1. x == y ('10' == 10): When comparing a string and a number, the string is converted to a number. '10' becomes 10. 10 == 10 is true.
2. x === y ('10' === 10): Strict equality checks for both value and type. Since the types (string and number) are different, it's false.
3. y == [10] (10 == [10]): When comparing a primitive and an object, the object is converted to a primitive using ToPrimitive. For an array, this is equivalent to toString(). [10].toString() results in the string '10'. The comparison becomes 10 == '10', which, as in the first case, is true.
4. '1,0' == [1,0]: The array [1,0] is converted to a primitive via toString(), which calls join(','). [1,0].toString() results in the string '1,0'. The comparison becomes '1,0' == '1,0', which is true.