JavaScript execution flow - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to print 'Hello' to the console.

Javascript

console.[1]('Hello');

Drag options to blanks, or click blank then click option'

Alog

Bprint

Cwrite

Decho

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'print' which is not a JavaScript console method.

Using 'write' or 'echo' which are not valid console methods.

The console.log method prints messages to the console in JavaScript.

2fill in blank

medium

Complete the code to declare a variable named 'count' with value 5.

Javascript

let [1] = 5;

Drag options to blanks, or click blank then click option'

Avar

Bcount

Clet

Dconst

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'var' or 'let' as the variable name instead of the actual name.

Using 'const' which is a keyword, not a variable name.

Variable names go after the keyword. Here, count is the variable name.

3fill in blank

hard

Fix the error in the function declaration to correctly define a function named greet.

Javascript

function [1]() {
  console.log('Hi');
}

Drag options to blanks, or click blank then click option'

AfunctionGreet

BgreetFunction

Cgreet()

Dgreet

Attempts:

3 left

💡 Hint

Common Mistakes

Including parentheses in the function name during declaration.

Using invalid function names.

Function names should not include parentheses in the declaration. Just use the name greet.

4fill in blank

hard

Fill both blanks to create a for loop that counts from 0 to 4.

Javascript

for (let i = [1]; i [2] 5; i++) {
  console.log(i);
}

Drag options to blanks, or click blank then click option'

A0

B<

C<=

D5

Attempts:

3 left

💡 Hint

Common Mistakes

Starting at 1 instead of 0.

Using <= 5 which would count to 5 instead of 4.

The loop starts at 0 and runs while i is less than 5, counting 0 to 4.

5fill in blank

hard

Fill all three blanks to create an if statement that checks if x is greater than 10 and prints 'Big'.

Javascript

if ([1] [2] [3]) {
  console.log('Big');
}

Drag options to blanks, or click blank then click option'

Ax

B>

C10

Dx > 10

Attempts:

3 left

💡 Hint

Common Mistakes

Putting the whole condition as one blank instead of separate parts.

Using wrong comparison operators like < or =.

The condition checks if variable x is greater than 10 using the > operator.

Practice

1. What happens when JavaScript encounters a function declaration in the code?

easy

A. The function runs immediately.

B. The function is stored but not run until called.

C. The function is ignored.

D. The function causes an error.

Solution

1. Step 1: Understand function declaration behavior

   When JavaScript sees a function declared, it saves it in memory but does not execute it immediately.

2. Step 2: Recognize when functions run

   Functions only run when they are explicitly called later in the code.

3. Final Answer:

   The function is stored but not run until called. -> Option B

4. Quick Check:

   Functions run only when called = A [OK]

Hint: Functions run only when called, not on declaration [OK]

Common Mistakes:

• Thinking functions run immediately on declaration
• Confusing declaration with invocation
• Assuming functions are ignored until called

2. Which of the following is the correct way to call a function named greet in JavaScript?

easy

A. greet();

B. greet;

C. call greet();

D. function greet();

Solution

1. Step 1: Identify function call syntax

   In JavaScript, calling a function requires the function name followed by parentheses.

2. Step 2: Check each option

   greet(); uses greet(); which correctly calls the function. Others are incorrect syntax.

3. Final Answer:

   greet(); -> Option A

4. Quick Check:

   Function call needs parentheses = A [OK]

Hint: Call functions with parentheses: name() [OK]

Common Mistakes:

• Forgetting parentheses when calling functions
• Using 'call' keyword incorrectly
• Confusing declaration syntax with call

3. What will be the output of the following code?

console.log('Start');
setTimeout(() => console.log('Timeout'), 0);
console.log('End');

medium

A. StartEndTimeout

B. EndStartTimeout

C. TimeoutStartEnd

D. StartTimeoutEnd

Solution

1. Step 1: Understand synchronous and asynchronous code

   console.log('Start') runs first and prints 'Start'. setTimeout schedules a function to run later, after current code finishes.

2. Step 2: Trace the execution order

   console.log('End') runs immediately after 'Start'. Then the setTimeout callback runs, printing 'Timeout'.

3. Final Answer:

   Start
   End
   Timeout -> Option A

4. Quick Check:

   Async runs after sync code = D [OK]

Hint: setTimeout runs after current code finishes [OK]

Common Mistakes:

• Assuming setTimeout runs immediately
• Mixing order of console logs
• Ignoring asynchronous behavior

4. Find the error in this code snippet:

function sayHi() {
  console.log('Hi');
}
sayHi

medium

A. console.log syntax error

B. Function name is incorrect

C. Missing parentheses to call the function

D. No error, code runs fine

Solution

1. Step 1: Check function call syntax

   The code writes sayHi without parentheses, so the function is not called.

2. Step 2: Identify the fix

   Adding parentheses sayHi() calls the function and prints 'Hi'.

3. Final Answer:

   Missing parentheses to call the function -> Option C

4. Quick Check:

   Function call needs () = C [OK]

Hint: Always use () to call functions [OK]

Common Mistakes:

• Forgetting parentheses to invoke functions
• Thinking function name alone calls it
• Assuming no error when function not called

5. Consider this code:

console.log('1');
setTimeout(() => console.log('2'), 100);
Promise.resolve().then(() => console.log('3'));
console.log('4');

What is the correct order of output?

hard

A. 1342

B. 4132

C. 1234

D. 1432

Solution

1. Step 1: Understand synchronous, microtask, and macrotask queues

   console.log('1') and console.log('4') run immediately (sync). Promise.then callbacks run next (microtask). setTimeout callbacks run last (macrotask).

2. Step 2: Trace output order

   Output order is '1' (sync), '4' (sync), '3' (Promise microtask), then '2' (setTimeout macrotask).

3. Final Answer:

   1
   4
   3
   2 -> Option D

4. Quick Check:

   Promise microtasks before setTimeout macrotasks = B [OK]

Hint: Promise.then runs before setTimeout even with 0 delay [OK]

Common Mistakes:

• Thinking setTimeout runs before Promise.then
• Ignoring microtask queue priority
• Assuming all async run in order scheduled