Thomas  Granger

Thomas Granger

1584513825

Difference between Regular and Arrow Functions in JavaScript

Arrow functions – a new feature introduced in ES6 – enable writing concise functions in JavaScript. While both regular and arrow functions work in a similar manner, yet there are certain interesting differences between them.

By using function a developer can easily create a block of codes. JavaScript also provides us with the facility to create functions. Due to the ES5 and ES6 standard of JavaScript, functions are also described in a different syntax. ES6 has introduced a new arrow based syntax to write a function which is also called fat arrow function. Let’s find the difference between the regular function and fat arrow function.

Basic Syntax of regular vs arrow function

Without using any parameter:

/***** ES5 Regular Function  *****/
let prtLangReg = function () {
console.log("JavaScript");
}
prtLangReg();

/***** ES6 Arrow Function  *****/
let prtLangArrow = _ => {console.log("JavaScript");}
prtLangArrow();

With one parameter:

/***** ES5 Regular Function  *****/
let prtLangReg = function (language) {
console.log(language);
}
prtLangReg("JavaScript");

/***** ES6 Arrow Function  *****/
let prtLangArrow = (language) => { console.log(language); }
prtLangArrow("JavaScript");

With multiple parameters:

/***** ES5 Regular Function  *****/
let prtLangReg = function (id, language) {
console.log(id + ".) " + language);
}
prtLangReg(1, "JavaScript");

/***** ES6 Arrow Function  *****/
let prtLangArrow = (id, language) => { console.log(id + ".) " + language); }
prtLangArrow(1, "JavaScript");

As you have checked the basic function declaration using both ES5 and ES6. The syntax looks nearly the same but ES6 arrow function has much cleaner and precise syntax.

“this” scope in regular and arrow function

“this” is the keyword in JavaScript which has very importance it contains the reference. Reference may be window object or any other custom object depends on the condition.

let language = {
name: "JavaScript",
prtLangReg: function (id, language) {
console.log(this);
},
prtLangArrow: (id, language) => { console.log(this); }
}
language.prtLangReg();  // ES5 Function Call
language.prtLangArrow(); // ES6 Function Call

Copy/paste above code and check the result in the console. You will find regular function returns a reference to the current JavaScript Object and arrow function returns the reference to the global window object. Why an arrow function returns the global object? Arrow function gets “this” keyword scope from the parent or scope from the nearest regular function in which arrow function is defined.

“this” scope in arrow function when declared inside the ES5 regular function

let language = {
name: "JavaScript",
prtLangReg: function (id, language) {
console.log(this); 
},
arrowUsingRegular: function () {
return (id, language) => {
console.log(this); // this refers to language Object
}
}
}
language.prtLangReg();
language.arrowUsingRegular()();

Arguments binding in ES5 regular and ES6 arrow functions

ES6 in JavaScript provides us with the arguments Object from which we can select all the parameters passed to the function. But Arrow function does not contain the argument object.

let language = {
name: "JavaScript",
prtLangReg: function () {
console.log(arguments); // 1, JavaScript
},
prtLangArrow: () => {
console.log(arguments); //argument is not defined
}
}
language.prtLangReg(1, "JavaScript");
language.prtLangArrow(1, "JavaScript");

ES5 regular and ES6 arrow function working with the object using the new keyword

Regular functions are working well with objects using the new keyword. They have the constructor function by which values can be initialized during object creation. It can be managed using the prototype chaining.

let Language = function (name) {
this.name = name;
}
Language.prototype.prtLangReg = function () {
console.log(this.name);
}
let language = new Language("JavaScript");
language.prtLangReg();

But arrow function does not have constructor function, prototype chaining. They are not working well with objects. They can not be used with the new keyword for assigning memory.

Which one to choose ES5 Regular or ES6 Arrow function?

After checking the features of ES5 Regular and ES6 Arrow function now the question is what to choose for function declaration?

Arrow function performs well in Callbacks function like setTimeout, Map, Reduce etc. But Regular function performs well with Objects.

Do not use an arrow function with the objects. Always used with Higher-Order Function. Choose regular function when you have to work with the objects. Apart from that, arrow function has many other syntax related benefits like implicitly return values, shorter syntax. You can test those syntaxes as well.

Happy Coding!

#javascript #es6 #es5

What is GEEK

Buddha Community

Difference between Regular and Arrow Functions in JavaScript
Vincent Lab

Vincent Lab

1605017502

The Difference Between Regular Functions and Arrow Functions in JavaScript

Other then the syntactical differences. The main difference is the way the this keyword behaves? In an arrow function, the this keyword remains the same throughout the life-cycle of the function and is always bound to the value of this in the closest non-arrow parent function. Arrow functions can never be constructor functions so they can never be invoked with the new keyword. And they can never have duplicate named parameters like a regular function not using strict mode.

Here are a few code examples to show you some of the differences
this.name = "Bob";

const person = {
name: “Jon”,

<span style="color: #008000">// Regular function</span>
func1: <span style="color: #0000ff">function</span> () {
    console.log(<span style="color: #0000ff">this</span>);
},

<span style="color: #008000">// Arrow function</span>
func2: () =&gt; {
    console.log(<span style="color: #0000ff">this</span>);
}

}

person.func1(); // Call the Regular function
// Output: {name:“Jon”, func1:[Function: func1], func2:[Function: func2]}

