Window

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

Document

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

Array

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];

Boolean

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

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

Date

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

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

// date string
var s = Date();
console.log(s);

Error

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

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

JSON

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

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

Math

A math object is used for mathematical functions and constants.[](https://www.google.com/search?q=javascript+math “search?q=javascript+math”)

// shows 10
alert(Math.floor(10.6));

Number

A number object is used for numeric functions and constants.[](https://www.google.com/search?q=javascript+number “search?q=javascript+number”)

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

RegExp

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

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

String

A string object is used for string functions and constants.[](https://www.google.com/search?q=javascript+string “search?q=javascript+string”)

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

decodeURI

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

console.log(decodeURI('~!@#$%25%5E&*()=+%5B%5D%7B%7D%5C;:\'%22,/?'));

decodeURIComponent

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

console.log(decodeURIComponent('~!%40%23%24%25%5E%26*()%3D%2B%5B%5D%7B%7D%5C%3B%3A\'%22%2C%2F%3F'));

encodeURI

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

console.log(encodeURI('~!@#$%^&*()=+[]{}\\;:\'",/?'));

encodeURIComponent

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

console.log(encodeURIComponent('~!@#$%^&*()=+[]{}\\;:\'",/?'));

eval

A function that evaluates a JavaScript expression.[](https://www.google.com/search?q=javascript+eval “search?q=javascript+eval”)

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

infinity

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

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

isFinite

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.[](https://www.google.com/search?q=javascript+isfinite “search?q=javascript+isfinite”)

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

isNaN

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

console.log(isNaN(50));
console.log(isNaN('foo'));

NaN

A property that represents a NaN (Not a Number) value.[](https://www.google.com/search?q=javascript+NaN “search?q=javascript+NaN”)

console.log(Number('foo'));

parseFloat

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

// both return 1.505
console.log(parseFloat('1.5050'));
console.log(parseFloat('0.015050E+2'));

parseInt

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

// return 50
console.log(parseInt('50');

undefined

A property that represents a variable that has not been declared or initialised. [](https://www.google.com/search?q=javascript+undefined “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
}

Resources

Javascript

querySelector

Image Lazy Loader <img data-src="https://images.unsplash.com/photo-1494633114655-819eb91fde40?auto=format&fit=crop&w=2550&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" 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}`); })(); } });
Javascript

Node.js

A collection of useful Node.js code snippets and 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 0.0.0.0 which is reachable by all IP addresses of the local machine’s network interface.
Javascript

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.
Javascript

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
Javascript

jQuery

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 _.
Javascript

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.
Javascript

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.
Javascript

Document

The JavaScript Document object is the root node of the document tree in HTML, XHTML and XML documents.[](https://www.google.com/search?q=javascript+window.document “search?q=javascript+window.document”) Properties Anchor The anchor object represents the HTMLAnchorElement. // show the number of anchors in the document alert(document.anchors.length); BaseURI The baseURI object is a string that represents the absolute base URL of a node. Not supported in Internet Explorer. alert(node.baseURI); Body The body object represents the HTML body element.