Technical Interview Questions

JavaScript

• Explain event delegation.

  It’s a process of using event bubbling to handle events at the higher level in the DOM tree.

  When a click event happens (or any other event that propagates):

  The event travels down from window, document, root element and through the ancestors of the target element (capture phase) The event occurs on the target (the target phase) Finally, the event bubbles up through the target’s ancestors until the root element, document and window (the bubble phase). This mechanism is named event propagation.

  The event delegation is a useful pattern because you can listen for events on multiple elements using one event handler.

  Making the event delegation work requires 3 steps:

  Determine the parent of elements to watch for events Attach the event listener to the parent element Use event.target to select the target elements

  <div id="buttons"> <!-- Step 1 -->  
    <button class="buttonClass">Click me</button>  
    <button class="buttonClass">Click me</button>  
    <!-- buttons... -->  
    <button class="buttonClass">Click me</button>  
  </div>  
  <script>  
    document.getElementById('buttons')  
      .addEventListener('click', event => { // Step 2  
        if (event.target.className === 'buttonClass') { // Step 3  
          console.log('Click!');  
        }  
      });  
  </script>  

• Explain how this works in JavaScript.

  this is a keyword that uses context to refer to the context of the object. If “this” keyword is used in a global scope, it will refer to window object. If it will be used inside of a function, it still will return a window object, because my function lives in a global scope. But If I will use a method

  The use of ‘this’ in programming is similar to what you do in plain English. For example, when you say “I got a job! This is great!”. We know ‘this’ is referring to the fact you got the job. In other words, ‘this’ gives context to the second sentence.

• Can you give an example of one of the ways that working with this has changed in ES6?

  It has changed with arrow functions. “this” keyword is not bind to the arrow functions and it refers to a global object.

• Explain how prototypal inheritance works.

  Prototypical inheritance happens when we inherit properties from other object for example. For example, if we crate an object, it inherits properties from an object constructor. But I can also do the same with objects that I’ve created. I can also do the same with classes (it’s a syntactic sugar)

• What’s the difference between a variable that is: null, undefined or undeclared?

  Undefined: it means that a variable has been declared but value has not been assigned Null: It can be assigned to a variable to represent no value. It is an assignment value. Undeclared: it usually shows us that a variable is not declared

• How would you go about checking for any of these states?

• What is a closure, and how/why would you use one?

  Closure is a function inside of another function. They have their own local scope and has an access to what’s in a function above it. They have an access to global scope as well but it doesn’t work other way round. They can store values from other functions but do not allow us to mutate the original value.

• What language constructions do you use for iterating over object properties and array items?

  for (..in) loop: The JavaScript for (..in) statement loops through the enumerable properties of an object. The loop will iterate over all enumerable properties of the object itself and those the object inherits from its constructor’s prototype.

  Syntax: for (variable in object) statement

  for (..of) loop: This for (..of) statement lets you loop over the data structures that are iterable such as Arrays, Strings, Maps, Node Lists, and more. It calls a custom iteration hook with instructions to execute on the value of each property of the object.

  Syntax: for (variable of iterable) { statement }

• Can you describe the main difference between the Array.forEach() loop and Array.map() methods and why you would pick one versus the other?

  Array.map Map creates an array from calling a specific function on each item in the parray array. It is not mutating an array but creates a new one. I would use it if I wuld like to go through an array and create a new one with changed values

  Array.forEach forEach loops through an array and accepts a callback function that passes into another function as an argument. They are being executed inside of the function. I would use it for iteration through an array and I want to do something with every item in an array.

• What’s a typical use case for anonymous functions?

  IFFE - a function that runs right after it is declared and does not have any kind of names associated with it Function expression - assigning a function to a variable, either with arrow function or normal function syntax but without a name

• What’s the difference between host objects and native objects?

• Explain the difference between: function Person(){}, var person = Person(), and var person = new Person()?

  function Person(){} - Code above declares a function statement (statements perform an action) but does not execute, however, it does get registered into the global namespace.

  var person = Person() - function expression A variable ‘var person’ has been defined and contains a value reference to a Person function. Any JavaScript Expressions (including Function Expressions) always returns a value. This may also be an Anonymous function if no name has been assign to a function but wrapped in parenthesis to be interpreted as an expression.

  var person = new Person() - By adding the keyword ‘new’. We are instantiating a new object of the Person class constructor. A function declaration is just a regular function unless it has been instantiated, it then becomes a class constructor.

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

  function foo() {} - function declaration. It is declared when a client initially goes though the code. It means that they are hoisted.

  var foo = function() {} - function expression. It is delcared once it is reached. It means that they are not hoisted. They are used to avoid polluting the global scope.

