JavaScript Arrow Functions

Kino

EIS Game Dev
Veteran
Joined
Nov 27, 2015
Messages
556
Reaction score
794
First Language
English
Primarily Uses
RMMV
If you'd like to read the original post you can find it here.
KinoCreates.io

Introduction
Functions are a collection of instructions that are used to accomplish a task. In JavaScript, there are two types of functions you’ll see often; the standard function and the arrow function. Now, there are some key characteristics that separate arrow functions from the standard function. But first, let’s discuss the standard function briefly.

Standard Functions
The standard function in JavaScript has interesting properties. They can be instantiated; this means they can be created with the new keyword. Now, that could be bad because it may be unintended behavior in your program; you want your functions to be functions, not objects. Now, these functions are also hoisted. What’s hoisted? It means that the function is always brought to the top of the current scope; it’s available before it’s defined in your program. Now, this is a good feature but can be messy; use it with caution. And to illustrate the power of these functions here’s an example showcasing their characteristics.

JavaScript:
const a = test(); //Hoisted Function Execution
const b = new test();

console.log("Ran before the function is defined", a); //Ran before the function is dined 3
console.log(b) //test{}

function test() {
  return 3;
}
As you can see the function is hoisted and can be called earlier in the program. Also, the function can be called with the new keyword, because functions are objects. Now, these characteristics are different compared to arrow functions. So, let’s discuss the awesome arrow functions.

Arrow Functions
Arrow functions are specialized, giving them different characteristics from standard functions. Unlike standard functions, they are not hoisted and can’t be instantiated (called with the new keyword). Lastly, they are lexically scoped. This is a defining factor so let’s explain lexical scoping.

Lexical scoping means that the functions do not create a new function scope when defined. Now, the scope defines where variables exist. The scope is simply a block scope and will not change the context of “this”. Now, “this” refers to the current function or object you’re in at the time.; if you use a standard function, “this” will refer to the new standard function. As a result, arrow functions are often the best choice for anonymous functions or for writing functions that are very explicit. Here’s an example showcasing all their characteristics.

JavaScript:
//Arrow Functions
console.log(identity); //Undefined  - Function is not hoisted
var identity = x => x ;
console.log(identity); //Function  or x => x
//console.log(new identity()); //Error - not a constructor

//Context Example
function test2() {
  console.log(this); //test2 - this refers to the object
  var test3 = x => console.log(this);
  function test4() {
    console.log(this);
  }
  test3(); //Refers to test2
  var b = new test4(); //Refers to test4
}

var a = new test2();
As you can see, they are very beneficial shortening the amount of code you have to write significantly. Also, they maintain the context correctly; an important feature that allows for the writing of callback functions that are smaller more performant. As you can see, it also throws an error if you try to instantiate an arrow function, which allows you to keep unintended side effects out of your program.

Conclusion
Personally, I believe arrow functions are a great addition to the JavaScript language. Understanding and using them effectively will improve your code, and shorten all that code you have to write. Now, I hope you take this with you.
 

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

Latest Threads

Latest Posts

Latest Profile Posts

Haired slime? Trying some different styles of art. Maybe I can make some resources with this new kind of painting.......
i love my game very much
Uh, I'm probably overthinking this, but I think that some of my music sounds kinda...bad?
The melodies are just sort of awkward, and don't flow.
I'm really not sure what to do. Why am I even worrying about this? I don't even have a battle system yet!
And the Lord said, let there be lighting effects! And there were lighting effects! And it was good...ish? Might tweak this some more.
Today was a day of good things! Thank you fate! I pray to the darkness that those that read this will enjoy a good day as well! Power to the gam mak.

Forum statistics

Threads
105,724
Messages
1,015,913
Members
137,402
Latest member
Lopilon
Top