What is the impact of long-running JavaScript tasks on the browser's responsiveness?
They enhance user experience by providing smoother animations and transitions.
They can block the main thread, leading to a frozen UI and unresponsive interactions.
They improve rendering performance by allowing the browser to optimize resource allocation.
They have no significant impact on browser responsiveness, as JavaScript execution is asynchronous.
You need to add an event listener to a dynamically created element. What technique should you use?
Directly attach the listener to the element before appending it to the DOM.
Event delegation: attach the listener to a parent element that already exists in the DOM.
Attach the listener to the element's parent using event bubbling.
Use setTimeout to delay the listener attachment until after the element is added to the DOM.
setTimeout
Which tool is commonly used for profiling JavaScript code execution and identifying performance bottlenecks?
console.time()
Chrome DevTools Performance Tab
JSON.stringify()
Array.reduce()
Which method allows you to move up from a child element to its direct parent in the DOM?
parentNode
parentElement
previousSibling
closest()
What will be logged to the console in this code snippet: console.log((function(a) { return a * a; })(5));?
console.log((function(a) { return a * a; })(5));
25
5
10
undefined
How do modules enhance code organization and reusability in JavaScript?
They are used for creating user interfaces and handling user interactions.
Modules primarily handle data persistence in JavaScript applications.
Modules enable asynchronous programming, improving the performance of web applications.
They allow developers to group related code into separate files and control their visibility and accessibility, reducing global scope pollution.
How can you handle errors inside an async function?
async
By using the throw keyword.
throw
By calling the .catch() method on the async function itself.
.catch()
Errors cannot be handled inside async functions.
Using a try...catch block.
try...catch
Which method is most efficient for finding a specific element in the DOM based on its ID?
getElementById('my-id')
querySelector('#my-id')
getElementsByClassName('my-class')[0]
querySelectorAll('#my-id')[0]
You have a form with client-side validation. What is the recommended approach to prevent form submission if validation fails?
Set the form's 'action' attribute to an empty string.
Use event.preventDefault() and handle the submission logic manually.
event.preventDefault()
Use event.stopPropagation() to stop the submission event.
event.stopPropagation()
Remove the 'submit' attribute from the form element dynamically.
How do ES6 classes simplify object-oriented programming in JavaScript compared to constructor functions?
Classes offer a more concise and familiar syntax for defining objects and inheritance, though they still utilize prototypes under the hood.
ES6 classes introduce a completely new inheritance model unrelated to prototypes.
ES6 classes are primarily used for working with the DOM and have limited object-oriented capabilities.
Classes eliminate the need for prototypes, making object creation more efficient.