JavaScript-Cheatsheet.md

back to overwiev

JavaScript Cheatsheet

Table of Contents

Basics
Arrays & Objects
Functions
Recursive Functions
Methods
Predefined Functions/Methods

• On Strings
• On Arrays
• Nodes
  Custom Constructors / Classes
  Math
  Loops
  Logical Operators
• Conditional Operator
  User Input
  JSON
  ES6
  Tricks
• Get Password Combinations

Basics

&&: and
||: or
!: not
1: true
0: false
increments:
i++ , i-- , i += x , i -= x
isNaN('berry'); –– true –– returns true when not a number
isNaN(42); –– false
x**.length** –– Returns the length of a string or the amount of items in a variable typeof variable –– returns object, number, string
Z < a –– true, uppercase < lowercase

// In browsers, the global scope object is stored in the window variable:
var myVar = 10; // global variable
console.log("myVar" in window); // true
console.log(window.myVar); // 10

Arrays & Objects:

var newArray = []; // could do variable = [1,2,3] as well 
newArray.push('hello'); 
newArray[0]; // equals  ‘hello;
var newObject = {
  key: value,
  key: value
} // object literal notation
// Each piece of information we include in an object is known as a property. Each Property has a Value
var myObj = new Object(); // object constructor
myObj["key"] = "value"; // or myObj.key = "value";

delete newObject.key; // removes the key (very uncommon)
console.log("key" in anObject); // "in" returns a Boolean value that indicates whether that object has that property

myObj.hasOwnProperty('name') // returns true if myObj has a name property

Functions:

var newFunction = function(argument,argument) { }; // or function newFunction(){} = function declarations = not part of the regular top-to-bottom flow = only use this form in the outermost block of a function or program. 
newFunction(x,y);
// below are 3 new things for functions in JavaScript 6 (experimental for now)
argument => argument + 1; // is equal to function(argument){ return argument + 1; };
function(x = 7, y = 42) { } // to set default values
function(x, y, ...a) { } // ...a will store all the  
var newFunction = function() { return "hi" };
newFunction // returns the function while newFunction() would return the functions outcome.

Recursive Functions

// Functions calling themselves (create a kindof finite loop)
function power(base, exponent) {
  if (exponent == 0)
    return 1;
  else
    return base * power(base, exponent - 1); // don’t forget to return your recursion else, you’ll get an undefined.
}

console.log(power(2, 3));
// → 8

Simplest example:

(function loop(base, i){
  // do something
  if(i>0) return loop(base, i-1);  // loop
})(["a", "b"], length)

/*
 * Whenever a function is called, a special variable named arguments is added to the environment in which the function body runs.
 */
function argumentCounter() {
  console.log("You gave me", arguments.length, "arguments.");
}
argumentCounter("Straw man", "Tautology", "Ad hominem"); // You gave me 3 arguments.

Methods:

var bob = new Object();
bob.age = 17; // or: bob["age"] = 17; this way you can use variables as well: bob[variable];
bob.setAge = function (newAge){ bob.age = newAge; };
bob.setAge(5); // would set the Age Property of bob to 5 using the respective function
// here we define our method using "this", before we even introduce bob
var setAge = function (newAge) { this.age = newAge; };
var bob = { age: 25, setAge: setAge }
bob.setAge(50);
// writing an object constructor or object literal notation – both work the same
function someObject() {
  this.stuff = "bla"
  this.someMethod = function() { console.log(this.stuff) };
}

// Associate methods to properties
var pile = {
  elements: ["eggshell", "orange peel", "worm"],
  get height() {
    return this.elements.length;
  },
  set height(value) {
    console.log("Ignoring attempt to set height to", value);
  }
};
// the get and set notation for properties allows you to specify a function to be run when the property is read or written
console.log(pile.height); // → 3
pile.height = 100; // → Ignoring attempt to set height to 100

// You can also add such a property to an existing object, for example a prototype, using the Object.defineProperty function
function Pile() {
  this.elements = ["eggshell", "orange peel", "worm"];
}

Object.defineProperty(Pile.prototype, "height", {
  get: function() { return this.elements.length; }
});

var test = new Pile();
console.log(test.height); //-> 3

Predefined Functions/Methods

On Strings

/*
 * toUpperCase, toLowerCase, trim, charAt
 */
"Doh".toUpperCase() // "DOH"
"Doh".toLowerCase() // "doh"
"  okay \n ".trim() // "okay"
"bla".charAt(0) // b –– identical to "bla"[0]

/*
 * Repeat
 */
'-'.repeat(2); //-> '--' (not supported by IE and Opera)

On Arrays

/*
 * Push, Pop, shift and unshift
 */
var mack = [];
mack.push("Mack");
mack.push("the", "Knife");
mack; // → ["Mack", "the", "Knife"]
mack.join(" "); // → Mack the Knife
mack.pop(); // → Knife
mack; // → ["Mack", "the"]

// push and pop add or remove elements at the end of an array
// shift and unshift add or remove elements at the start of an array

