Javascript (Functions)

Question 1

What are functions?

Answer 1

A function is a reusable block of code that groups together a sequence of statements to perform a specific task.

Question 2

What are function declarations?

Answer 2

a function declaration binds a function to a name, or an identifier. Important: A function declaration does not ask the code inside the function body to run, it just declares the existence of the function. The code inside a function body runs, or executes, only when the function is called.

Ex:
function greetWorld() {
console.log(‘Hello, World!’);
}

Question 3

What makes up a function?

Answer 3

1. The function keyword.
2. The name of the function, or its identifier, followed by parentheses.
3. A function body, or the block of statements required to perform a specific task, enclosed in the function’s curly brackets, { }.

Ex:
function greetWorld() {
console.log(‘Hello, World!’);
}

Question 4

How do you call a function?

Answer 4

To call a function in your code, you type the function name followed by parentheses.

We can call the same function as many times as needed.

Question 5

What do parameters in a function do?

Answer 5

Parameters allow functions to accept input(s) and perform a task using the input(s).
Parameters can be used as placeholders for information that will be passed to the function when it is called.

Parameters are treated like variables within the function.

Ex:
function calculateArea(width, height) {console.log(width * height); }

Question 6

What are arguments (functions)?

Answer 6

Arguments are the values that are passed to a function when it is called. Arguments can be passed to the function as values or variables.

Ex:
calculateArea(10, 6);

Question 7

What are default parameters?

Answer 7

Default parameters allow parameters to have a predetermined value in case there is no argument passed into the function or if the argument is undefined when called.

Question 8

What are return statements?

Answer 8

The return statement ends function execution and specifies a value to be returned to the function caller. When we do not use the return keyword when calling a function we receive an undefined valued will be returned.

Question 9

What are helper functions?

Answer 9

Helper functions are functions that are called within other functions.

Ex:
function multiplyByNineFifths(number) {
return number * (9/5);
};

function getFahrenheit(celsius) {
return multiplyByNineFifths(celsius) + 32;
};

getFahrenheit(15); // Returns 59

Question 10

What are function expressions?

Answer 10

A function expression is very similar to and has almost the same syntax as a function declaration. The main difference is that with function expressions the function name can be taken out to create an anonymous function (function without a name).A function expression is often stored in a variable in order to refer to it.

Ex:
cons calculateArea = function(width, height) {
const area = width * height
}

Question 11

How do you declare a function expression?

Answer 11

1. Declare a variable to make the variable’s name be the name, or identifier, of your function. (Using const is common practice)
2. Assign as that variable’s value an anonymous function created by using the function keyword followed by a set of parentheses with possible parameters. Then a set of curly braces that contain the function body.

Ex:
cons calculateArea = function(width, height) {
const area = width * height
}

Question 12

How do you invoke a function expression?

Answer 12

Use the variable name in which the function is found and parenthesis that have the arguments to be passed in the function.

Ex:
variableName(argument1, argument2)

Question 13

What are arrow functions?

Answer 13

Arrow functions are a shorter way to write functions by using special “fat arrow” syntax () =>

Ex:
const rectangleArea = (width, height) => {
let area = width * height;
return area;
};

Question 14

What is meant by the term concise body?

Answer 14

We call the most condensed form of the function a concise body.

Question 15

What is the first technique for refactoring a function?

Answer 15

If a function has a single parameter, we do not need to put this parameter in parenthesis. However, we do need to use parenthesis for functions that have zero or multiple parameters.

Ex:

zero parameter:
const functionName = () => {};

one parameter:
const functionName = paramOne => {};

multiple parameters:
const functionName = (paramOne, paramTwo) => {};

Question 16

What is the second technique for refactoring a function?

Answer 16

A function body made of a single-line block does not need curly braces. Without the curly braces, whatever that line evaluates will be automatically returned.

Ex:
const squareNum = (num) => {
return num * num;
};

We can refractor to:
const squareNum = num => num * num;

Question 17

Recursive functions

Answer 17

A function has the ability to call itself.

This is what we call recursion.

Recursion allows us to solve some specific problems in a smart way.

You need a function with a name, which can be either a “regular” function, or an arrow function:

function test() {

}

or

const test = () => {

}
Now you can call test() inside test().

function test() {
test()
}

//or

const test = () => {
test()
}

Question 18

Immediately-invoked functions

Answer 18

An immediately-invoked function expression (we’ll call them IIFE) is a way to execute functions immediately, as soon as they are created, without waiting for another line of code to call them.

This is the syntax that defines an IIFE:

(function() {
/* */
})()

IIFEs can be defined with arrow functions as well, in the same way:

(() => {
/* */
})()

We basically have a function defined inside parentheses, and then we append () to execute that function: (THE FUNCTION)().

Question 19

What is the relationship between IIFEs and semicolons?

Answer 19

IIFEs are one of the rare cases when you need a semicolon in the previous line.

This is because of the strange syntax, JavaScript tries to concatenate the lines, and as it sees a parentheses opening, it thinks the previous line was a function name and now we add a parameter.

To fix this problem you might see this:

;(function() {
/* */
})()
This completely prevents the issue, so it’s a good practice when you write an IIFE.

Question 20

Why do we need IIFEs sometimes?

Answer 20

1. One is isolation from the outside.

Functions create a new scope, so any variable defined inside an IIFE is not going to “leak” outside. This is something very common when you have multiple pieces of JavaScript running in a page, that should not interact with each other. The best example of this is a WordPress site that has a dozen plugins all adding their own JavaScript.

If by chance two define a variable or a function with the same name, we have compatibility issues. IIFEs should help you isolate this kind of problem.

You can use this technique in your own code to isolate variables within a IIFE.

2. Another use case is when you have code that runs inside a loop, and you must do something asynchronously.