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.
Version Table


2) What is Object Orientated Programming ?
This is a style of programming that is based on objects containing methods, properties and fields arranged in a hierarchy.
This type of programming is based around four key features:
Polymorphism - Create routines that can operate on objects of different types. This is handled by late binding and multiple interfaces.
Encapsulation - Hide parts of the implementation and hide complexity. This is achieved using access modifiers.
Inheritance (Interface) - (Public Inheritance) Define methods (without implementation) that must be declared in a derived class.
Inheritance (Implementation) - (Private Inheritance) Inherit method implementation from a base class.


3) 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) -
No
Inheritance (Implementation) - Can be achieved using prototyping but is at the expense of encapsulation


4) What does Strongly Typed mean ?
A programming language is strongly typed if there are no implicit type conversions.
A strongly typed programming language is one in which each data type is predefined as part of the programming language.
All constants and variables must be defined with a specific data type.
An advantage of strong data typing is that it imposes a rigorous set of rules on a programmer and therefore guarantees a certain consistency of results.


5) Does JavaScript support Automatic Type Conversion ?
Yes


6) 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.
Variables do not have to have a data type assigned to them.
You can reuse and reassign variables to objects of any type.

var var1; 
var1 = 1;
var1 = 'some text';
var1 = false;

7) What is Strict Mode ?
This is an option that can be used to force you to explicitly declare a variable before it can be used.
This allows you to place an entire file/script or just an individual function in a "strict" operating context.

'use strict'

8) Are Semicolons required at the end of statements ?
No. They are not required although you should definitely use them.
There is a process called Automatic Semi-colon Insertion (ASI) that tries to insert the semicolons for you automatically.
There are a number of cases when the ASI will either not insert one or will insert one in the wrong place.

a = b + c 
(d + e).print()

This translates to a = b + c(d + e).print which is incorrect

return 
{
   var1 = 'Mon'

}
This translates to return; { var1 = 'Mon' } which is incorrect
You should always include a semicolon after a function expression.

var myFunc = function () { 
};

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


10) How do you declare 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.

function Func1() { 
   myTotal = 10 * 2;
   var myTotal = 10 * 2;
}

11) Can variables be declared after they have been used ?
Yes. JavaScript will automatically move all variables to the top of the corresponding scope.
This is called Hoisting.
Always declare your variables at the top before you use them to avoid any confusion.


12) What is the difference between 'var', 'let' and 'const'?
let and const were added in ES 2015.
A variable declared with var outside a function has global scope.
A variable declared with var inside a function has function scope.
A variable declared with var inside a function takes precedence over the same variable declared outside the function. This is known as shadowing.
The scope of var can be global or function (not block).
The scope of let can be global, function or block.
The scope of const can be global, function or block.
A variable declared with const cannot be reused or reassigned later.
A variable declared with let at the global scope will not be added to the global window object.


13) What are 'undeclared' and 'undefined' variables ?
Undeclared variables - are those that do not exist and have not be declared. Reading a value from an undeclared variable will generate a runtime error.
Undefined variables - are those that have been declared but have not been given a value. Reading a value from an undefined variable will return the value undefined.


14) What is displayed in the Console ?

var a = 'Monday'  
function MyFunc() {
   if (a === undefined) {
      var a = 'Tuesday'
   }
   console.log(a);
}
MyFunc();

Inside the MyFunc function a new variable with function scope is declared that has the same name as the variable at the global scope.
JavaScript always hoists variable declarations to the top of their scope.
This means the condition is true and the function scope variable is initiated to 'Tuesday' before being written to the console.


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

var myVariable; 

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

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

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

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

Number      // primitive type 
String // reference type
Boolean // primitive type
Symbol
Null
Undefined

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

19) 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){ 
   // 0, NaN, "", null, undefined
}
else {
  // everything else
}

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


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

22) When would you use the 'isNan' function ?
This function returns true if the argument is not a number otherwise it returns false.


23) Can you describe the type conversion function 'Number' ?
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!');

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


25) What is the 'parseInt' function used for ?
This function is used to convert numbers between different bases.

parseInt('4F', 16);  

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


27) What is displayed in the Console ?

console.log( 3 + 2 + '6' );  

The number 3 is added to the number 2 to get 5.
The number 5 is then concatenated with the text string '6' to display '56'.


28) 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!" '

29) Can you describe the type conversion function 'String' ?
This function will convert different object values to a string.

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

30) What are Escape Characters ?
These can be used when working with special characters like single quote, double quote, apostrophe and ampersand

console.log("some \" text"); 

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

32) Can you describe the type conversion function 'Boolean' ?
This function will convert different objects to a boolean.

alert( Boolean(0) ); 
alert( Boolean(1) );

33) Can you describe the 'Symbol' data type ?



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

global 
Function
Object
Array
Math
Date
RegExp
JSON
Error

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


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

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

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


39) Can you describe the 'arguments' object ?
This is an array-like object that is accessible from inside functions that contains the values of the arguments passed to that function.

function func1 (a,b) { 
   console.log(arguments[0]); // output: 1
   console.log(arguments[1]); // output: 2
}
func1(1,2);

40) Can you describe an 'Object' ?
?


41) Write code to create an empty object ?

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

42) 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);

43) What is the syntax for accessing object properties ?

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

44) What is the 'this' keyword used for ?
The 'this' keyword refers to the object from where it is called.


45) Can you describe an 'Array' ?
?


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

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

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

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

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

49) Write code to iterate over an array using a foreach loop ?

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

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


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

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

53) Can you describe the logical operators ?

&& - and 
|| - or
! - not

JavaScript uses short-circuit evaluation


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

window.alert(message); 
alert('this is a useful message');

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

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

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

window.confirm(message); 
var confirmResult = confirm('Do you confirm?');

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

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

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

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

for (i = 0; i < 10; i++) { 
  if (i === 3) { break; }
  text += "The number is " + i + "<br>";
}

61) Can you describe the 'continue' keyword ?
This continues with the next statement of the loop.


62) 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
{ }

63) 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"

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


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

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

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

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

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

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


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

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

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


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


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


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


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


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

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


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


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


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


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


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


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

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


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


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


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


89) What is the Office Fabric-UI ?
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.


90) What is Material-UI ?
Alternatives: Semantic, Foundation, Evergreen, Prime, Ant Design, Shards, AtlasKit
This is a React UI Framework library being developed and maintained by the open source community.
Version 1 was released May 2018.
These components implement the Google's Material Design guidelines.


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

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


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


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



© 2019 Better Solutions Limited. All Rights Reserved. © 2019 Better Solutions Limited TopPrevNext