Functions - Array iterators, map, forEach, find, reduce etc Flashcards
When do we need to use a ‘return’ in a function?
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);
Give another example of needing to return that isn’t a number
function sayHello(name) {
var message = ‘Hello ‘ + name + ‘!’;
alert(message);
return message;
}
When do you not need a return?
function changeColor(color) {
let greeting = document.getElementById(“greeting”);
greeting.style.color = color;
}
changeColor(“yellow”);
Updating the dom with text.
Give another example where you do not need a return statement.
A function that sets the value of a variable or object property, such as:
function setUserName(name) {
currentUser.name = name;
}
Give another example where you do not need a return statement.
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”;
}
}
What is a function declaration?
What is its advantage over function expression?
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.
What is a function expression?
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
Which is ‘anonymous’ a function declaration or a statement?
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.
How would I invoke this method in an object?
const person = {
name: “Sarah”,
greeting: function () {
console.log(Hi ${name});
},
};
const person = {
name: “Sarah”,
greeting: function () {
console.log(Hi ${name});
},
};
person.greeting();
What do the array methods - reduce, find map etc replace?
FOR LOOP
What is a forEach() method? Does it create a new array?
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.
What is the basic syntax of one?
numbers.forEach(function(number) {
console.log(number);
});
let numbers = [1, 2, 3, 4, 5];
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 },
];
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);
What is a map() function?
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.
What makes map() different from forEach()?
it returns a new array of same length, forEach does not you would need to use push.
Why will this not print to screen?
const message = worksBuds.map(function (person) {
return “<h1>Hello” + person.name + “</h1>”;
});
document.getElementById(“wellHello”).innerHTML = message;
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:
What does .join(“”) do?
const message = worksBuds.map(function (person) {
return “<h1>Hello “ + person.name + “</h1>”;
});
document.getElementById(“wellHello”).innerHTML = message.join(“”);
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’
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.
const displayMessage = classes.map(function (message) {
return “<h2>” + message.name + “is in class” + message.class + “</h2>”;
});
document.getElementById(“displayMessage”).innerHTML = displayMessage.join(“”);
What wrong with this?
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map (num) {
return num * 2;
});
console.log(doubledNumbers);
NEEDS A CALLBACK FUNCTION
const doubledNumbers = numbers.map(function (num) {
return num * 2;
});
console.log(doubledNumbers);
