JavaScript 3

Question 1

What is a three step ‘algorithm’ for creating a JavaScript object?

Answer 1

First, write a constructor function that sets the instance properties of the new object.

Second, define instance methods on the prototype object of the constructor.

Third, define class fields and class properties on the constructor itself.

Question 2

Is there a JavaScript equivalent of the ‘final’ keyword in Java that declares instance variables as constants?

Answer 2

No

Question 3

If I want to emulate a static function on a JavaScript object, where do I declare the function?

Answer 3

On the constructor

Constructor.myfunc = function() {};

This would allow you to call the function without instantiating an object - you would normally not use the ‘this’ keyword in a method like this.

Question 4

The expression ‘o instanceof c’ returns true if…

Answer 4

the object o inherits from c.prototype - the relationship does not have to be direct.

Question 5

In JavaScript - Constructors act as the public identity, but the formal identity resides with the…

Answer 5

‘prototype’.

Question 6

Does the following function declaration have a constructor name?
var Complex = function (x) { .... };

Answer 6

No

Question 7

Does the following function declaration have a constructor name?

var Complex = function Complex(x) { …. };

Answer 7

Yes - it will be Complex.

Question 8

A set is…

Answer 8

A data structure that holds a collection of values with no duplicate values.

Question 9

The job of toLocaleString is to…

Answer 9

Convert a string in a locale sensitive method

Question 10

The job of valueOf is to…

Answer 10

Convert the object into a primitive value when used in a numeric context.

Question 11

What method invokes the toJSON method on an object?

Answer 11

JSON.stringify()

Question 12

JavaScript equality operators evaluate object equality by…

Answer 12

Reference not the values - i.e. it checks that they point to the same object.

Question 13

How should you implement equality testing in JavaScript?

Answer 13

Use a similar method to Java. Define methods such as “equals” - which take one object as an argument and return true or false depending on the result.

Question 14

If the < or <= operators are called on an object, what function is called to perform the test?

Answer 14

The valueOf() method is called to see if it can compare using the result of that method.

Question 15

What method should be used instead of using the less than / greater than operators?

Answer 15

Using Java conventions - create a method called compareTo. Then pass it the object we are comparing to. Use a test against 0 to determine the result.

i.e.

a b - becomes a.compareTo(b) > 0;
a != b - becomes a.compareTo(b) != 0;

Question 16

B is a subclass of A. If method B.method wants to call the overridden method A.method, what is this called?

Answer 16

Method chaining

Question 17

B is a subclass of A. If we want to call the overridden constructor A from B - what is this called?

Answer 17

Constructor chaining

Question 18

The key to subclassing in JavaScript is the proper initialisation of the…

Answer 18

prototype object - if B extends A, then B.prototype must be an heir of A.prototype

Question 19

What two lines of code are the most important part of subclassing in JavaScript?

Answer 19

B.prototype = Object.create(A.prototype);
B.prototype.constructor = B; // Override the inherited constructor property

Without these lines - any objects created are simply subclasses of Object.

Question 20

How would you get the width of a window?

Answer 20

window. innerWidth
window. outerWidth

You may have to take into account the scrollbar though

Question 21

Is the use of querySelector and querySelectorAll okay?

Answer 21

Yes, most modern browsers support it - there is an IOS8 bug which prevents some selector types working (i.e. a + p) - and IE 8 support is spotty (but should be okay for basic selectors).

Question 22

Write a simple query that returns all elements with the class “foobar”…

Answer 22

var allFoobars = document.querySelectorAll(“.foobar”);

Question 23

What selector syntax is used with querySelector and querySelectorAll?

Answer 23

Basically the same as CSS - with the exception of older browsers that may only have partial support (i.e. IE) - it’s pretty much the same shit. NOTE: this is because IE 8 does not support CS3, and only parts of CS2.1

Question 24

If you use querySelector on a class, and there are multiple elements with this class, which one does it return?

Answer 24

The first one it finds.

Question 25

How can you reference the HTML element directly via JavaScript?

Answer 25

document.documentElement

Question 26

What is the best way to determine if JavaScript is running?

Answer 26

You can set a class with the value “no-js” on the HTML element.

Then in an IIFE you can get the value of document.documentElement and remove the class “no-js” from that element.

If JavaScript is running, the class is removed. If it is not running, the class remains indicating javascript is not running.

It’s a good idea to do this in pure javascript (not jQuery) and load it in the head. That way it runs before the body loads - minimising any “flash” that may occur due to late loading.

Question 27

True or false, a variable holding a primitive type in Javascript really directly contains the primitive, and not a reference?

Answer 27

True

When you assign a primitive value to a variable, a copy of that value is copied into that variable.

So:

var red = "red";
var color = red;

Each one has it’s own copy of “red”.

Question 28

What will the following print out?

console.log(typeof null);

Answer 28

object

It’s technically an error in the JavaScript specification

Question 29

Since typeof null returns ‘object’, what’s the best way to tell if you have a null value?

Answer 29

Compare directly

if (value === null) {}

Question 30

What is the output for the following two lines?

console. log(“5” == 5);
console. log(“5” === 5);

Answer 30

true
false

That’s because == will coerce the value of “5” into an integer.

Question 31

What is the output for the following two lines?

console. log(undefined == null);
console. log(undefined === null);

Answer 31

true

false

Question 32

If you have a variable:

var val = true;

What is the value after the following line:

var newval = val.toString();

Answer 32

“true”

It will convert true to a string.

Question 33

Primitive values have methods, are primitive values considered to be objects in Javascript?

Answer 33

No

Question 34

A javascript object could be thought of as a…

Answer 34

hashtable

Question 35

Objects are represented by…

Answer 35

reference types

Question 36

Reference values are synonomous with…

Answer 36

objects

Question 37

Any function can be a…

Answer 37

constructor

Question 38

By convention, constructors begin with…

Answer 38

an uppercase letter to differentiate them from other non-constructors

Question 39

Reference types store the object directly in the variable, true or false?

Answer 39

false.

They store the address in the variable (and are therefore like a pointer).

Question 40

Removing the reference to an object is referred to as dereferencing in JavaScript - it is essentially the same as deleting the pointer. How do you achieve this in JS?

Answer 40

var object = new Object();
object = null;

Assign null to it.

Question 41

What is the output of the following:

var object1 = new Object();
var object2 = object1;

object1. myCustomProperty = “superman”;
console. log(object2.myCustomProperty);

Answer 41

Superman

Because they are reference types, they both point to the same object. Adding a property on one, makes it appear on the other.

Question 42

What are the built in reference types?

Answer 42

Array
Object
Error
Date
Function
RegExp

Question 43

A ‘literal’ is what?

Answer 43

syntax that allows you to define a reference type without explicitly creating an object, using new and the constructor.

Question 44

How do you create an object with the object literal syntax?

Answer 44

var object = {
name: “The principles of OOP JS”,
year: 2014
};

Question 45

Which is valid?

var object = { "superman": "yup" }
var object2 = { superman: "Oh yup" }

Answer 45

They both are - putting the property name in quotes is not required, but is useful for using names that have spaces or other special characters.

Question 46

The following is logically equivalent to what?

