Questions


1) What is ECMAScript ?
This is the official name given to the language standard that Netscape originally submitted to ECMA for standardization.
Despite the official name this language is more commonly referred to as JavaScript.
1997 Jun - Version 1
1998 Jun - Version 2
1999 Dec - Version 3 (ES3)
2008 Jul - Version 4 was abandoned
2009 Dec - Version 5 (ES5)
2015 Jun - Version 6 (ECMAScript 2015 or ES6)
2016 Jun - Version 7 (ECMAScript 2016)
2017 Jun - Version 8 (ECMAScript 2017)


2) What is JQuery ?
JQuery is a JavaScript library that works across all browsers.
It makes things like HTML document traversal and manipulation, event handling, animation and AJAX much easier.
The library takes a lot of common tasks and wraps them into simple methods that can be called with one line of code.


3) 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
https://nodejs.org
https://www.npmjs.com/package/package


4) What is NPM ?
Alternative: 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.


5) What is Webpack ?
Alternative: Browserify
Web Pack is a module bundler for JavaScript applications.
webpack.js.org/concepts
It has advanced configuration settings but there are four main concepts:
Entry - the first file to use in the dependency tree
Output - the final file containing everything
Loaders - transform your files before they are added
Plugins - perform actions and custom functionality
These settings are saved in a webpack.config.js file

webpack 

6) What is 'webpack-dev-server' ?

webpack-dev-server 

7) What is 'html-webpack-plugin' ?
This is a webpack plugin that will generate an HTML5 file that includes all your webpack bundles in the body using script tags.

html-webpack-plugin 

8) What is 'style-loader' ?
This is a webpack plugin that can load a CSS file and inject it into a document.

style-loader 

9) What is 'css-loader' ?
This is a webpack plugin that can parse a CSS file and apply transforms to it

css-loader 

10) What is the 'webpack.config.js' file ?
If you need a configuration file you can create a webpack.config.js file in the root folder.
If the file is found webpack will automatically use it.


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

babel-loader 
babel-core

12) 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.


13) What is Hot Module Replacement (HMR) ?
Hot loading is the replacement of code in a running application without requiring a restart or a reload of the application.


14) What is TypeScript ?
TypeScript is a superset of JavaScript.
TypeScript files are either ".ts" or ".tsx".
TypeScript comes with the tsc compiler that compiles your code to ES5 and creates the *.d.ts files that contain your type declarations.
TypeScript is a superset of ES5 and includes features proposed for ES6.


15) What is ts-loader ?
This is a webpack plugin that can load Typescript.

ts-loader 

16) 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.


17) What is React ?
React is a JavaScript library for building web applications with rich user interfaces and was developed by Facebook.
In the context of MVC (Model View Controller), React is just the View.
The latest version of React is called ReactJS
React is not a "framework" it is a library for creating UI components.
It can also be used on the server using node.js
React Fiber is the new and latest version
React Native is for building apps for mobile devices

react 
react-dom
react-prop-types
@types/react
@types/react-dom
@types/prop-types

18) What is JSX ?



19) What is 'react-hot-loader' ?
This is a webpack plugin that allows react components to be live reloaded.


20) What is Angular ?
Angular is a JavaScript framework.
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.


21) 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

22) 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.


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


24) What is the Office UI Fabric ?
The official front-end framework for building experiences that fit seamlessly into Office and Office 365.
This framework implements its components using React.
There is also a JQuery component library and an Angular component library.


25) Is JavaScript a Strongly Typed programming language ?
No. JavaScript is not strongly typed. It is an un-typed, interpreted language.
This means that when you create a variable, you do not need to specify its data type.


26) Is JavaScript an Object Orientated programming language ?
Yes although it is not a class based object orientated language like C#
Polymorphism - Yes because it is not strictly typed ?
Encapsulation - Yes.
Inheritance (Interface) -
Inheritance (Implementation) - Can be achieved using prototyping but is at the expense of encapsulation


27) Can you give some examples of Value data types ?

number 
string
Boolean
Symbol (ES5)
null
undefined

