JavaScript 4 Flashcards
What is the simplest way to modularize your code?
Use the namespace pattern - to contain all of your modules. This works by creating a root object (the root namespace) and adding modules (new objects) corresponding to the nesting namespace.
PlayerJS.player.controller
singleton/module name/object
Object / Object / IIFE
How do you make namespaces in JS?
The easiest way is to create a global object (at the document root) that is a singleton.
Then you can use a directory structure to store the files (naming the directories after the modules). The directory names are the same as the module (object) names within the root / singleton. Modules are created by calling an IIFE. The resulting modules have methods which can be called.
EG:
PlayerJS.player.controller.play();
singleton/module name/object/method
Object / Object / IIFE / Method
What does AMD stand for?
Asynchronous Module Definition
What is the downsides to using the Namespace pattern?
Declaring modules as global variables
Can’t specify the dependencies of a module
Have to list script files in order in the index.html
What library is used to help implement AMD?
Require.js
When using React, how do you specify dependencies?
define([‘player/controller’], function(Player, Controller) {
});
If you don’t have dependencies, what do you declare in ReactJS?
You specify an empty array.
define([], function() {});
When using ReactJS, what is one of the risks we have to look out for when setting up dependencies?
Circular dependencies
What pattern can be used to allow communication between modules that have been setup using the AMD pattern?
PubSub
What is another name for the Pub Sub pattern?
Observer
Why might you use the tilde ~ character in an if expression?
The tilde character will convert the value to a truthy value. For instance
~1 == true
~2 == true
~-2 == true
~-1 == false
This works because the tilde operator inverts the bits representing -1 to 0. So for example, if you are using indexOf (which will return an index, or -1 if there is not match) - then you can use this expression to make the test more reliable.
if (~mystring.indexOf(‘f’)) {
}
What is the following code doing?
Array.prototype.slice.call(arguments, 1)
In JavaScript, arguments (one of the default values in a function) is not an array, but an array like object. In order to call slice on it - you can pass ‘arguments’ to the slice function on the Array.prototype - can use call to call slice, and set it’s ‘this’ variable to ‘arguments’. I guess it would be like calling arguments.slice() - if arguments was an actual array.
It works because the key / value pairs are numbered, and the object has a length value.
When using React.js you may see the pattern where a file is ‘defined’ and the variable is declared as a parameter to a function, but it’s not actually used in the function. What is happening here?
The object/function being referenced is going to get called (because it’s defined as a dependency) - which will execute any code in that function. So it can be useful for setting up data / states - and having it run without actually calling a function explicitly (since React takes care of that for you under the hood).
Why should you use a package.json file when using NPM?
If you use –save switch, it will write the dependencies into the file. This will make it a lot easier when moving to another machine, or distributing your application.
How do you export a variable using ES6 from a file?
export var foobar = ‘myvalue’;
What does CommonJS do?
It’s a module system, that works mainly on the server side.
In MVC, the controller is the entry point to…
a component.
In MVC, the controller instantiates…
The view and the model
(Of course, there is a case to be made for these to be instantiated and injected into the controller via a DI container).
The model is reponsible for…
storing, persisting or retrieving data from a database or other kind of store.
Why do we sometimes need to write a clone function?
Because objects in JS are passed by reference, so we often need to create clones, so that a change doesn’t affect ALL objects.
What is the main difference between MVP and MVC?
In MVP, the view does not have direct access to the model.
What function could you use to make sure that when you perform a mathematical calculation, that it never goes below a certain level?
Math.max(myarray.length - 6, 0);
This will take the array length and give you the result minus six, unless it goes below 0, when it will give you 0.
Using an object literal, how would you create a namespace for your project?
Firstly - give it a long name so it’s unique (i.e. reverse URL).
// NOTE: This is check to see if each part of the variable // exists. It doesn't matter if it does - as if one part exists, // the next part will be attached to the existing var.
var com = com || {};
com.cm = com.cm || {}; // NOTE - no var
// Obviously, don't use a name like cm, use something // longer - just using short names for space.
com.cainmartin.project = {
// The actual project code goes here
}
What’s the biggest flaw of the basic Module design pattern?
The private members can’t interact with the public members.
What is the main difference between the Module and the Module Reveal patterns?
The Module pattern uses an object literal to encapsulate the public methods - whereas the Module Reveal pattern encapsulates ALL methods within it’s main body, and “reveals” them by creating a reference to the public methods in an object literal that is returned to the outer scope.
What is the main disadvantage of the Module Reveal pattern?
You can’t add members to the object easily as it’s entirely locked off in a private space.
How do you get ALL of your code out of the global scope?
Use an IIFE to wrap everything.
If you encapsulate your application in an IIFE, how could you make a public API / entry point into your app?
You can pass in a pointer to the window / document etc. Then assign a variable to the window (global namespace).
if (!window.chatModule) {
window.chatModule = chatModule;
}
What is one benefit of the JavaScript singleton design pattern?
You can delay instantiation of the object until required. This is done by using a IIFE which contains an init function, and a revealed “getInstance()” method. That method then calls init, which in turns creates the actual object you want (the singleton).
If you are using the jQuery keypress method and you are checking ‘key’ - what is the potential pitfall?
Chrome doesn’t seem to generate a value for key - which leads to no result. You probably need to use keycodes.
When would you use the Abstract Factory over a Factory?
When you realise your factory is no longer flexible enough. Generally the Factory pattern is sufficient.
Given that JavaScript doesn’t have a notion of interfaces, how do you deal with (say in an abstract factory) ensuring that the object that is requested, is the right one?
One method is to test for the function you need on the prototype.
if (myobject.prototype.myfunc) {
return new // the object you want.
}
Effectively you are testing for an interface here.
What are the four elements of a design pattern?
- A pattern name – each pattern should have a descriptive name
- A problem – a design challenge or context in which to apply the pattern
- A solution – describes the pattern elements and their arrangements
- Consequences – tradeoffs and side-effects of applying the pattern
How does the GoF describe design patterns?
“descriptions of communicating objects and classes that are customized to solve a general design problem in a particular context”
Getter and Setter methods are more accurately called…
accessor and mutator methods
“has a” and “is a” relationships are more formally known as…
Composition and Inheritence relationships
What is the simplest way to implement inheritance in JS?
Set the prototype variable of an object to the ancestor object.
Tight coupling is a form of..
technical debt
If coupling exists between objects, cohesion exists…
within objects and modules
What is the rule of three?
Under some circumstances, copying code twice is okay (at first appears to violate dry). But when you’ve copied it three times you may need to start refactoring. You wait three times because only at that point do the necessary abstractions become clear.
The reason for this is that two observations may not be sufficient to see the pattern.
What are considered the three layers of web design?
Behaviour - JS
Style - CSS
Content - HTML
The browser loop (which is single threaded) is also known as the…
User Interface loop
What is a potential problem that could arise from adding an onload event where the handler takes 5 more seconds to execute?
Because the loop is single threaded, it will block events until it’s finished executing. The problem being that keyboard input events are also executed in that loop. So if a page fully loads, and this function kicks off, the user may try to input something in the page - and it wont work.
If you are going to need to do something that will definitely take time (i.e. getting data from a sever) - what technique can you use that will reduce the impact on the user experience?
Asynchronous callbacks.
If you have an onclick event - (in the HTML) - and you give it this code, what does the return false do?
onclick=”alert(‘chicken’); return false”
It will prevent the function from doing it’s default action, which would be to follow the href (link).
When you use addEventHandler to get a reference to a DOM element, what is the ‘this’ variable of the handler set to?
The actual HTML element
What is the zero timeout pattern?
You can call a function using SetTimeout - with a value of 0. This can potentially get around scripts that are taking too long to run.
What is a common place that the zero timeout pattern is used?
Text highlighters - the act of searching the page for the required text can take a long time.
If you’ve set a variable with the method setTimeout - how do you clear that timeout and hence stop the timer?
Call “clearInterval” on it.
clearInterval(timeout);
When we get a value from an object, JS follows the prototype chain - what about when we set a value?
No - when we set a value, it doesn’t write the to prototype. In fact, if the variable doesn’t exist on the object, it actually creates it - which subsequently masks the value on the prototype.
If we have the following code:
var Car = function() {};
Car.prototype = { make: 'Lexus' };
var myToyota = new Car();
console.log(myToyota.prototype);
Why does the last line fail?
Because you can’t actually directly access the prototype directly from an instance.
The internal reference is actually [[Prototype]]. You CAN access through the non-standard __proto__ and also the ES5 function - Object.getPrototypeOf
What are the only things in JS that have prototype properties?
Constructor functions or Function objects
var Truck = function() {};
Truck.prototype = { load: 100 }
var myTruck = new Truck();
Does myTruck have a .prototype member?
No - only the FUNCTION CONSTRUCTOR has one. It will assign the prototype to the internal [[Prototype]] member
What is Function.prototype?
The default prototype object for all functions
What is Function.prototype’s prototype?
Object.prototype
What is Object.prototype’s prototype?
undefined
If you change the value on a member variable from a prototype - does this change the value for all prototypes?
It depends on how you do it. If you do it properly - then no. Normally, you would have a function that would make a change like this:
this.mynumber = 10;
EVEN if this is called from within a function placed directly on the prototype, this wont change the prototypes value. It will create a new variable on the enclosing object, below the prototype level. Subsequent lookups will find this variable first, and return it’s value.
this. prototype.mynumber - from within a fucntion on the prototype, will fail - so you can’t do this.
this. __proto__.mynumber = 10 - will work - and change all values for all objects. Keep in mind - you SHOULD NEVER DO THIS.
So for all intents and purposes - if you do this correctly, changing a value of a variable on an object, even one that lives on the prototype - will only change it for that instance. Just like classical object oriented programming.
Why can’t name be printed out in the following code?
function Car() {
name = "a big car";
}
console.log(name);
Because a straight function isn’t automatically called. Therefore you have to call it first, then “name” will be assigned to the global space and this code will work.
Remember - variables without the var keyword (i.e. an undeclared variable) is added to the global memory space, not the local function execution context.
Why is the following undefined?
function Car() { name = "a big car"; }
Car.prototype = { chicken: 'A String' }
var car = new Car();
console.log(car.prototype);
Because the .prototype reference only exists on the function constructors, not the actual object. At the point the object is created, the .prototype reference is assigned to the __proto__ or [[Prototype]] members on the object.
What will the following two return:
alert(Emp.prototype == Emp.__proto__);
alert(Emp.__proto__ == Function.prototype);
False
True
Why does Function.prototype == Emp.__proto__, because it’s the base object that all functions derive / inherit from
What is the prototype chain for a function object?
function object -> Function.prototype -> Object.protoype
What is the difference between a function and a function constructor?
The difference is simply in the use of “new”. New sets the context (the this variable) and if it’s not used on a function (i.e. it’s just a normal function) - then the context is that of the external object (window, assuming you are working in global context).
The prototype property ONLY exists on what?
Functions and Constructor Functions
The constructor property exists on WHAT, and were created by WHAT?
They exist on prototype objects (not the main object), and were created by constructor functions - it points back to the original function constructor.
What is one disadvantage of using an anonymous constructor function?
The debugger reports the constructor value as being function().
What is the purpose of the ! in this code?
!function() {
console.log(“Testing”);
}();
It’s an alternative syntax for an IIFE.
Does the __proto__ object have a copy of the function constructor too?
Yes - remember the __proto__ variable is basically a reference to the original prototype object on the function / function constructor.
What do the following two statements evaluate to?
alert(Function.prototype.constructor === Function);
alert(Function.constructor === Function);
true
true
NOTE: Function is it’s own constructor. Also - these two statements are essentially doing the same thing. Only in the second one, the JS engine has to do a little more work by moving through the prototype chain to find it.
if (true || (a + b))
will a + b execute?
No - because the first part of the expression evaluated to true, there was no need to continue to evaluate the expression as an or expression only requires one side to be true.
What will the following expression return?
false || “8”
“8”
It wont return true or false - but the last part of the expression that evaluated to true.
What will the following expression return?
true && “10”
“10” - because it’s the last value that was evaluated to true
Why does the following work?
var param = param || ‘ ‘;
Because the logical operators return the first value that evaluates to true. So if param exists, it will return the value stored in param - if it doesn’t exist, it will return the empty string (or whatever other value is on the right).
Falsy expressions are those that evaluate to… (and what are they)?
false - they are false, null, undefined, NaN, 0, the number 0, and empty string.
Truthy expressions are those that evaluate to… (and what are they)?
true - they are true, non-empty strings, arrays (empty or not), objects, functions, numbers (not zero, but negative is true), infinity etc. Basically anything that is not falsy.
What does the !! character do?
Ensures the value returned is a true Boolean value.
How could you use a !! character to determine if a value is odd?
var odd = !!(i % 2);
i.e. if 2 % 2 = 0, then !! will coerce this to a boolean value of false. I.e. 2 is NOT an odd number.
Why might you see code like:
var oProto = Object.prototype;
Because it allows minifiers to reduce the code as much as possible. Minifiers cannot reduce the name of inbuilt identifiers - but it can reduce the size of custom variables.
Why might you see the following code, and what is the downsides?
var slice = Array.slice;
It speeds up access to the slice method - however, it will require using the “call” function to specify the context.
slice.call(array, 0, n);
What is the following code doing?
var slice = [].slice;
var toString = {}.toString;
Much like: var slice = Array.slice;
It’s attempting to reduce the execution time of the code. However - using the object literal / array literal syntax is a bit slower than using Array.slice or Object.toString because it has to create the object for each line.
Why do local variables containing references to built in methods save processing time? i.e.
var math = Math,
mRound = math.round;
Because it saves JavaScript having to continually search the prototype chain.
This is most useful for methods and properties that exist on the global object, because these are the last part of the prototype chain to be checked. i.e. Document, Math, alert.
Why do programmers sometimes use the following construct in JS?
var _true_ = true; var _false_ = false; var _null_ = null;
It allows minifiers to shave off space when minifying the native variable names.
The function parameter ‘arguments’ is not an array - but in some code the programmers will convert it to an array. How is this usually done?
Two main ways.
var args = [].slice.call(arguments, 0); or var args = Array.prototype.slice.call(arguments, 0);
What is the common way (and why?) do you represent unused parameters?
Using an underscore (although this is just a convention, not a programming language rule). i.e.
function foobar(_, result) {
}
This is sometimes used in callbacks, or try / catch blocks and simply indicates that the parameter is not actually used (but the way the method is called, requires something).
try {
} catch(_) {
}
How could you write a function to test if an object is a function?
var isFunction = function (item) {
return Object.prototype.toString.call(item) == "[object Function]";
}How can you implement function overloading in JS?
You can test the type / number of parameters and execute different code paths accordingly.
What is the options hash or configuration pattern?
It’s a pattern that’s useful when function argument lists have a combination of required and optional parameters. Basically you give all required parameters as individual paramters. Then bundle up the optional parameters in an object and pass that as the last parameter.
function myfunc(required1, required2, options) {
// optionals is an object
}
How do you deal with optional parameters in a function when using the options hash?
You first create a default object that contains all the possible default parameters - with sensible defaults
var defaults = {
parameter: 21,
name: 'superman'
}
Then you use a function to combine the objects - something like jQuery $.extend, or you can write your own. That will combine them.
this.settings = $.extend({}, defaults, options || {});
(options is the optional settings object passed in from the outside)
What does the following code do?
+function () {
}();
It’s an IIFE - although the + syntax is not recommended. You could also use: void, 100%, and number of other things.
Is this statement true, “Anything placed in front of an anonymous function that turns the function into an expression, and if it’s followed by parenthesis, will execute the function”?
yes. This is how IIFE’s work. The outer brackets simply turn the anonymous function into an expression. By adding the final () - it invokes the enclosed function. But it doesn’t have to be outer brackets - using a !, or ~, or a + will turn that anonymous function into an expression, and as long as there is a set of closing () - it will invoke the anonymous function.
Is the following construct valid JavaScript?
var func = new function() {
//
}
Yes - but it’s not ideal. You can’t reuse the function constructor, and JSLint will tell you that you should probably remove new.
What is the purpose of the preceding ‘;’
;(function func() {
// Other code here
}());
It’s often used in the module pattern - when your code is likely to be used with other libraries. It protects your code against forgotten or unclosed ;
This idiom is referred to as the preceding semicolon.
What is wrong with this code?
function foo() {
return
{
name: 'steveo'
}
}
The JS engine will put a semi colon after the ‘return’ keyword, therefore blocking out the returned object from the code.
Why is the convention of using uppercase letters for function constructors important?
It helps the dev remember to use new when calling the constructor. No errors are given if you forget.
What is the output of the following code:
var index = 9;
function doSomething() {
alert(index);
var index = 10;
alert(index);
}
doSomething();
undefined
10
The reason being the var index inside the function is hoisted to the top of the function, and masks the global var index (even though it’s undefined).
What is the single var pattern?
It’s where all variables are declared at the beginning of a function block - and only one var is used:
var foobar = 10,
chicken = 21,
bestcurealbum = "Disintegration"
NOTE: Some code houses will demand initialised variables come first, and only one variable dec per line.
While the single var pattern is quite common - it has one big pitfall, what is it?
When making the declarations, if you accidentally put a semi-colon instead of a comma, the following variables will be made global.
Functions should be declared before…
they are used. It’s obviously not a requirement in JavaScript - but it makes your code easier to read and understand. this is particularly true inside functions.
If you create two Person objects, and set the name of the first one, then give a different name to the second one - but both are reporting that they have the same name - what could have gone wrong?
If you create the objects without the new operator by accident, the context is not set, and the this operator is set to the global scope. Therefore both objects will be referring to the exact same variables.
HOWEVER - in actually testing this - if you try to assign a function object to a variable, it appears to be undefined. So while
What is one way to code defensively against forgotten “new” calls on function constructors?
var Person = function (name) {
if (!(this instanceof Person)) {
return new Person(name);
}
// Other code here.
}
This has little overhead and is worthwhile as it can prevent some insidious bugs.
When using the module pattern, do you use the “new” keyword to create a new object?
No. Just assign it to a variable - since the function returns a closure containing the inner data, it’s going to be giving you a different object than the one you requested anyway. (i.e. the internal anonymous closure).
How can function prototypes save memory?
By putting shared functions on the prototype, all objects that are created using that object will share the same prototype, thereby saving memory.
What is the simplest way to define a namespace and variables to it in JS?
var myNamespace = {}
var myNamespace.i, myNamespace.j, myNamespace.k;
function myNamespace.superman () {}What is a bookmarklet?
A small bit of code that is used on a page that is not intended to interact with any other code outside of it. It can therefore be created within an IIFE and not take up any space in the global namespace.
Where does the name bookmarklet come from?
It’s a combination of the words bookmark and applet.
Why would you include a variable named “undefined” in a module like this:
var module = (function (win, $, undefined) {
var doc = win.document;
var nav = win.navigation;
return {
}; })(window, jQuery);
A hacker could redefine the value undefined to ‘true’ for instance which would have unknown consequences for you r code. By creating a variable that is never set - and calling it ‘undefined’ - then you can be sure that undefined will in fact be equal to undefined.
If you have a long string (such as a user agent string), and you want to know whether a word (such as a browser name) exists within the string - what’s a simple way tot test without resorting to regex?
useragentString.indexOf(‘chrome’) > -1
By testing for > -1 you don’t care where it is in the string, just that it’s there.
Rather than access the global scope directly from a module, what is considered best practice?
To pass the value in through the module.
(function(win) {
var doc = win.document;
}(window));
In large projects spanning multiple files - there is a risk that you can overwrite your modules due to files being included in an incorrect order - how can you modify the module pattern to solve this??
Using the “partial module” pattern.
var module = (function (self) {
var top = 10;
self. multiply = function (x,y) { return x * y; };
self. divide = function (x,y) { return x / y; };
self. getTop = function () { return top; };
return self;
})(module || {});
NOTE: that you pass the module back to itself - and then add the members to that. If the module doesn’t exist in the first place, it’s created anew. If it did exist, then you are adding to the original variable.
What is the most common way to mix the namespace pattern and the module pattern?
MyApp.namespace("Util.Events").module = (function () {
// private area ...
return {
// public area ...
};
})();The module pattern is Javascripts version of the…
Singleton
How do you make a method chainable?
You return the this value from the method.
What is the biggest disadvantage of chaining methods?
If the debugger detects an error - it will give the you the line - but not necessarily the method.
What’s another name for the chaining pattern?
Fluent interface
What is the constructor invocation pattern?
simply refers to calling a method declared on a constructor function that was created via new. This ‘this’ variable is bound to the object.
function Something() {
this.doSomething = function() {
}
}
var mySomething = new Something();
mySomething.doSomething();
What is the method invocation pattern?
Calling a method directly from an object. The ‘this’ variable is bound to the object instance.
var obj = {
doSomething: function() {
}
}
obj.doSomething();
What is the function invocation pattern?
Simply creating a function in the global scope and calling it. The this variable is set to the global object (in a browser this is the window object).
function foobar() {
}
foobar();
Calling a constructor function without new changes the invocation pattern being used from a Constructor Invocation to a Function Invocation - what is the problem with this?
The ‘this’ variable will be bound to the global object, and this will cause problems with the code.
The value of this is bound just before the function starts executing. This is called…
late binding.
What is the difference between an extend pattern and a mixin?
A mixin will copy properties from one or more objects, whereas an extend will only copy from one.
Why might you see a line of code like this?
Employees.prototype = [];
If you wanted to make a set of objects that are sortable - it may make sense to derive from an array.
What is a very easy way to create a container object that has all the features of an array?
You can inherit from the array object.
var MyContainer = function() {};
MyContainer.prototype = [];
var myContainer = new MyContainer();
myContainer.push('Chickens');
What is the functional mixin pattern?
Rather than having a mixin function, we can create functions that contain the functions we wish to attach to another object. Then we can use the ‘call’ method, to attach them. The idea is to group related functionality into methods that can be attached as required. Then we can apply these functions to the receivers prototype.
var sortable = function() {
this.sortAge = function() {
}
}
sortable.call(MyObject.prototype);
Because this in sortable will be set to the prototype of MyObject, the function will be created on the prototype.
What is the purpose of the Monkey Patch in JS?
To modify code at runtime without modifying the source. This is useful when patching functionality into an existing library. (also known as duck punching)
NOTE: This isn’t really a recommended pattern - although it can be useful.
How is a monkey patch implemented?
You simply mask the variable / method that is being patched. i.e.
var monkey = {
say: function() { alert('yo'); }
}
monkey.say = function() { console.log(‘yo’); }
When you are creating a monkey patch, it’s often desirable to capture the old function, so you can make modifications around the function - what should you do to make sure you aren’t poluting the global namespace?
Wrap the saved function: var myFunc = old.myFunc; and the monkey patch, into an IIFE.
If you apply a monkey patch like so:
person.myMonkeyPatch = function() {}
But the function myMonkeyPatch exists on the prototype - will this work?
Yes - but we are just masking the function. Therefore it will only apply to that particular object. This isn’t a problem, but it’s worth noting that it will not propagate to other objects using this method.
Why is it not a good idea to have this code at the global scope?
var history = {};
It’s a variable that is already in use on the global object - it’s part of the interface that allows a programmer to manipulate the browsers history.
What is lazy initialisation?
In JavaScript it’s not always desirable to create all objects at the start (for reasons of performance, memory, prevent flickering of the page) . To do this, you may have an object with an “getIniatilized” method - which actually populates and returns the required data when queried. What makes this a pattern is that it will only do this the first time it’s queried - and store the results for subsequent calls. (a little like a singleton)
What is the “Ghost Pattern”?
When an object is created it’s only partially loaded. The loading is completed when it’s called upon. The term Ghost comes from the fact the pattern might load only the “ID, NAME and PHOTO” of an employee. This is a ghost version of the full employee data - which is only loaded when requested.
The background load is likely accomplished using AJAX.
When is the Ghost Pattern useful?
When you have a website where the front page is full of employees (and it’s a long list) - you can just load the initial information (say id, and name and photo thumbnail). Upon clicking on an employee, the rest of the data is loaded - only when required.
What is the multiton pattern?
Similar to a singleton. But it typically stores multiple instances of the same kind of object. The difference between this and a simple hash is that the client is allowed to choose mappings.
Also the multiton should never return a null or empty reference. Instead, when it’s first called it creates the object with the associated key - then it always returns that same object for that key.
Is it true that you should never use == true?
I think for the most part - this is true. The reason being:
“true” == true
This equals false. Even though a non-empty string in JS is equal to true. The reason being, when we bring the == into the picture, the values are converted to numbers. “true” becomes NaN and true becomes 1. Therefore they are not equal - and will result in a false.
The best way to deal with this is to simply let the operators deal with the truthiness. In the case of a non-empty string.
if (“true”) {
}
In a typical JS MVC, the flow between the controller and the model is by…
method invocations
In a typical JS MVC pattern, the flow between the view and the controller, and the model and the view is by…
events and event handlers.
What is the typical flow in an MVC app?
View -> Controller -> Model -> View
What is another name that the observer pattern is known by?
Pub / Sub (for publish / subscribe)
What participants exist in the observer pattern?
The subject
Maintains a list of observers
Implements an interface that lets the observer subscribe / unsubscribe
Sends a notification to it’s list of observers when it’s state changes
The Observer
Has a function signature that can be invoked when the Subject changes
When using the observer pattern in MVC? With regards to the view / model - who is the subject, and who is the observer?
The model is the subject, the view is the observer. The model notifies the view that there has been a change. The view then subsequently updates it.
How do you print errors to the console?
console.error(“ERROR!”);
If you find jQuery loading from a CDN is slowing down your web application - how can you improve the speed?
You could create a custom version of jQuery, including on the functions you use, and store it locally on the server.
What will be the value of foo.count?
function foo(num) {
this.count = 5;
}
foo.count = 0;
foo(10);
console.log(foo.count);
The value will be 0.
Remember - in a function the context (value of this) is set by default to the window.
There are two ways to make the ‘this’ value within a function point to the function itself - what are they?
First is using a lexical identifier (variable) - i.e. if you have a function foo with a variable ‘data’ - you can refer to it by foo.data;
Otherwise you can use the more conventional (for JS) - method - use the call method to set the value of this.
foo.call(foo);
This is not an author-time binding - but a…
runtime binding
the this variable is a property of…
the execution context that is created when a function is invoked.
The execution context may also be known as a…
activation record
The this binding made for each invocation is based on…
the call-site
The call-site is in…
the invocation BEFORE the currently executing function
Given that in strict mode, the the global object is ineligible for binding - what would be the result of the following code?
function foo() { console.log(this.a); }
var a = 2;
(function() {
"use strict";
foo();
})();
2
- because the actual code for foo is not contained within the “use strict” scope - the global object is eligible for binding with the this property in foo - and thus it is able to locate the value of a via ‘this’.
This is an example of default binding
What is printed to screen here?
function foo() { console.log( this.a );}
var obj = {
a: 2,
foo: foo
};
obj.foo();
2
Because foo is added as a reference property foo inside the object, when you call that function via the object, the this (in foo) variable is bound to context of the enclosing object. This is called the object context.
This is an example of implicit binding.
What does the implicit binding rule state?
When there is a context object for a function reference, it’s THAT object that should be used at runtime for the function calls binding.
function foo() { console.log( this.a );}
var obj = {
a: 2,
foo: foo
};
obj.foo();
Which object is this call chain is used to set the this value?
obj1.obj2.foo();
obj2 - it’s the last object in the chain that matters to the call-site.
What will be output with the following code?
function foo() { console.log(this.a); }
var obj = {
a: 42,
foo: foo
};
var bar = obj.foo; var a = "Ooops! Global"; bar();
“Oops! Global”
This is a case of Implicitly lost binding.
Remember - the call-site is what matters. And despite bar being an implicitly bound function with (what appears to be) an object context - the call-site is at the global level. And thus, this will point to the global object.
NOTE: bar is really just a reference to foo here, not a reference to obj.foo.
If an implicitly bound function loses that binding , what does ‘this’ point to?
Depending on whether strict mode is enabled, either the global object, or undefined.
What is the output of the following code?
function foo() {console.log(this.a); }
function doFoo(fn) { fn(); }
var obj = { a: 2, foo: foo };
var a = "oops, global";
doFoo(obj.foo);
“Oops, global”
Because ‘obj.foo’ is passed as a reference to doFoo - it’s really just a direct reference to ‘foo’. Therefore we lose the implicit binding when fn() is called within doFoo.
This occurs regardless of whether the reference is from your own code, or internal to the language.
So function callbacks are a common place that implicit bindings are lost.
What is hard-binding in the context of JS?
When passing a variable to a function of the form:
var bar = obj.foo;
The binding to the obj is lost. By using the following construct that isn’t the case:
var bar = function () {
foo.call(obj);
}
the ‘this’ variable within foo can no longer be overriden, and the scope is defined as obj. No matter how you invoke bar - it will always manually invoke foo with bar as the context. Thi s binding is both explicit and strong - therefore hardbinding.
The most common way to warp a function with hard-binding is to…
create a function with a pass through of any arguments passed and return value received.
var bar = function() {
return foo.apply(obj, arguments);
};
How would you write a simple “hard binding” helper?
function bind( fn, obj ) {
return function() {
return fn.apply( obj, arguments );
}
}
NOTE: This is essentially available through the bind function in ES5
Are constructor functions special in anyway?
No - they are just regular functions. The only thing that makes them a constructor is the act of calling them with keyword new. By doing so, a regular function essentially becomes a constructor function.
What is ‘new binding’?
When a function is called with the new keyword, it becomes a constructor function. The this value within the function is bound to the newly constructed object.
What is the order of precendence of binding types?
New binding
Explicit binding
Implicit binding
Default binding
How do you determine what the this value is set to?
First - find the direct call site, then:
Is the function called with new (new binding)? If so - the newly created object is ‘this’.
Is the function called with call/apply (explicity binding) (or even hidden inside a hard binding) - then this is the explicitly specified object
Is the function called with a context? (implicit binding) (otherwise known as an owning object) - if so - this is the owning object
Otherwise default this (default binding) is the global object, or ‘undefined’ if we are in strict mode.
(Remember though - there are some exceptions, such as assignment where bar = a.foo; default binding applies here)
If you pass null to apply/call/bind - what binding rule applies?
The default binding rule.
function foo(a, b) { console.log("a: " + a + " b: " + b);}
foo.apply(null, [2, 3]);
// Currying with bind var bar = foo.bind(null, 2); bar( 3 );
Using apply and bind on a function can be useful for reasons OTHER than to bind a function’s context - so you can pass it null instead of a context. However - there is a risk - what is it?
If the function that you are setting to ‘null’ actually makes use of the ‘this’ variable (i.e. in some external library) - then the default binding rule means it might reference (or worse mutate) the global object (window in the browser).
Currently, you can use the apply function to ‘spread’ out a set of parameters from an array.
foo.apply(null, [1, 2, 3, 5]);
What is the ES6 way of doing this?
There is now the new ‘spread’ operator ‘…’
foo(…[1, 2, 3,5);
This gets around some of the risks that using the null operator with apply introduces.
Rather than passing null to an apply/call invocation - what could you do so that you don’t run the risk of mutating the global object?
Pass it an empty, non-delegated object.
You can do this with:
Object.create(null);
NOTE: this is similar to just {} but - {} makes a delegation to Object.prototype. So the first version is “more empty”. You can use a symbol or name that helps signifiy that you want it to be empty. Such as ø
Is null an object type?
No - it does appear to be one - i.e. when you do a test with typeof - it does report it as an object. But this is a bug.
Currently in ES5, you have to specify an object literals’ properties using strings. But ES6 introduces computed property names - how does this work?
This allows you to build up a new objects property names using run time code.
var object = {
[prefix + ‘bar’]: “Hello”,
[prefix + ‘baz’]: “Yo…”,
};
(These are very likely going to be useful in the ES6 feature, symbols - however, I have no idea what they are yet).
Does adding a named property to an array increase the value of the array property ‘length’?
No
However - if you were to use a name that “looks” like a number, it will indeed increase the value of “length”.
What are the consequences of doing the following?
var array = new Array(10); array["34"] = 10;
The length value SHOULD give you 11 - but instead it will report itself as 35 (due to the index starting at 0).
If you copy an object, are the special characteristics of an object preserved on the new object (for instance, the writable flag)?
No.
What method of Object can be used to get the property descriptor values of an object?
Object.getOwnPropertyDescriptor(myObject, ‘propertyname’);
What method of Object can be used to define a property descriptor along with it’s value?
Object.defineProperty( myObject, 'a', {
value: 2,
writable: true,
configurable: true,
enumerable: true
});
console.log(myObject.a);
NOTE: This would not normally be used to create properties
What attribute of a property defines whether the property can be written to, and what happens if you try to write to it when it’s read-only?
the writable property
Object.defineProperty( myObject, 'a', {
value: 2,
writable: false, // CAN'T WRITE TO IT!
configurable: true,
enumerable: true
});
If you try to write to it - it will fail silenty, unless strict mode is enabled, when it will throw a TypeError
In the case that you are using straight functions within a module, the usage of ‘this’ in the function may throw a warning in JSHint, especially when using this inside a callback for an event handler. What is the solution?
Use the event object to get direct access to the target object.
evt.currentTarget.getAttribute(‘myattr’);
What is KB927917 IE8 error?
It appears to be an issue with the way IE8 renders pages - but the usual fix is to make sure the DOM is loaded before doing any dom manipulation.
Can you use delete on a function declared as such?
var foobar = function() {};
No - variables (even functions) that are declared using var cannot be deleted.
Can you use delete on a function declared as such?
function x() {};
No - you cannot delete a function like this.
Can you delete an object property like such?
object o = { x: 1 }
delete o.x;
Yes - this is about the only thing delete can be used for. You cannot delete var’s or functions, but you can delete object properties.
What are the three types of executable code in ECMAScript?
Global Code - When source text is treated as a program, it is executed in global scope.
Function Code - Anything executed directly in a function, including inline code (event attributes) in HTML
Eval Code - text passed to the built in eval function.
Why is it that you can delete the second, but not the first variable?
var foo = 10; bar = 20;
Because when you create a variable using var - it’s internal ‘DontDelete’ property is set. Whereas, when you simply create a property like ‘bar’ - that property is not set.
Why is it that when you use ‘delete’ on a ‘var variable’ - in firebug, it appears to actually delete the code?
It would appear that firebug uses eval to run the code within the environment - variables declared in eval mode do not set the ‘dontdelete’ flag. And therefore can be deleted. This is not the true behavior though (in a real program) so can be misleading.
In an object/prototype scenario, how would you create private variables?
You can use var to declare a private variable. But the issue is that you can’t access them from the prototype. However, you can create public methods within the constructor that have direct access to the ‘private variables’.
var MyClass = function () {
var _privateVar = 'foo';
this.privlegedFunction = function () {
alert(_privateVar);
};
}
NOTE: In this scenario you don’t use this to access it.
How would you use the reduce method to sum an array?
var total = [0, 1, 2, 3].reduce(function(a, b) {
return a + b;
});
// total == 6What does ‘Array.prototype.concat()’ do?
Takes a number of arrays, returns a new array, with the arrays concatenated.
var num1 = [1, 2, 3],
num2 = [4, 5, 6],
num3 = [7, 8, 9];
var nums = num1.concat(num2, num3);
console.log(nums); // Result: [1, 2, 3, 4, 5, 6, 7, 8, 9]
How would you flatten a series of arrays, using reduce and concat?
var flattened = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) {
return a.concat(b);
}, []);
// flattened is [0, 1, 2, 3, 4, 5]