var object = {
“superman”: “yup”,
“chicken”: “soup”
}

Answer 46

var object = new Object();

object. superman = “yup”;
object. chicken = “soup”;

Question 47

Does using an object literal (i.e. var obj = { }) call the constructor?

Answer 47

No, and that is true for all object literals.

Question 48

How do you declare an array literal?

Answer 48

var array = [‘red’, ‘green’, ‘blue’];

Question 49

var array = [‘red’, ‘green’, ‘blue’];

Is equivalent to…

Answer 49

var array = new Array(‘red’, ‘green’, ‘blue’);

Question 50

The most common way to declare a function is…

Answer 50

To use the literal form.

function reflect(value) {
   return value;
}

Question 51

Declare the following using the constructor form:

function reflect(value) {
   return value;
}

Answer 51

var reflect = new Function(“value”, “return value;”);

Question 52

Why is using a constructor to create a function a bad idea?

Answer 52

It’s more complicated to read, and impossible to debug (since most debuggers don’t recognise them). They are essentially a black box in the application.

Question 53

Declare a regular expression literal that matches one or more numbers.

Answer 53

var regex = /\d+/g;

Question 54

Write the following using the constructor method:

var regex = /\d+/g;

Answer 54

var regex = new RegExp(‘\d+’, ‘g’);

Question 55

Why are regex literals preferred over regex constructor form?

Answer 55

Because you have to escape the string in the regex constructor form.

Question 56

When would you prefer to use the constructor form of the regex object?

Answer 56

When you are constructing a regex from a set of strings.

Question 57

The most common way to access properties in JavaScript is via..

Answer 57

dot notation

Question 58

The alternative way from dot notion to access a property is…

Answer 58

using brackets and a string (like an array).

var value = MyObject[‘thevalue’];

Question 59

What is another way to write:

array.push(12345);

Answer 59

array‘push’;

Question 60

Can you use variables to access the properties within an object?

Answer 60

Yes

var propertyname = 'push';
var array = [];
array[propertyname](12345);

Question 61

Which is the only reference type that does not return ‘object’ when typeof is used on it?

Answer 61

Functions. They return ‘function’.

Question 62

How can you determine if a variable is an array?

Answer 62

variable.constructor === Array;

You can also use instanceof

console.log(variable instanceof Array);

Question 63

How can you determine if a property of an object is an array?

Answer 63

obj.variable && obj.variable.constructor === Array

NOTE: We first determine if the property exists.

Question 64

If you create an array literal (i.e. not calling the constructor), what will the following return?

var variable = [];

console. log(variable.constructor === Array);
console. log(variable instanceof Array);

Answer 64

true
true

Even if you haven’t used the constructor, it will still return a valid result.

Question 65

Given a function literal (no constructor used) - what will the following return?

function chicken() {return 10;}

console. log(“Checking for a chicken constructor”);
console. log(chicken.constructor === Function);
console. log(chicken instanceof Function);

Answer 65

true
true

Even if you haven’t used the constructor, it will still return a valid result.

Question 66

What is the output of the following:

function chicken() { return 10; }

console. log(chicken instanceof Function);
console. log(chicken instanceof Array);
console. log(chicken instanceof Object);

Answer 66

true // Definitely a function
false // Definitely not an array
true // But being a reference type, is an Object

NOTE: instanceof can detect inheritence, every reference type inherits from Object.

Question 67

What is the catch with using instanceof on arrays?

Answer 67

Arrays can be passed within frames of a webpage - when you check an array that has come from another frame, the array has lost it’s context, and will not be reported as an array.

To fix this - you should use Array.isArray(variable);

Question 68

What is the gotcha with using Array.isArray(variable).

Answer 68

It’s doesn’t work in IE8 - it will work on all ECMAScript 5 environments. It should work in Node.js as well.

Question 69

If you can access methods on a primitive type, why aren’t they considered reference types?

Answer 69

Because JavaScript uses primitive wrappers behind the scenes, which encapsulates the primitive type when it’s created.

Question 70

When does the primitive type (string in this case) become autoboxed?

var mystring = "foobar";
console.log(mystring.charAt(0));

Answer 70

When the code tries to access the variable like an object (line 2)

Question 71

Why doesn’t the following work?

var num = 10;

num. chicken = “foobar”;
console. log(num.chicken);

Answer 71

The autoboxing occurs when num is accessed as an object. However, the primitive wrapper only lasts for the duration of that call - so when we try to access it in line 3, we get ‘undefined’.

Question 72

If temporary objects are created for primitive types, why does the following return false?

var string = "foobar";
console.log(string instanceof String);

Answer 72

Because the temporary objects are only created when the variable is read.

Question 73

There is a problem with using objects like a primitive type, what is it?

Answer 73

Because objects are not treated the same way as primitive types, you can get unexpected results when testing for truthiness.

var fun = new Boolean(false);
if (fun) {
   console.log("this is fun");
}

Even though fun is false, it will execute the “this is fun” line. This is because objects are always treated as true in a conditional statement.

Question 74

Should you manually instantiate primitive wrappers?

Answer 74

You can, but it can cause confusion (i.e. the issue with Boolean objects evaluating to true in a conditional statement, even if the value they contain is false).

Best to avoid it.

Question 75

What are the five primitive types?

Answer 75

Strings
Numbers
Booleans
null and 
undefined

Question 76

You can use typeof to test for the type of primitive type with the exception of…

Answer 76

null - which you should always compare with against null.

Question 77

What distinguishes a function from every other object?

Answer 77

An internal property named “[[call]]”

Question 78

Can the internal property (of functions) [[call]] be accessed via code?

Answer 78

No

Question 79

ECMA Script defines that the ‘typeof’ operator must return function for any object that has…

Answer 79

A property named [[call]]

Question 80

Older browsers may have an issue where RegEx objects are identified as…

Answer 80

functions - because they have a [[call]] property. But that is no longer the case, and SHOULDN’T be a problem.

Question 81

Which function declaration type is hoisted, function declaration or function expression?

Answer 81

Function declaration

Question 82

Why does function hoisting occur for function declarations?

Answer 82

Because the function name is known ahead of time.

Question 83

Will this code work?

var result = add(5, 3);

var add = function(num1, num2) { return num1 + num2; };

Answer 83

No - because function expressions aren’t hoisted and the function isn’t declared before it’s used.

Question 84

Does JavaScript use first class functions?

Answer 84

Yes

Question 85

Why are JavaScript functions considered first class functions?

Answer 85

Because you can use them anywhere you use any other reference type (parameters, assign to variables etc).

Question 86

Why can’t the default behavior of the ‘sort’ method deal with numbers effectively?

Answer 86

It converts numbers into a string and sorts them. This will not give you correct numerical sort.

Question 87

How do you make the behavior of the ‘sort’ method work for numbers?

Answer 87

Pass it a comparison function

var nums = [1, 2, 5, 4, 3, 6, 7, 9];
nums.sort(function(first, second)) {
    return first - second;
}

Question 88

You can pass how many arguments to a function, if the function specifies two parameters?

Answer 88

As many as you want - they will be stored in the functions internal “arguments” array.

Question 89

