Overview
This gives us an undefined because it isn't returning anything.
const sum = (a, b) => {
a + b;
}
console.log(sum(1, 3)); // undefined
//to fix this, add in the return
const sum = (a, b) => {
return a + b;
}
console.log(sum(1, 3)); // undefined
//or add in an implicit return via an arrow function
const sum = (a, b) => a + b; // :)
In order to have an implicit return, you must have all of the following conditions:
- Your function must be an arrow function.
- The function body must be only one statement. Remove curly braces.
- Remove the return keyword.
Another example:
const isBoozeLegal = (age) => {
return age >= 21;
}
//that's cool and all, but we can remove the curly braces and remove the return.
const isBoozeLegal = (age) => age >= 21;
// you can read this like:
// isboozeLegal is a function that takes the age and returns the result of the expression age >= 21 as true or false.
You can also drop the parenthesis: const isLegal = age => age >= 18;
So....
function triple(value) {
return value * 3;
}
//becomes
const triple = value => value *3;
Try: Create a function multiply that returns the product of both of its parameters without using the keyword return.
Solution:
const multiply = (value1, value2) => value1 * value2;
More Array methods
filter:
const numbers = [9, 5, 14, 3, 11]; //defines the array of numbers
const numbersAboveTen = numbers.filter(function(number) { //breakdown: const numbersAboveTen is a variable assigned the result of the function numbers.filter(function(number)
return number > 10; //return all numbers greater than 10
});
console.log(numbersAboveTen); // [14, 11] console out these
// Simplify:
const numbersAboveTen = numbers.filter(number => number > 10);
//Here's how you read it: We can filter the numbers where the number is bigger than 10.
find:
const names = ["Liz", "Solo", "Jena", "Jeffrey". "Lucas"];
const result = names.find(function(name) {
return name === "Solo";
});
console.log(result); // "Solo"
//Simplify
const result = names.find(name => name === "Solo");
// Read as: From the names array, find the name that is equal to the string "Solo"
map:
const numbers = [4, 2, 5, 8];
const doubled = numbers.map(function(number) {
return number * 2;
});
console.log(doubled); // [8, 4, 10, 16]
//Simplify
const doubled = numbers.map(number => number * 2);
//This can be read as: Create a new array based on the numbers array, where every number is multiplied by 2.
implicit returns
const getRaisedGrades = grades => {
return grades.map(function(grade) {
if (grade + 1 > 20) {
return 20;
}
return grade + 1;
}).join(", ");
}
Can you use the implicit return here? No. Too many lines.
//Rewrite with arrow functions
const getRaisedGrades = grades => {
return grades.map(grade => {
if (grade + 1 > 20) {
return 20;
}
return grade + 1;
}).join(", ");
}
Test Questions:
Try: Make this return all really cold temperatures from an array like [10, -4, 28, -18]
const getFreezingTemperatures = temperatures => {
}
Solution:
const getFreezingTemperatures = temperatures => temperatures.filter(number => number < 0);
Try: Make this return all positive temperatures from an array like [10, -4, 28, -18]
const getPositiveTemperatures = temperatures => {
}
Solution:
const getPositiveTemperatures = temperatures => temperatures.filter(number => number > 0);
Get year
Complete the function getYear such that it returns the searchYear (passed as 2nd parameter) when it's found in the array. Otherwise, it should return undefined.
Take a look at the sample usage and expected output to better understand how the function should work. Use an arrow function (implicit return is optional).
/**
* @param {number[]} years
* @param {number} searchYear
*/
const getYear = (years, searchYear) => {
return years.find(year => year === searchYear);
}
// Sample usage - do not modify
console.log(getYear([2019, 2020, 2021], 2020)); // 2020
console.log(getYear([2019, 2020, 2021], 1990)); // undefined
String sizes
Complete the function getStringSizes such that it returns an array of the number of characters for every string it receives in the strings parameter.
This means, for the array ["abc", "d"] it should return [3, 1] that's because the first string is made up of 3 characters and the second string is made up of 1 character.
Note that the tests will check that you are using an arrow function when iterating over the array (implicit return is optional).
/**
* @param {string[]} strings
*/
const getStringSizes = strings => {
const stringie = strings.map(string => string.length);
return stringie
}
// Sample usage - do not modify
console.log(getStringSizes(["a", "abc"])); // [1, 3]
console.log(getStringSizes(["Solo", "Liz", "Jordan"])); // [4, 3, 6]
console.log(getStringSizes(["Hello", "Blue"])); // [5, 4]
Classroom project
Classroom Project II
This is the classroom project but you have to use arrow functions (optional: implicit return)! You can enter grades in the browser tab and add them to the app, which will show you various statistics about the classroom. For example, you will see the average grade, all the failing grades, etc.
Each function has a comment describing what it should return, but you can also find them below:
- getNumberOfGrades should return the number of grades.
- getSumGrades should return the sum of all the grades.
- getAverageValue should return the average value of all grades (sum of all grades divided by the total number of grades).
- getPassingGrades should return all passing grades (10 and above).
- getFailingGrades should return all failing grades (9 and below).
- getRaisedGrades should return all the grades raised by 1 (grades should not exceed 20).
// My solution
/** @param {number[]} grades */
export const getNumberOfGrades = grades => {
// TODO: return the number of grades
return grades.length
}
/** @param {number[]} grades */
export const getSumGrades = grades => {
let sum = 0;
grades.forEach(grade => {
// console.log(sum);
sum = sum + grade;
});
return sum;
};
/** @param {number[]} grades */
export const getAverageValue = grades => {
// TODO: return the average value of all grades (sum of all grades divided by the total number of grades)
let average = 0;
let sum = 0;
grades.forEach(grade => {
//console.log(sum);
sum = sum + grade;
average = sum / grades.length
});
return average;
};
/** @param {number[]} grades */
export const getPassingGrades = grades => {
const getPassingGrades = grades.filter(grade => grade >= 10);
return getPassingGrades
}
//export const getPassingGrades = grades.filter(grade => grade >= 10);
/** @param {number[]} grades */
export const getFailingGrades = grades => {
// TODO: return all failing grades (9 and below)
const getFailingGrades = grades.filter(grade => grade < 10);
return getFailingGrades
}
/** @param {number[]} grades */
export const getRaisedGrades = grades => {
// TODO: return all the grades raised by 1 (grades should not exceed 20)
let gradeplus = [];
grades.forEach(grade => {
if(grade >= "20") {
gradeplus.push(grade)
}else {
gradeplus.push(grade + 1);
}
});
console.log("gradies:" + gradeplus)
return gradeplus ;
};
A better solution:
/** @param {number[]} grades */
export const getNumberOfGrades = grades => {
return grades.length;
}
/** @param {number[]} grades */
export const getSumGrades = grades => {
let sum = 0;
grades.forEach(grade => sum += grade);
return sum;
}
/** @param {number[]} grades */
export const getAverageValue = grades => {
return getSumGrades(grades) / grades.length;
}
/** @param {number[]} grades */
export const getPassingGrades = grades => {
return grades.filter(grade => grade >= 10);
}
/** @param {number[]} grades */
export const getFailingGrades = grades => {
return grades.filter(grade => grade < 10);
}
/** @param {number[]} grades */
export const getRaisedGrades = grades => {
return grades.map(grade => { //this statement returns Array(4)
if (grade + 1 > 20) {
return 20; //this returns 20 only if one of the numbers already is 20
}
return grade + 1; //this one returns the number + 1
});
}
I need to really explain what is going on in the getRaisedGrades function. There are 3 return statements.
Recap
Recap Here are the conditions for implicit return: Your function must be an arrow function. The function body must be only one statement. This means you must remove the curly braces. You must remove the return keyword because the function body is one statement. Only use implicit return when the function body is one line and short. Never sacrifice code readability and clarity in order to use a certain feature. Implicit return only works when there's single statement inside the function (and the curly braces and return keyword are omitted).