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

arrow function vs normal function

Add Answer

Siddharth Patel answered on September 14, 2021 Popularity 9/10 Helpfulness 1/10

answer arrow function vs normal function

related difference between function and arrow function

related difference between normal function and arrow function

related mixing arrow function and normal functions

related why to use arrow functions over normal function

arrow function vs normal function

Comment

var name = "Suprabha"
let newObject = {
    name : "supi",
    arrowFunc: () => {
        console.log(this.name); 
    },
    regularFunc() {
        console.log(this.name); 
    }   
}
newObject.arrowFunc(); // undefined
newObject.regularFunc(); // supi

Popularity 9/10 Helpfulness 1/10 Language javascript

Source: medium.com

Tags: function javascript

Link to this answer
Share Copy Link

Contributed on Nov 21 2022

Siddharth Patel

0 Answers Avg Quality 2/10

Closely Related Answers

difference between function and arrow function

Comment

There are a few differences between regular functions and arrow functions in JavaScript:

1. Syntax: Arrow functions have a shorter syntax compared to regular functions. Arrow functions do not have the function keyword, and the return keyword is optional if the function body is a single expression.

// Regular function
function sum(a, b) {
  return a + b;
}

// Arrow function
const sum = (a, b) => a + b;

2. this keyword: The value of the this keyword inside a regular function is determined by how the function is called. In an arrow function, the value of this is inherited from the surrounding context.

const obj = {
  name: 'John',
  regularGreet: function() {
    console.log(`Hello, my name is ${this.name}`);
  },
  arrowGreet: () => {
    console.log(`Hello, my name is ${this.name}`);
  }
};

obj.regularGreet(); // "Hello, my name is John"
obj.arrowGreet(); // "Hello, my name is undefined"

3. arguments object: The arguments object is an array-like object that is available inside functions. It can be used to access the arguments passed to the function. Arrow functions do not have their own arguments object. Instead, they can use the rest parameter syntax (...) to access the arguments passed to the function.

function sum() {
  console.log(arguments);
}

const sum = () => {
  console.log(arguments); // Uncaught ReferenceError: arguments is not defined
}

const sum = (...args) => {
  console.log(args);
}

4.new operator: Regular functions can be called with the new operator to create an instance of an object. Arrow functions cannot be used as constructors and cannot be called with the new operator.

function Person(name) {
  this.name = name;
}

const person = new Person('John');
console.log(person.name); // "John"

const Person = (name) => {
  this.name = name;
}

const person = new Person('John'); // Uncaught TypeError: Person is not a constructor

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: Grepper

Tags: between

Link to this answer
Share Copy Link

Contributed on Jan 04 2023

Hustler

0 Answers Avg Quality 2/10

difference between normal function and arrow function

Comment

//* main difference is arrow functions do not have their own this
let user = {
  name: "HEllo world",
  functTest() {
    console.log("----functTest---", this.name) // HEllo world
  },
  arrowTest: () => { 
    console.log("----arrowTest----", this.name) // undefined
  }
}
user.functTest()
user.arrowTest()

Popularity 10/10 Helpfulness 3/10 Language javascript

Source: Grepper

Tags: between

Link to this answer
Share Copy Link

Contributed on Jan 20 2022

Abhishek

0 Answers Avg Quality 2/10

mixing arrow function and normal functions

Comment

In this example, we have an object with a greet method that uses an arrow function inside a setTimeout call. The arrow function has access to the enclosing scope’s this value, which is the object itself. If we had used a regular function instead of an arrow function, this would have referred to the enclosing scope instead of the object.

const obj = {
  name: 'John',
  age: 30,
  greet() {
    setTimeout(() => {
      console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
    }, 1000);
  }
};

obj.greet(); // Hello, my name is John and I'm 30 years old.

Popularity 9/10 Helpfulness 3/10 Language javascript

Source: Grepper

Tags: function functio

Link to this answer
Share Copy Link

Contributed on Apr 12 2023

PeeBee!

0 Answers Avg Quality 2/10

why to use arrow functions over normal function

Comment

// => why to choose arrow function over normal function 
1. short syntax, good as callback functions
 ([].map(() => {}) is better than [].map(function () {}))

2. when using class component, with arrow functions no need to bind this

// example: 

 -// this will be undefined
		button.addEventListener('click', () => {console.log(this); })
  // this will refer to dom button
		button.addEventListener('click', function () {console.log(this); })

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: arrow-functions

Link to this answer
Share Copy Link

Contributed on Sep 14 2021

Abhishek

0 Answers Avg Quality 2/10

arrow function vs normal function

Contents

More Related Answers

arrow function vs normal function

Closely Related Answers

difference between function and arrow function

difference between normal function and arrow function

mixing arrow function and normal functions

why to use arrow functions over normal function

Grepper

Documentation

Social

Legal

Contact

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