JavaScript-Developer-I Practice Test Questions

221 Questions


Refer to code below:
Function muFunction(reassign){
Let x = 1;
var y = 1;
if( reassign ) {
Let x= 2;
Var y = 2;
console.log(x);
console.log(y);}
console.log(x);
console.log(y);}
What is displayed when myFunction(true) is called?


A. 2 2 1 1


B. 2 2 undefined undefined


C. 2 2 1 2


D. 2 2 2 2





C.
  2 2 1 2

Explanation:

The function declares x with let and y with var, both initialized to 1. When reassign is true, the if-block creates a new block-scoped x set to 2, while the var y redeclaration affects the function scope, updating y to 2. Inside the block, console.log(x) prints 2 (inner x), and console.log(y) prints 2 (function-scoped y). After the block, the inner x is discarded so the outer x remains 1, but y stays 2. Therefore, it logs: 2 2 1 2. This illustrates scoping differences critical for writing efficient predictable JavaScript code.

Universal Container(UC) just launched a new landing page, but users complain that the website is slow. A developer found some functions that cause this problem. To verify this, the developer decides to do everything and log the time each of these three suspicious functions consumes.
console.time(‘Performance’);
maybeAHeavyFunction();
thisCouldTakeTooLong();
orMaybeThisOne();
console.endTime(‘Performance’);
Which function can the developer use to obtain the time spent by every one of the three functions?


A. console.timeLog()


B. console.getTime()


C. console.trace()


D. console.timeStamp()





A.
  console.timeLog()

Explanation:

The console.timeLog() method lets developers record and display intermediate timestamps for named timers started with console.time(). In this scenario, you can insert

console.timeLog('Performance');

immediately after each of the three function calls. Each call will print the elapsed time since console.time('Performance') began, without stopping the timer. Unlike console.timeEnd(), which stops and logs the final duration, console.timeLog() preserves the timer, allowing you to capture multiple checkpoints. Placing console.timeLog() after each function pinpoints individual bottlenecks, making it easier to optimize landing-page performance.