person.func2(); // Call the Arrow function
// Output: {name:“Bob”}

The new keyword with an arrow function
const person = (name) => console.log("Your name is " + name);
const bob = new person("Bob");
// Uncaught TypeError: person is not a constructor

If you want to see a visual presentation on the differences, then you can see the video below:

#arrow functions #javascript #regular functions #arrow functions vs normal functions #difference between functions and arrow functions

JavaScript: The Good Parts of Arrow Functions

When I was at a coding boot camp learning about JavaScript and ES6, everyone in class seemed to have some level of confusion around normal function declarations and the new ES6 arrow function declarations. Common questions we had included:

  • When should we use normal functions or arrow functions?
  • What are the differences between normal functions and arrow functions?
  • Are we able to use one or the other in all situations for consistency?

After doing some research, I found that normal functions and arrow functions are actually not interchangeable in certain circumstances. Apart from the syntax, normal functions and arrow functions have another major difference: the way they bind the this keyword in JavaScript.

Let’s look at a very simple example. Suppose we have a simple JavaScript object:

const obj1 = {
	  fullName: 'Object 1',
	  color: 'red',
	  print: function() {
	    console.log(`${this.fullName} is ${this.color}`);
	  }
	};

	obj1.print(); // Object 1 is red
view raw
object1.js hosted with ❤ by GitHub

We have a print method on obj1 that logs a string to the console. The result is what we have expected, that this in the print method refers to obj1 itself.

Now let’s create another object with a slightly different print method:

const obj2 = {
	  fullName: 'Object 2',
	  color: 'blue',
	  print: function() {
	    setTimeout(function() {
	      console.log(`${this.fullName} is ${this.color}`);
	    }, 1000);
	  }
	};

	obj2.print(); // undefined is undefined
view raw
object2.js hosted with ❤ by GitHub

Now the print method will only log the resulting string after one second due to setTimeout . But why is it logging undefined is undefined instead of Object 2 is blue ?

#es2015 #javascript #es6 #javascript-tips #arrow-functions #function

Willie  Beier

Willie Beier

1595341680

5 Differences Between Arrow and Regular Functions

In JavaScript, you can define functions in many ways.

The first, usual way, is by using the function keyword:

// Function declaration
function greet(who) {
  return `Hello, ${who}!`;
}
// Function expression
const greet = function(who) {
  return `Hello, ${who}`;
}

The function declaration and function expression I’m going to reference as regular function.

The second way, available starting ES2015, is the arrow function syntax:

const greet = (who) => {
  return `Hello, ${who}!`;
}

While both the regular and arrow syntaxes define functions, when would you choose one instead of another? That’s a good question.

In this post, I’m going to show the main differences between the two, so you could choose the right syntax for your needs.

1. this value

1.1 Regular function

Inside of a regular JavaScript function, this value (aka the execution context) is dynamic.

The dynamic context means that the value of this depends on how the function is invoked. In JavaScript, there are 4 ways you can invoke a regular function.

During a simple invocation the value of this equals to the global object (or undefined if the function runs in strict mode):

function myFunction() {
  console.log(this);
}

// Simple invocation
myFunction(); // logs global object (window)

During a method invocation the value of this is the object owning the method:

const myObject = {
  method() {
    console.log(this);
  }
};
// Method invocation
myObject.method(); // logs myObject

#javascript #function #arrow function

Giles  Goodwin

Giles Goodwin

1603176407

The real reason why JavaScript has arrow functions

Nowadays, all my code is based on the use of arrow functions. If you are still not using them yourself, then don’t be ashamed of who you are. That’s your parent’s job. Instead, find about all the benefits that you can get by using arrow functions like the cool kids.

This is an example of arrow function and the same code written traditionally:

const arrowFunction = (arg1, arg2) => arg1 + arg 2;

const traditionalFunction = function(arg1, arg2) {
  return arg1 + arg2;
};

You may notice that the code is shorter and that there is an arrow. Everything before the arrow is arguments of the function and everything after the arrow is always returned as the result of the function.

If you need a function that contains multiple statements you can still do this:

const arrowFunction = (arg1, arg2) => {
  const result = arg1 + arg2;
  return result;
};

#javascript #js #functional-javascript #functional-programming #javascript-tips

Madyson  Reilly

Madyson Reilly

1601069940

Function Expression vs Function Declaration in JavaScript

Function Expression vs Function Declaration in JavaScript.

It was until during one of the JavaScript mock interviews did I came across the term function expression.

The question was: What is the difference between these two syntax?

function x(){

}

let x = function(){

}

I was clueless for a moment. After thinking a little, I could only come up with: the second syntax invokes an _anonymous _function and is assigned to a variable.

I was alien to the term hoisting.

In this article, we will acquaint ourselves with three simple terms: function declaration,_ function expression, _and hoisting.

What is function declaration?

Function declaration is also known as _function statement. _It contains the name of the function, parameters, and a return statement. **Naming the function **is what sets function declaration apart. Parameters and return statement is optional.

Image for post

Function Declaration

What is function expression?

Function expression also has a name, parameters, and return statement. All of which are optional. The important thing to bear in mind is: the function here is _assigned _to a JavaScript variable.

Image for post

Function Expression

#function-expression #function-declaration #functions-in-javascript #coding #javascript #express