• Can you explain what Function.call and Function.apply do? What’s the notable difference between the two?

  Call vs Apply

  They are both very similar - they invoke the function they are called on and take a this argument as their first argument.

  Call calls the method

• Explain Function.prototype.bind.

  bind is a method on the prototype of all functions that creates a new function based on the function on which it is called. It is useful with objects when we want to bind the context.

  const newFunction = oldFunction.bind(thisArg, arg1, ag2, ..., argN)  

  let c1 = {  
  	x: 5,  
  	y: 10  
  }  
    
  let c2 = {  
  	x: 20,  
  	y: 30  
  }  
    
  function printCoords() {  
  	console.log(this.x + " " + this.y)  
  }  
    
  let c1_func = printCoords.bind(c1)  
  let c2_func = printCoords.bind(c2)  
    
  c1_func() // 5 10  
  c2_func() // 20 30  

• What’s the difference between feature detection, feature inference, and using the UA string?

• Explain “hoisting”.

  Hoisting allows to use functions and variables before they are declared. What the JS interpreter does it splits the declaration and assignment of functions and variables. it “hoists” declarations to the top of their containing scope before execution.

  Long story short it is a process during code interpretation that declares variables and functions first and then it assigns values to them.

  In case of let and var it will throw a different error because of Temporal Dead Zone.

  // Declaration  
  var foo;  
  let bar;  
    
  // Assignment  
  foo = 'foo';  
  bar = 'bar';  

  In case of functions, it allows us to call a function before it is defined. It only applies t function declarations not expressions.

  foo(); // Uncaught TypeError: foo is not a function  
  var foo = function () { }  
    
  bar(); // Uncaught ReferenceError: Cannot access 'bar' before initialization  
  let bar = function () { }  
    
  baz(); // Uncaught ReferenceError: Cannot access 'baz' before initialization  
  const baz = function () { }  

• Describe event bubbling.

  Event bubbling happens when an event is captured and handles by the innermost element and then propagated to outer elements.

  In the example below, an event will be handled by “li” element first and will go all the way up

  Example:

  <div>  
      <ul>  
          <li></li>  
      </ul>  
  </div>  

• Describe event capturing.

  Event capturing happens when event is first captured by the outermost element and propagated to the innermost element. Capturing can be done by passing an argument

  addEventListener(type, listener, useCapture)  

  In the example below, an event will be handled by “div” element first and will go all the way down to “li” element

  Example:

  <div>  
      <ul>  
          <li></li>  
      </ul>  
  </div>  

• What’s the difference between an “attribute” and a “property”?

  Attribute: Attributes are defined by HTML and are used to customize a tag.

  Property: In contrast to the attributes, which are defined in HTML, properties belong to the DOM. Since DOM is an object in JavaScript, we can get and set properties.

• What are the pros and cons of extending built-in JavaScript objects?

• What is the difference between - and -?

• Explain the same-origin policy with regards to JavaScript.

• Why is it called a Ternary operator, what does the word “Ternary” indicate?

• What is strict mode? What are some of the advantages/disadvantages of using it?

• What are some of the advantages/disadvantages of writing JavaScript code in a language that compiles to JavaScript?

• What tools and techniques do you use debugging JavaScript code?

• Explain the difference between mutable and immutable objects.

• What is an example of an immutable object in JavaScript?

• What are the pros and cons of immutability?

• How can you achieve immutability in your own code?

• Explain the difference between synchronous and asynchronous functions.

• What is event loop?

• What is the difference between call stack and task queue?

• What are the differences between variables created using let, var or const?

• What are the differences between ES6 class and ES5 function constructors?

• Can you offer a use case for the new arrow - function syntax? How does this new syntax differ from other functions?

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

• What is the definition of a higher-order function?

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

• Can you give an example of generating a string with ES6 Template Literals?

• Can you give an example of a curry function and why this syntax offers an advantage?

• What are the benefits of using spread syntax and how is it different from rest syntax?

• How can you share code between files?

• Why you might want to create static class members?

HTML

CSS

React