Summary

The web content provides an overview of ten common JavaScript interview questions specifically tailored for front-end developers, covering key concepts such as the 'this' keyword, closures, hoisting, event handling, and strict mode.

Abstract

The article delves into the intricacies of JavaScript that front-end developers commonly encounter during interviews. It begins by addressing the complexity of the 'this' keyword, offering solutions to the common confusion it causes and discussing the importance of understanding the object 'this' should reference. It then explains closures, emphasizing their role in creating private variables and functions, and clarifies common misconceptions. Hoisting, a JavaScript mechanism that moves declarations to the top of the scope, is also described. The article transitions into synchronous and asynchronous JavaScript operations, highlighting the event loop's role in handling asynchronous code. Event delegation is explained as a technique to optimize event handling in the DOM, followed by an exploration of higher-order functions, which are functions that take other functions as arguments or return them. The difference between function declarations and function expressions is clarified, with attention to the timing of their definition. Prototypal inheritance is illustrated as the mechanism for object inheritance in JavaScript, and finally, strict mode is introduced as a way to enforce stricter syntax rules for safer and more consistent code.

Opinions

The author suggests that understanding 'this' is crucial for JavaScript developers and provides examples to clarify its behavior.
Closures are not merely 'functions within functions' but are recognized as a powerful feature for data encapsulation.
Hoisting is presented as a default behavior of JavaScript that developers must be aware of to avoid uninitialized variable references.
The article emphasizes the event loop as a key concept for understanding asynchronous JavaScript, suggesting its importance in modern web development.
Event delegation is recommended as a best practice for efficient event handling, leveraging event propagation to reduce the number of event listeners.
Higher-order functions are seen as a fundamental aspect of JavaScript's functional programming capabilities.
The distinction between function declarations and expressions is highlighted to underscore the significance of understanding execution contexts in JavaScript.
Prototypal inheritance is described as a flexible alternative to classical inheritance, with a diagram provided to illustrate the prototype chain.
Strict mode is advocated for as a means to enhance code quality by disallowing unsafe actions and coding practices that can lead to errors.

10 popular interview questions of JavaScript for Front-end Developers

https://freelancermap.s3.eu-west-1.amazonaws.com/channel_incl1/becoming-a-front-end-developer---the-six-skills-you-will-need-3971.jpg

1. How to understand ‘this’ keyword in JavaScript?

Those who learn JavaScript as the beginners always get confused about ‘this’ keyword, because ‘this’ in JavaScript is a little bit tricky compared to other modern programming languages. It should represent the object where ‘this’ keyword currently located in, but things did not take place as it should be. ‘this’ keyword in JS is determined by how the function will be called. ‘this’ refers to the caller. If the caller cannot be found, ‘this’ will point to windows object.

Here are some examples:

This first example is straightforward. ‘test’ is the object calls the func(), so ‘this’ in func() refers to test object and console log 42 as the output.

var test = { prop: 42,

func: function(){ return this.prop;

}, };

console.log (test.func()); // 42

The second example will print out ‘David Jones’ if we directly call the getFullname function, then ‘this’ keyword will not find the obj object it belongs to. ‘the getFullname’ function is called under the windows object, so ‘this’ refers to windows.

var fullname = ‘David Jones’

