Functions - Array iterators, map, forEach, find, reduce etc

Question 1

When do we need to use a ‘return’ in a function?

Answer 1

We can pass values into a function with arguments. You can use a return statement to send a value back out of a function.

E.g

function plusThree(num) {
return num + 3;
}

const answer = plusThree(5);

Question 2

Give another example of needing to return that isn’t a number

Answer 2

function sayHello(name) {
var message = ‘Hello ‘ + name + ‘!’;
alert(message);
return message;
}

Question 3

When do you not need a return?

Answer 3

function changeColor(color) {
let greeting = document.getElementById(“greeting”);
greeting.style.color = color;
}

changeColor(“yellow”);

Updating the dom with text.

Question 4

Give another example where you do not need a return statement.

Answer 4

A function that sets the value of a variable or object property, such as:

function setUserName(name) {
currentUser.name = name;
}

Question 5

Give another example where you do not need a return statement.

Answer 5

A function that toggles visibility of a html element

function toggleMenu() {
let menu = document.getElementById(“menu”);
if (menu.style.display === “none”) {
menu.style.display = “block”;
} else {
menu.style.display = “none”;
}
}

Question 6

What is a function declaration?

What is its advantage over function expression?

Answer 6

A function declaration is a statement that declares a named function and makes it available in the current scope.

function functionName(parameters) {
// function body
}

It is hoisted to the top of their scope, meaning they are available for use before they are declared in the code.

Question 7

What is a function expression?

Answer 7

It is an expression that defines a function as a value and assigns it to a variable.

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

Function expressions, on the other hand, are not hoisted and cannot be accessed until they are assigned to a variable

Question 8

Which is ‘anonymous’ a function declaration or a statement?

Answer 8

A statement, as you can ‘hide’ the name of the function in the variable. This is useful as you can input the variable as a callback function in another function as an argument.

Question 9

How would I invoke this method in an object?

const person = {
name: “Sarah”,
greeting: function () {
console.log(Hi ${name});
},
};

Answer 9

const person = {
name: “Sarah”,
greeting: function () {
console.log(Hi ${name});
},
};

person.greeting();

Question 10

What do the array methods - reduce, find map etc replace?

Answer 10

FOR LOOP

Question 11

What is a forEach() method? Does it create a new array?

Answer 11

The forEach() method is a higher-order function in JavaScript that is used to iterate over an array and execute a callback function for each element of the array.

The forEach() method does not modify the original array in JavaScript. It simply executes a callback function for each element of the array, without changing the values of the array itself.

Question 12

What is the basic syntax of one?

Answer 12

numbers.forEach(function(number) {
console.log(number);
});

let numbers = [1, 2, 3, 4, 5];

Question 13

If forEach() does NOT return a new array and does not change the original array - how can we see the new values?

const workBuds = [
{ name: “Joella”, age: 12 },
{ name: “Logan”, age: 11 },
{ name: “Sarah”, age: 14 },
];

Answer 13

Use ‘push’ and put them into a new array e.g

const workBuds = [
{ name: “Joella”, age: 12 },
{ name: “Logan”, age: 11 },
{ name: “Sarah”, age: 14 },
];

const workBudsPlusAges = [];

workBuds.forEach(function (person) {
workBudsPlusAges.push(person.age + 2);
});
console.log(workBudsPlusAges);

Question 14

What is a map() function?

Answer 14

The map() method in JavaScript is a higher-order function that creates a new array by calling a provided function on each element of an existing array, in order, and returns an array of the same length with the transformed elements.

Question 15

What makes map() different from forEach()?

Answer 15

it returns a new array of same length, forEach does not you would need to use push.

Question 16

Why will this not print to screen?

const message = worksBuds.map(function (person) {
return “<h1>Hello” + person.name + “</h1>”;
});

document.getElementById(“wellHello”).innerHTML = message;

Answer 16

When you pass the message array directly to innerHTML, JavaScript will try to convert the array to a string using its default toString() method, which will join the array elements with commas. So, instead of rendering each h1 element in the message array, the innerHTML will render the array as a comma-separated string.

To fix this, you can use the join() method to concatenate the elements of the message array into a single string, and then set the resulting string as the innerHTML of the desired HTML element. Here’s an updated version of your code that should work:

Question 17

What does .join(“”) do?

const message = worksBuds.map(function (person) {
return “<h1>Hello “ + person.name + “</h1>”;
});

document.getElementById(“wellHello”).innerHTML = message.join(“”);

Answer 17

The join() method is a built-in function in JavaScript that is used to join all elements of an array into a string.

const array = [‘apple’, ‘banana’, ‘cherry’];
const str1 = array.join(); // ‘apple,banana,cherry’
const str2 = array.join(‘-‘); // ‘apple-banana-cherry’

Question 18

Using this object

const classes = [{name: “Laura”, class: “7X3”},
{name: “Nikki”, class: “7X1”},
{name: “Joel”, class: “7X4”},
{name: “Zara”, class: “7Y1”}
]

Output it into the html with a message that says:

Laura is in class 7x3 etc.

Answer 18

const displayMessage = classes.map(function (message) {
return “<h2>” + message.name + “is in class” + message.class + “</h2>”;
});

document.getElementById(“displayMessage”).innerHTML = displayMessage.join(“”);

Question 19

What wrong with this?

const numbers = [1, 2, 3, 4, 5];

const doubledNumbers = numbers.map (num) {
return num * 2;
});

console.log(doubledNumbers);

Answer 19

NEEDS A CALLBACK FUNCTION

const doubledNumbers = numbers.map(function (num) {
return num * 2;
});

console.log(doubledNumbers);