Advanced Javascript Questions

Front 1

What is a closure

Back 1

Closures are variables from the parent function that remain bound from the parent's scope.

Front 2

What does typeOf return

Back 2

1: Undefined
2: Null
3: Boolean
4: Number
5: String

Front 3

Difference between == and ===

Back 3

=== and !== are strict comparison operators and return true if the operands are equal and of the same type.

Null == Undefined // true
Null === Undefined // false
0==false // true
0===false // false, because they are of a different type
1== "1" // true, auto type coercion
1=== "1" // false, because they are of a different type

Front 4

What is the difference between call and apply?

Back 4

call() requires that you specify each parameter, explicitly. Where as apply() requires that you pass your arguments as an array.

Front 5

How does variable scope work with functions?

Back 5

Variables created outside of any function are accessible globally, anywhere.

Variables created inside a function are available only within that function and its descendants.

Front 6

How can you avoid having to use an onload function?

Back 6

Place the code at the bottom of the script at the end of the DOM.

Front 7

How can you create privacy in JavaScript and what are some examples of its use?

Back 7

Using a closure you can create private areas in your code. Usages might be a global namespace for your code, private data members for sensitive info and such.

Front 8

How do you access an elements parent?

Back 8

You can use element.parentNode;

Front 9

How do you attach something to the DOM?

Back 9

You can call appendChild on the document objects target.

Ex: document.body.appendChild(el);

Front 10

How do you find an element by type on the page?

Back 10

var obj = getElementsByTagName('p');

It returns a specific type of array - like object called a node list.

Front 11

How do you find out what kind of tag a node is?

Back 11

element.tagName;

Front 12

How do you get or change an elements content?

Back 12

using the innerHtml property.

Front 13

How do you replace an element?

Back 13

You call el.replaceChild( var_to_insert, el_it_comes_before );

Front 14

How do you set an attribute on an element?

Back 14

You call the setElement( ) method on a selected element.

Front 15

How does textNode and innerHtml differ?

Back 15

Using textNode will convert the objects html to a string whereas innerHtml will give you the content back as html.

Front 16

How does the flow of a program work

Back 16

As the code executes down the body of the code it iterates through each line and executes it one by one. When it encounters a function call it jumps into that function definition and the control of the program flow is then given to that function to execute.

While the function is running the main program must remember the point where it jumped into the function and what was going on there. This includes things like the variables available and their state. The place where this is stored is called the stack.

Once the body of the function called finishes executing, or a return keyword is hit, the control is returned to the main routine from the function using it.

Front 17

How does variable scope work with functions?

Back 17

Variables created outside of any function are accessible globally, anywhere.

Variables created inside a function are available only within that function and its descendants.

Front 18

What are higher-order functions.

Back 18

Functions that work on other functions.

function forEach(array, action) {
for (var i = 0; i < array.length; i++)
action(array[i]);
}

forEach(["Wampeter", "Foma", "Granfalloon"], print);

Front 19

What are the different ways of creating a new object?

Back 19

#1 - you can write:
var myObj = {};
and thus define it by an object literal. Then add to it with dot syntax.

#2 - Alternatively, you can write a function and then call the new keyword in front of it:

Front 20

What are the two main ways to write faster more efficient code?

Back 20

#1) Limit the amount of identifier lookups that take place by caching anything used multiple times inside a local variable.

#2) Manipulating the DOM as seldomly as possible.

Front 21

What does a double negative "!!" operator mean?

Back 21

!! placed in front of something casts the contents to a boolean.

EX.
var x = 1;
console.log(typeof x); //number

x = !!x;
console.log(typeof x); //boolean

Front 22

What is a common technique used to sandbox your code's scope and state making it local instead of global?

Back 22

Wrapping it all in a self invoking anonymous function or name spacing it in a global object.

Front 23

What is a DOM level 0 event handler?

Back 23

It is an old way of adding event listeners to objects. It is 100% supported by browsers but lacks the ability to attach multiple events per click. It has been abandoned in favor of the standard event model. Syntax for dom level 0 is:

obj.onclick = function(){
//some code here
};

Front 24

What is an alternative way to select items in the DOM and how well is it supported?

Back 24

document.querySelector( ) and document.querySelectorAll( ) and they accept css selectors.

Front 25

What is an event and an event handler?

Back 25

An event is something that happens in the browser. An event handler is a function that executes and "handles" the event by performing a sub routine.

Front 26

What is capturing & bubbling?

Back 26

capturing says the event take an outside in approach, starting at the html root level and then propagates down to the event target, being the actual item clicked.

Bubbling is the reverse. It takes an inside out approach and starts at its current event target and bubbles all the way up to the top.

This can be problematic bc if an event is capturing and propagating down it would fire every click event that is registered on elements it hits on the way to the target.

Front 27

What is identifier lookup

Back 27

When you use a variable name in Javascript it begins a process called identifier lookup where it looks for something with the same name.

It starts at whatever level of scope you are currently at and if not found it moves its way back up the "scope chain" until it resolves the name.

