Why functions are needed in Javascript - Challenge Your Understanding

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of repeated code without functions

What is the output of this JavaScript code that repeats similar logic without using functions?

Javascript

console.log(5 + 3);
console.log(10 + 2);
console.log(7 + 8);

A 8 12 15

B 15\n12\n8

C 8\n12\n15

D Error

💡 Hint

Look at each console.log output separately.

Each console.log prints the sum of two numbers. They print 8, then 12, then 15 on separate lines.

🧠 Conceptual

intermediate

Why use functions instead of repeating code?

Why do programmers use functions instead of writing the same code multiple times?

A To make code shorter and easier to reuse

B To make code run slower

C To confuse other programmers

D To increase the number of lines in the program

💡 Hint

Think about saving time and effort.

Functions help avoid repeating code, making programs shorter and easier to maintain.

❓ Predict Output

advanced

Output of function usage for repeated addition

What is the output of this code that uses a function to add two numbers?

Javascript

function add(a, b) {
  return a + b;
}
console.log(add(5, 3));
console.log(add(10, 2));
console.log(add(7, 8));

A Error

B undefined\nundefined\nundefined

C 15\n12\n8

D 8\n12\n15

💡 Hint

The function returns the sum of two numbers.

The function add returns the sum of its two arguments, so the console logs print 8, 12, and 15.

🧠 Conceptual

advanced

Main benefit of functions in large programs

What is the main benefit of using functions in large programs?

A They help organize code into smaller, manageable parts

B They make programs run without errors automatically

C They increase the program size to use more memory

D They prevent the program from running too fast

💡 Hint

Think about how to handle complexity.

Functions break big programs into smaller parts, making them easier to understand and fix.

❓ Predict Output

expert

Output of function with side effect and return

What is the output of this code that uses a function to print and return a value?

Javascript

function greet(name) {
  console.log('Hello, ' + name + '!');
  return name.length;
}
const length = greet('Alice');
console.log(length);

A Error

B Hello, Alice!\n5

C Hello, Alice!\nundefined

D 5\nHello, Alice!

💡 Hint

The function prints a greeting and returns the length of the name.

The function first prints 'Hello, Alice!' then returns 5, which is printed next.

Practice

1. Why do we use functions in JavaScript?
function greet() { console.log('Hello!'); }

easy

A. To store data permanently

B. To make the program run faster

C. To reuse code and avoid repeating the same instructions

D. To create new variables automatically

Solution

1. Step 1: Understand the purpose of functions

   Functions group code so it can be used multiple times without rewriting.

2. Step 2: Identify the benefit in the example

   The greet function can be called many times to print 'Hello!' without repeating code.

3. Final Answer:

   To reuse code and avoid repeating the same instructions -> Option C

4. Quick Check:

   Functions help reuse code = C [OK]

Hint: Functions help reuse code easily [OK]

Common Mistakes:

• Thinking functions make code run faster
• Confusing functions with variables
• Believing functions store data permanently

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

easy

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

B. def sayHi() { console.log('Hi'); }

C. func sayHi() { console.log('Hi'); }

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

Solution

1. Step 1: Recall JavaScript function syntax

   JavaScript uses the keyword function followed by the name and parentheses.

2. Step 2: Check each option's syntax

   Only function sayHi() { console.log('Hi'); } uses correct JavaScript syntax for defining a function.

3. Final Answer:

   function sayHi() { console.log('Hi'); } -> Option D

4. Quick Check:

   JavaScript functions start with 'function' keyword = D [OK]

Hint: JavaScript functions start with 'function' keyword [OK]

Common Mistakes:

• Using Python or other language keywords like def or func
• Adding colon after function keyword
• Missing parentheses after function name

3. What will be the output of this code?

function add(a, b) {
  return a + b;
}
console.log(add(3, 4));

medium

A. 7

B. 34

C. undefined

D. Error

Solution

1. Step 1: Understand the function behavior

   The function add takes two numbers and returns their sum.

2. Step 2: Calculate the result of add(3, 4)

   3 + 4 equals 7, so the function returns 7.

3. Final Answer:

   7 -> Option A

4. Quick Check:

   3 + 4 = 7 [OK]

Hint: Add numbers inside function to get sum [OK]

Common Mistakes:

• Concatenating numbers as strings (getting 34)
• Forgetting to return a value (getting undefined)
• Syntax errors causing runtime error

4. Find the error in this function and choose the fix:

function greet() {
  console.log('Hello!')
}
greet;

medium

A. Add a return statement inside greet

B. Change greet; to greet();

C. Remove the semicolon after console.log

D. Rename function to greetUser

Solution

1. Step 1: Identify how the function is called

   The function is defined correctly but called as greet; which does not execute it.

2. Step 2: Correct the function call syntax

   To run the function, parentheses are needed: greet();

3. Final Answer:

   Change greet; to greet(); -> Option B

4. Quick Check:

   Functions run with parentheses = B [OK]

Hint: Call functions with parentheses () [OK]

Common Mistakes:

• Calling function without parentheses
• Thinking return is needed to print
• Changing function name unnecessarily

5. You want to write a program that prints a greeting message multiple times without repeating code. Which approach is best?

hard

A. Use a function to print the greeting, then call it multiple times

B. Write the greeting message many times in the code

C. Use variables to store the greeting but write console.log many times

D. Write the greeting inside a comment and copy it when needed

Solution

1. Step 1: Understand the problem of repeating code

   Writing the same message many times makes code long and hard to change.

2. Step 2: Use functions to avoid repetition

   Functions let you write the message once and call it many times, making code cleaner.

3. Final Answer:

   Use a function to print the greeting, then call it multiple times -> Option A

4. Quick Check:

   Functions help reuse code = A [OK]

Hint: Use functions to avoid repeating code [OK]

Common Mistakes:

• Repeating code instead of using functions
• Using comments instead of code
• Misusing variables without functions