var obj ={

fullname: ‘Colin Brown’,

prop:{

fullname:’Aurelio Deftch’,

getFullname: function(){

return this.fullname;

}

var test = obj.prop.getFullname

console.log(test()) // David Jones

obj.prop.getFullname() // ‘Aurelio Deftch’ // prop object calls the function

2. Since ‘this’ keyword is confused, how to fix ‘this’ problem?

There are many approaches to solve this problem; however, no matter what solutions you choose, the most important thing is to know which object you decide to let ‘this’ point.

Once you figure out the correct object ‘this’ should be, you can directly change it into the object name. Otherwise, using ‘bind,’ ‘call,’ ‘apply’ functions also works out.

3. What is closure?

When I first explained the closure, I used to say ‘function in function’; however, it doesn’t correctly describe what precisely the closure is.

The closure is about creating a closed lexical scope inside another scope, so the inner scope can access the outer scope. The closure is created as the function is created. The closure is to make variables and methods private in the scope.

Currying is one example of closure. It usually self returns for generating this lexical environment. This environment consists of any local variables that were in-scope at the time the closure was created. It is like a mini-factory to manufacture a product with specific functions from those ingredients.

function add(n){ var num = n return function addTo(x){

return x + num } }

addTwo = add(2)

addTwo(5)

JavaScript is not like Java which can support oop well. There is no clear way to create private methods in JS, but the closure can ‘private’ the methods.

4. Explain ‘ Hoisting’

Hoisting is the default behavior under the JavaScript which means moving all declarations to the top of the current scope and let variables can be used before the declaration. Initialization won’t be hoisted. Hoisting is only for declaration.

The example below will hoist x, y at the top

var x = 1

console.log(x + “ — -”+y) // 1 — -undefined

var y = 2

5. How does JavaScript handle the synchronous and asynchronous case?

Although JavaScript is a single thread programming language with one call stack, it can also deal with some asynchronous functions using a mechanism called event loop. Knowing how JavaScript works from the fundamental level is the essential section to understand how the JS handles async.

As the pictures show above, ‘call stack’ is the place for locating functions. Once the functions were called, the functions would be pushed into the stack. However, async functions won’t be pushed into call stack immediately, they will be pushed into task queue instead and be executed after the call stack is empty. Transporting events from task queue to the call stack is called ‘event loop.’

6. How to understand event delegation?

Binding the event listeners on DOM tree and using the JS event handlers is the typical approach to deal with the event responses in the client side. Theoretically, we can attach listeners to any DOM elements in HTML, but it is wasted and unnecessary to do that because of the event delegation.

What is event delegation?

It’s a technique to let the event listeners on parents element also affect children element. Usually, event propagation( capturing and bubbling) allows us to implement event delegation. Bubbling means that when a child element is triggered(target), the parent’s elements of this child can also be triggered layer by layer until it bumps to the original listener the DOM binds(current target). The capture attribute turns the event phase into the capture phase which let events goes down to the elements; hence the direction of triggering is opposite to bubbling phase. The default value of capture is false.

7. How to understand the higher-order function?

Don’t be scared away by buzz word. Usually, it is a wrapped name for a summary of several concepts. Everything in JavaScript is object including functions. We can pass variables as arguments to a function, so does a function. We call a function that accepts and /or returns another function as the higher-order function.

8. How do you differentiate the declaration function and the expression function?

function hello(){

return “HEllO”

}

— — — — — — — — — — — — — — — — — — - var h1 = function hello(){return “HELLO”}

Two functions will be defined in different periods. The declaration will be defined during the parsing time, and expression will be defined at run time; therefore, if we console log the h1, it will show “HELLO.”

9. Explain how prototypal inheritance works.

JavaScript is not an oop friendly programming language, but it still uses the idea of inheritance to implement the dependency and lots of built-in functions to make it flexible to use. Knowing how prototypal inheritance works will let your JavaScript knowledge well-understood avoid a misuse conceptually.

It’s better to picture the whole mechanism of the JavaScript in your brain to understand the prototypal inheritance.

There is a super object in JavaScript that all objects will inherit from it. ‘__proto__’ is an internal property of an object which points to the Prototype. A prototype contains a constructor which lets the object be capable of creating the instances from it. __proto__ will always exist in objects and hierarchically point to the prototype it belongs to until null, which is called the prototype chain.

10. Explain strict mode

Strick mode is used to standardize the normal JavaScript semantic. Strick mode can be embedded into a un-strick mode with the keywords ‘use strict’. The code after ‘use strict’ should follow the strict syntax rules of JS. For example semicolon after each statement declaration before the use.