If it cant find the identifier you get undefined. If you overwrite a value locally that was originally defined in a higher scope you effectively temporarily change the value of that variable while youre in that function scope. This is called shadowing.

Front 28

What is Lexical Scoping

Back 28

It means the when a function executes it uses the data members that were around at the time it was defined, not when it is actually called.

Aka, functions take a snapshot of whats going on around their definition when they are called. This is what is know of as their 'scope'. Scope is basically what information the function knows about when it executes. As stated above, this has to do with what is around at the time of their definition.

Front 29

What is the best practice, in terms of data integrity, for working with objects?

Back 29

In order to get and set values of an object you should create a well defined interface. An interface is a set of methods that you use to read and manipulate the properties / state of an object.

In other languages these are called getters and setters or accessers and mutators.

Front 30

What is the chrome shortcut to bring up the console? What about toggling the console?

Back 30

Cmd + option + j
esc toggles the console.

Front 31

What is the difference between pascal casing and camel casing.

Back 31

Pascal casing is the same for all intensive purposes except fot the fact that the first letter is capitalized.

Javascript uses this for object naming.

Front 32

What is the difference between var obj = { };
and var obj = new myObject( );

Back 32

The second uses a constructor function. It does some setup behind the seen setting the constructor property as well as defining a prototype for the object. Method one simply instantiates the object from the default Object object.

Front 33

What is the native JavaScript equivalent to jQuery's .prepend( ) ?

Back 33

el.insertBefore( var_to_insert, el_it_comes_before );

Front 34

What is the precursor to jQuery's $(document).ready( ) method?

Back 34

window.onload(function(){
//Place all code here to run after dom loads
});

Front 35

What is the process of adding text to an element.

Back 35

1) You have to create the element that will hold the text.

2) Next you have to create and store a text node, with createTextNode( 'your text' );

3) Lastly append it to the element created in step one.

Front 36

What is the stack and how does it work?

Back 36

The stack is the context of the executing script.

While the function is running the main program must remember the point where it jumped into the function and what was going on there. This includes things like the variables available and their state. This is the stack.

Each time a new function is called from the main routine a new snapshot of the context has to be taken and added on top of the stack. This requires memory.

When the stack grows too large the browser dies and you get an error in the console.

Front 37

What is the syntax for the standard event model and who supports it?

Back 37

obj.addEventListener('click', functionToExecute , ' capturing' );

To remove an event just use removeEventListener with the same arguments as you used to add it.

Front 38

What is the syntax for the ternary operator

Back 38

( if condition ) ? true : false;

(direction === "true" ) ? nextSlide : previousSlide;

Front 39

What method do you call and what object do you call it on to create a element? How does it work?

Back 39

You call the createElement method on the document object. It works by accepting a string, which is the element type, and then returns an element object of the corresponding type.

This can then be appended.

Front 40

When creating a jQuery plugin why do you wrap the main behavior in "return each"

Back 40

It makes the function work on more than just one item in case the selector returns more than one thing in the selected collection. Otherwise it would only

Front 41

What is the DOM

Back 41

The Document Object Model (DOM) is an API for manipulating HTML and XML documents. It provides a structural representation of the document, enabling you to modify its content and visual presentation by using a scripting language such as JavaScript.

Front 42

What is JavaScript namespacing?

Back 42

Namespacing is used to bundle up all your functionality using a unique name. In JavaScript, a namespace is really just an object that you've attached all further methods, properties, and objects. It promotes modularity and code reuse in the application.

Front 43

What is Strict Mode?

Back 43

Throws errors for actions that are silly but didn't previously throw an error, for potentially unsafe actions. Disables functions that are poorly thought out.

Front 44

How do you change the style/class on any element?

Back 44

document.getElementById("myText").style.fontSize = "20";

Front 45

Looping structures in JavaScript?

Back 45

for, while, do-while

Front 46

Errors

Back 46

try/catch/finally blocks. Basically, you try to run code (in the try block between the braces), and execution is transferred to the catch block of code when/if runtime errors occur. When the try/catch block is finally done, code execution transfers to the finally code block. This is the same way it works in other languages like C# and Java.

Front 47

Event bubbling

Back 47

Event bubbling describes the behavior of events in child and parent nodes in the Document Object Model (DOM); that is, all child node events are automatically passed to its parent nodes. The benefit of this method is speed, because the code only needs to traverse the DOM tree once. This is useful when you want to place more than one event listener on a DOM element since you can put just one listener on all of the elements, thus code simplicity and reduction. One application of this is the creation of one event listener on a page's body element to respond to any click event that occurs within the page's body.

Front 48

this keyword

Back 48

Is a context-pointer and not an object pointer. Gives you the top-most context that s placed on the stack

Points to the currently in scope object that owns where you are in the code.
*In global scope it refers to the Window object.
*In an object created with new this refers to the object created.
*With event handlers this points to the object that generated the event

Front 49

JavaScript types

Back 49

Number, String, Boolean, Function, Object, Null, Undefined