JavaScript 3 Flashcards
What is a three step ‘algorithm’ for creating a JavaScript object?
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.
Is there a JavaScript equivalent of the ‘final’ keyword in Java that declares instance variables as constants?
No
If I want to emulate a static function on a JavaScript object, where do I declare the function?
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.
The expression ‘o instanceof c’ returns true if…
the object o inherits from c.prototype - the relationship does not have to be direct.
In JavaScript - Constructors act as the public identity, but the formal identity resides with the…
‘prototype’.
Does the following function declaration have a constructor name?
var Complex = function (x) { .... };No
Does the following function declaration have a constructor name?
var Complex = function Complex(x) { …. };
Yes - it will be Complex.
A set is…
A data structure that holds a collection of values with no duplicate values.
The job of toLocaleString is to…
Convert a string in a locale sensitive method
The job of valueOf is to…
Convert the object into a primitive value when used in a numeric context.
What method invokes the toJSON method on an object?
JSON.stringify()
JavaScript equality operators evaluate object equality by…
Reference not the values - i.e. it checks that they point to the same object.
How should you implement equality testing in JavaScript?
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.
If the < or <= operators are called on an object, what function is called to perform the test?
The valueOf() method is called to see if it can compare using the result of that method.
What method should be used instead of using the less than / greater than operators?
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;
B is a subclass of A. If method B.method wants to call the overridden method A.method, what is this called?
Method chaining
B is a subclass of A. If we want to call the overridden constructor A from B - what is this called?
Constructor chaining
The key to subclassing in JavaScript is the proper initialisation of the…
prototype object - if B extends A, then B.prototype must be an heir of A.prototype
What two lines of code are the most important part of subclassing in JavaScript?
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.
How would you get the width of a window?
window. innerWidth
window. outerWidth
You may have to take into account the scrollbar though
Is the use of querySelector and querySelectorAll okay?
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).
Write a simple query that returns all elements with the class “foobar”…
var allFoobars = document.querySelectorAll(“.foobar”);
What selector syntax is used with querySelector and querySelectorAll?
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
If you use querySelector on a class, and there are multiple elements with this class, which one does it return?
The first one it finds.
How can you reference the HTML element directly via JavaScript?
document.documentElement
What is the best way to determine if JavaScript is running?
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.
True or false, a variable holding a primitive type in Javascript really directly contains the primitive, and not a reference?
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”.
What will the following print out?
console.log(typeof null);
object
It’s technically an error in the JavaScript specification
Since typeof null returns ‘object’, what’s the best way to tell if you have a null value?
Compare directly
if (value === null) {}
What is the output for the following two lines?
console. log(“5” == 5);
console. log(“5” === 5);
true
false
That’s because == will coerce the value of “5” into an integer.
What is the output for the following two lines?
console. log(undefined == null);
console. log(undefined === null);
true
false
If you have a variable:
var val = true;
What is the value after the following line:
var newval = val.toString();
“true”
It will convert true to a string.
Primitive values have methods, are primitive values considered to be objects in Javascript?
No
A javascript object could be thought of as a…
hashtable
Objects are represented by…
reference types
Reference values are synonomous with…
objects
Any function can be a…
constructor
By convention, constructors begin with…
an uppercase letter to differentiate them from other non-constructors
Reference types store the object directly in the variable, true or false?
false.
They store the address in the variable (and are therefore like a pointer).
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?
var object = new Object(); object = null;
Assign null to it.
What is the output of the following:
var object1 = new Object(); var object2 = object1;
object1. myCustomProperty = “superman”;
console. log(object2.myCustomProperty);
Superman
Because they are reference types, they both point to the same object. Adding a property on one, makes it appear on the other.
What are the built in reference types?
Array Object Error Date Function RegExp
A ‘literal’ is what?
syntax that allows you to define a reference type without explicitly creating an object, using new and the constructor.
How do you create an object with the object literal syntax?
var object = {
name: “The principles of OOP JS”,
year: 2014
};
Which is valid?
var object = { "superman": "yup" }
var object2 = { superman: "Oh yup" }
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.
The following is logically equivalent to what?
var object = {
“superman”: “yup”,
“chicken”: “soup”
}
var object = new Object();
object. superman = “yup”;
object. chicken = “soup”;
Does using an object literal (i.e. var obj = { }) call the constructor?
No, and that is true for all object literals.
How do you declare an array literal?
var array = [‘red’, ‘green’, ‘blue’];
var array = [‘red’, ‘green’, ‘blue’];
Is equivalent to…
var array = new Array(‘red’, ‘green’, ‘blue’);
The most common way to declare a function is…
To use the literal form.
function reflect(value) {
return value;
}
Declare the following using the constructor form:
function reflect(value) {
return value;
}
var reflect = new Function(“value”, “return value;”);
Why is using a constructor to create a function a bad idea?
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.
Declare a regular expression literal that matches one or more numbers.
var regex = /\d+/g;
Write the following using the constructor method:
var regex = /\d+/g;
var regex = new RegExp(‘\d+’, ‘g’);
Why are regex literals preferred over regex constructor form?
Because you have to escape the string in the regex constructor form.
When would you prefer to use the constructor form of the regex object?
When you are constructing a regex from a set of strings.
The most common way to access properties in JavaScript is via..
dot notation
The alternative way from dot notion to access a property is…
using brackets and a string (like an array).
var value = MyObject[‘thevalue’];
Can you use variables to access the properties within an object?
Yes
var propertyname = 'push'; var array = []; array[propertyname](12345);
Which is the only reference type that does not return ‘object’ when typeof is used on it?
Functions. They return ‘function’.
How can you determine if a variable is an array?
variable.constructor === Array;
You can also use instanceof
console.log(variable instanceof Array);
How can you determine if a property of an object is an array?
obj.variable && obj.variable.constructor === Array
NOTE: We first determine if the property exists.
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);
true
true
Even if you haven’t used the constructor, it will still return a valid result.
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);
true
true
Even if you haven’t used the constructor, it will still return a valid result.
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);
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.
What is the catch with using instanceof on arrays?
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);
What is the gotcha with using Array.isArray(variable).
It’s doesn’t work in IE8 - it will work on all ECMAScript 5 environments. It should work in Node.js as well.
If you can access methods on a primitive type, why aren’t they considered reference types?
Because JavaScript uses primitive wrappers behind the scenes, which encapsulates the primitive type when it’s created.
When does the primitive type (string in this case) become autoboxed?
var mystring = "foobar"; console.log(mystring.charAt(0));
When the code tries to access the variable like an object (line 2)
Why doesn’t the following work?
var num = 10;
num. chicken = “foobar”;
console. log(num.chicken);
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’.
If temporary objects are created for primitive types, why does the following return false?
var string = "foobar"; console.log(string instanceof String);
Because the temporary objects are only created when the variable is read.
There is a problem with using objects like a primitive type, what is it?
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.
Should you manually instantiate primitive wrappers?
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.
What are the five primitive types?
Strings Numbers Booleans null and undefined
You can use typeof to test for the type of primitive type with the exception of…
null - which you should always compare with against null.
What distinguishes a function from every other object?
An internal property named “[[call]]”
Can the internal property (of functions) [[call]] be accessed via code?
No
ECMA Script defines that the ‘typeof’ operator must return function for any object that has…
A property named [[call]]
Older browsers may have an issue where RegEx objects are identified as…
functions - because they have a [[call]] property. But that is no longer the case, and SHOULDN’T be a problem.
Which function declaration type is hoisted, function declaration or function expression?
Function declaration
Why does function hoisting occur for function declarations?
Because the function name is known ahead of time.
Will this code work?
var result = add(5, 3);
var add = function(num1, num2) { return num1 + num2; };
No - because function expressions aren’t hoisted and the function isn’t declared before it’s used.
Does JavaScript use first class functions?
Yes
Why are JavaScript functions considered first class functions?
Because you can use them anywhere you use any other reference type (parameters, assign to variables etc).
Why can’t the default behavior of the ‘sort’ method deal with numbers effectively?
It converts numbers into a string and sorts them. This will not give you correct numerical sort.
How do you make the behavior of the ‘sort’ method work for numbers?
Pass it a comparison function
var nums = [1, 2, 5, 4, 3, 6, 7, 9];
nums.sort(function(first, second)) {
return first - second;
}
You can pass how many arguments to a function, if the function specifies two parameters?
As many as you want - they will be stored in the functions internal “arguments” array.
If you want to know the number of parameters a function expects, how do you find this out?
Read the length property on the function.
console.log(myfunc.length);
What is one of the reasons that a IIFE (Immediately invoked function expression) is actually very useful?
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.
What is AMD?
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).
What is the lexical environment in JavaScript?
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.
What is the execution context?
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.
The name in a name/value pair may only be defined once in any one…
Execution context.
What is the simplest possible definition of an object in JavaScript?
A collection of name value pairs.
When you run a JavaScript program, the javascript engine creates two things for you in the global context - what are they?
The global object, and ‘this’.
Is the global object always called ‘window’?
No - it depends on the environment (i.e. Node.js will be different). However, there is ALWAYS a global object.
When we refer to variables that are global - what is the most basic definition of this?
Anything that is not inside a function - simple as that.
If you have a Chrome console open, what is the easiest way to see the value of a variable?
Just type it’s name at the console prompt.
What does the outer environment mean, and what is it’s relationship to the global context?
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.
The execution context is created in how many phases?
Two
Creation phase
Execution phase
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?
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.
What happens during the creation phase of an execution context?
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)
Why do functions allocated memory for both their name and content, while variables are only allocated memory - but no values are assigned during hoisting?
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.
What is the placeholder that is put into a variable during the hoisting stage?
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).
What is the difference between “not defined” and “undefined”?
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.
What phase of running a javascript file is an Uncaught ReferenceError (i.e. a variable is not defined) reported?
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.
Why is it a bad habit to set variables to undefined?
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.
Is JavaScript single threaded?
Yes - despite what the browser may do to make it run, the javascript engine will for all intents and purposes, be single threaded.
Is JavaScript Synchronous, or asynchronous?
Synchronous - because one line is executed at a time, one after the other.
Invocation, or Invoking a function is what?
Running a function, you do this by using parenthesis.
myFunc();
What happens when a function is called in JavaScript?
A new execution context is created, and put on top of the execution stack.
In the context of the execution stack, which execution context is the one that is running?
The one on top of the stack (i.e. the last inserted)
If you execute a function a(), how many execution contexts are on the execution stack?
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.
If you have the following:
function b() {}
function a() { b(); }
a();
What does the execution stack look like after b is invoked?
b() - execution context
a() - execution context
Global Execution Context
With b being on top of the stack
When a new function is run, what happens?
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.
What is a “variable environment”?
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.
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();
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).
The scope chain is based on what links?
The outer environment pointers - which in turn are based on the lexical environment (i.e. where in the source code the function was written).
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();
Nothing - they will create the same execution contexts.
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();
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.
What happens if the variable is not found, and the compiler can’t find the variable in the outer lexical environments execution context?
It will then search the outer lexical environment of the outer lexical environment, until it reaches the global context.
If JavaScript is Sycnrhonous, how does Asynchronous events work?
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.
Are Asynchronous Events, actually asynchronous?
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.
Can long running functions interrupt how event handlers are executed?
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.
What kind of ‘typing’ does JavaScript use?
Dynamic typing (as opposed to static typing)
Is undefined an object, or a primitive type?
Undefined is a primitive type
There is only one numerical primitive type in JavaScript, what is it, and how is it represented under the hood?
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.
What is the new primitive type that ES6 adds?
symbol
Are operators functions?
Yes, despite the fact their syntax is different, they are basically functions that operate on usually two parameters, but sometimes one and sometimes three.
What is the notation called that describes the way parameters are given to binary operators?
infix notation (as opposed to prefix and postfix)
What is operator associativity?
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.
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);
It’s right associativity.
a b and c will be equal to 4.
What is coercion?
When a type is converted to a second type in order to complete an operation.
Why does coercion happen so frequently in JavaScript?
Because it’s a dynamically typed language.
How would the following be coerced?
var a = 1 + ‘2’;
12
The number 1 will be coerced to a string.
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.
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.
Will undefined and null coerce to the same value?
No -
undefined coerces to NaN
null coerces to 0
If null coerces to 0 when converting to a number, what does the following produce?
null == 0
false - null will not coerce to 0 when testing for equality.
Where in code does boolean coercion occur as a matter of course.
If statements. Whatever you put in there, whether it’s undefined, null, or empty string. Then it converts to false.
What is the caveat when using if statements to coerce a value to true / false?
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) {
}
In the following statement, which order is the evaluation performed?
if (a || a === 0) {
}
The a===0 is performed first, because ‘===’ has a higher precedence than ||.
Does the || operator return true / false?
No - it actually returns the value in the expression that can be coerced to true. so:
false || ‘chicken’
‘chicken’ will be returned.
What is the following code doing?
var a = name || ‘Default Name’;
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.
What will be returned in the following code?
“hi” || “hello”
“hi”
The closest value to the left that can be coerced to true, will be returned.
What is the one caveat with using the following pattern?
var a = value || “10”;
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.
Does the script tag create a new execution context?
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.
How do frameworks typically prevent collisions of their code with other frameworks?
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
What is the computed member access operator?
the square brackets, used to access properties on object.
person[];
Why would you use the [] operator over the . operator to access objects?
You can pass variables to the [] operator. But generally, you’d use the . operator.
What is another way to write the expression:
person.address.street;
person[‘address’][‘street’];
What is another way of writing:
var person = new Object(); person.firstname = "steven";
var person = { firstname: ‘steven’ }
How do you fake namespaces in JavaScript?
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.
What is wrong with the following code (assuming this is the only line of code in the file)?
person.address.street = “8 baltimore street”;
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.
Is JSON the same as Object Literal notation?
No
What is the difference with regards to key-pairs in JSON as compared with Object literal notation?
In JSON the key values HAVE to be wrapped in quotes - whereas in Object literal notation - it’s optional.
All JSON is valid Object literal notation syntax, true or false?
True
All object literal notation syntax is valid JSON, true or false?
False
How do you convert a JavaScript object into a string?
JSON.stringify(myObject);
How you convert a string into a javascript object?
var str = '{ "firstname": "Caino" }';
JSON.parse(str);Functions are…
objects
First class functions are…
You can do the same thing with functions, that you can do with other types (i.e. assign to variables, pass to functions).
What are the two additional properties that functions have, that objects do not?
Name - Can be anonymous
Code - contains the code of the function (invokable by using the () operator)
What’s the difference between using console.log on an object, and on a function?
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).
Whats the major difference between an expression and a statement?
A statement does work, an expression is a unit of code that results in a value.
What does a function statement look like?
function foobar() {
console.log('hi');
}What does a function expression look like?
var anony = function() {
console.log('hi');
}What is the ‘name’ value of the following function declaration?
var foobar = function() {
}
It doesn’t have one - it will be anonymous
What is the problem with the following code?
foobar();
var foobar = function() { console.log(‘chicken’); |
Function expressions are not hoisted, therefore it will be undefined.
What is one reason you might actually want to provide a name for an anonymous function?
When debugging, you’ll see the name of the function in the stack trace.
NOTE: Not all browsers support this.
If you provide a name to a function expression, is it still called an anonymous function expression?
No, it’s now called a named function expression.
If you have the following code: var a = 2; var b;
b = a;
What is b actually pointing to?
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”
What is meant by “by value”
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.
What values are by reference in JavaScript?
Objects / functions
What values are by value in JavaScript
Primitive types
Given the following code:
var a = { greeting : 'hello' }
var b = a;
a = { animal: 'chicken' }
What does a and b contain?
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.
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);
}
The window object
Is the following code valid, if so why?
function a() {
this.newVariable = 10;
}
console.log(newVariable);
Yes, because the this variable in the function points at the window (or global) object.
Why is it that the this variable points to the window object when you declare a global function?
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).
What will the "this" variable point to here?
var c = {
log: function() {
console.log(this);
}
}
c.log();The c object.
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);
} }
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.
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?
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);
} }
Can a function be stored in an array?
Yes
When the execution context is created for a function, what keyword is setup to store the parameters that are passed to the function?
The ‘arguments’ keyword
Can you set a default value for a parameter in JS?
No - but you will be able to in ES6.
Is the arguments variable that is found in functions an array?
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.
What is a SPREAD?
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
Is arguments going to be deprecated in ES6?
Yes.
What is one approach to dealing with the fact JS doesn’t have function overloading?
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');
}
What is wrong with the folllowing code?
function foobar() {
return
{
firstname: 'chicken'
}
}
foobar();
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.
Why do people always write javascript with the { after the functions / statements etc.
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.
Which variables are attached to the global object in the following code:
function foobar() {
var a = 10;
b = 20;
var c, d;
}
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.
What is an IIFE?
Immediately Invoked Function Expression.
var foobar = function() {
return value;
}();
Why do IIFE’s work, what property that functions have makes this possible?
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.
When you write an IIFE like this, what gets assigned to foobar?
var foobar = function(value) {
return 'Hello' + value;
}('Steve');
Hello Steve
The function object is no longer assigned (as per a typical function expression) - it’s the result of the function.
What is wrong with the following code?
function(value) {
return 'Hello' + value;
}
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.
How do you write an IIFE that simply runs without assigning a value to a variable?
var value = ‘chicken’;
(function(value) {
return ‘Hello’ + value;
}(value));
Which is the correct way to invoke an IIFE?
}(anyvars));
or
})(anyvars);
Either is actually find - there is not a specifically correct form of this syntax. However, you must be consistent.
Does an IIFE have it’s own execution context?
Yes - and that means it encapsulates it’s variables.
What is one purpose for an IIFE?
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.
How would you access the global object from within an IIFE?
(function(global) {
// Do stuff with the global object
}(window));Why would you use the name “global” inside the IIFE rather than “window” which is the global object?
Because “window” may not be the global object in all environments - particularly on the server. But you will still want a global object reference.
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);
}
}
greet(‘Hi’)(‘Tony’);
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?
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.
When an execution context is finished, are variables automatically removed with the context when it’s popped off the stack?
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.
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?
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.
What is the gotcha with the following code:
function buildFunctions() {
var arr = [];
for (var i = 0; i
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?
A “free” variable.
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
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
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
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
How can you use closures to make a function factory?
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’);
Functions being objects, they get access to three special functions that are useful when dealing with the ‘this’ variable. What are they?
Call
Apply
Bind
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());
}
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.
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();
var logName = function() {
console.log('Logged: ' + this.getName());
}.bind(person);What is the purpose of the call method on a function?
It invokes the function and sets the ‘this’ variable to the object passed to it.
myFunc.call(objectname, param1, param2);
NOTE: Parameters are optional
What is one difference between bind and call?
Bind makes a copy of the function, while call actually executes it.
What is the difference between ‘call’ and ‘apply’?
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]);
Can you use call and apply on an IIFE?
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);
What is function borrowing?
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);
When you use bind to pass a variable to a function, what happens to that parameter?
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
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));
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.
What is function currying?
Creating a copy of a function, but with some preset parameters. Very useful in mathematics libraries.
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
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
Do all objects have a prototype property?
Yes, even functions
In functional programming you should be careful not to…
mutate data passed into a function. It’s fine to return NEW data, but you shouldn’t mutate data coming into a function.
Can a prototype have it’s own prototype?
Yes
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?
It will chck to see if it exists on the prototypes prototype (and so on, until it can’t search anymore).
When an object has a prototype (and that prototype may have another prototype) - what is this called?
The prototype chain
Why shouldn’t you set your prototype directly?
It’s a performance issue
How do you set the prototype of an object directly?
obj1.__proto__ = obj2;
When you call an inherited method, the this variable works correctly, why is this?
The execution context of the method points to the calling object, not the one that it was created on.
Rather than calling bind all the time, how could you wrap a function in such a way, that you can preset the bound value?
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.
In functional programming you should be careful not to…
mutate data passed into a function. It’s fine to return NEW data, but you shouldn’t mutate data coming into a function.
What does an object in javascript have it’s __proto__ property set to?
Object {}
What does a function have it’s __proto__ property set to?
function Empty() {}
What does an array have it’s __proto__ property set to?
[]
Yes - this is an object
How do arrays, objects, functions etc have access to default functions and properties (such as apply, call etc)?
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)
If you check the __proto__ property of an object, and look at IT’s __proto__ property, what will it point to?
Object {}
What is at the bottom of the prototype chain for all objects?
Object{}
What is the value of __proto__ for the built in Object{}?
null
Since it’s bottom of the chain - it makes no sense for it to have any links to a prototype object.
What is the prototype of a functions prototype?
var a = function() {};
a.\_\_proto\_\_.\_\_proto\_\_;
Object{}
How do you get a list of all the properties on an object?
for (var prop in myObject) {
}
How do you list the values of all the properties on an object?
for (var prop in myObject) {
console.log(prop + ‘: ‘ + myObject[prop]);
}
If you use the “for in” statement on an object - does it get things off the prototype as well as the object itself?
Yes - it gets it from both.
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?
You can use the function “hasOwnProperty”
for (var prop in myObj) {
if (myObj.hasOwnProperty(prop) {
// print stuff out
}
}
What data is being checked by the hasOwnProperty?
the property metadata.
Why is the following code a bad idea?
function Person() {
this.name = "Steveo";
return { lastname: 'Billyblogs' };
}
var newObj = new Person();
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 );
What is the name of a function that is used specifically to create objects?
function constructor
What does the new operator actually do to a function constructor?
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.
Do function constructors take parameters?
Yes - like any other constructor in OO programming.
function foobar(name) {
this.name = name;
}
The prototype property exists on all functions, regardless of whether it’s being used as a function constructor, true or false?
true.
Why wouldn’t you just add methods to the function constructor, rather than it’s prototype?
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.
What is the difference between __proto__ and prototype?
__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.
Why are built in constructors for primitive types (Numbers, Boolean, String) are potentially dangerous?
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.
If you get an undefined error when you use an object created from a function constructor - what’s likely the cause?
You forgot the ‘new’ operator when creating the object.
What convention can you employ to try and mitigate the potential to forget to call ‘new’ when using a function constructor?
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.
What are some examples of internal function constructors in JavaScript?
Number
String
Boolean
When you create a Number like such:
var a = new Number(10);
Are you creating a primitive?
No - you creating an object, with the primitive (number 10) ‘boxed’ inside.
How do you create an object using the “create” method?
var person = {
firstname: 'Default',
greet: function() { return 'hi ' + this.firstname; }
}
var john = Object.create(person);
john. firstname = “John”;
console. log(john.greet());
Is the following code valid?
String.prototype.isLengthGreaterThan = function(limit) {
return this.length > limit;
}
Yes - but… you have to be careful. This is very powerful.
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)
No - the JavaScript engine will automatically convert a string to an object, but numbers are not automatically converted.
When dealing with dates - what’s a good library to use?
moment.js
When is using the function constructor of a primitive type wrapper a desired feature?
When converting a value - however, we don’t use the new operator in this case. And thus we are not creating an object.
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?
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.
What is a polyfill?
It’s code that adds functionality that older engines / browsers may lack.
How do you create an object using the “create” method?
var person = {
firstname: 'Default',
greet: function() { return 'hi ' + this.firstname; }
}
var john = Object.create(person);
john. firstname = “John”;
console. log(john.greet());
What will
var a = 3; console.log(typeof a);
output?
number
NOTE: It’s not uppercase - it’s just a string describing the type.
What will
var a = "foobar"; console.log(typeof a);
output?
string
NOTE: It’s not uppercase - because the engine is just stating what it is - it’s not an object
What will
var a = []; console.log(typeof a);
output?
object
- NOTE: This is a problem!
How can you determine whether a variable is an array?
var a = []; console.log(a.prototype.toString.call(a));
NOTE: This will report:
[object Array]
If you use “use strict” at the function scope - does that allow “errors” to be made outside of that scope?
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.
What is one caveat with using the “use strict” flat at the top of a file?
When pushing scripts live, they may be concatenated, and files that weren’t meant to have “use strict” now have it included.
How do you implement method chaining?
Make sure your functions return the ‘this’ variable. That way you can chain methods together, with each one affecting the original object.
You don’t always have access to the console in JavaScript (different hardware / environment) - how do you guard against this?
if (console) {
console.log(“Stuff!”);
}
NOTE: Internet explorer doesn’t have a console object unless the console is open.
Why might you see a semi colon before an IIFE in a library?
;(function() {
// Do stuff here?
}());
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.
What is transpiling?
When a compiler takes one language and compiles it to another.
Name some JavaScript anti-patterns?
Poluting the global namespace Inline JavaScript Using eval() incorrectly document.write() modifying default classes prototypes
How do you insert a cell into a table in JavaScript?
var myTab = document.getElementById('myid')
var row = myTab.insertRow(0)
cell1 = row.insertCell(0);
cell2 = row.insertCell(1);How would you create a button using a bootstrap icon from scratch in javascript.
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.
What’s the best way to avoid global pollution of variables?
Use an IIFE to wrap the code.
What is one way to create a module?
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();
What is FOUC?
Flash of Unstyled Content - i.e. when the browser displays the page briefly, but it has not been styled.
What is a getter / setter in Javascript?
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() {
}
}
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?
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);
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;
}
textContent is newer, and liekly a better performing method, so it makes sense to check that it exists and use it if so.
What does a facade pattern do?
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.
What is one common but simple use for the facade pattern in JavaScript?
To hide the complexities inherent with multiple browser API’s (backwards compatibility).
The Adapter pattern is often used to…
Convert between two incompatible interfaces.
What is the difference between an adapter and a facade pattern?
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.
What does document.createTextNode do?
It creates a bit of text that would normally be placed within an element (div etc). It’s very similar to myElement.innerHTML.
How could you use ‘hasOwnProperty’ to choose which method to call?
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.
