More JS Interview Questions
Higher Order Functions
This week at Austin Coding Academy we are learning about higher order functions. A higher order function is a function that takes another function as one of its parameters, also known as a callback function. In JavaScript, some of the most commonly used higher order functions include several array methods, like .map(), .filter(), .forEach(), .every(), .find(), and many others. What all of these methods have in common is that they take in a callback function that will be performed on every item in the array and return a given output. As such, these methods are a much faster and less verbose way to iterate over an array based on a custom callback function, instead of using a for loop. For instance, .find() will return the first element in the array that satisfies the testing condition of the provided callback function, and .map() will return a new array that is a copy of the original array but for which the callback function has been performed on each item in the original array. For all callback functions, they can be defined for the first time when invoking the array method, in which case they are anonymous functions. Or, they can be written as named functions and then the variable to which the function is assigned can be passed into the method as an argument. Here is an example of .map() being used with an anonymous callback function, and then with the same function as a named function. The transformation being performed in this example is multiplying every item in the original array by 10.
const myArray = [1,2,3,4,5]// mapping with an anonymous callback functionconst myArray = [1,2,3,4,5]// mapping with an anonymous callback functionmyArray.map((item) => {return item*10})
// output: [ 10, 20, 30, 40, 50 ]// performing the same mapping with the same function, only as a named function that has been declared beforehandconst multiplyByTen = (item) => {
return item*10
}myArray.map(multiplyByTen)
// output is the same: [ 10, 20, 30, 40, 50 ]
What’s the difference between: function Person(){}, var person = Person(), and var person = new Person()?
While these three pieces of code look similar, in that they all seem to involve a function named Person, there are actually important differences.
function Person(){} is the declaration of a new function called Person, using the function key word. It declares what the function is supposed to do, but it does not invoke (call) the function.
var person = Person() initializes a variable named person and sets that variable equal to the returned output of the function Person() after it has been invoked. For instance, if the code inside of the function Person() was:
function Person(){return 'hello, person!'}
Then the returned string ‘hello, person!’ will now be saved to the variable person. We can verify this by logging the variable person to the console, and we will get ‘hello, person!’
var person = new Person() in this final line of code, the keyword new means that Person() is no longer a custom function being invoked, but rather an object constructor function that will instantiate a new instance of an object called Person. Therefore, if we now log the value of person to the console, we will see that a new object called Person has been created.
console.log(person)// output:Person {} // new Person object has been created
What’s the difference between an “attribute” and a “property”?
Attributes in HTML tags are what are then called properties once the HTML tags are represented in the DOM. HTML attributes such as id and class ,and the hundreds of others, map 1:1 to DOM properties. However, to make the difference even more subtle: there are some DOM properties that do not have corresponding HTML attributes.
Since each HTML element is its own Javascript Object within the DOM, the attributes specified within the HTML tag now become object properties of that particular DOM object.
What language constructions do you use for iterating over object properties and array items?
To iterate over array items, a typical method is to use a for ... of loop, while to iterate over object keys and properties, a typical method it use a for ... in loop. For looping over an array of objects, a common JavaScript data structure, combining these two loops can be very useful. Here is an example of a for... in loop nested inside a for ... of loop in order to iterate over certain object properties for objects stored in an array.
// an array of people object we wish to iterate over
const people = [
{
firstName: 'Sarah',
lastName: 'Jones',
birthDate: 'Jan 5, 1925',
gender: 'female'
},
{
firstName: 'Sue',
lastName: 'Long',
birthDate: 'Jan 6, 1925',
gender: 'female'
},
{
firstName: 'John',
lastName: 'Doe',
birthDate: 'Jan 7, 1925',
gender: 'male'
},
{
firstName: 'Jimmy',
lastName: 'Doe',
birthDate: 'Jan 8, 1925',
gender: 'male'
},
{
firstName: 'Yusuf',
lastName: 'Ahmed',
birthDate: 'Jan 19, 1925',
gender: 'male'
}
]// a function with a for/in loop inside a for/of loop will log each of the keys and values for all 5 person objects when our array of objects (people) is passed to it.const loopOverObjArray = (arr) => {
for(let obj of arr) {
for(let key in obj) {
console.log(`The key is ${key}, and the value is ${obj[key]}`)
}
}
}loopOverObjArray(people)
What is the difference between call stack and task queue?
The call stack is what is responsible for running synchronous JavaScript code. It is a data structure that synchronously keeps track of the function being called in a program and executes them in order of call. Functions are pushed to the stack in the order they are called, and likewise popped off of the stack in the order they are executed, once execution is complete.
The task queue, on the other hand, is what is responsible for running asynchronous code, namely requests for data from external API’s. The task queue keeps track of API calls and processes them as the call stack becomes completely clear. If there are any functions on the call stack, the task queue will ‘wait’ until it is clear to handle the API requests.
What is the event loop?
The event loop interfaces between the call stack and the task queue. It is what specifically checks to see if the call stack is clear, and if there are any current tasks in the task queue. If both of these conditions are true, then the event loop will push the tasks to the call stack in order to be executed.
For a great further explanation of the event loop and also the difference between the call stack and the task queue see this article.
What are the differences between ES6 classes and ES5 function constructors?
In ES5, which does not have classes, new objects are created with the function keyword, and this is known as a constructor function. In ES6, classes, declared with the class keyword are special functions that are used as a template for constructing objects. Classes have a constructor function nested inside of them declared with the constructor key word. See this article for further reading.
