JavaScript Cheatsheet

javascript-cheatsheet.js

// Activate ES5 Strict-Mode in whole file
"use strict";
...

// Activate ES5 Strict-Mode just for a specific function
function() {
    "use strict";
    ...
}

// HINT: Do not mix strict and non-strict code: file concatination can break the code.
// Alternativly create two files: one with strict mode code and one with non-strict code
// BETTER: Use IIFEs that wrap the file content

// ES5 Strict-Mode with IIFEs (Immediatly Invoked Function Expression)
// file1.js
(function() {
    "use strict"
    function withStrictMode() { ... }
})();

// file2.js
(function() {
    function withoutStrictMode() { ... }
})();

// Unary + Operator casts a value to a number (equals the Number(value) constructor)
var value = "4";
typeof +value === 4; // true

// 64-Bit Double precision floating point numbers (IEEE 754)
0.1 + 0.2; // 0.30000000000000004
0.1 + 0.3; // 0.4

// Floating point operations are not associative
(0.1 + 0.2) + 0.3; // 0.6000000000000001
0.1 + (0.2 + 0.3); // 0.6

// Bitwise operations turn 64-Bit floating point numbers into 32-Bit Integers
// 8        -> 00000000000000000000000000001000
// 1        -> 00000000000000000000000000000001
// 8 | 1    -> 00000000000000000000000000001001
8 | 1; // 9

// Instant type failure cases: 1. Not defined function call 2. Non existing property access
"hello"(1); // Uncaught TypeError: "hello" is not a function
null.x;     // Uncaught ReferenceError: abc is not defined

// Check NaN by checking unequality to the variable itself
var a = NaN;
a !== a; // true

// Overriding toString() method on objects
var o = {};
"Before: " + o; // "Before: [object Object]"

o.toString = function() {
    return "huhu";
};
"Now: " + o; // "Now: huhu"

// Overriding valueOf method to return a number
var o = {
    valueOf: function() { return 3; }
}
o + 3; // 6

// Falsy values
[false, 0, -0, "", NaN, null, undefined]

// Truthy values
[true, {}]

// Primitive data types
true, false
1, 2, 4.33
"string"
null
undefined

// Object wrapper for primitive data types
var s = new String("hello");
typeof "hello"; // "string"
typeof s;       // "object"

// JavaScript casts strings implicitly into String wrapper objects
"hello".toUpperCase(); // "HELLO"

// Automatic semicolon insertion: 1. Only after a line break 2. When the next token can't be parsed
a = b
(f());
// can be parsed as a single statement:
a = b(f());

// These two lines
a = b
f();
// are interpreted as two statements
// as the interpretation as a single statement
a = b f();
// would result in a parse failure

// -> It depends on the begin of the next line whether a semicolon is inserted or not

// "Restricted Productions": Cases where semicolons are inserted by force
[return, throw, break, continue, i++, i--]
// i.e.
return
{};
// is interpreted as three single statements:
return;
{}
;

// JavaScript uses 16-Bit-Unicode (UTF-16 encoded)
// It stores 16-Bit Unicode "Code Units" not "Code Points"
// So that G-Clef 𝄞 takes two 16-Bit "Code Units"
    |-----------------------------------------------------------------------------------|
    |          '𝄞'          |     ' '   |     'c'   |     'l'   |    'e'    |    'f'    |
    |   0xd834  |   0xdd1e  |   0x0020  |   0x0063  |   0x006c  |   0x0065  |   0x0066  |
    |-----------------------------------------------------------------------------------|
"𝄞 clef".length;  // 7
"G clef".length; // 6
"𝄞 clef".charAt(1) === " "; // false
"𝄞 clef".charAt(2) === " "; // true

// This results in problems with RegExp operations
/^.$/.test("𝄞");   // false
/^..$/.test("𝄞");  // true, as the G-Clef is defined as a "Code Point" with more than 2^16 Bits
                   // and JavaScript allocates two 16-Bit "Code Units" (called "Surrogate Pairs" in UTF-16)
                   // for "Code Points" like this

// To work with "Code Points" instead of "Code Units" use a library

// Unicode Escape Sequences
// U+0000 -> U+00FF
"\x41\x42\x43"; // "ABC"

// U+0000 -> U+FFFF
"\u0041\u0042\u0043"; // "ABC"

// ES5 U+000000 -> U+10FFFF
// Using punycode.js (counts the "Code Points"):
countSymbols('💩'); // 1

// ES6 U+000000 -> U+10FFFF
"\u{1F4A9}"; // "💩" U+1F4A9

// Define a setter method on an objects property
var user = {
    name: 'klaus'
}

// The deprecated way:
user.__defineSetter__('name', function(value) {
    this.name = value;
});

// Using the set operator:
var user = {
    set name(value) {
        this.name = value;
    }
}

// Using Object.defineProperty:
var user = {};
Object.defineProperty(user, 'name', {
    set: function(value) {
        this.name = value;
    }
});

// Inheritance
var Rectangle = function(color, width, heigth) {
    this.color = color;
    this.width = width;
    this.height = height;
}

Figure.prototype.area = function() {
    return this.width * this.heigth;
}

var Square = function(color, length) {
    Rectangle.call(this, color, length, length);
}

Square.prototype = Object.create(Figure.prototype);

// Execute synchronous for each on array
[2, 5, 9].forEach(function(element, index, array) {
 console.log(element);
});

// Map functions
var squares = numbers.map(n => n*n); // ES6

var squares = numbers.map(function(n) {return n*n});

var ints = ['1', '2', '3'].map(Number);

var results = ['Charlie', 'Peter', 'Marry'].map((name, index) => ++index +'.'+ name); // ES6