If you want to know the number of parameters a function expects, how do you find this out?

Answer 89

Read the length property on the function.

console.log(myfunc.length);

Question 90

What is one of the reasons that a IIFE (Immediately invoked function expression) is actually very useful?

Answer 90

They create their own execution contexts, which means all the variables and such within that context are immediately available. For instance, when creating a library of functions, there is risk of collision with variable names in your own application - this will avoid it by creating it’s own context.

Question 91

What is AMD?

Answer 91

Asynchronous Module Definition. It’s a specification (seen in Require.JS and Dojo Toolkit etc) that defines how to setup modules for asynchronous loading. This means, rather than loading one JS file after the other, you can load them all nearly simultaneously (even if there are dependencies), which increases load speed, fewer page errors etc).

Question 92

What is the lexical environment in JavaScript?

Answer 92

It’s a specification that defines how the identifiers to specific variables and functions relate to each other. It’s basically describing how the code within a function relates to each other based on it’s syntax / indentation etc.

Where this is important is in The Scope Chain. So for instance, the pointer to the Outer Environment (which is set in every execution context) is based on the lexical environment (not where the code is executed). So a function called within another function, if declared at the global level, will have its Outer Environment pointer referencing the global scope.

Question 93

What is the execution context?

Answer 93

The lexical environment defines how your code is related to each other (i.e. function blocks, nesting etc). The execution context refers to the currently running lexical environment.

Question 94

The name in a name/value pair may only be defined once in any one…

Answer 94

Execution context.

Question 95

What is the simplest possible definition of an object in JavaScript?

Answer 95

A collection of name value pairs.

Question 96

When you run a JavaScript program, the javascript engine creates two things for you in the global context - what are they?

Answer 96

The global object, and ‘this’.

Question 97

Is the global object always called ‘window’?

Answer 97

No - it depends on the environment (i.e. Node.js will be different). However, there is ALWAYS a global object.

Question 98

When we refer to variables that are global - what is the most basic definition of this?

Answer 98

Anything that is not inside a function - simple as that.

Question 99

If you have a Chrome console open, what is the easiest way to see the value of a variable?

Answer 99

Just type it’s name at the console prompt.

Question 100

What does the outer environment mean, and what is it’s relationship to the global context?

Answer 100

The outer environment refers to the encapsulating context of a bit of code. Like a function at the top level, it’s outer environment would refer to the global context.

The global context however doesn’t have an outer environment - as it’s as high as we can get.

Question 101

The execution context is created in how many phases?

Answer 101

Two

Creation phase
Execution phase

Question 102

Hoisting often is referred to as function / variable definitions being moved to the top of the code. But this is incorrect - how does it actually work?

Answer 102

There are two phases that are run when an execution context is created. The Creation phase and the Execution phase. During the Creation phase, the code is parsed for variables, and memory is allocated for variables and functions. This is called “Hoisting”. The code is not actually being moved. It’s just that the first pass allocated memory for variables/functions, before it’s executed.

Question 103

What happens during the creation phase of an execution context?

Answer 103

The global object is created
The this variable is created
The outer environment is set (if valid)
Memory space is allocated for variables/functions (hoisting)

Question 104

Why do functions allocated memory for both their name and content, while variables are only allocated memory - but no values are assigned during hoisting?

Answer 104

In order for memory to be allocated during the execution contexts creation phase, memory is assigned for the entire function. For variables, it’s only assigned for the type (not the actual value).

This is because values are assigned to variables during the execution phase.

Question 105

What is the placeholder that is put into a variable during the hoisting stage?

Answer 105

undefined

NOTE: This occurs with ALL variables, even ones with a value assigned to it. That’s why you will get an error if you attempt to access the variable before the value is assigned (even though you can see the variable due to hoisting).

Question 106

What is the difference between “not defined” and “undefined”?

Answer 106

Even though they seem to be the same thing, they are not. Not defined refers to when the compiler finds a token or variable that is being accessed, that has not been declared anywhere.

Undefined however is actually an internal javascript object that is used to identify variables that have not had a value assigned to them yet.

Question 107

What phase of running a javascript file is an Uncaught ReferenceError (i.e. a variable is not defined) reported?

Answer 107

During the execution phase. During the creation phase, no memory is assigned for the variable - during the execution phase it tries to access the variable and fails.

Question 108

Why is it a bad habit to set variables to undefined?

Answer 108

Because you are changing the meaning of undefined. By never setting undefined yourself, you can be sure that when you come across the value - it’s because the compiler set the value of the variable to undefined. By not changing the meaning, it will help with debugging.

Question 109

Is JavaScript single threaded?

Answer 109

Yes - despite what the browser may do to make it run, the javascript engine will for all intents and purposes, be single threaded.

Question 110

Is JavaScript Synchronous, or asynchronous?

Answer 110

Synchronous - because one line is executed at a time, one after the other.

Question 111

Invocation, or Invoking a function is what?

Answer 111

Running a function, you do this by using parenthesis.

myFunc();

Question 112

What happens when a function is called in JavaScript?

Answer 112

A new execution context is created, and put on top of the execution stack.

Question 113

In the context of the execution stack, which execution context is the one that is running?

Answer 113

The one on top of the stack (i.e. the last inserted)

Question 114

If you execute a function a(), how many execution contexts are on the execution stack?

Answer 114

Two - the global execution context, and the execution context for a. A will be on top of the stack as long as it is running.

Question 115

If you have the following:

function b() {}
function a() { b(); }
a();

What does the execution stack look like after b is invoked?

Answer 115

b() - execution context
a() - execution context
Global Execution Context

With b being on top of the stack

Question 116

When a new function is run, what happens?

Answer 116

Every function that is invoked creates a new execution context, which means it goes through the same phases, the creation phase, and the execution phase.

Question 117

What is a “variable environment”?

Answer 117

When discussing execution contexts, it refers to the locations that variables are stored. It’s somewhat analogous to scope.

Each execution context has it’s own variables environment, which is why you can create a variable named myVar at global, and function level, and there will be no collisions.

Question 118

With the concept of scope chains in mind, in the following code, what is the output:

function b() { console.log(myVar); }
function a() { var myVar = 2; b(); }
var myVar = 1;
a();

Answer 118

It may be tempting to say it’s 2 - because b() is executed within the execution context of a. However, the answer is 1.

This is because the scope chain uses the “outer environment” pointer to determine where to look for the variable. If it doesn’t exist the current execution context, it will check the execution context of the outer environment. It doesn’t necessarily go back through the execution stack.

What the outer environment pointer points to is based on the lexical environment. I.e. How you POSITION your code on the page, has an impact on the scope chain.

I.e. it’s not where the function is called from that defines how the scope chain searches for a variable - it’s where it is written in the file (lexical environment).

Question 119

The scope chain is based on what links?

Answer 119

The outer environment pointers - which in turn are based on the lexical environment (i.e. where in the source code the function was written).

Question 120

What is the difference in the execution contexts of the following two bits of code:

function b() { console.log(myVar); }
function a() { var myVar = 2; b(); }
var myVar = 1;
a();
/*----------------*/
function a() { 
    function b() { console.log(myVar); }    
    var myVar = 2; 
    b(); 
}
var myVar = 1;
a();

