DEV Community

Cover image for Arrow function vs Regular function
karam koujan
karam koujan

Posted on

Arrow function vs Regular function

Arrow function and regular function ( function expression) are used interchangeably in our code without knowing the difference between them which could cause some confusing behavior, in this article I will mention 3 important differences between arrow function and regular function.

1. This value

The value of this depends on how function is invoked, in javascript there are 4 ways to invoke a function.

1. Simple invocation

 const foo = function(){
  console.log(this) // global object
}  
foo()  
Enter fullscreen mode Exit fullscreen mode

2. Method invocation

const obj = {
 foo(){
 console.log(this) // { foo: [Function: foo] }

}
}
obj.foo()
Enter fullscreen mode Exit fullscreen mode

3. Indirect invocation

const obj =  {
  name : "javascript"
}
const foo = function(){
 console.log(this) // { name: 'javascript' }

}

foo.call(obj)
Enter fullscreen mode Exit fullscreen mode

4. Constructor function

const Language = function(name){
 this.name = name
}

new Language("javascript") // {name:javascript}
Enter fullscreen mode Exit fullscreen mode

For the arrow function the behavior of this differs from the regular function, the arrow function doesn’t have its binding to this but it establishes this based on the lexical scope the arrow function defined within. this difference could cause a strange behavior when we use arrow functions as methods, so it’s better to avoid using arrow functions as methods.

const obj = {
 foo :()=>{
 console.log(this) // window
}
}
obj.foo()
Enter fullscreen mode Exit fullscreen mode

2. Constructors

Arrow function cannot be used as constructors, if you try to invoke arrow function’s prefix with new keyword, javascript throws an error.

 const Language = (name)=>{
 this.name = name
}

new Language("javascript") // TypeError : Language is not a constructor
Enter fullscreen mode Exit fullscreen mode

3. Arguments object

Inside the body of a regular function, arguments is an array-like object containing the function invocation arguments.

function myFunction() {
  console.log(arguments);
}
myFunction('a', 'b'); // { 0: 'a', 1: 'b', length: 2 }
Enter fullscreen mode Exit fullscreen mode

on the other side there is no special arguments keyword inside the arrow function, but it accesses arguments from the outer function

function RegularFunction() {
  const ArrowFunction = () => {
    console.log(arguments);
  }
  ArrowFunction('c', 'd');
}
RegularFunction('a', 'b');  logs { 0: 'a', 1: 'b', length: 2
Enter fullscreen mode Exit fullscreen mode

Conclusion

We have discussed in this article about 3 differences between arrow functions and regular functions which is :

  • This value
  • constructors
  • arguments object

What other differences between arrow and regular functions do you know?

Top comments (5)

Collapse
 
pengeszikra profile image
Peter Vivo

I prefer arrow functions over regular one, because don't need afraid about weird this and bind.

generator function

But generator function only can write with regular syntax, in our react codebase we use redux-saga ( based on generator function ) for automatisation, complex side effect handling.

export function * watchSetModeStartSaga() {
  while (true) {
    const {payload:mode} = yield take(SET_MODE);
    if (mode === MODE.select) {
      yield call(getFilteredProductListSaga);
    }
  } 
}
Enter fullscreen mode Exit fullscreen mode

multiple arrow function

When one function give back another function is really handy, and with arrow syntax that is much easier to read. This is the simple dependency injection in js.

  const handleDoubleClickOnItem = item => event => {
    if (event.detail <= 1) return;
    event.stopPropagation();
    selectItem(item);
  }

return (
  <section>
    { itemList.map(item => 
        <div className="some-item" key={item?.id} onClick={handleDoubleClickOnItem(item)} />
    )}
  </section>
)
Enter fullscreen mode Exit fullscreen mode
Collapse
 
karamkoujan profile image
karam koujan

I also prefer arrow function over regular one but I avoid using arrow functions as methods

Some comments may only be visible to logged-in visitors. Sign in to view all comments.