/*
 * indexOf, lastIndexOf
 */
[1, 2, 3, 2, 1].indexOf(2); // → 1
[1, 2, 3, 2, 1].lastIndexOf(2); // → 3

/*
 * slice & concat
 */
[0, 1, 2, 3, 4].slice(2, 4); // → [2, 3] (positions 2,4 – 2 included 4 excluded)
[0, 1, 2, 3, 4].slice(2); // → [2, 3, 4]
["a", "b"].concat("c", 1, "d") // → ["a", "b", "c", 1, "d"]

/*
 * filter
 */
function isBigEnough(value) { return value >= 10; }
var filtered = [12, 5, 8, 130, 44].filter(isBigEnough); // → filtered is [12, 130, 44]

/*
 * map
 */
var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt); // roots is now [1, 2, 3] (1*1=1, 2*2=4, 3*3=9), numbers is still [1, 4, 9]

/*
 * reduce
 */
var total = [0, 1, 2, 3].reduce(function(a, b) { return a + b; }); // total == 6

/*
 * forEach
 */
function logArrayElements(element, index, array) { console.log('a[' + index + '] = ' + element); }
[2, 5, , 9].forEach(logArrayElements); // → a[0] = 2 // → a[1] = 5 // → a[3] = 9
// Notice that index 2 is skipped since there is no item at that position in the array.

/*
 * every & some
 */
function isBigEnough(element, index, array) { return element >= 10; }
[12, 5, 8, 130, 44].every(isBigEnough);   // false
[12, 5, 8, 130, 44].some(isBigEnough);   // true

Nodes

/*
 * Select children of an element with content
 * given: table > tr > td + td
 */ 
var t = document.querySelector('#table');
var td = t.content.querySelectorAll("td"); // nodelist [td, td]
// note: without .content it would not be possible to select the childs.

/*
 * clone nodes with importNode
 * see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template for a good example
 */
var clone = document.importNode(externalNode, deep);

var tb = document.getElementsByTagName("tbody");
var clone = document.importNode(t.content, true); // import/clone the content of the table
tb[0].appendChild(clone); // append it to tbody

Custom Constructors / Classes:

// new Object(); is a predefined constructor by js that creates an empty object, we can create our own class constructors like so:
function Person(name,age) {
  this.name = name;
  this.age = age;
}
var bob = new Person("Bob Smith", 30); // creates an object/class Person with the keys/properties specified in our constructor
// here is where a constructor notation makes sence

function Dog (breed) {
  this.breed = breed;
};

var buddy = new Dog("golden Retriever");
Dog.prototype.bark = function() { console.log("Woof"); }; // prototype adds that method to the constructor. Instead of buddy.bark = ... 
buddy.bark();
var snoopy = new Dog("Beagle");
snoopy.bark(); // is also able to bark.

function Penguin(breed) {
    this.breed = breed;
    var priv = "Private Variable"; // a variable that is only accessible within the constructor
    this.getPriv = function() { return priv; }; // to be able to access a private variable from outside
}
Penguin.prototype = new Dog(); // Penguins will inherit from Dog and also be able to bark. A Prototype Chain.
var penguin = new Penguin("penguin"); // create an instance of the Penguin class.
penguin.bark(); // Woof

/*
 * defineProperty & hasOwnProperty
 */
Object.prototype.nonsense = "hi"; // hi will be an enumerable property, hence show up in any for .. in .. loop on any object. To prevent that use defineProperty 
for (var name in map) console.log(name); // → pizza // → touched tree // → nonsense
delete Object.prototype.nonsense;
Object.defineProperty(Object.prototype, "hiddenNonsense", {enumerable: false, value: "hi"});
for (var name in map) console.log(name); // → pizza // → touched tree
console.log(map.hiddenNonsense); // → hi
// alternatively:
for (var name in map) {
  if (map.hasOwnProperty(name)) {
    // ... this is an own property
  }
}

Math:

// returns the largest of 2 numbers
Math.max(10, 20) //-> 20

// returns the largest integer less than or equal to a given number
Math.floor( 45.95); //-> 45

/*
 * Randoms
 */
