debugger;

  1. Write debugger; as the first line inside your function.
  2. Inspect Element.
  3. Run the function in the Console and look at the Sources tab.  (The ‘debugger;‘ line should be highlighted in Sources).
  4. ‘Step over the next function call’ to test the code line by line as it’s running.
  5. ‘Step into the function’ if you want to go inside the callback function that’s inside the function you’re debugging.

* Create a separate function to run the debugger on any function instead of having to write debugger; in each of our function.

function runWithDebugger (ourFunction) {
    debugger;
    ourFunction();
}
Advertisements
debugger;

JS: Object (references) Comparison

When you create an object in Javascript, it stores the object at a unique location in memory.  So even when the objects look identical, they are not the same because JS is comparing to see if they are at the same memory address, not if they look the same or not.

Thus, {} === {}  would return false.

Notes: 

  • Values and variables of same type take same amount of fixed storage (allocated memory).
  • All objects, however, are not of the same size. When a new object is created, a composite memory block consisting of a series of consecutive blocks, one for each instance variable of the object, is created.  The sizes of two objects of different types can be different depending on the number and the types of their instances variables.
  • Since an object variable stores addresses, it also called a pointer variable or reference variable, and the address stored in it a pointer or reference.
JS: Object (references) Comparison

setInterval vs setTimeout

Both are Javascript’s timing events.

setInterval(function(), milliseconds):

  • Executes a function repeatedly, with a fixed time delay between each call to that function. (useful for countdown)
  • clearInterval() takes an in-scope variable which points to the setInterval method and stops the function from looping.

 

setTimeout(function(), milliseconds):

  • Executes a function once, after waiting a specified delay.
  • clearTimeout() stops the execution, thus disabling it from running again in the future.

Notes:

  • 1000 milliseconds = 1 second
setInterval vs setTimeout

$(document).ready() vs. window.onload()

SUMMARY: Run Javascript after the DOM has loaded but before the entire page has fully loaded (for faster loading time) because your code relies on working with the DOM.  This can be done with $( document).ready() in jQuery.

$(document).ready() in jQuery executes when the DOM (Document object model) is loaded on your page. DOM means all the html tags/script. It will not wait for the images, frames to be fully loaded.  It is the earliest stage in page load process and executes a bit earlier than window.onload(), thus less time-consuming for the browser.

window.onload() in JavaScript executes when all the content on your page is fully loaded including the DOM, asynchronous javascript, frames, images, and other assets.

PAGE LOADING STAGES:

  1. Browser makes a request to download the page
  2. Raw markup and DOM is loading (does not include external sources such as images and stylesheets).  DOMContentLoaded event occurs at the end of this stage and you can set your code to run at this time with $(document).ready().
  3. Page is fully loaded with images and stylesheets.  Load event occurs at the end of this stage and you can execute your code to run at this time with window.onload().  (You rarely need to do this unless you need to work with the images or assets in your code).
$(document).ready() vs. window.onload()

Primitive (values) vs Objects (references)

A variable can hold one of two value types: primitive values or reference values.

  • Primitive values are data that are stored on the stack.
  • Primitive value is stored directly in the location that the variable accesses.
  • Reference values are objects that are stored in the heap. (aka it’s stored elsewhere to preserve memory space and the variable is just a link to it).
  • Reference value stored in the variable location is a pointer to a location in memory where the object is stored.
  • 5 Primitive types: Undefined, Null, Boolean, Number, or String.  Anything else is an object.

The Basics:

Objects are aggregations of properties. A property can reference an object or a primitive.

Primitives are values, they have no properties.

Some Examples:

screen-shot-2017-02-22-at-9-37-22-pm

Primitive (values) vs Objects (references)

Array.prototype.forEach()

.forEach() executes the callback function on each item of the array once.

arr.forEach(function callback(currentValue, index, array) {
    //your iterator
}[, thisArg]);

How to use:

  1. Create a callback function
    function logArrayElements(element, index, array) {
      console.log('a[' + index + '] = ' + element);
    }
  2. Apply callback function to .forEach() method
    [2, 5, , 9].forEach(logArrayElements);
    
    // a[0] = 2
    // a[1] = 5
    // a[3] = 9

* This can be combined into one step if the callback function is simple.

 

Array.prototype.forEach()