DEV Community

Cover image for Arrow Functions: practice quiz on transformations
Sylwia Vargas
Sylwia Vargas

Posted on

Arrow Functions: practice quiz on transformations

#webdev #javascript #beginners #codenewbie

As a follow up of my previous blog post on arrow functions, I thought I would create a little playground for you all to practice!

How does it work?

  1. Open the browser console (on Chrome/Mac option+command+i but you can also right click and use "inspect" option).
  2. Copy the initial function and see what it returns.
  3. Transform it into an arrow function and run it in the console.
  4. Go to the readme and check the answer to your question in the hidden field.

NOTE: I intended the answers to be included in this blog post but it seems that DEV does not react to <details> tag, sadly.

[1] Two arguments

Transform this function:

function sum(num1, num2){ return num1 + num2 } sum(40,2) sum(42,0) console.log("the answer to everything is", sum(42,0))
Enter fullscreen mode Exit fullscreen mode

Check the answer here.

[2] One argument

Transform this function that tells you how long a string is:

function stringLength(str){ console.log(`the length of "${str}" is:`, str.length) } let longestCityNameInTheWorld = "Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu" stringLength(longestCityNameInTheWorld)
Enter fullscreen mode Exit fullscreen mode

Check the answer here.

[3] One argument, pt.2

Let's change the previous function a bit to include a variable and a return statement:

function stringLength(str){ let length = str.length console.log(`the length of "${str}" is:`, length) return str.length } stringLength("willynilly")
Enter fullscreen mode Exit fullscreen mode

Check the answer here.

[4] One argument

Transform this function that selects a random element from the array and concatenates it to your name:

let alerts = ["Hey, you are awesome", "You are so wonderful", "What a marvel you are", "You're so lovely", "You're so sweet that I'd think you're a sweet potato -- and I LOOOOVE POTATOES"] function showAlert(name){ alert(alerts[(Math.floor(Math.random()*alerts.length))] + `, ${name}!`) } showAlert("you ball of fluff")
Enter fullscreen mode Exit fullscreen mode

Check the answer here.

[5] Nested functions

Transform this function that rotates elements in your browser + remember about transforming also the traditional function in the .map:

function oneTwoThreeRotate(){ Array.prototype.slice.call(document.querySelectorAll('div,p,span,img,a,body')).map(function(tag){ tag.style['transform'] = 'rotate(' + (Math.floor(Math.random() * 3) - 1) + 'deg)'; }) } oneTwoThreeRotate()
Enter fullscreen mode Exit fullscreen mode

Check the answer here.

Cover photo from Pexels.

Top comments (0)