Javascript Interview Questions: Arrow Functions vs ES5 functions, Destructuring, Closures

Can you offer a use case for the new arrow => function syntax?

The new arrow => function syntax was introduced in ECMA Script 6. The general syntax is as follows:

Note that for this syntax we do not need to use the function declaration keyword function , but rather save the function to a variable myFunction. However, arrow functions can also be passes as anonymous callback functions into higher order functions, and if there is only a single argument, then the () can be omitted. Likewise, if there is a simple one line return value, then the {} and return keyword can be omitted, which can make passing anonymous functions much cleaner code to read and write. Here is a simple example passing an anonymous arrow function into the .filter() array method that will filter in elements of the array that start with the letter ‘a’. Hence:

const filteredArray = myArray.filter(item => item.charAt(0) === 'a');

Is the same as:

How does this new syntax differ from the older function signature, function nameFunc(){}, both in style and functionality?

It should be clear from the above discussion and examples how arrow function’s and the older function signature differ in terms of syntax. In terms of functionality, perhaps the most important difference is that while functions declared with the traditional function signature are hoisted, arrow functions are NOT hoisted. Moreover, arrow functions solve an important problem in the context of object methods: when it comes to arrow functions the this keyword will work as intended and refer to the object itself. However in the case of older function signature, this will refer to the window Object. For more on this topic, see this great breakdown.

Explain the differences on the usage of foo between function foo() {} and const foo = function() {}

function foo() {} is a function declaration named foo. As such it will be hoisted. const foo = function() {} is initializing a function to a variable called foo. Since it is saved to a variable, it will NOT be hoisted.

What advantage is there for using the arrow syntax for a method in a constructor?

The advantage of using arrow syntax for a method in a constructor is that doing so will bind the this keyword to the surrounding code in the class, which makes for much more packaged and reliable class declarations. (traditional functions may bind the this keyword to the Global Window Object, and require a workaround to be bound to the class itself)

Can you give an example for destructuring an object or an array?

The destructuring assignment new in ECMA script 6 allows for a convenient way to extract data from arrays or objects and save it to variables. For arrays, this is done by naming the variables we would like inside of an array and setting it equal to the array we would like to extract the respective data from. The variables will correspond 1–1 with the array, and additional commas can be using in the destructuring assignment in order to skip values in the array. For example:

Explain Closure in your own words. How do you think you can use it?

In simple terms, a closure is a function that remembers its lexical scope even after it has finished executing and returned. The concept of closure therefore essentially means that functions will have and maintain access to variables that are outside of their execution block, in other words, variables in the outer variable scope. Leveraging this feature of javascript can be very useful in allowing us to create pure functions that encapsulate all of their variables without having to mess with the global scope. A common problem solved by leveraging closures is the problem of creating a counter function without having to place the counter variable on the global scope. This is done nesting a function inside of our main counter function, and having the former nested function be the return value for the main counter function:

The above code examples from from the great W3schools explanation of closure, which has further detail.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Michael Fares

Michael Fares

10 Followers

I am a Frontend Web Developer, Educator, Lifelong autodidact, 3rd Culture Kid, and Citizen of the World.