Arrow Functions: practice quiz on transformations
Tags: webdev, javascript, beginners, codenewbie
Published: 2020-07-09 16:10:14

As a follow up of [my previous blog post on arrow functions](https://dev.to/sylwiavargas/arrow-functions-a-walkthrough-and-gotchas-4p4p), 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](https://github.com/sylwiavargas/js-warmup/blob/master/ArrowFunctionsQuiz.md) 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:
```js
function sum(num1, num2){
    return num1 + num2
}

sum(40,2)
sum(42,0)
console.log("the answer to everything is", sum(42,0))
```

Check the answer [here](https://github.com/sylwiavargas/js-warmup/blob/master/ArrowFunctionsQuiz.md#1-two-arguments).
***

## [2] One argument

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

```js
function stringLength(str){
    console.log(`the length of "${str}" is:`, str.length)
}

let longestCityNameInTheWorld = "Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu"

stringLength(longestCityNameInTheWorld)
```
Check the answer [here](https://github.com/sylwiavargas/js-warmup/blob/master/ArrowFunctionsQuiz.md#2-one-argument).

***

## [3] One argument, pt.2

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

```js
function stringLength(str){
    let length = str.length
    console.log(`the length of "${str}" is:`, length)
    return str.length
}

stringLength("willynilly")
```
Check the answer [here](https://github.com/sylwiavargas/js-warmup/blob/master/ArrowFunctionsQuiz.md#3-one-argument-pt2).

***

## [4] One argument

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

```js
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")
```
Check the answer [here](https://github.com/sylwiavargas/js-warmup/blob/master/ArrowFunctionsQuiz.md#4-one-argument).

***

## [5] Nested functions

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

```js
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()
```
Check the answer [here](https://github.com/sylwiavargas/js-warmup/blob/master/ArrowFunctionsQuiz.md#5-nested-functions).

***
Cover photo from [Pexels](pexels.com).