Functional Programming Exercises
section 1: Immutability
understanding
Do not change any data; always return a new copy
In JavaScript, function arguments are references to actual data
challenge
1. Take an object with your mother’s name and your age. Now create an object for your sibling by
age difference.
Solution:
// code example
const tanay = { mother: 'Kanak', age: 32 }
const tanvi = { ...tanay, age: tanay.age - 4 }
console.log(tanvi) // { mother: "Kanak", age: 28 }
console.log(tanay) // { mother: "Kanak", age: 32 }
tanay === tanvi // false
// What NOT to do
const tanay = { mother: 'Kanak', age: 32 }
const tanvi = tanay // make a copy of tanay for tanvi
tanvi.age = tanay.age - 4 // then subtract the age for her
console.log(tanvi.age) // 28
console.log(tanvi) // { mother: "Kanak", age: 28 }
console.log(tanay) // { mother: "Kanak", age: 28 }
// We see here that tanay's object also changed. We don't want this.
// This copy method does not work.
COPY
2. Take an array with 5 colours. Create another array by adding 2 more colours to it.
Solution:
// code example
const colors = ['red', 'yellow', 'blue', 'green', 'orange']
const moreColors = [...colors, 'pink', 'purple']
colors === moreColors // false
console.log(colors) // ["red", "yellow", "blue", "green", "orange"]
console.log(moreColors) // ['red', 'yellow', 'blue', 'green', 'orange', 'pink', 'purple']
// What NOT to do
const colors = ['red', 'yellow', 'blue', 'green', 'orange']
const moreColors = colors
moreColors[5] = 'pink'
moreColors[6] = 'purple'
console.log(colors) // ['red', 'yellow', 'blue', 'green', 'orange', 'pink', 'purple']
console.log(moreColors) // ['red', 'yellow', 'blue', 'green', 'orange', 'pink', 'purple']
COPY
section 2: Pure functions
understanding
For the same input, the output will always be the same
Three rules
1. At least one argument
2. return a value or other function
3. Should not mutate any of its arguments —> Make a new copy
challenge
1. Write a function birthday() to take a person’s name and age in an object and then increase the
age by 1. Return the updated object.
const birthday = (person) => ({ ...person, age: person.age + 1 })
const person = { mother: 'Kanak', age: 32 }
const tanayAfterBirthday = birthday(person)
console.log(tanayAfterBirthday) // { mother: "Kanak", age: 33 }
person === tanayAfterBirthday // false
COPY
Live Challenge
1. Write an ES6 function increaseStock() to take a products’s name and quantity in an object and
then increase the quantity by 5.
Solution:
const increaseStock = (product) => ({
...product,
quantity: product.quantity + 5,
})
const product = { name: 'ruled notebook', quantity: 20 }
const inventoryStock = increaseStock(product)
console.log(inventoryStock) // { name: "ruled notebook", quantity: 25 }
COPY
section 2: Most used utility functions
understanding
Can take functions as arguments
Return Functions
Or both
exercise 01: map
understanding
To return a new array with modification on items
// syntax
map(functionThatTakesOneElementAtATime) // (element) => { /* … */ }
map(orFunctionThatTakesOneElemenAtATimeAndIndex) // (element, index) => { /* … */ }
function(item,index) COPY
// item ⇒ One item of the array
// index ⇒ index of the current item
// returns ⇒ new item for the new array
COPY
challenge
Live Code Example
1. Given an array of numbers, return a new array with square root of each number in it.
Solution:
// code example
const numbers = [1, 4, 9]
const roots = numbers.map((num) => Math.sqrt(num))
console.log(roots) // [1, 2, 3]
COPY
Live Challenges
1. Write an ES6 function that takes an array of numbers and returns an array with the square of
each element using the map method.
Solution:
const squareNumbers = (numbers) => numbers.map((number) => number * number)
const numbers = [1, 2, 3, 4, 5]
console.log(squareNumbers(numbers))
// Output:[1, 4, 9, 16, 25]
COPY
2. Write an ES6 function that takes an array of strings and returns an array with the length of each
string using the map method.
Solution:
const getLength = (stringsArray) => stringsArray.map((str) => str.length)
const stringsArray = ['neoG', 'coding', 'programming']
console.log(getLength(stringsArray))
// Output: [4, 6, 11]
COPY
will it work with objects?
Yes, this works with array of objects. But Not for objects.map
exercise 02: filter
understanding
remove items from an array based on a specific condition.
// syntax
filter((element) => {
/* … */
})
filter((element, index) => {
/* … */
})
array.filter(function(item, index)); COPY
// item => the current element of the array.
// index => the index of the current element
// return true if the item should be included, false otherwise
COPY
challenge
Live Code Example
1. Given an array, return an array with only odd numbers in it.
Solution:
// code example
const numbers = [3, 5, 6, 1, 2]
const isOdd = (num) => num % 2 !== 0
const oddArr = numbers.filter(isOdd)
console.log(oddArr) // [3, 5, 1]
COPY
Live Challenges
1. Given an array, return an array with only numbers divisible by 10.
Solution:
const arr = [5, 20, 15, 40, 3, 30, 11]
const divisibleBy10 = (num) => num % 10 === 0
const filteredArray = arr.filter(divisibleBy10)
console.log(filteredArray)
// Output: [20, 40, 30]
COPY
2. Write an ES6 function that returns an array with no number less than 10 in it.
Solution:
const getNumbersGreaterThanTen = (arr) => arr.filter((num) => num > 10)
const arr = [2, 20, 3, 30, 4, 40, 50, 5]
console.log(getNumbersGreaterThanTen(arr))
// Output: [20, 30, 40, 50]
COPY
exercise 03: find
understanding
used to find the first element in an array that satisfies a certain condition.
// syntax
find((element) => {
/* … */
})
find((element, index) => {
/* … */
})
array.find(function(element, index)); COPY
// element => the current element of the array.
// index => the index of the current element
// returns the first element in the array that satisfies the condition, otherwise undefined
COPY
challenge
Live Code Example
1. Write an ES6 function that takes an array, and returns the first even number in the array.
Solution:
const numbers = [5, 12, 8, 13, 44]
const isEven = (element) => element % 2 === 0
const findEvenNumber = numbers.find(isEven)
console.log(findEvenNumber) // 12
COPY
Live Challenges
1. Write an ES6 function that takes an array of fruits and returns the first fruit that is of 10
characters or above.
Solution:
const fruitArray = ['apple', 'banana', 'cherry', 'watermelon', 'pineapple']
const findLongFruit = (arr) => arr.find((str) => str.length >= 10)
console.log(findLongFruit(fruitArray))
// Output: "watermelon"
COPY
2. Given an array of objects, find the object with name “clips”.
Solution:
const inventory = [
{ name: 'socks', quantity: 12 },
{ name: 'shirts', quantity: 10 },
{ name: 'clips', quantity: 5 },
]
// Your code
const result = inventory.find(({ name }) => name === 'clips')
console.log(result) // { name: "clips", quantity: 5 }
COPY
exercise 04: reduce
understanding
// manual implementation
init1 = sumOfNumbers(init0, numbers[0])
init2 = sumOfNumbers(init1, numbers[1])
init3 = sumOfNumbers(init2, numbers[2])
COPY
used to "reduce" an array to a single value based on an accumulator and the items in the array.
// syntax
const callbackFn = (accumulator, currentValue) => {
/* … */
}
reduce(callbackFn)
reduce((accumulator, currentValue) => {
/* … */
}, initialValue)
array.reduce(function(accumulates, currentValue), initialValue) COPY
// accumulator => coming from the previous run
// currentValue => the current element of the array being processed.
// initialValue (optional) => the initial value of the total parameter. If this is not speci
// returns the updated value of the accumulator
COPY
challenge
Live Code Example
1. Given an array, find the sum of all numbers in the array using reduce() method.
// code example
const array = [1, 2, 3, 4]
const sumOfNumbers = (accumulator, currentValue, currentIndex) =>
accumulator + currentValue
const sum = array.reduce(sumOfNumbers, 0)
console.log(sum) // 10
COPY
Live Challenges
1. Given an array, find the sum of all odd numbers in the array using reduce() method.
Solution:
const array = [1, 2, 3, 4, 5, 6, 7]
const sumOfOddInd = (accumulator, currentValue, currentIndex) =>
currentValue % 2 !== 0 ? accumulator + currentValue : accumulator
console.log(array.reduce(sumOfOddInd, 0)) // 16
COPY
2. Write a function that takes an array of objects representing books with properties title, author,
and pages, and returns the total number of pages of all the books using the reduce function.
const books = [
{ title: 'The Alchemist', author: 'Paulo Coelho', pages: 197 },
{ title: 'To Kill a Mockingbird', author: 'Harper Lee', pages: 281 },
{ title: 'The Great Gatsby', author: 'F. Scott Fitzgerald', pages: 180 },
]
const getTotalPages = (books) =>
books.reduce((totalPages, book) => totalPages + book.pages, 0)
console.log(getTotalPages(books)) // Output: 658
