An Interest In:
Web News this Week
- March 19, 2024
- March 18, 2024
- March 17, 2024
- March 16, 2024
- March 15, 2024
- March 14, 2024
- March 13, 2024
JavaScript Regular/Normal vs Arrow Function: My Beef with Arrow Functions.
When I First encountered arrow functions, I was exited about the syntax difference. So I started putting them in everything; that was a huge mistake. I soon noticed abnormal unwanted behavior in the "this" keyword, so for a while I hated arrow functions but we have reconciled.
Both function declaration and expression can be written as Normal/Regular Function
// function declarationfunction test(mama) { return ` ${mama} is the best`}// function expressionconst test = function(app) { return `Hey ${app} is not working`}
Arrow function or fat arrow function was introduced in ES6
const callNurse= (nurse) => { return `${nurse} please come! I feel a piercing arrow`}
The Differences
1. Implicit Return
In normal regular functions, you must use the return keyword to return any value. If you dont return anything then the function will return undefined. Arrow functions can return a value without the return keyword; If the arrow function contains one expression, you can omit the curly braces, and then the expression will be implicitly returned.
2. Curly braces {}
Curly braces {} are not required if its only one line of statement
const uno = (name) => name + ye;uno(niza);// niza ye
3. Parenthesis()
Parenthesis () not required if you pass only one argument and only underscore _ is required when there is no argument
let add = x => x + x;let shootArrow = _ => console.log("shooting arrow");
4. Arguments binding
In regular functions, the arguments keywords can be used to list the arguments of which passed to the function. Arrow functions on the other hand do not have an argument binding.However, if you want to access arguments in an arrow function, you can use the rest parameter:The rest parameter syntax allows a function to accept an indefinite number of arguments as an array.
function normalFunc(x,y) { console.log(arguments)}normalFunc(1,2) // Arguments[1,2]const arrowFunc = (x,y) => console.log(arguments)arrowFunc(1,2) //ReferenceError: arguments is not defined
var arrowFunction = (...args) => { console.log(...args)}arrowFunction(1,2)// 1 2
5. this
In normal regular functions, "this" changes according to how the function is invoked. "this" may refer to the global object or undefined if you are using strict mode. It could be the object that owns the method the if the function is a method of an object. Other times it refers to the newly created instance when it is used as a constructor.
Arrow functions dont have their own this, and they dont redefine the value of this within the function. this inside an arrow function always refer to "this" from the outer context. This is my biggest beef with arrow functions
//normal functionconst person = { run() { console.log(this); }};person.run();// logs person object//arrow functionconst person = { run: () => { console.log(this); } };person.run();// logs window object
6. new
Regular functions are constructible, they can be called using the new keyword. However, arrow functions can never be used as constructor functions. Hence, they can never be invoked with the new keyword
function add (a, b) { console.log(a + b)}let sum = new add(2,3); // 5let add = (a, b) => console.log(a + b);const sum = new add(2,4);// TypeError: add is not a constructor
7. No duplicate named parameters
In normal function, we can do this: row functions can never have duplicate named parameters, whether in strict or non-strict mode.
// allowedfunction add(x, x) {}// not allowed'use strict';function add(y, y) {}// Uncaught SyntaxError: Duplicate parameter name not allowed in this contextconst arrowFunc = (a,a) => {}// Uncaught SyntaxError: Duplicate parameter name not allowed in this context
8. Function Hoisting
In regular function, the function gets hoisting at the top. But in arrow function, function get hoisted where you define. So, if you call the function before initialization you will get a ReferenceError
get referenceError.normalFunc()function normalFunc() { return "Shooting bullets"}// "Normal Function"arrowFunc()const arrowFunc = () => { return "Shooting Arrows"}// ReferenceError: Cannot access 'arrowFunc' before initialization
Original Link: https://dev.to/niza/javascript-regularnormal-vs-arrow-function-my-beef-with-arrow-functions-3b49
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To