Interview Questions


1) What is displayed in the Console ?
This expression is shorthand for "b = 3; var a = b;"

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

// when strict mode is turned off
console.log( typeof(a) ); // "undefined" - because "a" defaults to local scope
console.log( typeof(b) ); // "number" - because "b" defaults to global scope

// when strict mode is turned on
console.log( typeof(a) ); // Run-time Error: variable undefined in strict mode

2) What is displayed in the Console ?

console.log( mul(2)(3)(4) ); 
function mul (x) {
   return function (y) { // anonymous function
      return function (z) { // anonymous function
         return x + y + z;
      };
   };
};

3) What is displayed in the Console ?

var myObject = { 
   foo: "one";
   func: function(){
      var self = this;
      console.log( this.foo );
      console.log( self.foo );
      ( function() {
         console.log( this.foo ); // this is undefined
         console.log( self.foo );
      }() );
   }
};
myObject.func();

4) Can you give some examples of built-in Objects ?

global 
Function
Object
Array
Math
Date
RegExp
JSON
Error

5) How would you create a module using an Immediately Invoked Function Expression ?
This is called "Revealing Module Pattern".
This encapsulates private variables and methods in a closure scope.

var Module = ( function() { 
   var _fullname = "Russell Proctor";
   function setMyPrivateFullName(newValue) {
      _fullName = newValue;
   }
   function getMyPrivateFullName() {
      return _fullname;
   }

   return {
      setFullName : setMyPrivateFullName,
      getFullName : getMyPrivateFullName
   };
}) ();
console.log( Module.getFullName() );
Module.setFullName("Another Name");
console.log( Module.getFullName() );

6) How would you create a module using the CommonJS approach ?
(require and module.exports)
This is the approach used by Node.js

const { a, b} = require('module-name');  
exports.method = str => str.toUpperCase();

7) How would you create a module using the Asynchronous Module Definition (AMD) ?
define and require


8) How would you create a module using ES 2015 ?
The variables and functions in a module are not available anywhere else unless the module explicitly exports them.


9) What is a Promise Object ?
The promise object (or deferred object) is a way of scheduling work to be done on a value that might not yet be obtained.
This lets you write non-blocking logic that executes asynchronously without having to write any plumbing code.
The promise object allows you to chain operations together.
The promise object is implemented in WinJS and JQuery.
The promise object can be in one of three states:
pending -
resolved -
rejected -


10) Write code to create a promise object using JQuery ?
You can create a promise object by using the $.Deferred method.
There are a number of methods available on this Deferred object

resolve - 
resolvewith - passes data to the promises object subscribers
notify -
notifywith - passes data to the promises object subscribers
reject -
rejectwith - passes data to the promises object subscribers
promise -

There are a number of methods available on the Promise object

done - 
fail -
always -
pipe -
progress -
state -
then -

function timeoutAsync(milliseconds) { 
    var deferred = $.Deferred();
    setTimeout(function () { deferred.resolve(); }, milliseconds); // run this code when the time has expired
    return deferred.promise(); // changes the state of the promise object to resolved
};
function abcAsync() {
    var promise = timeoutAsync(2000);
    promise.done(function () { alert('done!') });
    return promise; // you should always return a promise
};

11) Write code that executes if the promise object fails ?
You can use the fail method to execute code when the asynchronous call fails.

function abcAsync() { 
    var promise = timeoutAsync(2000);
    promise.fail(function () { alert('failed!') });
    return promise;
};

12) Write code that executes regardless of success or failure ?

function abcAsync() { 
    var promise = timeoutAsync(2000);
    promise.always(function () { alert('this always runs!') });
    return promise;
};

13) Write code that executes chaining using nesting ?
When you want to chain several asynchronous calls together you can nest them

function abcAsync() { 
    var firstPromise = timeoutAsync(2000);
    firstPromise.done(function () {
        var secondPromise = timeoutAsync(3000);
        secondPromise.done(function () {
            var thirdPromise = timeoutAsync(4000);
            thirdPromise.done( function () { alert('done!') } );
            });
        });
    });
    return firstPromise;
};

14) Write code that executes chaining using the pipe method ?

function abcAsync() { 
    var firstPromise = timeoutAsync(2000);
    var secondPromise = firstPromise.pipe(function () {
        return timeoutAsync(3000);
    });
    var thirdPromise = secondPromise.pipe(function () {
        return timeoutAsync(4000);
    });
    thirdPromise.done(function () { alert('done!') });
    return thirdPromise;
};

15) Can you give some examples of JQuery AJAX functions ?
$.get() - load data from the server using a HTTP GET request
$.post() - load data from the server using a HTTP POST request
$.ajax() - perform an asynchronous HTTP (Ajax) request
All these functions and methods use XMLHttpRequest under the hood.


16) Write code to make an asynchronous AJAX call using XMLHttpRequest ?