28) Can you describe the difference between 'undefined' and 'null' ?
undefined - a variable that has never been initialised
null - a variable that has been explicitly set to have no value
If you compare undefined and null using the following line, they will be equal

if (null == undefined) // return true 
if (null === undefined) // return true

29) How can you check if a variable has a value ?
You can use the if keyword to check if a variable has a value.

if(myVar){ 
   alert('has a value');
   // 0, NaN, "", null, undefined
}
else {
   alert('does not have a value');
  // everything else
}

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

global 
Object
Function
Array
Math
Date
RegExp
JSON
Error

31) Can you describe a function ?
A function is a callable object
A function that is a member of an object is called a method
When you call a function you are invoking it.


32) Can you describe a nested function ?
It is possible to nest function declarations inside function declarations.
Nested functions are private to the function in which they are defined

function multiplySomeNumbers(arg1,arg2) { 
   return doubleThis(arg1) / arg2;
   function doubleThis(arg3) {
      var result = arg3 * 2;
      return result;
   }
}

33) What is the difference between 'arguments' and 'parameters' ?
Arguments represent the values you pass to the function, variables a and b.
Parameters represent the values received from the caller, variables x and y.

var a = 5; 
var b = 10;
var c = Add(a, b);
function Add(x, y) {
    return x + y;
}

34) Can you have Optional Arguments ?
Yes. All arguments are optional by default. If you do not pass in an argument, its parameter will be undefined.
Also if you pass in too many arguments, they will just be ignored.
This has benefits as well as drawbacks.


35) Can you describe the 'arguments' object ?



36) What is an expression ?
An expression is a line of code that produces a value.
It can be a single value or it can contain operands and operators.
Numbers are operands.
An operand can be a value or it can be another expression.


37) Can you describe the 'number' data type ?
Double-precision, 64 bit binary format, IEEE 754 value.
They are all represented as floating point values.
The fraction is 52 bits, the exponent is 11 bits, and the sign is 1 bit.
The smallest value is
The largest value is 9.007199254740994E+15


38) What is 0.1 + 0.2 ?
This is not 0.3 but is actually 0.30000000000000004
When performing integer calculation the results are precise but this is not the case when working with fractions.
It is good practice to always truncate fractions to a fixed number of decimal places.


39) Can you list any Number sub data types ?
The Number data type also supports these special values.

NaN - not a number indicator 
Infinity - when a number exceeds 1.7976931348623157E+10308
-Infinity - when a number exceeds -1.7976931348623157E+10308

40) What is the % operator ?
This is the modulo operator and performs an implied division and returns the remainder.


41) Can you describe the 'String' data type ?
A string is a collection of characters.
It can be enclosed in single or double quotes.
You can use the plus sign to represent string concatenation
Some other common escape sequences are \t to embed a tab and \n to embed a new line.
You can also use \uHHHH where HHHH is a 4-digit hexadecimal code to embed a unicode string.

'The quick brown fox jumps over the lazy dog'
'The doctor said "Today is your lucky day!" '
'The doctor said "I\'m pleased to announce that it\'s a girl!" '

42) Can you describe the 'Boolean' data type ?
This can contain the values true or false.

equals (==) 
not equals (!=)
null == undefined // true
false == 0; // true
' == 0; // true
123' == 123 // true

43) Is there a way of checking for equality ?
Yes. You can use the operators (==) and (!=)

null == undefined   // true 
false == 0; // true
'' == 0; // true
'123' == 123 // true

44) Is there a way of checking for equality AND data type ?
Yes. You can use the operators (===) and (!==)

null === undefined  // false 
false === 0; // false
' === 0; // false
123' === 123 // false

45) Can you describe the logical operators ?

&& - and 
|| - or
! - not

JavaScript uses short-circuit evaluation


46) What is the typeof operator ?
This is a unary operator that takes a single operand and returns a 'string' that indicates the data type.

typeof 'Hello World'  // string 
typeof 19.5 // number
typeof true // Boolean

var myFunction = function(x, y){ 
    return x + y;
};
typeof myFunction // ??

47) How do you create a variable ?
You can use the 'var' keyword to give your variable function scope.
If you do not use the var keyword then it will be given global scope.

myTotal = 10 * 2; 
var myTotal = 10 * 2;

