The window object represents the browser window or frame and also inherits all of the global JavaScript core properties


The Document object represents the root node of HTML, XHTML and XML documents. The nodes of every document are organized in a tree structure, called the DOM tree. Objects in the DOM tree may be addressed and manipulated by using methods on the objects.

Document object reference page

Global Objects


An array is an ordered collection of elements that can be selected by indices. JS Bin

var ballsArray = ["Titleist", "Callaway", "Srixon"];
var scoresArray = [80, 82, 79];


A boolean object is an object wrapper around the fundamental boolean datatype value (true or false).[]( “search?q=javascript+boolean”)

var bool = false;
alert('bool is ' + bool);


A date object is used to work with dates and times. []( “search?q=javascript+date”)JS Bin

// new Date object
var d = new Date();

// date string
var s = Date();


An error object contains information to describe JavaScript errors. []( “search?q=javascript+error+object”)JS Bin

try {
    throw new Error("Oh Snap");
} catch (e) {
    console.log( + ": " + e.message);


A JSON (JavaScript Object Notation) object is used for converting values to JSON and values from JSON.[]( “search?q=javascript+json”)

var json = '{"result":true,"count":1}',
obj = JSON.parse(json);


A math object is used for mathematical functions and constants.[]( “search?q=javascript+math”)

// shows 10


A number object is used for numeric functions and constants.[]( “search?q=javascript+number”)

// create number object
var num = new Number(10);


A RegExp object is to create regular expressions for pattern matching. []( “search?q=javascript+regexp”)JS Bin

// regular expression defining 5 digits
var fiveDigitPattern=/^\d{5}$/;
var digits = "12345";
alert( -1? false:true );


A string object is used for string functions and constants.[]( “search?q=javascript+string”)

// create string object
var str = new String("Hello world");
var str = "Hello world";
Functions & Properties


A function that returns a decoded URI by replacing each UTF-8 escape sequence with it’s respective characters. []( “search?q=javascript+decodeURI”)JS Bin



A function that returns a decoded URI component by replacing each UTF-8 escape sequence with it’s respective characters. []( “search?q=javascript+decodeURIComponent”)JS Bin



A function that returns an encoded URI by replacing all special characters with their respective UTF-8 escape sequences. []( “search?q=javascript+encodeURI”)JS Bin



A function that returns an encoded URI component by replacing all special characters with their respective UTF-8 escape sequences. []( “search?q=javascript+encodeURIComponent”)JS Bin



A function that evaluates a JavaScript expression.[]( “search?q=javascript+eval”)

var x = 5;
var str = "if (x == 5) {console.log('z is 42'); z = 42;} else z = 0; ";


A property that represents a number that is greater than any other number, including itself.[]( “search?q=javascript+infinity”)

var x = Math.pow(2, 1024);


A function that returns true if the value exceeds the lower limit 5e-324 (Number.MIN_VALUE) or the upper limit 1.7976931348623157e+308 (Number.MAX_VALUE), false otherwise.[]( “search?q=javascript+isfinite”)

var x = isFinite(Math.sqrt(-4));
var y = isFinite(50);


A function that returns true if the value is a number, false otherwise.[]( “search?q=javascript+isNaN”)



A property that represents a NaN (Not a Number) value.[]( “search?q=javascript+NaN”)



A function that returns the float value of a variable.[]( “search?q=javascript+parseFloat”)

// both return 1.505


A function that returns the integer value of a variable.[]( “search?q=javascript+parseInt”)

// return 50


A property that represents a variable that has not been declared or initialised. []( “search?q=javascript+undefined”)JS Bin

foo; // throws an error, foo is not defined
var foo; // foo is uninitialised

if (typeof foo === 'undefined') {
    // foo is undefined



Image Lazy Loader <img data-src="" alt="Above it All. A photo by @anthonyintraversato on Unsplash"/> const imgList = document.querySelectorAll('img[data-src]'); // lazy load images Array.from(imgList).forEach(el => { el.setAttribute('src', el.getAttribute('data-src')); el.onload = function() { el.removeAttribute('data-src'); }; }); const nodeList = document.querySelectorAll('myclassname'); Array.from(nodeList).forEach(el => { if (el !== null) { (async() => { await import(`app/module/${el.dataset.component}`); })(); } });


A collection of useful Node.js resources. HTTP Server An easy way to get a Node.js http server up and running is by installing the http-server node module globally, npm install http-server -g. Here is an example using the -a option to specify an address to use. For more options, run http-server --help. http-server -a localhost http-server default is to use address which is reachable by all IP addresses of the local machine’s network interface.

Design Patterns

Design patterns are reusable solutions to commonly occurring problems in software design. – Addy Osmani Constructor Pattern All methods and properties of the object are added in the constructor. function Track(artist, title, year) { this.artist = artist; this.title = title; this.year = year; this.trackInfo = function() { return this.title + ", by " + this.artist + ", Year released: " + this.year; }; } var theFixer = new Track("Pearl Jam", "The Fixer", 2009); var lazaretto = new Track("Jack White", "Lazaretto", 2014); console.

Responsive Filter

This code sample shows how to create a responsive list filter. JavaScript and jQuery fetch the breakpoint value from a hidden css pseudo element that sets the value. Therefore, it is not necessary to maintain rendundant responsive breakpoint values in the script. demo


A collection of useful jQuery code snippets // get the value of a text input when modified (function($){ $('#sometextinput').on('change keyup paste', function() { console.log('VALUE', $(this).val()); }); })(jQuery); Window Resize Wait for window resize to stop. ES6 using arrow function let resizeTimeout; $(window).on('resize', () => { clearTimeout(resizeTimeout); resizeTimeout = setTimeout(doSomething(), 500); }); ES3/5 var resizeTimeout; $(window).on('resize', function() { clearTimeout(resizeTimeout); resizeTimeout = setTimeout(doSomething(), 500); }); If LoDash is present, you can use _.

Best Practices

Here are a few Best Practices to follow when coding in JavaScript. White Space Follow these recommendations so commits and diffs will be easier to read. Do not mix spaces and tabs. Configure the editor to “show invisibles”. For example, in Sublime Text, the setting is "draw_white_space": "all". Configure the editor to remove end of line whitespace. Choose one, spaces or tab indentation for all JavaScript the team is writing for the project.

Callback Functions

Simple Callback Function Example <button id="brew">Brew</button> //init when window loaded function init() { document.getElementById('brew').onclick = function() { brew(param, function() { alert('Finished brewing ' + param + ' coffee'); }); }; var param = 'dark roast'; function brew(param, callback) { alert('Started brewing ' + param + ' coffee'); callback(); }; } window.onload = init;

Helper Functions

These are some JavaScript functions I saved here because I couldn’t find an equivalent in Underscore.js or lodash or didn’t need the overhead of the whole library. find index by key value // find index of an object in an array by key and value var _findIndexOf = function(array, key, value) { var i; for(i = 0; i < array.length; i++) { if(array[i].hasOwnProperty(key) && array[i][key] === value) { return i; } } return -1; } filename from path // get the filename from a path without using regex var _filename = function(path) { return path.