Refer to the code below:
01 let car1 = new promise((_, reject) =>
02 setTimeout(reject, 2000, “Car 1 crashed in”));
03 let car2 = new Promise(resolve => setTimeout(resolve, 1500, “Car 2
completed”));
04 let car3 = new Promise(resolve => setTimeout (resolve, 3000, “Car 3
Completed”));
05 Promise.race([car1, car2, car3])
06 .then(value => (
07 let result = $(value) the race. `;
08 ))
09 .catch( arr => (
10 console.log(“Race is cancelled.”, err);
11 ));
What is the value of result when Promise.race executes?


A. Car 3 completed the race.


B. Car 1 crashed in the race.


C. Car 2 completed the race.


D. Race is cancelled.





C.
  Car 2 completed the race.

Explanation:

The first promise to settle is car2, which resolves after 1.5 seconds with the string "Car 2 completed". Since Promise.race() returns the value of the first promise that either fulfills or rejects, the .then block receives "Car 2 completed". Appending " the race." yields:

result = "Car 2 completed the race.";

Neither car1 (which rejects after 2 seconds) nor car3 (which resolves after 3 seconds) can win the race. This pattern is useful for timeouts or competing async tasks where you only care about the quickest outcome.

is below:

< img src=”” height=”200” alt=”Image Preview…”/>
The JavaScript portion is:

01 functionpreviewFile(){
02 const preview = document.querySelector(‘img’);
03 const file = document.querySelector(‘input[type=file]’).files[0];
04 //line 4 code
05 reader.addEventListener(“load”, () => {
06 preview.src = reader.result;
07 },false);
08 //line 8 code
09 }

In lines 04 and 08, which code allows the user to select an image from their local computer , and to display the image in the browser?


A. 04 const reader = new File(); 08 if (file) URL.createObjectURL(file);


B. 04 const reader = new FileReader(); 08 if (file) URL.createObjectURL(file);


C. 04 const reader = new File(); 08 if (file) reader.readAsDataURL(file);





B.
  04 const reader = new FileReader(); 08 if (file) URL.createObjectURL(file);

Explanation:

You need to create a FileReader instance to handle file input and then generate a temporary URL for the selected file so the browser can display it. At line 04 you write:
const reader = new FileReader();
This gives you a reader that can process file blobs. Then at line 08 you check for a file and generate an object URL:
if (file) preview.src = URL.createObjectURL(file);
URL.createObjectURL(file) creates a blob URL pointing to the user’s local file, which you assign directly to the ’s src. This pattern is efficient and widely supported for image previews.

Given a value, which three options can a developer use to detect if the value is NaN?<br>
(Choose 3 answers)


A. value == NaN


B. Object.is(value, NaN)


C. value === Number.NaN


D. value ! == value


E. Number.isNaN(value)





B.
  Object.is(value, NaN)

D.
  value ! == value

E.
  Number.isNaN(value)

Explanation:

Three reliable methods to detect NaN are:
1. Object.is(value, NaN)
2. value !== value
3. Number.isNaN(value)

Because NaN is the only JavaScript value that is not equal to itself, value !== value uniquely identifies it. Object.is() correctly treats NaN as equal to itself, unlike ===, so Object.is(value, NaN) returns true only when value is NaN. Finally, Number.isNaN(value) is the standard built-in that returns true only for genuine NaN, avoiding the pitfalls of the global isNaN. The global isNaN remains unreliable. Prefer Number.isNaN for clarity.

Developer wants to use a module named universalContainersLib and them call functions from it.
How should a developer import every function from the module and then call the fuctions foo  and bar ?


A. import * ad lib from ‘/path/universalContainersLib.js’;
lib.foo();
lib.bar();


B. import (foo, bar) from ‘/path/universalContainersLib.js’;
foo();
bar();


C. import all from ‘/path/universalContaineraLib.js’;
universalContainersLib.foo();
universalContainersLib.bar();


D. import * from ‘/path/universalContaineraLib.js’;
universalContainersLib.foo();
universalContainersLib.bar();





A.
  import * ad lib from ‘/path/universalContainersLib.js’;
lib.foo();
lib.bar();

Explanation:

You can import all exports under a namespace alias and then call the functions on that alias:
import * as lib from '/path/universalContainersLib.js';
lib.foo();
lib.bar();

This uses the ES6 namespace import syntax (import * as alias from '…'), bundling every named export from the module into the lib object.

A developer is asked to fix some bugs reported by users. To do that, the developer adds a breakpoint for debugging. Function Car (maxSpeed, color){
This.maxspeed =masSpeed;
This.color = color;
Let carSpeed = document.getElementById(‘ CarSpeed’);
Debugger;
Let fourWheels =new Car (carSpeed.value, ‘red’);
When the code execution stops at the breakpoint on line 06, which two types of information are available in the browser console ?
(Choose 2 answers)


A. The values of the carSpeed and fourWheels variables


B. A variable displaying the number of instances created for the Car Object.


C. The style, event listeners and other attributes applied to the carSpeed DOM element


D. The information stored in the window.localStorage property





A.
  The values of the carSpeed and fourWheels variables

C.
  The style, event listeners and other attributes applied to the carSpeed DOM element

Explanation:

When execution is paused at a breakpoint, the DevTools Console (and Scope pane) lets you inspect all in-scope variables—so you can see the current values of carSpeed and fourWheels (A). You also get a live reference to any DOM element you’ve queried (here, the ), allowing you to explore its .style, event listeners, attributes, etc. (C).

You won’t automatically see a count of how many Car instances exist (that’d require custom bookkeeping), nor is window.localStorage shown by default in the paused-scope view—though you could manually inspect it in the Console.

A test has a dependency on database.query. During the test the dependency is replaced with an object called database with the method, query, that returns an array. The developer needs to verify how many times the method was called and the arguments used each time.
Which two test approaches describe the requirement?
(Choose 2 answers)


A. Integration


B. Black box


C. White box


D. Mocking





C.
  White box

D.
  Mocking

Explanation:

White box testing involves knowledge of the internal implementation. Verifying how many times database.query is called and with what arguments requires insight into the code’s inner workings, fitting a white-box approach.

Mocking replaces real dependencies with controllable fakes that record interactions. By mocking database.query, you can inspect call counts and arguments, satisfying the requirement to track each invocation.

Integration tests (A) focus on end-to-end behavior without inspecting internal calls, and black-box tests (B) treat the system as an opaque unit, so neither applies here.

Refer to the following code that imports a module named utils:
import (foo, bar) from ‘/path/Utils.js’;
foo() ;
bar() ;
Which two implementations of Utils.js export foo and bar such that the code above runs without error?
(Choose 2 answers)


A. // FooUtils.js and BarUtils.js exist
Import (foo) from ‘/path/FooUtils.js’;
Import (boo) from ‘ /path/NarUtils.js’;


B. const foo = () => { return ‘foo’ ; }
const bar = () => { return ‘bar’ ; }
export { bar, foo }


C. Export default class {
foo() { return ‘foo’ ; }
bar() { return ‘bar’ ; }


D. const foo = () => { return ‘foo’;}
const bar = () => {return ‘bar’; }
Export default foo, bar;





B.
  const foo = () => { return ‘foo’ ; }
const bar = () => { return ‘bar’ ; }
export { bar, foo }

C.
  Export default class {
foo() { return ‘foo’ ; }
bar() { return ‘bar’ ; }

Explanation:

The implementation in option B works because it explicitly declares foo and bar as named exports—using
export { foo, bar };
—which aligns perfectly with the import statement
import { foo, bar } from '/path/Utils.js';
so both functions are brought into scope by name. In option C, the module exports a default anonymous class whose instances provide foo and bar methods. While this does expose those methods, you cannot import them directly with named-import syntax; instead you’d write
import Utils from '/path/Utils.js';
const { foo, bar } = new Utils();
so although the class does bundle foo and bar, it does not satisfy the original import { foo, bar } form without additional steps.

Given the following code:
Counter = 0;
const logCounter = () => {
console.log(counter);
);
logCounter();
setTimeout(logCOunter, 1100);
setInterval(() => {
Counter++
logCounter();
}, 1000);
What is logged by the first four log statements?


A. 0 0 1 2


B. 0 1 2 3


C. 0 1 1 2


D. 0 1 2 2





C.
  0 1 1 2

Explanation:

1. Immediate call (logCounter()): prints the initial counter value of 0.

2. At 1000 ms, the setInterval callback fires: it increments counter to 1 then logs it.

3. At 1100 ms, the setTimeout callback runs next—it just logs counter, which is still 1 (no further increments have occurred).

4. At 2000 ms, the second setInterval tick increments counter to 2 and logs it.

So you see 0, then 1, then 1 again, then 2.

A developer is creating a simple webpage with a button. When a user clicks this button for the first time, a message is displayed.
The developer wrote the JavaScript code below, but something is missing. The message gets displayed every time a user clicks the button, instead of just the first time.
01 function listen(event) {
02 alert ( ‘Hey! I am John Doe’) ;03 button.addEventListener (‘click’, listen);
Which two code lines make this code work as required?
(Choose 2 answers)


A. On line 02, use event.first to test if it is the first execution.


B. On line 04, use event.stopPropagation ( ),


C. On line 04, use button.removeEventListener(‘ click” , listen);


D. On line 06, add an option called once to button.addEventListener().





C.
  On line 04, use button.removeEventListener(‘ click” , listen);

D.
  On line 06, add an option called once to button.addEventListener().

Explanation:

To ensure the button’s handler only runs once, you must either remove the listener after it fires or use the built-in “once” option. On line 04, calling

button.removeEventListener('click', listen);

stops further invocations. Alternatively, on line 06 you can pass { once: true } to addEventListener, which automatically deregisters the listener after the first click. Both approaches guarantee that your alert only appears on the first click without additional conditional logic.

Refer to the following code:
Let sampleText = ‘The quick brown fox jumps’;
A developer needs to determine if a certain substring is part of a string. Which three expressions return true for the given substring ?
(Choose 3 answers)


A. sampleText.includes(‘fox’);


B. sampleText.includes(‘ quick ’, 4);


C. sampleText.includes(‘ Fox ’, 3)


D. sampleText.includes(‘ fox ’);


E. sampleText.includes(‘ quick ’) !== -1;





A.
  sampleText.includes(‘fox’);

D.
  sampleText.includes(‘ fox ’);

E.
  sampleText.includes(‘ quick ’) !== -1;

Explanation:

All three expressions evaluate to true for the string ‘The quick brown fox jumps’. sampleText.includes('fox') directly finds “fox”; sampleText.includes(' fox ') locates the word “fox” surrounded by spaces; and although includes returns a boolean, writing sampleText.includes(' quick ') !== -1 still yields true because true !== -1. The other variants fail due to incorrect casing or start positions.


Page 1 out of 19 Pages