Answer 120

Nothing - they will create the same execution contexts.

Question 121

Given the following code, where do the Outer environment pointers point for each execution context?

function a() { 
    function b() { console.log(myVar); }    
    var myVar = 2; 
    b(); 
}
var myVar = 1;
a();

Answer 121

For the execution context of A - it points to the global execution context.

For the execution context of B - it points to the execution context of A.

Question 122

What happens if the variable is not found, and the compiler can’t find the variable in the outer lexical environments execution context?

Answer 122

It will then search the outer lexical environment of the outer lexical environment, until it reaches the global context.

Question 123

If JavaScript is Sycnrhonous, how does Asynchronous events work?

Answer 123

Events when they are occur are added to the Event Queue. When the main execution stack is empty, the JavaScript engine will then process the event queue.

If the event needs to run a function, the JS engine then creates an execution context for that event. The next event will not be processed until this new execution stack is empty again.

Question 124

Are Asynchronous Events, actually asynchronous?

Answer 124

No - they are placed in the event queue Asynchronously by the browser (which is external to the JS engine) - however, the actual events are executed synchronously.

Question 125

Can long running functions interrupt how event handlers are executed?

Answer 125

Yes - because it’s not truly asynchronous. If a function takes 5 seconds, then during that time, the events for click (or whatever you’ve setup) will be queueing up in the event queue.

Only once the long running function’s execution context, and the global context are finished, will it check the queue.

Question 126

What kind of ‘typing’ does JavaScript use?

Answer 126

Dynamic typing (as opposed to static typing)

Question 127

Is undefined an object, or a primitive type?

Answer 127

Undefined is a primitive type

Question 128

There is only one numerical primitive type in JavaScript, what is it, and how is it represented under the hood?

Answer 128

It’s Number - and it’s a 64bit floating point number under the hood. No matter what type of number it is intended to be.

Question 129

What is the new primitive type that ES6 adds?

Answer 129

symbol

Question 130

Are operators functions?

Answer 130

Yes, despite the fact their syntax is different, they are basically functions that operate on usually two parameters, but sometimes one and sometimes three.

Question 131

What is the notation called that describes the way parameters are given to binary operators?

Answer 131

infix notation (as opposed to prefix and postfix)

Question 132

What is operator associativity?

Answer 132

The order that operator functions get called in. Can either be left associativity, or right associativity.

This is relevant particularly when we have operator precedence, and a number of the operators have the same level of precedence.

Question 133

What is the associativity of the assignment operator?

var a = 2, b = 3, c = 4;
a = b = c;
console.log(a);
console.log(b);
console.log(c);

Answer 133

It’s right associativity.

a b and c will be equal to 4.

Question 134

What is coercion?

Answer 134

When a type is converted to a second type in order to complete an operation.

Question 135

Why does coercion happen so frequently in JavaScript?

Answer 135

Because it’s a dynamically typed language.

Question 136

How would the following be coerced?

var a = 1 + ‘2’;

Answer 136

12

The number 1 will be coerced to a string.

Question 137

What is the output of the following, and why?

console.log(3 lt 2 lt 1)

NOTE: I have to use lt rather than the arrow - because even using the HTML code for the lt character doesn’t work properly. Stupid, shithouse design.

Answer 137

true

Firstly operator precedence is equal for the two less than operators. And since the associativity is left to right. The left hand expression is evaluated first (i.e. 3 lt 2) which gives false.

Then due to coercion, false becomes 0, and 0 is lt 1 - which of course is true. And hence the output is true.

Question 138

Will undefined and null coerce to the same value?

Answer 138

No -

undefined coerces to NaN
null coerces to 0

Question 139

If null coerces to 0 when converting to a number, what does the following produce?

null == 0

Answer 139

false - null will not coerce to 0 when testing for equality.

Question 140

Where in code does boolean coercion occur as a matter of course.

Answer 140

If statements. Whatever you put in there, whether it’s undefined, null, or empty string. Then it converts to false.

Question 141

What is the caveat when using if statements to coerce a value to true / false?

Answer 141

If there is a possibility that the number 0 is a valid (i.e. true) response, you cannot test in this way. As 0 coerces to false. You can then test like this:

if (a || a === 0) {
}

Question 142

In the following statement, which order is the evaluation performed?

if (a || a === 0) {
}

Answer 142

The a===0 is performed first, because ‘===’ has a higher precedence than ||.

Question 143

Does the || operator return true / false?

Answer 143

No - it actually returns the value in the expression that can be coerced to true. so:

false || ‘chicken’

‘chicken’ will be returned.

Question 144

What is the following code doing?

var a = name || ‘Default Name’;

Answer 144

If the value ‘name’ is undefined, then ‘Default Name’ will be used. This is because the || doesn’t actually return true or false, it returns the value that can be coerced to true.

This allows you to write code (like the in the question) that can be used to set defaults.

Question 145

What will be returned in the following code?

“hi” || “hello”

Answer 145

“hi”

The closest value to the left that can be coerced to true, will be returned.

Question 146

What is the one caveat with using the following pattern?

var a = value || “10”;

Answer 146

If the value could possibly be 0, and be valid, this wont work - because it will evaluate to false, and the default value will be given.

Question 147

Does the script tag create a new execution context?

Answer 147

No - basically what happens is that all code within the scripts that are loaded via the script tag are concatenated and run like a single file.

Question 148

How do frameworks typically prevent collisions of their code with other frameworks?

Answer 148

They may create the code within a single object, then using the ‘or’ pattern check to see if it’s been defined previously.

window.fwObject = window.fwObject || fwObject

Question 149

What is the computed member access operator?

Answer 149

the square brackets, used to access properties on object.

person[];

Question 150

Why would you use the [] operator over the . operator to access objects?

Answer 150

You can pass variables to the [] operator. But generally, you’d use the . operator.

Question 151

What is another way to write the expression:

person.address.street;

Answer 151

person[‘address’][‘street’];

Question 152

What is another way of writing:

var person = new Object();
person.firstname = "steven";

Answer 152

var person = { firstname: ‘steven’ }

Question 153

How do you fake namespaces in JavaScript?

Answer 153

You can use objects as containers - and thus namespaces.

var foobar = {};

And add code to foobar - then we have a namespaced location in code inside foobar.

Question 154

What is wrong with the following code (assuming this is the only line of code in the file)?

person.address.street = “8 baltimore street”;

Answer 154

It will cause an error because address is not defined. This is because the . operator is left associative. When the code runs, it first looks for address - which is undefined, then tries to look for street, which is attached to an undefined object. Basically the expression boils down to:

undefined.street = “8 baltimore street”;

which cannot / will not work.

Question 155

Is JSON the same as Object Literal notation?

Answer 155

No

Question 156

What is the difference with regards to key-pairs in JSON as compared with Object literal notation?

Answer 156

In JSON the key values HAVE to be wrapped in quotes - whereas in Object literal notation - it’s optional.

Question 157

All JSON is valid Object literal notation syntax, true or false?

Answer 157

True

Question 158

All object literal notation syntax is valid JSON, true or false?

