JavaScript Cheat Sheet

- Developer Tools -
JavaScript Cheat Sheet

What`s inside

A complete JavaScript cheat sheet for everyday use. 
If you are new to JavaScript and want to explore more, head over to the JavaScript Blogs.

Usage

The cheat sheet is divided into sections. Each sections provides a group of similar snippets which are focused for a particular scenario.

 

JavaScript
JavaScript Cheat Sheet

Basics

Including External JavaScript : Type 1

.

Including External JavaScript : Type 2

.

Writing Inline JavaScript

.

.

var . let .
Arithmetic Operators . Assignment Operators . Comparison Operators . Logical Operators . Bitwise Operators .
Click here for a full list of events . Event Handlers .
For Loop . While Loop . Do-While Loop . Break . Continue .
Date Initialization . Conversion . Getter Methods . Setter Methods .
All about functions .
Strings .

ES 2015+

Constants – Immutable Variables

Variables which cannot be re-assigned new content.

.

Class Declaration – Object oriented style . Class Inheritance .
Expression Bodies . Statement Bodies .
Spread Operators .
Map, Set, WeakMap , WeakSet .
Namespaces help avoid naming conflicts. . Create JavaScript namespaces using objects assignment and object notation in conjunction with (regular) function expressions and IIFE. . Namespaces with IIFE .

Template Strings

.

Destructuring

: Allows binding using pattern matching, with support for matching arrays and objects.

.

Modules .
Extended Object Literals .
Promise : First class representation of a value that may be made available in the future .
Getter and Setter .
Generator .

DOM Manipulation

Returns a reference to the element by its ID.
document.getElementById(id);

.

Returns an object array of all child elements which have all of the given class names.
document.getElementById(id);

.

Returns an HTML Collection of elements with the given tag name.
document.getElementsByTagName(name);

.

Returns the first element within the document that matches the specified group of selectors.
document.querySelector(selectors);

.

Returns a list of the elements within the document (using depth-first pre-order traversal of the document’s nodes) that match the specified group of selectors.
document.querySelectorAll(selectors);

Create new elements
var btn = document.createElement(“BUTTON”);

.

Example: Create an element and append some text
var header = document.createElement(“H1”);
var text = document.createTextNode(“Hello”);
header.appendChild(text);

.

Choose an element var header = document.getElementById(‘header’); . Remove a class if exists header.classList.remove(“foo”); . Add a class ‘newClass’ if it does not exists header.classList.add(“newClass”); . Add | Remove multiple classes header.classList.add(“foo”,”bar”);
header.classList.remove(“foo”,”bar”); . Add or remove a class alternatively header.classList.toggle(“visible”); . Check if an element has a class, return true if it does or false if not header.classList.contains(“foo”); .

Math & Numbers

All about numbers .

All about math

.

Outputting Data

Different ways to make use of the console .
An alert box is often used if you want to make sure information comes through to the user. .
A confirm box is often used if you want the user to verify or accept something. .
Prompt is often used if you want the user to input a value before entering a page .

Arrays Basics

Basics

.

Array Methods .

Different ways to add items to an array

.

Different ways to remove items from an array .
Replacing items in an array .
Subsets .

Credits