Function declaration in Javascript - Mini Project: Build & Apply

Function declaration

📖 Scenario: You are creating a simple calculator that adds two numbers. To do this, you will write a function that takes two numbers and returns their sum.

🎯 Goal: Build a JavaScript function called addNumbers that takes two parameters and returns their sum. Then call this function with specific numbers and display the result.

📋 What You'll Learn

Declare a function named addNumbers with two parameters: a and b

Inside the function, return the sum of a and b

Call the function addNumbers with the arguments 5 and 7

Print the result of the function call using console.log

💡 Why This Matters

🌍 Real World

Functions help organize code into reusable blocks, like a recipe you can use many times. This is useful in calculators, games, websites, and more.

💼 Career

Knowing how to write and use functions is a basic skill for any programming job. It helps you write clean, easy-to-understand, and reusable code.

1

Create the function declaration

Write a function declaration named addNumbers that takes two parameters called a and b. Inside the function, return the sum of a and b.

Javascript

// Write the function declaration for addNumbers with parameters a and b
// Your code here

Hint

Use the function keyword followed by the function name and parentheses with parameters. Use return to send back the sum.

2

Call the function with arguments

Call the function addNumbers with the arguments 5 and 7 and store the result in a variable called result.

Javascript

function addNumbers(a, b) {
    return a + b;
}

// Call addNumbers with 5 and 7 and save to result
// Your code here

Hint

Use const result = addNumbers(5, 7); to call the function and save the answer.

3

Print the result

Use console.log to print the value of the variable result.

Javascript

function addNumbers(a, b) {
    return a + b;
}

const result = addNumbers(5, 7);

// Print the result variable
// Your code here

Hint

Use console.log(result); to show the sum in the console.

4

Run and check the output

Run the program and check that the output printed is 12.

Javascript

function addNumbers(a, b) {
    return a + b;
}

const result = addNumbers(5, 7);

console.log(result);  // Check output

Hint

The console should show the number 12 because 5 + 7 = 12.

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