function fetchAjaxAsync(url, callback, errorCallback) { 
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
      if (xhr.status == 200) {
        processResult();
      }
      else {
        errorCallback(new Error(xhr.statusText));
      }
   }
  }
  xhr.open(url, "GET", true);
  xhr.send();
}

17) Write code to make an asynchronous AJAX call using the Fetch API ?
This API provides a global fetch method (window.fetch)
The Fetch API uses promises so you can chain multiple calls together instead of nesting them.

fetch(url). 
   then( function (response) {
      return response.json()
   })
   .then( function (myJSON) {
      console.log( JSON.stringify(myJSON) )
   })

18) What is Namespacing and how is it used ?
?


19) When should you use the setTimeout, setInterval and clearInterval functions ?
?


20) What are the disadvantages to using innerHTML ?
) content is replaced everywhere
) unable to append to the existing content
) does not provide validation so it is possible to insert invalid HTML


21) Can you explain the 'window.onload' and 'onDocumentReady' events ?
window.onload - this is only run once all the information on the page has been loaded.
onDocumentReady - loads the code after the DOM has loaded.


22) What are some of the new features available in ES 2015 ?
Support for constants
block scope support for constants and functions
classes
promises
arrow functions
enhanced object properties
extended literals
template literals
modules (import /export)
destructuring assignment


23) What is the 'Spread' operator in ES 2015 ?
The spread operator '...' can take either an array or an object and expand it into its set of Items.
For arrays this operator lets you drop an array inside another array and get its values.
In the array context, this operator is also called the 'spread element'.

const array1 = [1,2]; 
const array2 = [...array1, 3, 4];
// array2 = [1, 2, 3, 4]

For objects this operator is the equivalent of Object.assign, copying the values of one object into a new object.

const object1 = { a:1, b:2}; 
const object2 = { c:3, ...Object1 };
// object2 = { a:1, b:2, c:3 }

24) Can you explain the difference between Java and JavaScript ?
Java - is a complete and comprehensive programming language
JavaScript - is a client-side scripting language


25) What is JQuery ?
JQuery is a JavaScript library that works across all browsers.
It makes things like HTML document traversal and manipulation, event handling and AJAX much easier.
The library takes common tasks and wraps them into small reusable methods.


26) What is Node.js ?
This platform is built on the Google Chrome JavaScript runtime and lets you write code that executes on the back-end server.
nodejs.org , npmjs.com/package


27) What is NPM ?
Alternatives: Yarn, Bower
This is an abbreviation for Node Package Manager.
NPM is a repository of JavaScript packages (or modules) which can be easily reused by other developers using a command-line tool.


28) What is NPX ?
This is a package runner for Node Package Manager.
NPX was added in NPM 5.2
This is a replacement for installing global packages.
It encourages you to install them locally but still be able to run them as if they were global.


29) What is Webpack ?
Alternative: Browserify
Web Pack is a module bundler for JavaScript applications.
webpack.js.org/concepts
If you need a configuration file when working with webpack you can create a webpack.config.js file in the root folder.
If the file is found webpack will automatically use it.


30) What is Babel ?
Babel is a JavaScript compiler that lets you use JavaScript ES 2015 (ES6) features and transpiles the code to standard ES 2009 (ES5) code.
This lets you use the latest features without worrying about older browsers that do not support ES 2015.

babel-loader 
babel-core

31) What is Gulp ?
Alternative: Grunt
Gulp is a JavaScript task runner that can be used to automate repetitive tasks such as minification, unit testing and compilation.


32) What is Transpiling ?
This term means taking source code written in one language and transforming it into another language that has the same (or similar) level of abstraction.
The best example is compiling TypeScript to JavaScript.


33) What is Vue ?
Vue is a JavaScript framework which is being developed and maintained by the open source community.
In the context of MVC (Model View Controller), Vue is just the View.


34) What is Angular ?
Angular is a JavaScript framework being developed by Google.
It lets you extend the HTML syntax to include your components and data binding.
In the context of MVC (Model View Controller), Angular is all three.
Angular1 = Angular JS
The latest version of Angular is called Angular 4.


35) What is Yeoman ?
This is a command-line scaffolding tool that lets you quickly assemble a web project that has all the required components and dependencies.

npm install generator-office 
yo office

36) What is JSON ?
JavaScript Object Notation is a lightweight data-interchange format and is easy for code to parse and generate.
JSON is built on two structures. A collection of name/value pairs and an ordered list of values.


37) What is YAML ?
YAML is a superset of JSON and is a human friendly data serialisation standard.
This is similar to XML.


38) What is AJAX ?
AJAX is the acronym for Asynchronous JavaScript and Xml
This refers to a set of techniques used on the client side to create asynchronous web applications.



© 2022 Better Solutions Limited. All Rights Reserved. © 2022 Better Solutions Limited TopPrev