Skip to content

Javascript

Javascript

What is Coercion in JavaScript?

What is typeof operator?

What is the object type?

Explain arrays in JavaScript

Explain equality in JavaScript

What is Scope in JavaScript?

What is let keyword in JavaScript?

Explain what a callback function is and provide a simple example.

What is strict mode?

What does "use strict" do?

What is a Polyfill?

How would you check if a number is an integer?

Explain Values and Types in JavaScript

Being told that an unsorted array contains (n - 1) of n consecutive numbers (where the bounds are defined), find the missing number in O(n) time

Remove duplicates of an array and return an array of only unique elements

Given a string, reverse each word in the sentence

Write a function that would allow you to do this.

Implement enqueue and dequeue using only two stacks

How would you use a closure to create a private counter?

Explain Null and Undefined in JavaScript

Explain event bubbling and how one may prevent it

How to check if an object is an array or not? Provide some code.

Write a "mul" function which will properly when invoked as below syntax.

How to empty an array in JavaScript?

How to compare two objects in JavaScript?

Given an array of integers, find the largest difference between two elements such that the element of lesser value must come before the greater element

Find the intersection of two arrays. An intersection would be the common elements that exists within both arrays. In this case, these elements should be unique!

Write a function that would allow you to do this

Given two strings, return true if they are anagrams of one another

Check if a given string is a palindrome. Case sensitivity should be taken into account.

What is the difference between a shim and a polyfill?

What will the following code output?

Could you explain the difference between ES5 and ES6

What is IIFEs (Immediately Invoked Function Expressions)?

What will be the output of the following code?

What will be the output of the following code?

Provide some examples of non-boolean value coercion to a boolean one

Explain the difference between "undefined" and "not defined" in JavaScript

What will be the output of the following code?

What is the drawback of creating true private in JavaScript?

What is the difference between anonymous and named functions?

Given an array of integers, find the largest product yielded from three of the integers

Describe closure concept in JavaScript as best as you could

Write a recursive function that returns the binary string of a given decimal number

What is “closure” in javascript? Provide an example?

Explain what is hoisting in Javascript

Given an integer, determine if it is a power of 2. If so, return that number, else return -1

What will be the output of the following code?

Describe the JS module design pattern

How would you create a private variable in JavaScript?

Explain the Prototype Design Pattern

Write a recursive function that performs a binary search

Create a function that will evaluate if a given expression has balanced parentheses using stacks

What will be the output of the following code?

Explain prototype inheritance in JavaScript?

What does the term "Transpiling" stand for?

What is the "new" keyword in JavaScript?

When would you use the "bind" function?

How does the “this” keyword work? Provide some code examples.

How would you add your own method to the Array object so the following code would work?

What is Hoisting in JavaScript?

What will the following code output?

Check if a given string is a isomorphic

Describe the Revealing Module Pattern design pattern

What is Coercion in JavaScript?

In JavaScript conversion between different two build-in types called coercion. Coercion comes in two forms in JavaScript: explicit and implicit.

Here's an example of explicit coercion:

var a = '42';

var b = Number(a);

a; // "42"
b; // 42 -- the number!

And here's an example of implicit coercion:

var a = '42';

var b = a * 1; // "42" implicitly coerced to 42 here

a; // "42"
b; // 42 -- the number!

What is typeof operator?

JavaScript provides a typeof operator that can examine a value and tell you what type it is:

var a;
typeof a; // "undefined"

a = 'hello world';
typeof a; // "string"

a = 42;
typeof a; // "number"

a = true;
typeof a; // "boolean"

a = null;
typeof a; // "object" -- weird, bug

a = undefined;
typeof a; // "undefined"

a = { b: 'c' };
typeof a; // "object"

What is the object type?

The object type refers to a compound value where you can set properties (named locations) that each hold their own values of any type.

var obj = {
  a: 'hello world', // property
  b: 42,
  c: true,
};

obj.a; // "hello world", accessed with doted notation
obj.b; // 42
obj.c; // true

obj['a']; // "hello world", accessed with bracket notation
obj['b']; // 42
obj['c']; // true

Bracket notation is also useful if you want to access a property/key but the name is stored in another variable, such as:

var obj = {
  a: 'hello world',
  b: 42,
};

var b = 'a';

obj[b]; // "hello world"
obj['b']; // 42

Explain arrays in JavaScript

An array is an object that holds values (of any type) not particularly in named properties/keys, but rather in numerically indexed positions:

var arr = ['hello world', 42, true];

arr[0]; // "hello world"
arr[1]; // 42
arr[2]; // true
arr.length; // 3

typeof arr; // "object"

Explain equality in JavaScript

JavaScript has both strict and type–converting comparisons:

  • Strict comparison (e.g., ===) checks for value equality without allowing coercion
  • Abstract comparison (e.g. ==) checks for value equality with coercion allowed
var a = '42';
var b = 42;

a == b; // true
a === b; // false

Some simple equalityrules:

  • If either value (aka side) in a comparison could be the true or false value, avoid == and use ===.
  • If either value in a comparison could be of these specific values (0, "", or [] -- empty array), avoid == and use ===.
  • In all other cases, you're safe to use ==. Not only is it safe, but in many cases it simplifies your code in a way that improves readability.

What is Scope in JavaScript?

In JavaScript, each function gets its own scope. Scope is basically a collection of variables as well as the rules for how those variables are accessed by name. Only code inside that function can access that function's scoped variables.

