Javascript Tutorial – Arrow Function in Javascript

by

What is Arrow Function

In the last session, We had discussed about Anonymous Function. Anonymous Function is a type of Function which has no name or identifier, So Arrow Function is a type of Anonymous Function, So it’s quite obvious that, Arrow Function will also not have any name.

Rules for declaration of Arrow Function

  1. We should not give any name to the Function.
  2. We should not use function keyword.
  3. We should use arrow key in arrow function.
  4. We should assign the function to a Variable, So that we can call it during runtime.

So, Let’s see this with an example. Let’s see the example for an anonymous function first, and then we will see the example for Arrow Function.

const print = function () {
  console.log("Hello World");
}

print();
const print = () => {
  console.log("Hello World");
}

print();

We can pass an arrow function as an argument as well to the Higher Order Functions, same like an anonymous function.

We have seen some Higher Order Array function in one of our previous sessions, and we had seen, How do we pass an anonymous function inside those Higher Order Array function, So Let’s see now, that how can we pass an arrow function as an argument to the Higher Order Array Function. Let’s take an example of forEach here and see it.If you are looking for bracelet. There’s something to suit every look, from body-hugging to structured, from cuffs to chain chain bracelet and cuffs.

let num = [3, 5, 1, 2, 4]

num.forEach( (ele) => {
  console.log(ele);
});

Types of Arrow Functions

  1. Arrow Functions with no parameters and no return type
  2. Arrow Functions with parameters and no return type
  3. Arrow Functions with no parameters but with return type
  4. Arrow Function with parameters and with return type
  5. Arrow Function with only one parameter without any parathesis
  6. Arrow Fuction with return type without using return keyword
  7. Arrow Function with an Object
  8. Arrow Function with parameters with default values
  9. Using Maths Operations in Arrow Function
  10. Arrow Function with VarArgs

Arrow Functions with no parameters and no return type

const add = () => {
console.log(2+3);
}

add();

Arrow Functions with parameters and no return type

const add = (a,b) => {
console.log(a+b);
}

add(2,3);

The above example is for 2 paramters, We can see an example for only 1 paramter as well

const square = (a) => {
console.log(a*a);
}

square(5);

We can see this type of Arrow function as an argument to the Higher Order Array Function forEach.

let num = [3, 5, 1, 2, 4]

console.log("Original Array is ", num);

num.forEach( (ele) => {
  console.log(ele);
});

Arrow Functions with no parameters but with return type

const add = () => {
return 2+3;
}

const sum = add();
console.log(sum);

Arrow Function with parameters and with return type

const add = (a,b) => {
return a+b;
}

const sum = add(2,4);
console.log(sum);

The above example is for 2 paramters, We can see an example for only 1 paramter as well

const square = (a) => {
return a*a;
}

const s = square(5);
console.log(s);

We can see this type of Arrow function as an argument to the Higher Order Array Function Map.

const items = [3, 2, 5, 6, 8, 9];

console.log("Original Array is ", items);

items.map( (ele) => {
   return ele*ele;
 } 
);

Arrow Function with only one parameter without any parathesis

const square = a => {
return a*a;
}

const s = square(5);
console.log(s);

Arrow Fuction with return type without using return keyword

const square = (a) => a*a;

const s = square(5);
console.log(s);

Arrow Function with an Object Parameter

Let’s create an Object first.

const classInfo = {
className: 'First' ,
noOfStudents: '34' ,
schoolName: 'Excellence'
}

const getStudNo = (classI) => class ${classI.className} of ${classI.schoolName} school has ${classI.noOfStudents} students

console.log(setStudNo(classInfo));

Arrow Function with paramters with default values

1st Example

const studClassMessage = (student='Guest', classInfo='No') =>
` ${student} is in ${classInfo} class

console.log(studClassMessage('John', 'First'));
console.log(studClassMessage());

2nd Example

const add = (a, b=200) => a+b;
console.log(add(100));
console.log(add(100,20));

Using Maths Operations in Arrow Function

const maxVal = (a,b,c) => Math.max(a,b,c);
console.log(maxVal(10, 20, 30));

Arrow Function with VarArgs

var print = (a, …num) => {
console.log(a);
console.log(num);
}

print("Array passed in the Argument is: ",2,5,7,8,8,9,1);

Summary

We have covered below topics in this session.

  1. What is Arrow Function
  2. Types of Arrow Function
  3. Arrow Functions with no parameters and no return type
  4. Arrow Functions with parameters and no return type
  5. Arrow Functions with no parameters but with return type
  6. Arrow Function with parameters and with return type
  7. Arrow Function with only one parameter without any parathesis
  8. Arrow Fuction with return type without using return keyword
  9. Arrow Function with an Object
  10. Arrow Function with parameters with default values
  11. Using Maths Operations in Arrow Function
  12. Arrow Function with VarArgs

Leave a Comment