2.3 Arrow Functions¶

Warm-up¶

Task 1: Create a regular function that adds two numbers together.

function addTwoNumbers(num1, num2){
  return num1 + num2
}

console.log(addTwoNumbers(2, 4));

The result is: 6

Task 2: Re-do task 1, but make addTwoNumbers an anonymous function.

var addTwoNumbers = function(num1, num2){
  return num1 + num2;
}

console.log(addTwoNumbers(2, 4));

The result is: 6

Task 3: Make an IIFE out of the task 1 function.

(function(num1, num2){
  return num1 + num2;
})(2, 4);

The result is:

Task 4: Re-do task 3, and display the result in the console.

var result = (function(num1, num2){
  return num1 + num2;
})(2,4);

console.log(result);

The result is: 6

Arrow Function¶

Task 5: Read the following code, and compare it with the task 2 code.

var addTwoNumbers = (num1, num2) => num1 + num2;

console.log(addTwoNumbers(2, 4));

The result is: 6

Both task 2 and task 5 produce the same result. However, the code in task 5 is shorter and cleaner.

Arrow Functions

Arrow functions are the same as anonymous functions, but they have different syntax. The arrow function syntax is: (param1, param2, param3) => // Function Statements

Task 6: Create an arrow function that adds four numbers together.

var addNumbers = (num1, num2, num3, num4) => num1 + num2 + num3 + num4;

console.log(addNumbers(2, 4, 5, 6));

The result is: 17

Task 7: Create an arrow function that adds 123 to a given string.

var add123 = str => str + 123;

console.log(add123("Hi"));

The result is: Hi123

Notice that you can drop the parentheses if the function requires only one parameter, as in task 6.

Task 8: Create an arrow function that takes no parameters, and returns 1.

var returns1 = () => 1;

console.log(returns1());

The result is: 1

Task 9: Create an arrow function that returns the square of a number.

var squareOfNum = num => num * num;

console.log(squareOfNum(5));
console.log(squareOfNum(9));

The result is as follows:

25
81

Task 10: Create an arrow function that returns false if the username is not provided, empty or undefined; otherwise, it returns true.

var isUsernameValid = username => username ? true : false;

console.log(isUsernameValid("Ali"));
console.log(isUsernameValid(""));
console.log(isUsernameValid(null));
console.log(isUsernameValid("Ola"));
console.log(isUsernameValid(undefined));

The result is as follows:

true
false
false
true
false

Task 11: Re-do task 9 using the regular if statement. Hint: make sure to enclose the if statement in curly brackets {}.

var isUsernameValid = username => {
      if(username){
        return true;
      }else{
        return false;
      }
}

console.log(isUsernameValid("Ali"));
console.log(isUsernameValid(""));
console.log(isUsernameValid(null));
console.log(isUsernameValid("Ola"));
console.log(isUsernameValid(undefined));

The same result is displayed.

Note

When you want to write multiple statements inside the arrow function, make sure to enclose these statements in curly brackets. Do not forget to add return statement to the function body, if you need it.

Task 12: Think of a shorter way to write the task 9 code.

var isUsernameValid = username => !!username;

console.log(isUsernameValid("Ali"));
console.log(isUsernameValid(""));
console.log(isUsernameValid(null));
console.log(isUsernameValid("Ola"));
console.log(isUsernameValid(undefined));

The same result is displayed.

!!value

!value negates the value; if it is true, it returns false, and vice versa.

!!value negates the negated value so it returns the boolean representation of a value. If the value is true, it returns true, and vice versa.

Nice! little by little, we learn how to write short, concise and clean code.

Task 13: Create an arrow function that checks if the given value is a string. If so, returns the length of that string; otherwise, it returns false.

var stringLength = value => typeof value === "string" ? value.length : false;

console.log(stringLength("Nawras"));
console.log(stringLength(5));
console.log(stringLength("5"));
console.log(stringLength(true));
console.log(stringLength("Jad"));
console.log(stringLength(undefined));
console.log(stringLength(null));

The result is as follows:

6
false
1
false
3
false
false

Task 14: Create an arrow function that checks the connection protocol security. If it is equal to "https", set the connection to secure; otherwise set it to insecure.

var isSecure =  protocol =>  protocol === "https" ? "secure" : "insecure";

console.log(isSecure("http"));
console.log(isSecure("https"));

The result is as follows:

insecure
secure

Task 15: Make the task 14 function an IIFE.

var isSecure =  (protocol =>  protocol === "https" ? "secure" : "insecure")("http");

console.log(isSecure);

The result is: insecure

Task 16: Create an arrow function that displays the numbers from a given number to another in the console.

var counting = (firstNum, secondNum) => {
  for(var i=firstNum; i<= secondNum; i++){
    console.log(i);
  }
}

counting(5, 9);

The result is as follows:

Task 17: Make an IIFE out of the task 16 function.

((firstNum, secondNum) => {
  for(var i=firstNum; i<= secondNum; i++){
    console.log(i);
  }
})(5, 9);

The same result is displayed.