A variable name has to be unique within the same scope. A scope can be nested inside another scope. If one scope is nested inside another, code inside the innermost scope can access variables from either scope.

What is let keyword in JavaScript?

In addition to creating declarations for variables at the function level, ES6 lets you declare variables to belong to individual blocks (pairs of { .. }), using the let keyword.

Explain what a callback function is and provide a simple example.

A callback function is a function that is passed to another function as an argument and is executed after some operation has been completed. Below is an example of a simple callback function that logs to the console after some operations have been completed.

function modifyArray(arr, callback) {
  // do something to arr here
  arr.push(100);
  // then execute the callback function that was passed
  callback();
}

var arr = [1, 2, 3, 4, 5];

modifyArray(arr, function() {
  console.log('array has been modified', arr);
});

What is strict mode?

Strict Mode is a new feature in ECMAScript 5 that allows you to place a program, or a function, in a "strict" operating context. This strict context prevents certain actions from being taken and throws more exceptions.

// Non-strict code...

(function() {
  'use strict';

  // Define your library strictly...

})();

// Non-strict code...

What does "use strict" do?

The use strict literal is entered at the top of a JavaScript program or at the top of a function and it helps you write safer JavaScript code by throwing an error if a global variable is created by mistake. For example, the following program will throw an error:

function doSomething(val) {
  "use strict";
  x = val + 10;
}`

It will throw an error because x was not defined and it is being set to some value in the global scope, which isn't allowed with use strict The small change below fixes the error being thrown:

function doSomething(val) {
  'use strict';
  var x = val + 10;
}

What is a Polyfill?

A polyfill is essentially the specific code (or plugin) that would allow you to have some specific functionality that you expect in current or “modern” browsers to also work in other browsers that do not have the support for that functionality built in.

How would you check if a number is an integer?

A very simply way to check if a number is a decimal or integer is to see if there is a remainder left when you divide by 1.

function isInt(num) {
  return num % 1 === 0;
}

console.log(isInt(4)); // true
console.log(isInt(12.2)); // false
console.log(isInt(0.3)); // false

Explain Values and Types in JavaScript

JavaScript has typed values, not typed variables. The following built-in types are available:

  • string
  • number
  • boolean
  • null and undefined
  • object
  • symbol (new to ES6)

Being told that an unsorted array contains (n - 1) of n consecutive numbers (where the bounds are defined), find the missing number in O(n) time

// The output of the function should be 8
var arrayOfIntegers = [2, 5, 1, 4, 9, 6, 3, 7];
var upperBound = 9;
var lowerBound = 1;

findMissingNumber(arrayOfIntegers, upperBound, lowerBound); // 8

function findMissingNumber(arrayOfIntegers, upperBound, lowerBound) {
  // Iterate through array to find the sum of the numbers
  var sumOfIntegers = 0;
  for (var i = 0; i < arrayOfIntegers.length; i++) {
    sumOfIntegers += arrayOfIntegers[i];
  }

  // Find theoretical sum of the consecutive numbers using a variation of Gauss Sum.
  // Formula: [(N * (N + 1)) / 2] - [(M * (M - 1)) / 2];
  // N is the upper bound and M is the lower bound

  upperLimitSum = (upperBound * (upperBound + 1)) / 2;
  lowerLimitSum = (lowerBound * (lowerBound - 1)) / 2;

  theoreticalSum = upperLimitSum - lowerLimitSum;

  return theoreticalSum - sumOfIntegers;
}

Remove duplicates of an array and return an array of only unique elements

// ES6 Implementation
var array = [1, 2, 3, 5, 1, 5, 9, 1, 2, 8];

Array.from(new Set(array)); // [1, 2, 3, 5, 9, 8]

// ES5 Implementation
var array = [1, 2, 3, 5, 1, 5, 9, 1, 2, 8];

uniqueArray(array); // [1, 2, 3, 5, 9, 8]

function uniqueArray(array) {
  var hashmap = {};
  var unique = [];

  for (var i = 0; i < array.length; i++) {
    // If key returns undefined (unique), it is evaluated as false.
    if (!hashmap.hasOwnProperty(array[i])) {
      hashmap[array[i]] = 1;
      unique.push(array[i]);
    }
  }

  return unique;
}

Given a string, reverse each word in the sentence

var string = 'Welcome to this Javascript Guide!';

// Output becomes !ediuG tpircsavaJ siht ot emocleW
var reverseEntireSentence = reverseBySeparator(string, '');

// Output becomes emocleW ot siht tpircsavaJ !ediuG
var reverseEachWord = reverseBySeparator(reverseEntireSentence, ' ');

function reverseBySeparator(string, separator) {
  return string
    .split(separator)
    .reverse()
    .join(separator);
}

Write a function that would allow you to do this.

var addSix = createBase(6);
addSix(10); // returns 16
addSix(21); // returns 27

You can create a closure to keep the value passed to the function createBase even after the inner function is returned. The inner function that is being returned is created within an outer function, making it a closure, and it has access to the variables within the outer function, in this case the variable baseNumber.

function createBase(baseNumber) {
  return function(N) {
    // we are referencing baseNumber here even though it was declared
    // outside of this function. Closures allow us to do this in JavaScript
    return baseNumber + N;
  };
}

var addSix = createBase(6);
addSix(10);
addSix(21);

Implement enqueue and dequeue using only two stacks

Enqueue means to add an element, dequeue to remove an element.

var inputStack = []; // First stack
var outputStack = []; // Second stack

// For enqueue, just push the item into the first stack
function enqueue(stackInput, item) {
  return stackInput.push(item);
}

function dequeue(stackInput, stackOutput) {
  // Reverse the stack such that the first element of the output stack is the
  // last element of the input stack. After that, pop the top of the output to
  // get the first element that was ever pushed into the input stack
  if (stackOutput.length <= 0) {
    while (stackInput.length > 0) {
      var elementToOutput = stackInput.pop();
      stackOutput.push(elementToOutput);
    }
  }

  return stackOutput.pop();
}

How would you use a closure to create a private counter?

You can create a function within an outer function (a closure) that allows you to update a private variable but the variable wouldn't be accessible from outside the function without the use of a helper function.

function counter() {
  var _counter = 0;
  // return an object with several functions that allow you
  // to modify the private _counter variable
  return {
    add: function(increment) {
      _counter += increment;
    },
    retrieve: function() {
      return 'The counter is currently at: ' + _counter;
    },
  };
}

// error if we try to access the private variable like below
// _counter;

// usage of our counter function
var c = counter();
c.add(5);
c.add(9);

// now we can access the private variable in the following way
c.retrieve(); // => The counter is currently at: 14

Explain Null and Undefined in JavaScript

JavaScript (and by extension TypeScript) has two bottom types: null and undefined. They are intended to mean different things:

  • Something hasn't been initialized : undefined.
  • Something is currently unavailable: null.

Explain event bubbling and how one may prevent it

Event bubbling is the concept in which an event triggers at the deepest possible element, and triggers on parent elements in nesting order. As a result, when clicking on a child element one may exhibit the handler of the parent activating.

One way to prevent event bubbling is using event.stopPropagation() or event.cancelBubble on IE < 9.

How to check if an object is an array or not? Provide some code.

The best way to find whether an object is instance of a particular class or not using toString method from Object.prototype

var arrayList = [1, 2, 3];

One of the best use cases of type checking of an object is when we do method overloading in JavaScript. For understanding this let say we have a method called greet which take one single string and also a list of string, so making our greet method workable in both situation we need to know what kind of parameter is being passed, is it single value or list of value?

function greet(param) {
  if() {
    // here have to check whether param is array or not
  }
  else {
  }
}

However, in above implementation it might not necessary to check type for array, we can check for single value string and put array logic code in else block, let see below code for the same.

function greet(param) {
  if (typeof param === 'string') {
  } else {
    // If param is of type array then this block of code would execute
  }
}

Now it's fine we can go with above two implementations, but when we have a situation like a parameter can be single value, array, and object type then we will be in trouble.

Coming back to checking type of object, As we mentioned that we can use Object.prototype.toString

if (Object.prototype.toString.call(arrayList) === '[object Array]') {
  console.log('Array!');
}

If you are using jQuery then you can also used jQuery isArray method:

if ($.isArray(arrayList)) {
  console.log('Array');
} else {
  console.log('Not an array');
}

FYI jQuery uses Object.prototype.toString.call internally to check whether an object is an array or not.

In modern browser, you can also use:

Array.isArray(arrayList);

Array.isArray is supported by Chrome 5, Firefox 4.0, IE 9, Opera 10.5 and Safari 5

Write a "mul" function which will properly when invoked as below syntax.

function mul(x) {
  return function(y) {
    // anonymous function
    return function(z) {
      // anonymous function
      return x * y * z;
    };
  };
}

Here mul function accept the first argument and return anonymous function which take the second parameter and return anonymous function which take the third parameter and return multiplication of arguments which is being passed in successive

In JavaScript function defined inside has access to outer function variable and function is the first class object so it can be returned by function as well and passed as argument in another function.

How to empty an array in JavaScript?

Method 1

arrayList = [];

Above code will set the variable arrayList to a new empty array. This is recommended if you don't have references to the original array arrayList anywhere else because It will actually create a new empty array. You should be careful with this way of empty the array, because if you have referenced this array from another variable, then the original reference array will remain unchanged, Only use this way if you have only referenced the array by its original variable arrayList.

For Instance:

var arrayList = ['a', 'b', 'c', 'd', 'e', 'f']; // Created array
var anotherArrayList = arrayList; // Referenced arrayList by another variable
arrayList = []; // Empty the array
console.log(anotherArrayList); // Output ['a', 'b', 'c', 'd', 'e', 'f']

Method 2

arrayList.length = 0;

Above code will clear the existing array by setting its length to 0. This way of empty the array also update all the reference variable which pointing to the original array. This way of empty the array is useful when you want to update all the another reference variable which pointing to arrayList.

For Instance:

var arrayList = ['a', 'b', 'c', 'd', 'e', 'f']; // Created array
var anotherArrayList = arrayList; // Referenced arrayList by another variable
arrayList.length = 0; // Empty the array by setting length to 0
console.log(anotherArrayList); // Output []

Method 3

arrayList.splice(0, arrayList.length);

Above implementation will also work perfectly. This way of empty the array will also update all the references of the original array.

var arrayList = ['a', 'b', 'c', 'd', 'e', 'f']; // Created array
var anotherArrayList = arrayList; // Referenced arrayList by another variable
arrayList.splice(0, arrayList.length); // Empty the array by setting length to 0
console.log(anotherArrayList); // Output []

Method 4

while (arrayList.length) {
  arrayList.pop();
}

Above implementation can also empty the array. But not recommended to use often.

How to compare two objects in JavaScript?

Two non-primitive values, like objects (including function and array) held by reference, so both == and === comparisons will simply check whether the references match, not anything about the underlying values.

For example, arrays are by default coerced to strings by simply joining all the values with commas (,) in between. So two arrays with the same contents would not be == equal:

var a = [1, 2, 3];
var b = [1, 2, 3];
var c = '1,2,3';

a == c; // true
b == c; // true
a == b; // false

For deep object comparison use external libs like deep-equal or implement your own recursive equality algorithm.

Given an array of integers, find the largest difference between two elements such that the element of lesser value must come before the greater element

var array = [7, 8, 4, 9, 9, 15, 3, 1, 10];
// [7, 8, 4, 9, 9, 15, 3, 1, 10] would return `11` based on the difference between `4` and `15`
// Notice: It is not `14` from the difference between `15` and `1` because 15 comes before 1.

findLargestDifference(array);

function findLargestDifference(array) {
  // If there is only one element, there is no difference
  if (array.length <= 1) return -1;

  // currentMin will keep track of the current lowest
  var currentMin = array[0];
  var currentMaxDifference = 0;

  // We will iterate through the array and keep track of the current max difference
  // If we find a greater max difference, we will set the current max difference to that variable
  // Keep track of the current min as we iterate through the array, since we know the greatest
  // difference is yield from `largest value in future` - `smallest value before it`

  for (var i = 1; i < array.length; i++) {
    if (array[i] > currentMin && array[i] - currentMin > currentMaxDifference) {
      currentMaxDifference = array[i] - currentMin;
    } else if (array[i] <= currentMin) {
      currentMin = array[i];
    }
  }

  // If negative or 0, there is no largest difference
  if (currentMaxDifference <= 0) return -1;

  return currentMaxDifference;
}

Find the intersection of two arrays. An intersection would be the common elements that exists within both arrays. In this case, these elements should be unique!

var firstArray = [2, 2, 4, 1];
var secondArray = [1, 2, 0, 2];

intersection(firstArray, secondArray); // [2, 1]

function intersection(firstArray, secondArray) {
  // The logic here is to create a hashmap with the elements of the firstArray as the keys.
  // After that, you can use the hashmap's O(1) look up time to check if the element exists in the hash
  // If it does exist, add that element to the new array.

  var hashmap = {};
  var intersectionArray = [];

  firstArray.forEach(function(element) {
    hashmap[element] = 1;
  });

  // Since we only want to push unique elements in our case... we can implement a counter to keep track of what we already added
  secondArray.forEach(function(element) {
    if (hashmap[element] === 1) {
      intersectionArray.push(element);
      hashmap[element]++;
    }
  });

  return intersectionArray;

  // Time complexity O(n), Space complexity O(n)
}

Write a function that would allow you to do this

You can create a closure to keep the value of a even after the inner function is returned. The inner function that is being returned is created within an outer function, making it a closure, and it has access to the variables within the outer function, in this case the variable a.

function multiply(a) {
  return function(b) {
    return a * b;
  };
}

multiply(5)(6);

Given two strings, return true if they are anagrams of one another

var firstWord = 'Mary';
var secondWord = 'Army';

isAnagram(firstWord, secondWord); // true

function isAnagram(first, second) {
  // For case insensitivity, change both words to lowercase.
  var a = first.toLowerCase();
  var b = second.toLowerCase();

  // Sort the strings, and join the resulting array to a string. Compare the results
  a = a
    .split('')
    .sort()
    .join('');
  b = b
    .split('')
    .sort()
    .join('');

  return a === b;
}

Check if a given string is a palindrome. Case sensitivity should be taken into account.

A palindrome is a word, phrase, number, or other sequence of characters which reads the same backward or forward.

isPalindrome('racecar'); // true
isPalindrome('race Car'); // true

function isPalindrome(word) {
  // Replace all non-letter chars with "" and change to lowercase
  var lettersOnly = word.toLowerCase().replace(/\s/g, '');

  // Compare the string with the reversed version of the string
  return (
    lettersOnly ===
    lettersOnly
      .split('')
      .reverse()
      .join('')
  );
}

Or 25x faster than the standard answer

function isPalindrome(s, i) {
  return (
    (i = i || 0) < 0 ||
    i >= s.length >> 1 ||
    (s[i] == s[s.length - 1 - i] && isPalindrome(s, ++i))
  );
}

What is the difference between a shim and a polyfill?

  • A shim is any piece of code that performs interception of an API call and provides a layer of abstraction. It isn't necessarily restricted to a web application or HTML5/CSS3.

  • A polyfill is a type of shim that retrofits legacy browsers with modern HTML5/CSS3 features usually using Javascript or Flash.

A shim is a library that brings a new API to an older environment, using only the means of that environment. Thus, a polyfill is a shim for a browser API.

What will the following code output?

(function() {
  var a = (b = 5);
})();

console.log(b);

The code above will output 5 even though it seems as if the variable was declared within a function and can't be accessed outside of it. This is because

var a = (b = 5);

is interpreted the following way:

var a = b;
b = 5;

But b is not declared anywhere in the function with var so it is set equal to 5 in the global scope.

Could you explain the difference between ES5 and ES6

  • ECMAScript 5 (ES5): The 5th edition of ECMAScript, standardized in 2009. This standard has been implemented fairly completely in all modern browsers

  • ECMAScript 6 (ES6)/ ECMAScript 2015 (ES2015): The 6th edition of ECMAScript, standardized in 2015. This standard has been partially implemented in most modern browsers.

Here are some key differences between ES5 and ES6:

  • Arrow functions & string interpolation:
    Consider:
const greetings = name => {
  return `hello ${name}`;
};

and even:

const greetings = name => `hello ${name}`;
  • Const.
    Const works like a constant in other languages in many ways but there are some caveats. Const stands for ‘constant reference’ to a value. So with const, you can actually mutate the properties of an object being referenced by the variable. You just can’t change the reference itself.
const NAMES = [];
NAMES.push('Jim');
console.log(NAMES.length === 1); // true
NAMES = ['Steve', 'John']; // error
  • Block-scoped variables.
    The new ES6 keyword let allows developers to scope variables at the block level. Let doesn’t hoist in the same way var does.
  • Default parameter values Default parameters allow us to initialize functions with default values. A default is used when an argument is either omitted or undefined — meaning null is a valid value.
// Basic syntax
function multiply(a, b = 2) {
  return a * b;
}
multiply(5); // 10

  • Class Definition and Inheritance
    ES6 introduces language support for classes (class keyword), constructors (constructor keyword), and the extend keyword for inheritance.

  • for-of operator
    The for...of statement creates a loop iterating over iterable objects.

  • Spread Operator For objects merging
const obj1 = { a: 1, b: 2 };
const obj2 = { a: 2, c: 3, d: 4 };
const obj3 = { ...obj1, ...obj2 };
  • Promises
    Promises provide a mechanism to handle the results and errors from asynchronous operations. You can accomplish the same thing with callbacks, but promises provide improved readability via method chaining and succinct error handling.
const isGreater = (a, b) => {
  return new Promise((resolve, reject) => {
    if (a > b) {
      resolve(true);
    } else {
      reject(false);
    }
  });
};
isGreater(1, 2)
  .then(result => {
    console.log('greater');
  })
  .catch(result => {
    console.log('smaller');
  });
  • Modules exporting & importing Consider module exporting:
const myModule = {
  x: 1,
  y: () => {
    console.log('This is ES5');
  },
};
export default myModule;

and importing:

import myModule from './myModule';

What is IIFEs (Immediately Invoked Function Expressions)?

It’s an Immediately-Invoked Function Expression, or IIFE for short. It executes immediately after it’s created:

(function IIFE() {
  console.log('Hello!');
})();
// "Hello!"

This pattern is often used when trying to avoid polluting the global namespace, because all the variables used inside the IIFE (like in any other normal function) are not visible outside its scope.

What will be the output of the following code?

var x = { foo: 1 };
var output = (function() {
  delete x.foo;
  return x.foo;
})();

console.log(output);

Above code will output undefined as output. delete operator is used to delete a property from an object. Here x is an object which has foo as a property and from self-invoking function we are deleting foo property of object x and after deletion we are trying to reference deleted property foo which result undefined.

What will be the output of the following code?

var x = 1;
var output = (function() {
  delete x;
  return x;
})();

console.log(output);

Above code will output 1 as output. delete operator is used to delete property from object. Here x is not an object it's global variable of type number.

Provide some examples of non-boolean value coercion to a boolean one

The question is when a non-boolean value is coerced to a boolean, does it become true or false, respectively?

The specific list of "falsy" values in JavaScript is as follows:

  • "" (empty string)
  • 0, -0, NaN (invalid number)
  • null, undefined
  • false

Any value that's not on this "falsy" list is "truthy." Here are some examples of those:

  • "hello"
  • 42
  • true
  • [ ], [ 1, "2", 3 ] (arrays)
  • { }, { a: 42 } (objects)
  • function foo() { .. } (functions)

Explain the difference between "undefined" and "not defined" in JavaScript

In JavaScript if you try to use a variable that doesn't exist and has not been declared, then JavaScript will throw an error var name is not defined and the script will stop execute thereafter. But If you use typeof undeclared_variable then it will return undefined.

Before starting further discussion let's understand the difference between declaration and definition.

var x is a declaration because you are not defining what value it holds yet, but you are declaring its existence and the need of memory allocation.

var x; // declaring x
console.log(x); //output: undefined

var x = 1 is both declaration and definition (also we can say we are doing initialisation), Here declaration and assignment of value happen inline for variable x, In JavaScript every variable declaration and function declaration brings to the top of its current scope in which it's declared then assignment happen in order this term is called hoisting.

A variable that is declared but not define and when we try to access it, It will result undefined.

var x; // Declaration
if(typeof x === 'undefined') // Will return true

A variable that neither declared nor defined when we try to reference such variable then It result not defined.

console.log(y); // Output: ReferenceError: y is not defined

What will be the output of the following code?

var y = 1;

if (function f() {}) {
  y += typeof f;
}

console.log(y);

Above code would give output 1undefined. If condition statement evaluate using eval so eval(function f() {}) which return function f() {} which is true so inside if statement code execute. typeof f return undefined because if statement code execute at run time, so statement inside if condition evaluated at run time.

var k = 1;
if (1) {
  eval(function foo() {});
  k += typeof foo;
}
console.log(k);

Above code will also output 1undefined.

var k = 1;
if (1) {
  function foo() {}
  k += typeof foo;
}
console.log(k); // output 1function

What is the drawback of creating true private in JavaScript?

One of the drawback of creating a true private method in JavaScript is that they are very memory inefficient because a new copy of the method would be created for each instance.

var Employee = function(name, company, salary) {
  this.name = name || ''; //Public attribute default value is null
  this.company = company || ''; //Public attribute default value is null
  this.salary = salary || 5000; //Public attribute default value is null

  // Private method
  var increaseSalary = function() {
    this.salary = this.salary + 1000;
  };

  // Public method
  this.dispalyIncreasedSalary = function() {
    increaseSalary();
    console.log(this.salary);
  };
};

// Create Employee class object
var emp1 = new Employee('John', 'Pluto', 3000);
// Create Employee class object
var emp2 = new Employee('Merry', 'Pluto', 2000);
// Create Employee class object
var emp3 = new Employee('Ren', 'Pluto', 2500);

Here each instance variable emp1, emp2, emp3 has own copy of increaseSalary private method.

So as recommendation don't go for a private method unless it's necessary.

What is the difference between anonymous and named functions?

Consider:

var foo = function() {
  // anonymous function assigned to variable foo
  // ..
};

var x = function bar() {
  // named function (bar) assigned to variable x
  // ..
};

foo(); // actual function execution
x();

Given an array of integers, find the largest product yielded from three of the integers

var unsortedArray = [-10, 7, 29, 30, 5, -10, -70];

computeProduct(unsortedArray); // 21000

function sortIntegers(a, b) {
  return a - b;
}

// Greatest product is either (min1 * min2 * max1 || max1 * max2 * max3)
function computeProduct(unsorted) {
  var sortedArray = unsorted.sort(sortIntegers),
    product1 = 1,
    product2 = 1,
    array_n_element = sortedArray.length - 1;

  // Get the product of three largest integers in sorted array
  for (var x = array_n_element; x > array_n_element - 3; x--) {
    product1 = product1 * sortedArray[x];
  }

  product2 = sortedArray[0] * sortedArray[1] * sortedArray[array_n_element];

  if (product1 > product2) return product1;

  return product2;
}

Describe closure concept in JavaScript as best as you could

Consider:

function makeAdder(x) {
  // parameter `x` is an inner variable

  // inner function `add()` uses `x`, so
  // it has a "closure" over `x`
  function add(y) {
    return y + x;
  }

  return add;
}

Reference to inner add function returned is able to remember what x value was passed to makeAdder function call.

var plusOne = makeAdder(1); // x is 1, plusOne has a reference to add(y)
var plusTen = makeAdder(10); // x is 10

plusOne(3); // 1 (x) + 3 (y) = 4
plusTen(13); // 10 (x) + 13 (y) = 23

In C and most other common languages, after a function returns, all the local variables are no longer accessible because the stack-frame is destroyed.

In JavaScript, if you declare a function within another function, then the local variables can remain accessible after returning from the function you called.

A closure is a stack frame which is allocated when a function starts its execution, and not freed after the function returns (as if a 'stack frame' were allocated on the heap rather than the stack!). In JavaScript, you can think of a function reference variable as having both a pointer to a function as well as a hidden pointer to a closure.

Write a recursive function that returns the binary string of a given decimal number

Given 4 as the decimal input, the function should return 100.

decimalToBinary(3); // 11
decimalToBinary(8); // 1000
decimalToBinary(1000); // 1111101000

function decimalToBinary(digit) {
  if (digit >= 1) {
    // If digit is not divisible by 2 then recursively return proceeding
    // binary of the digit minus 1, 1 is added for the leftover 1 digit
    if (digit % 2) {
      return decimalToBinary((digit - 1) / 2) + 1;
    } else {
      // Recursively return proceeding binary digits
      return decimalToBinary(digit / 2) + 0;
    }
  } else {
    // Exit condition
    return '';
  }
}

What is “closure” in javascript? Provide an example?

A closure is a function defined inside another function (called parent function) and has access to the variable which is declared and defined in parent function scope.

The closure has access to variable in three scopes:

  • Variable declared in his own scope
  • Variable declared in parent function scope
  • Variable declared in global namespace
var globalVar = 'abc';

// Parent self invoking function
(function outerFunction(outerArg) {
  // begin of scope outerFunction
  // Variable declared in outerFunction function scope
  var outerFuncVar = 'x';
  // Closure self-invoking function
  (function innerFunction(innerArg) {
    // begin of scope innerFunction
    // variable declared in innerFunction function scope
    var innerFuncVar = 'y';
    console.log(
      'outerArg = ' +
        outerArg +
        '\n' +
        'outerFuncVar = ' +
        outerFuncVar +
        '\n' +
        'innerArg = ' +
        innerArg +
        '\n' +
        'innerFuncVar = ' +
        innerFuncVar +
        '\n' +
        'globalVar = ' +
        globalVar
    );
    // end of scope innerFunction
  })(5); // Pass 5 as parameter
  // end of scope outerFunction
})(7); // Pass 7 as parameter

innerFunction is closure which is defined inside outerFunction and has access to all variable which is declared and defined in outerFunction scope. In addition to this function defined inside function as closure has access to variable which is declared in global namespace.

Output of above code would be:

outerArg = 7;
outerFuncVar = x;
innerArg = 5;
innerFuncVar = y;
globalVar = abc;

Explain what is hoisting in Javascript

Hoisting is the concept in which Javascript, by default, moves all declarations to the top of the current scope. As such, a variable can be used before it has been declared.

Note that Javascript only hoists declarations and not initializations.

Given an integer, determine if it is a power of 2. If so, return that number, else return -1

Note, 0 is not a power of two.

isPowerOfTwo(4); // true
isPowerOfTwo(64); // true
isPowerOfTwo(1); // true
isPowerOfTwo(0); // false
isPowerOfTwo(-1); // false

// For the non-zero case:
function isPowerOfTwo(number) {
  // `&` uses the bitwise n.
  // In the case of number = 4; the expression would be identical to:
  // `return (4 & 3 === 0)`
  // In bitwise, 4 is 100, and 3 is 011. Using &, if two values at the same
  // spot is 1, then result is 1, else 0. In this case, it would return 000,
  // and thus, 4 satisfies are expression.
  // In turn, if the expression is `return (5 & 4 === 0)`, it would be false
  // since it returns 101 & 100 = 100 (NOT === 0)

  return number & (number - 1 === 0);
}

// For zero-case:
function isPowerOfTwoZeroCase(number) {
  return number !== 0 && (number & (number - 1)) === 0;
}

What will be the output of the following code?

var Employee = {
  company: 'xyz',
};
var emp1 = Object.create(Employee);
delete emp1.company;
console.log(emp1.company);

Above code will output xyz as output. Here emp1 object got company as prototype property. delete operator doesn't delete prototype property.

emp1 object doesn't have company as its own property. You can test it like:

console.log(emp1.hasOwnProperty('company')); //output : false

However, we can delete company property directly from Employee object using delete Employee.company or we can also delete from emp1 object using __proto__ property delete emp1.__proto__.company.

Describe the JS module design pattern

JavaScript modules are the most prevalently used design patterns for keeping particular pieces of code independent of other components. This provides loose coupling to support well-structured code.

Modules should be Immediately-Invoked-Function-Expressions (IIFE) to allow for private scopes - that is, a closure that protect variables and methods (however, it will return an object instead of a function). This is what it looks like:

(function() {
  // declare private variables and/or functions
  return {
    // declare public variables and/or functions
  };
})();

Here we instantiate the private variables and/or functions before returning our object that we want to return. Code outside of our closure is unable to access these private variables since it is not in the same scope.

How would you create a private variable in JavaScript?

To create a private variable in JavaScript that cannot be changed you need to create it as a local variable within a function. Even if the function is executed the variable cannot be accessed outside of the function. For example:

function func() {
  var priv = 'secret code';
}

console.log(priv); // throws error

To access the variable, a helper function would need to be created that returns the private variable.

function func() {
  var priv = 'secret code';
  return function() {
    return priv;
  };
}

var getPriv = func();
console.log(getPriv()); // => secret code

Explain the Prototype Design Pattern

The Prototype Pattern creates new objects, but rather than creating non-initialized objects it returns objects that are initialized with values it copied from a prototype - or sample - object. The Prototype pattern is also referred to as the Properties pattern.

An example of where the Prototype pattern is useful is the initialization of business objects with values that match the default values in the database. The prototype object holds the default values that are copied over into a newly created business object.

Classical languages rarely use the Prototype pattern, but JavaScript being a prototypal language uses this pattern in the construction of new objects and their prototypes.

function recursiveBinarySearch(array, value, leftPosition, rightPosition) {
  // Value DNE
  if (leftPosition > rightPosition) return -1;

  var middlePivot = Math.floor((leftPosition + rightPosition) / 2);
  if (array[middlePivot] === value) {
    return middlePivot;
  } else if (array[middlePivot] > value) {
    return recursiveBinarySearch(array, value, leftPosition, middlePivot - 1);
  } else {
    return recursiveBinarySearch(array, value, middlePivot + 1, rightPosition);
  }
}

Create a function that will evaluate if a given expression has balanced parentheses using stacks

In this example, we will only consider `{}` as valid parentheses `{}{}` would be considered balancing. `{{{}}` is not balanced.

function Foo() {
  this.kind = ‘foo’
}

var foo = new Foo();
foo.kind //=> ‘foo’

What does the term "Transpiling" stand for?

There's no way to polyfill new syntax that has been added to the language. So the better option is to use a tool that converts your newer code into older code equivalents. This process is commonly called transpiling, a term for transforming + compiling.

Typically you insert the transpiler into your build process, similar to your code linter or your minifier. There are quite a few great transpilers for you to choose from:

What is the "new" keyword in JavaScript?

var expression = '{{}}{}{}';
var expressionFalse = '{}{{}';

isBalanced(expression); // true
isBalanced(expressionFalse); // false
isBalanced(''); // true

function isBalanced(expression) {
  var checkString = expression;
  var stack = [];

  // If empty, parentheses are technically balanced
  if (checkString.length <= 0) return true;

  for (var i = 0; i < checkString.length; i++) {
    if (checkString[i] === '{') {
      stack.push(checkString[i]);
    } else if (checkString[i] === '}') {
      // Pop on an empty array is undefined
      if (stack.length > 0) {
        stack.pop();
      } else {
        return false;
      }
    }
  }

  // If the array is not empty, it is not balanced
  if (stack.pop()) return false;
  return true;
}

What will be the output of the following code?

var output = (function(x) {
  delete x;
  return x;
})(0);

console.log(output);

Above code will output 0 as output. delete operator is used to delete a property from an object. Here x is not an object it's local variable. delete operator doesn't affect local variable.

Explain prototype inheritance in JavaScript?

In a language implementing classical inheritance like Java, C# or C++ you start by creating a class--a blueprint for your objects - and then you can create new objects from that class or you can extend the class, defining a new class that augments the original class.

In JavaScript you first create an object (there is no concept of class), then you can augment your own object or create new objects from it.

Every object in Javascript has a prototype. JavaScript's inheritance system is prototypical, and not class-based. When a messages reaches an object, JavaScript will attempt to find a property in that object first, if it cannot find it then the message will be sent to the object’s prototype and so on. That behavior called prototype chain or prototype inheritance.

Constructor functions are the most used way in JavaScript to construct prototype chains. When we use new, JavaScript injects an implicit reference to the new object being created in the form of the this keyword. It also returns this reference implicitly at the end of the function.

  1. It creates a new object. The type of this object is simply object.
  2. It sets this new object's internal, inaccessible, prototype(i.e.proto) property to be the constructor function's external, accessible, prototype object (every function object automatically has a prototype property).
  3. It makes the this variable point to the newly created object.
  4. It executes the constructor function, using the newly created object whenever this is mentioned.
  5. It returns the newly created object, unless the constructor function returns a non-null object reference. In this case, that object reference is returned instead.

Consider:

function New(func) {
  var res = {};
  if (func.prototype !== null) {
    res.__proto__ = func.prototype;
  }
  var ret = func.apply(res, Array.prototype.slice.call(arguments, 1));
  if ((typeof ret === 'object' || typeof ret === 'function') && ret !== null) {
    return ret;
  }
  return res;
}

When would you use the "bind" function?

The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.

A good use of the bind function is when you have a particular function that you want to call with a specific this value. You can then use bind to pass a specific object to a function that uses a this reference.

function fullName() {
  return 'Hello, this is ' + this.first + ' ' + this.last;
}

console.log(fullName()); // => Hello this is undefined undefined

// create a person object and pass its values to the fullName function
var person = { first: 'Foo', last: 'Bar' };
console.log(fullName.bind(person)()); // => Hello this is Foo Bar

How does the “this” keyword work? Provide some code examples.

In JavaScript this always refers to the “owner” of the function we're executing, or rather, to the object that a function is a method of.

Consider:

function foo() {
  console.log(this.bar);
}

var bar = 'global';

var obj1 = {
  bar: 'obj1',
  foo: foo,
};

var obj2 = {
  bar: 'obj2',
};

foo(); // "global"
obj1.foo(); // "obj1"
foo.call(obj2); // "obj2"
new foo(); // undefined

How would you add your own method to the Array object so the following code would work?

JavaScript is not class based, but it is a prototype-based language. This means that each object is linked to another object, its prototype, and it inherits its methods. You can follow the prototype chain for each object up until you reach the null object which has no prototype. We need to add a method to the global Array object, and we will do this by modifying the Array prototype.

Array.prototype.average = function() {
  // calculate sum
  var sum = this.reduce(function(prev, cur) {
    return prev + cur;
  });
  // return sum divided by number of elements
  return sum / this.length;
};

var arr = [1, 2, 3, 4, 5];
console.log(avg); // => 3

What is Hoisting in JavaScript?

Hoisting is the JavaScript interpreter's action of moving all variable and function declarations to the top of the current scope. There are two types of hoisting:

  • variable hoisting - rare
  • function hoisting - more common

Wherever a var (or function declaration) appears inside a scope, that declaration is taken to belong to the entire scope and accessible everywhere throughout.

var a = 2;
foo(); // works because `foo()`
// declaration is "hoisted"

function foo() {
  a = 3;
  console.log(a); // 3
  var a; // declaration is "hoisted"
  // to the top of `foo()`
}

console.log(a); // 2

What will the following code output?

0.1 + 0.2 === 0.3;

This will surprisingly output false because of floating point errors in internally representing certain numbers. 0.1 + 0.2 does not nicely come out to 0.3 but instead the result is actually 0.30000000000000004 because the computer cannot internally represent the correct number. One solution to get around this problem is to round the results when doing arithmetic with decimal numbers.

Check if a given string is a isomorphic

For two strings to be isomorphic, all occurrences of a character in string A can be replaced with another character to get string B. The order of the characters must be preserved. There must be one-to-one mapping for ever char of string A to every char of string B.

  • paper and title would return true.
  • egg and sad would return false.
  • dgg and add would return true.
isIsomorphic('egg', 'add'); // true
isIsomorphic('paper', 'title'); // true
isIsomorphic('kick', 'side'); // false

function isIsomorphic(firstString, secondString) {
  // Check if the same lenght. If not, they cannot be isomorphic
  if (firstString.length !== secondString.length) return false;

  var letterMap = {};

  for (var i = 0; i < firstString.length; i++) {
    var letterA = firstString[i],
      letterB = secondString[i];

    // If the letter does not exist, create a map and map it to the value
    // of the second letter
    if (letterMap[letterA] === undefined) {
      letterMap[letterA] = letterB;
    } else if (letterMap[letterA] !== letterB) {
      // Eles if letterA already exists in the map, but it does not map to
      // letterB, that means that A is mapping to more than one letter.
      return false;
    }
  }
  // If after iterating through and conditions are satisfied, return true.
  // They are isomorphic
  return true;
}

Describe the Revealing Module Pattern design pattern

A variation of the module pattern is called the Revealing Module Pattern. The purpose is to maintain encapsulation and reveal certain variables and methods returned in an object literal. The direct implementation looks like this:

var Exposer = (function() {
  var privateVariable = 10;

  var privateMethod = function() {
    console.log('Inside a private method!');
    privateVariable++;
  };

  var methodToExpose = function() {
    console.log('This is a method I want to expose!');
  };

  var otherMethodIWantToExpose = function() {
    privateMethod();
  };

  return {
    first: methodToExpose,
    second: otherMethodIWantToExpose,
  };
})();

Exposer.first(); // Output: This is a method I want to expose!
Exposer.second(); // Output: Inside a private method!
Exposer.methodToExpose; // undefined

An obvious disadvantage of it is unable to reference the private methods

Source