# Traditional vs Arrow function

In JavaScript, you can write functions in a couple of ways. One way is by using the `function` keyword, which I will be referring to as a traditional function. And another way is by using the following syntax `const func = () => {}` which is known as the arrow function. 

In this blog, we will try to uncover the differences between them and hopefully, by the end, you will be able to pick the right function for your needs.

### `arguments` object
The regular function has an `arguments` array-like object which holds all the arguments with which the function has been called.

```
function printNum() {
  console.log(arguments);
}
printNum(1,2,3); // [Arguments] { '0': 1, '1': 2, '2': 3 }

```
Arrow functions similar to that of `this` (discussed below) gets the value of arguments from its parent as it doesn't have the `arguments` object.

```
function traditionalFunction() {
  const printNum = () => {
    console.log(arguments);
  }
  printNum();
}
traditionalFunction(1,2,3); // [Arguments] { '0': 1, '1': 2, '2': 3 }

```

What if we want to access all the arguments in the case of an arrow function. Well for that, we can use the `rest` operator which was introduced in ES6.

```
const printNum = (...args) => {
console.log(args);
}
printNum(1,2,3); //[1,2,3]

```

### `this` value
The arrow function doesn't have its own `this`. It always resolves `this` lexically, in other words, the value of `this` depends on where it is defined. For eg, if it is defined inside a regular function the value of `this` would be the same as that of the parent i.e the outer function.

Let's look into an example,

```
const user = {
    firstName: 'Jason',
    greet: () => {
           console.log(this.firstName);
    }
};

user.greet(); //undefined

```

In the above example, `this` refers to the window object. And since it doesn't have any `firstName` property we get `undefined`.

Now, let's see the result when we wrap the arrow function with a traditional function.

```
const user = {
    firstName: 'Jason',
    greet: function () { 
        const arrowFunc = () => console.log(this.firstName);
        arrowFunc();
    }
};

user.greet(); //Jason

```
Since the arrow function is inside a traditional function, the value of `this` is that of the outer i.e the traditional function. And hence, we get *Jason* on the console.

### Constructor
Unlike the regular functions, we cannot use arrow functions as constructors. If we try to use the latter as a constructor, javascript will throw an error stating that - the function is not a constructor.

```
const Person = () => {
    this.name = 'Peter'
}

const p = new Person(); //type error

```

### Hoisting
In the case of the traditional functions, the whole function is allocated memory and can be called even before the declaration on the other hand if we try to call arrow functions before the declaration it will throw an error.

```
print("working")

function print(param) {
  console.log(param)   // working
}

printArrowFunc('working');  //type error: not a function

var printArrowFunc = param => console.log(param);

```

That's it for now. Please share your thoughts in the comments section. And, stay tuned for more such blogs.