Function declaration in Javascript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare a function named greet.

Javascript

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

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

Agreet

BsayHello

Chello

Dwelcome

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different function name than 'greet'.

Missing the function name entirely.

The function name should be greet as requested.

2fill in blank

medium

Complete the code to declare a function named add that takes two parameters.

Javascript

function [1](a, b) {
  return a + b;
}

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

Aplus

Bsum

Ccalculate

Dadd

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different function name like 'sum' or 'plus'.

Forgetting to include parameters.

The function should be named add as per the instruction.

3fill in blank

hard

Fix the error in the function declaration to make it valid.

Javascript

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

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

Agreet

Bgreet1

C1greet

Dgreet-name

Attempts:

3 left

💡 Hint

Common Mistakes

Starting the function name with a number.

Using hyphens in the function name.

Function names cannot start with a number or contain hyphens. greet is a valid name.

4fill in blank

hard

Fill both blanks to declare a function named multiply that returns the product of two numbers.

Javascript

function [1](x, y) {
  return x [2] y;
}

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

Amultiply

B+

C*

Dadd

Attempts:

3 left

💡 Hint

Common Mistakes

Using addition operator instead of multiplication.

Using incorrect function names.

The function name should be multiply and the operator for multiplication is *.

5fill in blank

hard

Fill all three blanks to declare a function named greetUser that takes a name and returns a greeting message.

Javascript

function [1]([2]) {
  return `Hello, $[3]!`;
}

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

AgreetUser

BuserName

Dname

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names for the parameter and inside the template string.

Using incorrect function names.

The function name is greetUser. The parameter is name, and the template uses name to greet.

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