Function declaration in Javascript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of a simple function declaration

What is the output of this JavaScript code?

Javascript

function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet('Alice'));

A greet Alice

B Hello, Alice!

C undefined

D Error: greet is not defined

💡 Hint

Look at how the function returns a string using template literals.

The function greet returns a greeting string with the given name. Calling greet('Alice') returns 'Hello, Alice!'.

❓ Predict Output

intermediate

Function hoisting behavior

What will this code output when run?

Javascript

console.log(square(4));

function square(x) {
  return x * x;
}

A 16

B ReferenceError: square is not defined

C TypeError: square is not a function

D undefined

💡 Hint

Function declarations are hoisted in JavaScript.

Function declarations are hoisted, so square is available before its definition. square(4) returns 16.

❓ Predict Output

advanced

Function declaration inside block scope

What is the output of this code?

Javascript

if (true) {
  function sayHi() {
    return 'Hi!';
  }
}

console.log(typeof sayHi);

A ReferenceError

B "function"

C "object"

D "undefined"

💡 Hint

Function declarations inside blocks are block-scoped in modern JavaScript.

The function sayHi is block-scoped inside the if block and not available outside, so typeof sayHi is 'undefined'.

🧠 Conceptual

advanced

Difference between function declaration and function expression

Which statement correctly describes a key difference between function declarations and function expressions in JavaScript?

A Both are hoisted but only function expressions can be called before declaration.

B Function expressions are hoisted, function declarations are not.

C Function declarations are hoisted, function expressions are not.

D Neither function declarations nor function expressions are hoisted.

💡 Hint

Think about when you can call the function in the code.

Function declarations are hoisted and can be called before their definition. Function expressions are not hoisted.

❓ Predict Output

expert

Output of nested function declarations and variable shadowing

What is the output of this code?

Javascript

function outer() {
  function inner() {
    return 'inner function';
  }
  let inner = 'inner variable';
  return inner;
}

console.log(outer());

A inner variable

B inner function

C ReferenceError

D TypeError

💡 Hint

Variables declared with let shadow function declarations with the same name.

The variable inner declared with let shadows the inner function declaration, so outer returns the string 'inner variable'.

Practice

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

easy

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

B. func greet() { console.log('Hello'); }

C. def greet() { console.log('Hello'); }

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

Solution

1. Step 1: Recognize JavaScript function syntax

   JavaScript functions are declared using the keyword function followed by the function name and parentheses.

2. Step 2: Check each option's syntax

   function greet() { console.log('Hello'); } uses correct syntax: function greet() { ... }. Options A, B, and D use incorrect keywords or punctuation.

3. Final Answer:

   function greet() { console.log('Hello'); } -> Option A

4. Quick Check:

   JavaScript function declaration = function keyword + name + parentheses [OK]

Hint: Look for 'function' keyword followed by name and parentheses [OK]

Common Mistakes:

• Using 'func' or 'def' instead of 'function'
• Adding colon after 'function'
• Missing parentheses after function name

2. Which of the following is a syntax error when declaring a function in JavaScript?

easy

A. function add(a, b) { return a + b; }

B. function multiply(a, b) { return a * b; }

C. function divide(a, b) return a / b;

D. function subtract(a, b) { return a - b; }

Solution

1. Step 1: Identify function body syntax

   In JavaScript, the function body must be enclosed in curly braces { }.

2. Step 2: Check each option for braces

   function divide(a, b) return a / b; lacks curly braces around the return statement, causing a syntax error. Others have correct braces.

3. Final Answer:

   function divide(a, b) return a / b; -> Option C

4. Quick Check:

   Function body must be inside braces { } [OK]

Hint: Always use curly braces { } around function body [OK]

Common Mistakes:

• Omitting curly braces for function body
• Missing parentheses after function name
• Using incorrect keywords

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

function sayHi(name) {
  return 'Hi, ' + name + '!';
}
console.log(sayHi('Anna'));

medium

A. undefined

B. 'Hi, Anna!'

C. sayHi Anna!

D. Hi, Anna!

Solution

1. Step 1: Understand function return and console.log

   The function returns a string combining 'Hi, ', the name, and '!'. The console.log prints this returned string.

2. Step 2: Evaluate the function call sayHi('Anna')

   It returns the string 'Hi, Anna!'. console.log prints it without quotes.

3. Final Answer:

   Hi, Anna! -> Option D

4. Quick Check:

   Function returns string, console.log prints string without quotes [OK]

Hint: console.log prints string without quotes [OK]

Common Mistakes:

• Confusing returned string with printed output including quotes
• Expecting function name to print
• Ignoring return statement

4. Find the error in this function declaration:

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

medium

A. Missing curly braces around function body

B. Missing parentheses after function name

C. Missing semicolon after console.log

D. Function name is invalid

Solution

1. Step 1: Check function declaration syntax

   Functions must have parentheses after the name, even if no parameters are used.

2. Step 2: Identify missing parentheses

   The code misses parentheses after greet, causing a syntax error.

3. Final Answer:

   Missing parentheses after function name -> Option B

4. Quick Check:

   Function name must be followed by () [OK]

Hint: Always put () after function name, even if empty [OK]

Common Mistakes:

• Omitting parentheses after function name
• Thinking semicolon is required after console.log
• Confusing curly braces placement

5. You want to create a function calculateArea that takes width and height and returns the area. Which is the best correct declaration?

hard

A. function calculateArea(width, height) { return width * height; }

B. function calculateArea(width, height) { width * height; }

C. function calculateArea(width, height) { return width + height; }

D. function calculateArea(width, height) { return width / height; }

Solution

1. Step 1: Understand the area formula

   Area of a rectangle is width multiplied by height.

2. Step 2: Check each function's return value

   function calculateArea(width, height) { return width * height; } returns width * height, which is correct. function calculateArea(width, height) { width * height; } lacks return statement, so returns undefined. Options C and D return wrong calculations.

3. Final Answer:

   function calculateArea(width, height) { return width * height; } -> Option A

4. Quick Check:

   Return width * height for area calculation [OK]

Hint: Return product of width and height for area [OK]

Common Mistakes:

• Forgetting return keyword
• Returning sum or division instead of product
• Not using parameters correctly