Answer 158

False

Question 159

How do you convert a JavaScript object into a string?

Answer 159

JSON.stringify(myObject);

Question 160

How you convert a string into a javascript object?

Answer 160

var str = '{ "firstname": "Caino" }';
JSON.parse(str);

Question 161

Functions are…

Answer 161

objects

Question 162

First class functions are…

Answer 162

You can do the same thing with functions, that you can do with other types (i.e. assign to variables, pass to functions).

Question 163

What are the two additional properties that functions have, that objects do not?

Answer 163

Name - Can be anonymous

Code - contains the code of the function (invokable by using the () operator)

Question 164

What’s the difference between using console.log on an object, and on a function?

Answer 164

With an object the contents of the object will be printed to the console. With a function, the actual code will be printed (but you wont be able to see any properties).

Question 165

Whats the major difference between an expression and a statement?

Answer 165

A statement does work, an expression is a unit of code that results in a value.

Question 166

What does a function statement look like?

Answer 166

function foobar() {
   console.log('hi');
}

Question 167

What does a function expression look like?

Answer 167

var anony = function() {
   console.log('hi');
}

Question 168

What is the ‘name’ value of the following function declaration?

var foobar = function() {

}

Answer 168

It doesn’t have one - it will be anonymous

Question 169

What is the problem with the following code?

foobar();

var foobar = function() { console.log(‘chicken’); |

Answer 169

Function expressions are not hoisted, therefore it will be undefined.

Question 170

What is one reason you might actually want to provide a name for an anonymous function?

Answer 170

When debugging, you’ll see the name of the function in the stack trace.

NOTE: Not all browsers support this.

Question 171

If you provide a name to a function expression, is it still called an anonymous function expression?

Answer 171

No, it’s now called a named function expression.

Question 172

If you have the following code:
var a = 2;
var b;

b = a;

What is b actually pointing to?

Answer 172

b is actually pointing to a second copy of the value in a (2). The variables a and b contain different memory addresses.

This is called “by value”

Question 173

What is meant by “by value”

Answer 173

When assigning a variable to another variable, the value that is pointed to by the first variable is copied to a new location - and the variable has a new pointer to it.

Question 174

What values are by reference in JavaScript?

Answer 174

Objects / functions

Question 175

What values are by value in JavaScript

Answer 175

Primitive types

Question 176

Given the following code:
var a = { greeting : 'hello' }
var b = a;
a = { animal: 'chicken' }

What does a and b contain?

Answer 176

a will contain { animal: ‘chicken’ }, b will contain { greeting: ‘hello’ }

This is because the = operator sets up new memory, so by value doesn’t apply when a new variable detected.

Question 177

What does the ‘this’ variable point to in the following code (assuming it’s the only code in the file)?

function a() {
    console.log(this);
}

Answer 177

The window object

Question 178

Is the following code valid, if so why?

function a() {
    this.newVariable = 10;
}

console.log(newVariable);

Answer 178

Yes, because the this variable in the function points at the window (or global) object.

Question 179

Why is it that the this variable points to the window object when you declare a global function?

Answer 179

Because the function is essentially attached (as a method) to the window / global object. The this variable doesn’t usually refer to the method itself, but it’s enclosing object. (think OO programming).

Question 180

What will the "this" variable point to here?
var c = {
   log: function() {
      console.log(this);
   }
}
c.log();

Answer 180

The c object.

Question 181

What is the value of a.name after executing the following code?
var a = {
    name: 'chicken',
    log: function() {

    this. name = 'dog';
    console. log(this.name);

        function changeName(newname) {
            this.name = newname;
        }

    changeName('bird');
    console.log(this.name);
} }

Answer 181

Dog. This is due to a bug in JavaScript - the changeName function within the log method, will attach the name variable to the global object, as if the function was declared at global scope. You might have expected that it would in fact set the name on the a object to ‘bird’ - but in fact no, it doesn’t.

This is because when the execution context of the internal function (changeName) is created, it’s this variable is pointing at the global object.

Question 182

What pattern can we use to solve the issue the this variable pointing to the global object, for functions that are created within methods of an object?

Answer 182

You can store a reference to the this object at the first level of the method.

var a = {

name: 'chicken',
log: function() {

    var self = this; // THIS IS THE PATTERN

    self. name = 'dog';
    console. log(self.name);

        function changeName(newname) {
            self.name = newname;
        }

    changeName('bird');
    console.log(self.name);
} }

Question 183

Can a function be stored in an array?

Answer 183

Yes

Question 184

When the execution context is created for a function, what keyword is setup to store the parameters that are passed to the function?

Answer 184

The ‘arguments’ keyword

Question 185

Can you set a default value for a parameter in JS?

Answer 185

No - but you will be able to in ES6.

Question 186

Is the arguments variable that is found in functions an array?

Answer 186

No - it’s array ‘like’. You can see this when you look in the console, the brackets for arguments is italicised. This is indicating it’s not actually an array. It doesn’t have all the features of an array.

Question 187

What is a SPREAD?

Answer 187

It’s the replacement for the “arguments” variable found within functions. It will allow you to specify a name of an array like structure that will store any additional values that are passed to a function.

function foobar(a, b, c, …other) {

console. log(arguments);
console. log(other);

console.log("In other"); }

foobar(‘a’, ‘b’, ‘c’, ‘d’, ‘e’);

// NOTE: d and e will be elements within the ‘other’ array

Question 188

Is arguments going to be deprecated in ES6?

Answer 188

Yes.

Question 189

What is one approach to dealing with the fact JS doesn’t have function overloading?

Answer 189

Generally it’s not an issue, since we can pass as many or as few parameters as we want to a function. But one method is to wrap our calls in different functions.

function greet(firstname, secondname, lang) {}

function greetEnglish(firstname, secondname) {
    greet('Chicken', 'Steve', 'en');
}

function greetSpanish(firstname, secondname){
    greet('Chicken', 'Licken', sp');
}

Question 190

What is wrong with the folllowing code?

function foobar() {
    return 
    {
        firstname: 'chicken'
    }
}

foobar();

Answer 190

Because the opening bracket of the object literal is placed on next line after the return, the syntax parser will automatically insert a semicolon. That means this code is simply running:

return;

And will be undefined. You’d have to make sure the opening bracket is on the same line as the return.

Question 191

Why do people always write javascript with the { after the functions / statements etc.

Answer 191

It’s not required, and often it’s just style, but there is also an argument to be made that it’s good for muscle memory - i.e. in some cases (like declaring an object literal after a ‘return’ statement, you MUST put the opening brace on the same line as the return). Therefore, by just making this a habit, it will avoid long term issues.

Question 192

Which variables are attached to the global object in the following code:

function foobar() {
   var a = 10;
   b = 20;
   var c, d;
}

Answer 192

Only the variable b.
a and c is declared with var, and is local to foobar. With d, even though it’s separated by a , - it is still declared with var according to the parser.

Question 193

What is an IIFE?

Answer 193

Immediately Invoked Function Expression.

var foobar = function() {
    return value;
}();

Question 194

Why do IIFE’s work, what property that functions have makes this possible?

Answer 194

The fact that every function is essentially an object that has a code property that contains the functions code - means you can actually invoke the function as it’s created and run the code immediately. Essentially, you can directly invoke the function expression by using parenthesis.

Question 195

When you write an IIFE like this, what gets assigned to foobar?

var foobar = function(value) {
    return 'Hello' + value;
}('Steve');

Answer 195

Hello Steve

The function object is no longer assigned (as per a typical function expression) - it’s the result of the function.

Question 196

What is wrong with the following code?

function(value) {
    return 'Hello' + value;
}

Answer 196

Because it’s an expression - (i.e. there is no function name, so it’s not a statement), then it’s going to throw an error.

Question 197

How do you write an IIFE that simply runs without assigning a value to a variable?

Answer 197

var value = ‘chicken’;

(function(value) {
return ‘Hello’ + value;
}(value));

Question 198

Which is the correct way to invoke an IIFE?

}(anyvars));
or
})(anyvars);