48) Can you describe the different variable scopes ?
There are two scopes, global and local.
global scope - can be accessed from anywhere in the program
local scope - can be accessed from only within the function where it is declared
All variables should be declared at the top of your functions because there scope is always the whole function.


49) If you declare a variable and do not assign a value to it, what is its value ?
Its value is undefined.


50) What is the difference between var and let ?
The let statement was introduced in ES6 and provides block scoping
The var statement provides function scope


51) Can you describe the 'alert' function ?
This displays a message to the user in a modal window.

alert('this is a useful message'); 

52) Can you describe the 'prompt' function ?
This displays a textbox asking the user for input in a modal window.
The textbox can have a default value.

var promptResult = prompt('This is a prompt for information', 'default value'); 

53) Can you describe the 'confirm' function ?
This displays a question to the user asking them to choose either OK or Cancel.

var confirmResult = confirm('Do you confirm?'); 

54) What does the Number function do ?
This function will convert different object values to a number.
If the object cannot be converted to a number, a value of NaN is returned.

var age = prompt('Enter age', '');   //age is string  
alert('You will soon be ' + Number(age) + 1 + ' years old!');

55) What does the String function do ?
This function will convert different object values to a string.

var x = 10; 
var y = 20;
alert(String(x) + String(y)); //displays 1020

56) Write a For loop to display the numbers 0 to 9 ?

for (var counter = 0; counter < 10; counter++){ 
   alert('The counter is now set to ' + counter);
}

57) Write a For loop to display all the values in an array ?

for (item in myArray){ 
   alert(myArray[item]);
}

58) Write code to iterate over an array using a for loop ?

for (var i = 0; i < a.length; i++) { 
  // Do something with a[i]
}

59) Write a While loop ?
A while loop can execute zero or many times

var x = 10; 
while(x > 0) {
   x--;
   alert('The value of x is ' + x);
}

60) Write a Do loop ?
A do loop executes at least once.
A do loop contains the keyword while.

var x = 0; 
do{
   x++;
   alert('The value of x is ' + x);
} while (x > 4)

61) Can you describe the 'break' keyword ?
This provides a way to exit the current loop.
If you are in a nested loop this will only exit one level.


62) How would you return the size of a 1 dimensional array ?
This array is a zero based array.
You can use the length property to return the size of an array.
The length is one more than the highest index

var a = ['dog', 'cat', 'hen'];  
var b = new Array();
b[0] = 'dog';
b[1] = 'cat';
b[2] = 'hen';
b.length; // 3

63) Write code to iterate over an array using a foreach loop ?
This was added in ES5

['dog', 'cat', 'hen'].forEach(function(currentValue, index, array) {  
  // Do something with currentValue or array[index]
});

64) Can you describe the purpose of a try-catch-finally block ?
The try block encloses those statements that might cause an exception.
The catch block can handle exceptions.
The finally block always executes and contains any cleanup code.

try 
{ }
catch
{ }
finally
{ }

65) Write code to create an empty object ?

var obj1 = new Object(); 
var ob2 = {}; // preferred

66) Write code to create an object prototype ?
Javascript uses functions as classes

function Person(name, age) { 
  this.name = name;
  this.age = age;
}
var you = new Person('You', 24);

67) What is the syntax for accessing object properties ?

obj.name = 'Russell';  
var name = obj.name;
obj['name'] = 'Russell';
var name = obj['name'];

68) Write code to add methods to classes ?
It is possible to attach functions to objects

function makePerson(first, last) { 
  return {
    this.first = first,
    this.last = last,
    this.fullName = function() {
      return this.first + ' ' + this.last;
    },
    this.fullNameReversed = function() {
      return this.last + ', ' + this.first;
    }
  };
}
s = makePerson('Russell', 'Smith');
s.fullName(); // "Russell Smith"
s.fullNameReversed(); // "Smith, Russell"

69) 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 -


70) 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
}

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

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

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

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

73) Write code that executes chaining using the 'pipe' method ?
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;
}

A much better way of writing this is and removing the nesting is to use 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;
}

74) Write code to make an asynchronous AJAX call ?

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();
}


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