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.

//Hoisting Example
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.

//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() {
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.


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 learned something and keep on improving.

%d bloggers like this: