Javascript Interview Questions

Start here

• https://github.com/mithi/old-web-dev-stuff/issues/1
• https://github.com/sudheerj/javascript-interview-questions
• https://github.com/ganqqwerty/123-Essential-JavaScript-Interview-Questions
• https://github.com/learning-zone/javascript-interview-questions
• https://github.com/lydiahallie/javascript-questions
• https://github.com/rohan-paul/Awesome-JavaScript-Interviews

1. Prototype Chain -- Build new types of object based on existing ones. A way of "inheriting" properties but doesn't work the same way as inheritance in a class based language

2. Call, Apply, Bind call and apply do the same thing, just different syntax bind creates a new function from the given function It is most useful when the function has a this. this will refer to the object you pass in as the first argument.

let cat = {name: "Fuku", color: "white" }

function describeCat(prefix, postfix) {
  console.log(`${prefix}, ${this.name} the cat is color ${this.color}. ${postfix}`)
}

describeCat.apply(cat, ["Hello!", "Bye!"])
// Hello! Fuku the cat is color white. Bye!
describeCat.call(cat, "start.", "end.")
// start. Fuku the cat is color white. end.

let describeFuku = describeCat.bind(cat)
describeFuku("-START-", "-END-")
// -START- Fuku the cat is color white. -END-

3. splice arrays Adds item to array or remove item from array. returns removed items and modifies array.

• First argument: position for insertion, deletion
• 2nd argument: (optional) - number of elements to be deleted
• Next arguments, to be added to array
• Check MDN for syntax

4. Object vs Map -- Object keys can only be strings or symbols, Map any value, like functions and objects -- Map ordered keys, object not -- Map has a size property, is iterable directly

• Object has prototype, Map don't have this

5. == && ===

• === checks for value and type. == value only

// refers to different objects in memory
{} === {} // false
[] === [] // false
{} == {} // false
[] == [] // false

6. Arrow functions

• don't have own this
• can't be called inside it, must be declared first

7. pure function, firs order function, higher order function, unary functions, currying function
8. let vs var

• let blocked scoped local variable, var is function scoped

console.log(age) // ERROR cannot access age before initialization 
let age = 30

9. For switch statements add curly braces for each case to scope variables
10. Temporal Dead Zone occurs with let and const but not in var, when accessing let and const before declaration causes ReferenceError. The timespan when that ReferenceError happens between the creation of variable's binding and its declaration.
11. IIFE - Immediately invoked functions, variables declared in IIFE cannot be accessed in the outside world
12. Memoize, cache previously computed results
13. Hoisting, variables and functions are moved to the top of scope before execution. Javascript hoists declarations not initializations
14. Classes are syntactic sugar over JS existing prototype based inheritance
15. Closures the inner function has access to the outer or enclosing function variables even if the outer function has already returned
16. Scope - the part of the code where you can access particular functions, variables, and objects at runtime
17. Service Worker - runs in the background, separate from webpage, that don't need user interaction. example, offline experience, background syncs, push notifications, managing cache. You can use postMessage interface to manipulate the dom because service workers cant access the DOM directly. Service workers gets terminated when not in use.
18. IndexDB lowelevel API for client-side storage for large structured data like files/blobs. enable high-performance searches of this data
19. Web storage -you can store key value pairs on your browser (localStorage , sessionStorage - deletes data when browser tab is closed).
20. postMessage enables cross-origin communication between window objects (eg. page and popup it spawned, page and iframe embedded within it.)
21. cookie a piece of data stored on your computer to be accessed by browser. Used to remember information like user profile. User visits webpage, user can be stored in the cookie. next time user visits the page, the cookie remembers the user profile.
22. Web workers can't access the window, document and parent object
23. server-sent event notifications
24. promise.race() method
25. strict Mode to prevent certain actions from being taken and throws more exceptions. catches bad syntax like accidentally creating a global variable etc
26. !! double exclamation to ensure resulting type is a boolean
27. delete - to delete property and value
28. typeof to return type of a variable
29. null vs undefined,
30. eval evaluates javascript code represented as a string
31. window vs document. window is the root level element in any webpage. window.document is the direct child of window object. window has alert(), confirm() and properties like window.location. document has getElementById, createElement etc
32. history you can access browser history by window.history.back() and window.history.forward()
33. You can detect capslock on mousedown event.getModifierState("Capslock")
34. isNaN("hello") === true
35. undeclared vs undefined
36. global variables. problematic. is not allowed in use strict
37. NaN
38. isFinite(Infinity); isFinite(NaN); isFinite(-Infinity)
39. Event Flow - order in which event is received in a webpage. When you click an element that is nested in various other elements, before your click actually reaches its destination or target element, is must trigger the click event for each of its parent elements first, starting at the top with the global window object. To ways of event flow Event Capturing and Event Bubbling
40. Event Bubbling type of event population where the event first triggers to the inner most target element and then successively triggers on the ancestors (parents) of the target element until it riches the outermost DOM property
41. Event Capturing The event is first captured by the outermost element then successively triggers on the children until it reaches the innermost dom element
42. window.navigator.platform contains information about the visitor's browser OS details
43. DOMContentLoaded event is fired when the initial HTML document has been completely loaded and parsed without waiting for assets (stylesheets, images) finished loading. load event is fired when all the the other stuff like stylesheets and images are loaded
44. native objects part of javascript language (String, Math, RegExp, Object, Function). host objects are provided by node or browser like window, dom notes, XMlHttpRequest. User objects are objects defined in a specific javascript code.
45. attribute are defined in html markup <input type="text" /> while property is defined in the dom. input.getAttribute("type")
46. same-origin policy prevents javascript from making request across domain boundaries (defined by URI scheme, hostname, and port number). to prevent malicious scripts from obtaining access to sensitive data.
47. void 0 prevents page from refreshing. <a href="Javascript:void(0);" onclick="alert("well done")"> click me </a>
48. Events, things that happen to html ements
49. preventDefault default behavior of that event will not occur like when submitting a form
50. stopPropagation stops event from bubbling up the event chain
51. returning false on event handlers, stops the default action or behavior of the browser. prevents event from propagating the dom. stops callback execution and returns immediately when called
52. BOM - browser object model allows the javascript to talk to the browser. it consists of object navigator, history, screen, location, and document which are children of the window. it is not standardized and can change based on different browsers
53. event delegation , a technique for listening to events where you delegate the parent element as a listener of all the events that happen inside it. For example you can detect the filed changes inside each specific form.
54. PWA progressive web applications, a type of mobile app delivered through the web built with html, css javascript. deployed to servers, accessible through URL, and indexed by search engines
55. clearTimeout and clearInterval to kill the event listener and prevent memory leaks
56. Redirect a new page in javascript window.location.href = "newPage.html"
57. window.location.href returns current url full URL
58. window.location has the following properties: href, protocol, host, hostname, port, pathname, search (query portion of the url), hash anchor portion of the url
59. app shell model, application shell architecture is one way to build progressive web apps that reliably and instantly loads on your user's screens similar to what you see in native applications. useful for getting some initial html to the screen fast without a network
60. function sum(a, b, c) { return a + b + c }; sum.length // 4
61. polyfill js code used to provide modern functionality on other browsers that do not natively support it
62. jslabels you can actually name loops and blocks in javascripts so that if you have nested loops you can continue loopName
63. tree shaking - eliminating dead code that is not used. implemented y webpack, rollup etc
64. do not use eval it is not safe
65. navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/iPhone/i)
66. You can make synchronous and asynchronous http request via XMLHttpRequest object that the browser provides
67. You can get window.innerWidth and window.innerHeight
68. You can execute javascript after page load like window.onload = function.... or document.onload = function... or <body = onload="script()>
69. __proto__ vs prototype. __proto__ the actual object that is used in the lookup chain to resolve methods, prototype is the object that is used to build __proto__ when you create an object ???
70. freeze method to NOT allow adding new properties, prevents removing properties etc... to make object immutable
71. Detect browser language navigator.language
72. <noscript>Javascript is disabled here</noscript>
73. Object.freeze(myObject); Object.isFrozen(myObject)
74. Object.is([], []) // false, Object.is(window, window) //true
75. Copy object properties with object.assign
76. const p = new Proxy(target, handler) to define custom behavior for fundamental operations ????
77. Object.seal(), changes can be made in the existing properties of the object. freeze you can't change existing properties. Object.isSealed(myObject)
78. Object.values() returns an array of values, Object.entries() returns an array of key, value pairs. Object.keys()
79. WeakSet collection of weakly references held object new WeakSet([iterable]). weaksets has add, has, length, delete
80. weakSet vs Set, sets can stor any value, weaksets can only store collection of objects. weeksets don't have a size property. it does not have methods like clear, keys, values, entries, for each.
81. WeakMap collection of. key value pairs.
82. uneval built in function to create a string representation of an object uneval(function user() {}) // returns "(function user(){}
83. encodeURI to encode URLS that has special characters (replaces them), decodeURI
84. window.print() prints contents of the window, opens a dialog box that lets you choose between various printing options
85. Local variables takes precedence over global variables with the same name
86. accessors are get and set on a class
87. Object.defineProperty(newObject, 'newProperty', {value: 100, writable: false}) if you do newObject.newProperty = 200 it will return an error.
88. primitive data types, string, number, boolean, null, undefined, bigint, symbol
89. error object. err.name, err.message
90. error names EalError , RangeError, ReferenceError, SyntaxError, TypeError, URIError
91. try, catch, throw, finally
92. nodejs server side platform built on chrome's javascript runtime for easily building fast and scalable network applicaions, even-tbased, non blocking, asynchronouse
93. Intl object is the namespace for ecmascript internationalization api, which provides language senstive string comparison, number formating etc. properties DateTimeFormat, Collator, ListFormat, NumberFormat, PluralRules, RelativeTimeFormat etc
94. let date = new Date(); console.log(new Intl.DateTimeFormat('en-AU').format(date)
95. event loop call stack``event queue
96. + a , the unary operator is used to convert a variable to a number