Function declaration in Javascript - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a function declaration in JavaScript?

A function declaration defines a named function using the function keyword, followed by the function name, parentheses for parameters, and a block of code inside curly braces. It can be called anywhere in the code after or before its declaration.

beginner

How do you declare a function named greet that prints 'Hello!'?

You write: <pre>function greet() {<br>  console.log('Hello!');<br>}</pre>

intermediate

Can you call a function declared with a function declaration before it appears in the code?

Yes, function declarations are hoisted, so you can call them before their actual declaration in the code.

intermediate

What is the difference between a function declaration and a function expression?

A function declaration defines a named function and is hoisted, so it can be called before it appears. A function expression assigns a function to a variable and is not hoisted in the same way, so it can only be called after the assignment.

beginner

Write a function declaration named add that takes two numbers and returns their sum.

function add(a, b) {<br>  return a + b;<br>}

Which keyword is used to declare a function in JavaScript?

A func

B def

C function

D declare

The function keyword is used to declare functions in JavaScript.

What will happen if you call a function declared with a function declaration before its code appears?

A It works because function declarations are hoisted.

B It causes an error because the function is not defined yet.

C It returns undefined.

D It runs but with default parameters.

Function declarations are hoisted, so you can call them before their declaration.

Which of the following is a correct function declaration?

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

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

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

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

Option A is a function declaration. Options B and C are function expressions or arrow functions. Option D is invalid in JavaScript.

What is the output of this code?

function test() { return 5; }
console.log(test());

A Error

B 5

C undefined

D null

The function returns 5, so console.log prints 5.

Which statement about function declarations is TRUE?

A They are not hoisted.

B They cannot have parameters.

C They must be assigned to a variable.

D They can be called before they are declared in the code.

Function declarations are hoisted and can be called before their declaration.

Explain what a function declaration is and how it differs from a function expression.

Think about how you write the function and when you can call it.

Write a function declaration named multiply that takes two numbers and returns their product.

Use the function keyword and return the multiplication of the two inputs.

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