// random Number between 0 and 1 but never 0 nor 1
Math.random() //-> i.e. 0.73452221
// *x sets the width and +y the range of the randomness
Math.floor(Math.random() * 5 + 1) // Random Number between 1-5
// Returns a random integer between min (included) and max (included)
// Using Math.round() will give you a non-uniform distribution!
function getRandomIntInclusive(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

/*
 * .sqrt to calculate distances
 */
// Pythagorean theorem says that the square of the distance we are looking for is equal to the square of the x-coordinate plus the square of the y-coordinate thus **√(a2 + b2)** to calculate the distance to a point c:
Math.sqrt(a * a + b * b);
// or less chic: Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2)); 

Loops:

for(var i = 0; i < 6; i++){ }; // for a number of time
for(var p in obj){ } // for in iterates a specified variable p over all the enumerable properties of an object
while(true){ }; // while a condition is true
do{ }while(true); // does x while a condition is true (runs x at least once)
break; // terminate a loop, switch, or in conjunction with a label statement.
["a", "b", "c"].forEach(function(entry) { console.log(entry); }); //although move convenient, forEach is ~30% slower than a normal for loop

Logical Operators

if(true){ /* */ } else if (true){ /* */ } else { /* */ }

switch(variable){ case 'option1': /* */ break; case 'option2': /* */ break; default: /* */ }

Conditional Operator

console.log(true ? 1 : 2); // → 1
console.log(false ? 1 : 2); // → 2
// The value before ? “picks” which of the other two values will come out. When true, the first value is chosen, and when false, the value on the right comes out.

User Input

var name = prompt("who're you?");

JSON

// JSON.stringify takes a JavaScript value and returns a JSON-encoded string
var string = JSON.stringify({name: "X", born: 1980});
console.log(string); // → {"name":"X","born":1980}
// JSON.parse takes such a string and converts it to the value it encodes
console.log(JSON.parse(string).born); // → 1980

ES6

/*
 * Using glob variables in new objects 
 */
var foo = 2;
var obj = { bar: 1, foo } //-> obj.bar = 1 -> obj.foo = 2

Destructuring

var foo = {
  bar: 1,
  baz: 2
};
var { bar, baz } = foo;
console.log(bar); //-> 1
console.log(baz); //-> 2 // instead of foo.bar / foo.baz
// also with arrays:
var array = [1, 2];
var [ a, b ] = array;
console.log(a,b) //-> 1 2
// very nice on functions:
// usually you would have an opts value but now
// you can destructure the incoming object directly in the function
// also note how we changed the name of weight to just w
function calcBmi({ weight: w, height, max, callback }){
  var bmi = w / Math.pow(height, 2);
  if(bmi > max) { console.log('sorry you are obese') }
  if(callback) { callback(bmi) } // instead of if objs.callback
}
// by passing objects
calcBmi({ weight, height, max: 25 });
// you can now omit a data and it will just be passed as 'undefined', here we leave out max.
// also the order does not matter anymore!
calcBmi({ callback: function() {}, weight, height });

Default Arguments

function someThing(value = 12){
  // stuff
}

Template Strings

var name = "will";
var thing = "party";
// old way
var greet = "hi, my name is" + name + "\n and I like to" + thing + "!";
// new way. Note the inline variables and how to break lines.
var greet = `hi, my name is ${name} 
             and I like to ${thing} !`;

Scoping

// let is the new var
// define block variables (only used within blocks)
if () { let b = 2; }
console.log(b); // undefined

// use const as default and change it to let only when you have to change the value
// const is also block scoped but unchangable
const a = 1;
a = 2; //-> error

Classes

// old:
function Parent() { /*constructor*/ }
Parent.prototype.foo = function() {}; // to add a function to the constructor
var parent = new Parent();
parent.foo();
// new
class Parent {
  // in ES7 I could also add static properties here, like this:
  age = 30;

  constructor() {

  }

  foo() {

  }

  static bar() {

  }
}
var parent = new Parent();
parent.foo();
parent.age; //-> 30
Parent.bar();

class Child extents Parent {
  constructor() {
    super() // will call the constructor of Parent
  }
  baz() {

  }
}
var child = new Child();
child.baz(); // works
child.foo(); // works

Arrow Functions

// basics
// old
var foo = function(a, b) { return a + b; }
// new
var foo = (a, b) => { return a + b; }

// implicit returns (only on one liners):
do.something((a, b) => a + b);

// also without parenthesis when you only have one argument
do.something(a => a + 1);
[0,1,2].map(val => val+1); //-> [1,2,3]

// it also binds the this
var module = {
  age: 30,
  foo: function() {
    setTimeout(() => { // automatically bind the previous this to the function
      console.log(this.age); // still works
    }, 100);
  }
};
// note that it will overwrite i.e. jQuerys this value.

Modules

// old
module.exports.foo = function () {};
module.exports.bar = function () {};
// another file:
var myModule = require("myModule");
var foo = myModule.foo;
// new
export function foo() { };
export function bar() { };
export var x = 3;
import { foo, bar, x as test } from "myModule";
console.log(test) //-> 3
// or whole modules
export default {};
import myModule from "myModule";

Generator Functions

async function() {
  var friends = await $.get("http://bla.com/friends")
  console.log(friends);
} // returns one promise that is denible

Tricks

Get password combinations

var passwords = function(chars, length){
    var chars = chars.split("");
    var index=[];

    (function loop(base, i){
        for(var k=0; k< chars.length; k++) {
            if(i>1) loop(base+chars[k], i-1);
            else index.push(base+chars[k]);
        }
    })("", length)

    return index;
}

var possible = "0123456789";
var length = 4
var possibilities = passwords(possible, length);

Use them

var length = possibilities.length;
(function loop(base, i){
    if(i < 0) return;
    let n = base[i]; i -= 1;
    setTimeout(() => { return loop(base, i) });
})(possibilities, length);