Answer 198

Either is actually find - there is not a specifically correct form of this syntax. However, you must be consistent.

Question 199

Does an IIFE have it’s own execution context?

Answer 199

Yes - and that means it encapsulates it’s variables.

Question 200

What is one purpose for an IIFE?

Answer 200

You can use it as a kind of namespacing - for instance, if you make a library, and you want to make sure no other code can colide with it - then you can wrap it in an IIFE. The IIFE won’t collide with anything because it’s anonymous.

Question 201

How would you access the global object from within an IIFE?

Answer 201

(function(global) {
    // Do stuff with the global object
}(window));

Question 202

Why would you use the name “global” inside the IIFE rather than “window” which is the global object?

Answer 202

Because “window” may not be the global object in all environments - particularly on the server. But you will still want a global object reference.

Question 203

How would you invoke the following code, such that you pass it both the “whattosay” variable and the “name”?

function greet(whattosay) {
    return function (name) {
        console.log(whattosay + ' ' + name);
    }
}

Answer 203

greet(‘Hi’)(‘Tony’);

Question 204

Why does the variable “whattosay” able to be accessed AFTER the call?

function greet(whattosay) {
    return function (name) {
        console.log(whattosay + ' ' + name);
    }
}
var say = greet('Hi');
say('Tony'); // Why do I still get access to hi here?

Answer 204

Because it’s a closure. A closure will maintain the variables from the context that it was called in - and be able to access them.

Question 205

When an execution context is finished, are variables automatically removed with the context when it’s popped off the stack?

Answer 205

No - they are in fact treated separately - due to garbage collection. If there is a reference to those variables (i.e. from a closure) then they will remain until there is no longer any references.

Question 206

How does a the code within a closure find a variable it’s referencing, if the surrounding execution context is no longer on the stack?

Answer 206

Because the variables still exist in memory (as there are references to them). The closure will use the scope chain to find them, and since the closure still has a reference to the outer functions memory, it will be able to find the variables.

This is sometimes referred to as “closing in” - the execution context of the closure has “closed in” the variables it would have had access too anyway.

Question 207

What is the gotcha with the following code:

