Breaking News: Grepper is joining You.com. Read the official announcement!

normal function vs arrow function in javascript

Add Answer

madhav answered on August 24, 2021 Popularity 10/10 Helpfulness 2/10

answer normal function vs arrow function in javascript

related javascript arrow function vs normal function

related javascript function declaration vs arrow function

related arrow function vs function in javascript

related arrow function javascript rules

related js arrow vs normal function

related when to use arrow function javascript

related js arrow function vs function

normal function vs arrow function in javascript

Comment

// Normal Function
let add = function (num1, num2) {
return num1 + num2;
}

// Arrow Function
let add = (num1, num2) => num1 + num2;

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: function javascript

Link to this answer
Share Copy Link

Contributed on Feb 15 2022

madhav

0 Answers Avg Quality 2/10

Closely Related Answers

javascript arrow function vs normal function

Comment

// javascript arrow function vs normal function
// 0. How to code them
// 1. "this" keyword behaves differently
// 2. Arrow functions use the "argument" keyword differently
// 3. Arrow functions cannot be used as constructors (the "new" keyword)
// 4. Implicit return (arrow functions can skip the "return" keyword)

// ---- 0. How to code them
// Normal Function
let add = function (num1, num2) {
  return num1 + num2;
}

// Arrow Function
let add = (num1, num2) => num1 + num2;
// alternative if inside an object
let object {
  add: (num1, num2) => {
  	num1 + num2
  },
};

// ---- 1. "this" keyword behaves differently
var variable = “Global Level Variable”;
let myObject = { 
  variable: “Object Level Variable”, 
  arrowFunction: () => { 
  console.log(this.variable); 
  },
  regularFunction() { 
  console.log(this.variable); 
  } 
};
myObject.arrowFunction(); 
myObject.regularFunction();
// Result:
// Global Level Variable
// Object Level Variable

// ---- 2. Arrow functions cannot use the "argument" keyword
function exampleFunction() {
  console.log(arguments[0]);
  console.log(arguments[1]);
  console.log(arguments[2]);
}
exampleFunction(1,2,3)
// Result:
// 1
// 2
// 3

let exampleFunction = {
 printArguments : () => {
  console.log(arguments);
 }
}
exampleFunction.printArguments(1,2,3)
// Result:
// [x] Uncaught ReferenceError: ...

// ---- 3. Arrow functions cannot be used as constructors (the "new" keyword)
function Article(topic) {
  this.topic= topic;
}
const article= new Article('JavaScript');
// Result:
// No errors

function Article = (topic) => {
  this.topic= topic;
}
const article= new Article('JavaScript');
// Result:
// [x] Uncaught TypeError: ...

// ---- 4. Implicit return (arrow functions can skip the "return" keyword)
function exampleFunction() {
  return 10;
}
exampleFunction();
// Result:
// 10

function exampleFunction() {
  var number  = 10;
}
exampleFunction();
// Result:
// undefined

const addOne = (number) => number + 1;
addOne(10);
// Result:
// 11

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: blog.bitsrc.io

Tags: function functio

Link to this answer
Share Copy Link

Contributed on Dec 16 2022

Angry Alligator

0 Answers Avg Quality 2/10

javascript function declaration vs arrow function

Comment

Regular functions created through function declarations / expressions are both constructible and callable. ... Arrow functions (and methods) are only callable i.e arrow functions can never be used as constructor functions. Hence, they can never be invoked with the new keyword.

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: function functio

Link to this answer
Share Copy Link

Contributed on Aug 24 2021

Fragile Frog

0 Answers Avg Quality 2/10

arrow function vs function in javascript

Comment

// Arrow function vs function
// Function in JavaScript
function regular(){
  console.log("regular function");
}
regular(); //regular function

// Arrow Function
const arrow = () => console.log("Arrow function");
arrow(); //Arrow function

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: function functio

Link to this answer
Share Copy Link

Contributed on Jan 19 2022

Chetan Nada

0 Answers Avg Quality 2/10

arrow function javascript rules

Comment

const sayHi = ()=>console.log('Hi');

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: codeburst.io

Tags: function functio

Link to this answer
Share Copy Link

Contributed on Jan 01 2022

Fantastic Falcon

0 Answers Avg Quality 2/10

arrow function javascript rules

Comment

const add3 = (num1, num2, num3) => return num1 + num2 + num3;

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: codeburst.io

Tags: function functio

Link to this answer
Share Copy Link

Contributed on Jan 01 2022

Fantastic Falcon

0 Answers Avg Quality 2/10

arrow function javascript rules

Comment

const square = num => num ** 2;

Popularity 10/10 Helpfulness 1/10 Language javascript

Source: codeburst.io

Tags: function functio

Link to this answer
Share Copy Link

Contributed on Jan 01 2022

Fantastic Falcon

0 Answers Avg Quality 2/10

js arrow vs normal function

Comment

// jsdrops.com/arrow-functions

this.whoIsThis = 'TOP'; // Identify this scope

// 1) Defining
const fancyObj {
  whoIsThis: 'FANCY', // Identify this object
  regularF: function () {
    console.log('regularF', this.whoIsThis);
  },
  arrowF: () => {
    console.log('arrowF', this.whoIsThis);
  },
};

// 2) Calling
console.log('TOP-LEVEL', this.whoIsThis); // It's "TOP" here

fancyObj.regularF(); // Output #1 (Fancy)
fancyObj.arrowF();   // Output #2 (Top)

fancyObj.regularF.call({whoIsThis: 'FAKE'}); // Output #3 (Fake)
fancyObj.arrowF.call({whoIsThis: 'FAKE'});   // Output #4 (Top)

Popularity 9/10 Helpfulness 1/10 Language javascript

Source: jscomplete.com

Tags: function functio

Link to this answer
Share Copy Link

Contributed on Mar 04 2022

barisx

0 Answers Avg Quality 2/10

when to use arrow function javascript

Comment

It is important to note that arrow functions are anonymous, which means that they are not named.

This anonymity creates some issues:

Harder to debug
When you get an error, you will not be able to trace the name of the function or the exact line number where it occurred.

2. No self-referencing

If your function needs to have a self-reference at any point (e.g. recursion, event handler that needs to unbind), it will not work.

Main benefit: No binding of ‘this’

https://www.freecodecamp.org/news/when-and-why-you-should-use-es6-arrow-functions-and-when-you-shouldnt-3d851d7f0b26/

Popularity 9/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: function functio

Link to this answer
Share Copy Link

Contributed on Mar 01 2023

Amjad Saeed

0 Answers Avg Quality 2/10

js arrow function vs function

Comment

// currently common pattern
var that = this;
getData(function(data) {
  that.data = data;
});

// better alternative with arrow functions
getData(data => {
  this.data = data;
});

Popularity 10/10 Helpfulness 1/10 Language javascript

Source: stackoverflow.com

Tags: function functio

Link to this answer
Share Copy Link

Contributed on Oct 22 2021

RedConcrete

0 Answers Avg Quality 2/10

normal function vs arrow function in javascript

Contents

More Related Answers

normal function vs arrow function in javascript

Closely Related Answers

javascript arrow function vs normal function

javascript function declaration vs arrow function

arrow function vs function in javascript

arrow function javascript rules

arrow function javascript rules

arrow function javascript rules

js arrow vs normal function

when to use arrow function javascript

js arrow function vs function

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.