function buildFunctions() {
    var arr = [];

for (var i = 0; i

Answer 207

When you access the functions:

var myfunc = buildFunctions();

myfunc0;
myfunc1;
myfunc2;

This will output:

3
3
3

This is because the functions are referencing the final state of the outer counter, not actually storing it’s value each time.

Question 208

What is the name of a variable that is outside of a function, but accessible as a result of being a part of a closure?

Answer 208

A “free” variable.

Question 209

How would you fix the following code in ES6, such that the following code would operate as expected (outputing 0, 1, 2)?

function buildFunctions2() {
    var arr = [];

for (var i = 0; i

Answer 209

You can use the ‘let’ declaration syntax, which will do the trick. They become sub-segmented as separately scoped variables.

function buildFunctions2() {
    var arr = [];

for (var i = 0; i

Question 210

How would you fix the following code in ES5, such that the following code would operate as expected (outputing 0, 1, 2)?

function buildFunctions2() {
    var arr = [];

for (var i = 0; i

Answer 210

You can use an IIFE to create individual execution contexts that store the value of i at each iteration in it’s execution context.

function buildFunctions2() {
    var arr = [];

for (var i = 0; i

Question 211

How can you use closures to make a function factory?

Answer 211

function makeGreeting(language) {

    return function(firstname) {
        if (language === 'en') {
            console.log('Hello ' + firstname);
        }

        if (language === 'es') {
            console.log('Hola ' + firstname);
        }
    }
}

var greetEnglish = makeGreeting('en');
var greetSpanish = makeGreeting('es');

greetEnglish(‘Jizzbo’);
greetSpanish(‘Balthazar’);

Question 212

Functions being objects, they get access to three special functions that are useful when dealing with the ‘this’ variable. What are they?

Answer 212

Call
Apply
Bind

Question 213

In the following code, logName is external to the person object - how would you convert this code, so that it will run?

var person = {
    firstname: 'John',
    getName: function() {
        var fullname = this.firstname;
        return fullname;
    }
}

var logName = function() {
    // This will cause an error
    console.log('Logged: ' + this.getName());
}

Answer 213

You need to bind the person object to the logName function:

var logPersonName = logName.bind(person);
logPersonName();

This will make sure logName is executed such that it’s execution context has it’s external pointer pointing at the person object.

Question 214

Assuming we have a person object, and we want to access one of it’s methods using the ‘this’ variable - how could we do it in a different way to this code:

var person = { // stuff };

var logName = function() {
    console.log('Logged: ' + this.getName());
}

var logPersonName = logName.bind(person);
logPersonName();

Answer 214

var logName = function() {
    console.log('Logged: ' + this.getName());
}.bind(person);

Question 215

What is the purpose of the call method on a function?

Answer 215

It invokes the function and sets the ‘this’ variable to the object passed to it.

myFunc.call(objectname, param1, param2);

NOTE: Parameters are optional

Question 216

What is one difference between bind and call?

Answer 216

Bind makes a copy of the function, while call actually executes it.

Question 217

What is the difference between ‘call’ and ‘apply’?

Answer 217

They are basically exactly the same. Call and Apply will invoke the function (instead of copying it like bind does) - but Apply requires any parameters passed to it to be in an array form.

myFunc.apply(myObj, [param1, param2]);

Question 218

Can you use call and apply on an IIFE?

Answer 218

Yes - although, it wont be an IIFE anymore, as you don’t use the () operator to invoke it - you use call/apply to invoke it.

(function(param1) {

}).call(myobject, param1);

Question 219

What is function borrowing?

Answer 219

Using call or apply, you can borrow the functions from one object, and use the data from another object on it. i.e.

var person1 {
    name: 'sue',
    getName: function() {
        console.log(this.name);
    }
}

var person2 {
name: ‘BillyBob’
}

person1.getName.call(person2);

Question 220

When you use bind to pass a variable to a function, what happens to that parameter?

Answer 220

The parameter is permanently set. Therefore you can create a function like such

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

var multiplyByTwo = multiply.bind(this, 2);
// Then use it, but you only pass the second
// parameter
console.log(multiply(10));
// Results in:
20

Question 221

What will be the result of the following function:

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

var multiplyByTwo = multiply.bind(this, 2);
console.log(multiplyByTwo(3, 10));

Answer 221

The first parameter given is actually used as the second parameter (since the function was bound - and the first parameter was fixed at that point). The second parameter passed to the function will be essentially ignored.

Question 222

What is function currying?

Answer 222

Creating a copy of a function, but with some preset parameters. Very useful in mathematics libraries.

Question 223

The function passed to mapForEach only makes use of one parameter - how could you pass it a custom function that would would allow you to use both a limiter and the item to perform a comparison. i.e. “return limiter > value”.

function mapForEach(arr, fn) {
    var newArr = [];
    for(var i = 0; i

Answer 223

You can use bind to fix the first parameter.

var arr1 = [1, 2, 3];
var checkLimit = function(limiter, item) {
     return limiter > item;
}

var arr2 = mapForEach(this, checkLimit.bind(this, 1));

NOTE: ‘this’ needs to be passed - but isn’t used. 1 is the limit, so anything greater than 1 will return true. Bind makes a copy of the function checkLimit and forces the first paramter

Question 224

Do all objects have a prototype property?

Answer 224

Yes, even functions

Question 225

In functional programming you should be careful not to…

Answer 225

mutate data passed into a function. It’s fine to return NEW data, but you shouldn’t mutate data coming into a function.

Question 226

Can a prototype have it’s own prototype?

Answer 226

Yes

Question 227

If you try to access a member variable, and it doesn’t exist on the object, or its prototype, what will the javascript engine do next?

Answer 227

It will chck to see if it exists on the prototypes prototype (and so on, until it can’t search anymore).

Question 228

When an object has a prototype (and that prototype may have another prototype) - what is this called?

Answer 228

The prototype chain

Question 229

Why shouldn’t you set your prototype directly?

Answer 229

It’s a performance issue

Question 230

How do you set the prototype of an object directly?

Answer 230

obj1.__proto__ = obj2;

Question 231

When you call an inherited method, the this variable works correctly, why is this?

Answer 231

The execution context of the method points to the calling object, not the one that it was created on.

Question 232

Rather than calling bind all the time, how could you wrap a function in such a way, that you can preset the bound value?

Answer 232

var checkLimit = function(limiter) {
    return function(limiter, value) {
        return value > limiter;
    }.bind(this, limiter);
}

NOTE: That we do the bind within the function, and that function that is created is returned to the caller.

Question 233

In functional programming you should be careful not to…

Answer 233

mutate data passed into a function. It’s fine to return NEW data, but you shouldn’t mutate data coming into a function.

Question 234

What does an object in javascript have it’s __proto__ property set to?

Answer 234

Object {}

Question 235

What does a function have it’s __proto__ property set to?

Answer 235

function Empty() {}

Question 236

What does an array have it’s __proto__ property set to?

Answer 236

[]

Yes - this is an object

Question 237

How do arrays, objects, functions etc have access to default functions and properties (such as apply, call etc)?

Answer 237

They are all objects, and their __proto__ property points to a default object provided by the javascript engine. That object has the appropriate methods / properties for that object type. Thanks to the prototype chain, it can find the function you request (on the prototype)

Question 238

If you check the __proto__ property of an object, and look at IT’s __proto__ property, what will it point to?

Answer 238

Object {}

Question 239

What is at the bottom of the prototype chain for all objects?

Answer 239

Object{}

Question 240

What is the value of __proto__ for the built in Object{}?

Answer 240

null

Since it’s bottom of the chain - it makes no sense for it to have any links to a prototype object.

Question 241

What is the prototype of a functions prototype?

var a = function() {};
a.\_\_proto\_\_.\_\_proto\_\_;

Answer 241

Object{}

Question 242

How do you get a list of all the properties on an object?

Answer 242

for (var prop in myObject) {

}

Question 243

How do you list the values of all the properties on an object?

Answer 243

for (var prop in myObject) {
console.log(prop + ‘: ‘ + myObject[prop]);
}

Question 244

If you use the “for in” statement on an object - does it get things off the prototype as well as the object itself?

Answer 244

Yes - it gets it from both.

Question 245

If you are using the “for in” statement to report all the properties on that object, how do you make sure they are TRULY properties on that object, and not part of the prototype?

Answer 245

You can use the function “hasOwnProperty”

for (var prop in myObj) {
    if (myObj.hasOwnProperty(prop) {
         // print stuff out
    }
}

Question 246

What data is being checked by the hasOwnProperty?

Answer 246

the property metadata.

Question 247

Why is the following code a bad idea?

function Person() {
   this.name = "Steveo";
   return { lastname: 'Billyblogs' };
}

var newObj = new Person();

Answer 247

When you are using new on a function constructor, you should never return a value in that function - it will get in the way of the JavaScript engines process. (i.e. newObj will not be equal to a Person object.)

NOTE: It is possible to return a value in a function constructor, as long as that is basically the object that was created by new. See jQuery library for example: return jQuery.makeArray( selector, this );

Question 248

What is the name of a function that is used specifically to create objects?

Answer 248

function constructor

Question 249

What does the new operator actually do to a function constructor?

Answer 249

It creates a new empty object (of the type of the function) and sets the internal this property to point to it. It then returns a pointer to that object. NOTE: It also invokes the function constructor as part of this process.

Question 250

Do function constructors take parameters?

Answer 250

Yes - like any other constructor in OO programming.

function foobar(name) {
   this.name = name;
}

Question 251

The prototype property exists on all functions, regardless of whether it’s being used as a function constructor, true or false?

Answer 251

true.

Question 252

Why wouldn’t you just add methods to the function constructor, rather than it’s prototype?

Answer 252

Because each time you create that object, you will be creating new memory to store that method. By adding it to the prototype, you share that memory between every object that was created via the prototype property.

Question 253

What is the difference between __proto__ and prototype?

Answer 253

__proto__ is the ACTUAL object that is used in the prototype chain to look up properties and methods. function.prototype is the object that is used to create the __proto__ when you use new.

Question 254

Why are built in constructors for primitive types (Numbers, Boolean, String) are potentially dangerous?

Answer 254

By using built in function constructors to create primitive types, you run the risk of causing problems with the === operator (because a primitive and a value created from a function constructor will not be equal when using the === operator).

The important takeaway is that using new with a function constructor (even an inbuilt one) - creates an object, not a primitive, and that can make code confusing.

Question 255

If you get an undefined error when you use an object created from a function constructor - what’s likely the cause?

Answer 255

You forgot the ‘new’ operator when creating the object.

Question 256

What convention can you employ to try and mitigate the potential to forget to call ‘new’ when using a function constructor?

Answer 256

You can make sure you name all of your functions that are function constructors with the first letter capitalised. This can give you a visual clue when scanning for errors.

Question 257

What are some examples of internal function constructors in JavaScript?

Answer 257

Number
String
Boolean

Question 258

When you create a Number like such:

var a = new Number(10);

Are you creating a primitive?

Answer 258

No - you creating an object, with the primitive (number 10) ‘boxed’ inside.

Question 259

How do you create an object using the “create” method?

Answer 259

var person = {
   firstname: 'Default',
   greet: function() { return 'hi ' + this.firstname; }
}

var john = Object.create(person);

john. firstname = “John”;
console. log(john.greet());

Question 260

Is the following code valid?

String.prototype.isLengthGreaterThan = function(limit) {
return this.length > limit;
}

Answer 260

Yes - but… you have to be careful. This is very powerful.

Question 261

The following is valid:
“string”.length

Is the following valid?
3.isGreaterThan();

(NOTE: I added the isGreaterThan function to the prototype - so it’s a valid function)

Answer 261

No - the JavaScript engine will automatically convert a string to an object, but numbers are not automatically converted.

Question 262

When dealing with dates - what’s a good library to use?

Answer 262

moment.js

Question 263

When is using the function constructor of a primitive type wrapper a desired feature?

Answer 263

When converting a value - however, we don’t use the new operator in this case. And thus we are not creating an object.

Question 264

the “for in” pattern works fine with arrays (because they are objects after all) - but why shouldn’t you use it? And what should you use?

Answer 264

You shouldn’t use it because frameworks and other code may add properties (including functions) to the base array prototype. If it does that - they “for in” will output those properties or methods as part of the array, screwing over your code. That’s because even the values you store in an array, are just a key / value pair.

You should use a standard for loop.

Question 265

What is a polyfill?

Answer 265

It’s code that adds functionality that older engines / browsers may lack.

Question 266

How do you create an object using the “create” method?

Answer 266

var person = {
   firstname: 'Default',
   greet: function() { return 'hi ' + this.firstname; }
}

var john = Object.create(person);

john. firstname = “John”;
console. log(john.greet());

Question 267

What will

var a = 3;
console.log(typeof a);

output?

Answer 267

number

NOTE: It’s not uppercase - it’s just a string describing the type.

Question 268

What will

var a = "foobar";
console.log(typeof a);

output?

Answer 268

string

NOTE: It’s not uppercase - because the engine is just stating what it is - it’s not an object

Question 269

What will

var a = [];
console.log(typeof a);

output?

Answer 269

object

• NOTE: This is a problem!

Question 270

How can you determine whether a variable is an array?

Answer 270

var a = [];
console.log(a.prototype.toString.call(a));

NOTE: This will report:

[object Array]

Question 271

If you use “use strict” at the function scope - does that allow “errors” to be made outside of that scope?

Answer 271

Yes - you can have code outside that function that will run fine - but will not run fine inside that execution context because of the “use strict” tag.

Question 272

What is one caveat with using the “use strict” flat at the top of a file?

Answer 272

When pushing scripts live, they may be concatenated, and files that weren’t meant to have “use strict” now have it included.

Question 273

How do you implement method chaining?

Answer 273

Make sure your functions return the ‘this’ variable. That way you can chain methods together, with each one affecting the original object.

Question 274

You don’t always have access to the console in JavaScript (different hardware / environment) - how do you guard against this?

Answer 274

if (console) {
console.log(“Stuff!”);
}

NOTE: Internet explorer doesn’t have a console object unless the console is open.

Question 275

Why might you see a semi colon before an IIFE in a library?

;(function() {
   // Do stuff here?
}());

Answer 275

It is a safety measure - if you are including other libraries before your code, the programmers of that code may forget to close out it’s semi colons properly. This will make sure your code is robust.

It’s not always used though - but you may see it.

Question 276

What is transpiling?

Answer 276

When a compiler takes one language and compiles it to another.

Question 277

Name some JavaScript anti-patterns?

Answer 277

Poluting the global namespace
Inline JavaScript
Using eval() incorrectly
document.write()
modifying default classes prototypes

Question 278

How do you insert a cell into a table in JavaScript?

Answer 278

var myTab = document.getElementById('myid')
var row = myTab.insertRow(0)
cell1 = row.insertCell(0);
cell2 = row.insertCell(1);

Question 279

How would you create a button using a bootstrap icon from scratch in javascript.

Answer 279

button1icon = document.createElement(‘SPAN’);
button1icon.className = ‘glyphicon glyphicon-remove’;
button1 = document.createElement(‘BUTTON’);
button1.className = ‘btn btn-xs btn-danger’;
button1.appendChild(button1icon);
cell4.appendChild(button1);

NOTE: Using bootstrap - and cell4 was previously created.

Question 280

What’s the best way to avoid global pollution of variables?

Answer 280

Use an IIFE to wrap the code.

Question 281

What is one way to create a module?

Answer 281

Encapsulate all your module code within an IIFE and store that in a variable. Then within the IIFE, return an object that exposes the desired methods.

var fooController = (function() {
    function playTrack() { // Do code stuff here}    

    return {
       play: function() {
           play: playTrack();
       }
    }
}());

fooController.play();

Question 282

What is FOUC?

Answer 282

Flash of Unstyled Content - i.e. when the browser displays the page briefly, but it has not been styled.

Question 283

What is a getter / setter in Javascript?

Answer 283

It’s a syntax that binds an object property to a function that is called when that property is looked up.

{
    set myValue() {
    },
    get myValue() {
    }
}

Question 284

Setters and getters are a really useful feature, however, they are not supported by browsers as recent as IE9 - what can we do to support the same functionality?

Answer 284

Instead of using:

set myValue() { }

We can give the object a property called set.

set: function() { }

And instead of assigning:

myObject.myValue = 0;

We do:

myObject.set(0);

Question 285

textContent is a property that exists on modern browsers - but does something very similar to innerHTML - rather than giving the code both options - why not just stick with innerHTML since it’s used almost everywhere?

     if (element.textContent != null) {
          element.textContent = text;
     } ese {
          element.innerHTML = text;
     }

Answer 285

textContent is newer, and liekly a better performing method, so it makes sense to check that it exists and use it if so.

Question 286

What does a facade pattern do?

Answer 286

It provides one interface which abstracts away a more complex interface (or set of interfaces). It is a higher level interface, that makes working with the lower level interface(s) easier.

Question 287

What is one common but simple use for the facade pattern in JavaScript?

Answer 287

To hide the complexities inherent with multiple browser API’s (backwards compatibility).

Question 288

The Adapter pattern is often used to…

Answer 288

Convert between two incompatible interfaces.

Question 289

What is the difference between an adapter and a facade pattern?

Answer 289

At first, it can seem like they are very similar. However, a facade is about simplifying an interface. It may take a single input and perform multiple actions behind the scenes.

However an adapter is more about linking two incompatible interfaces.

Question 290

What does document.createTextNode do?

Answer 290

It creates a bit of text that would normally be placed within an element (div etc). It’s very similar to myElement.innerHTML.

Question 291

How could you use ‘hasOwnProperty’ to choose which method to call?

Answer 291

Say you have an object literal - and the function names match the potential input to a function. i.e. you pass in an element name ‘td’ to be created. Your object literal that has creates the td element has a function called td. You can use logic like:

if (elementHandlers.hasOwnProperty(‘td’)) {
elementName = elementHandlers‘td’;
}

NOTE: You wouldn’t actually pass ‘td’ to the functions, you’d use a variable. That way you can have this single bit of code call whatever function matches the input by the user.