Home
  • Jul 13, 2018
  • Post Nº 65

JavaScript Cheat Sheet

A simple JS cheat sheet for newbies, containing the basic syntax of commonly used statements: variable, class, array, JSON, ...

  • Photo by on

In this post, I’ll share the basic syntax that I used during the my work. For the demonstration purpose, the Chrome DevTool (v67.0) is used.

Variable Declaration

Variable. The var statement declares a variable, optionally initializing it to a value:

var a = 1;             // typeof(a): "number"
var b = Number(1);     // typeof(b): "number"
var c = new Number(1); // typeof(c): "object"

Constant. The const declaration creates a read-only reference to a value. The value of a constant cannot change through re-assignment, and it cannot be redeclared:

const SECRET = 'whatever';
SECRET = 'hacked?';
// Uncaught TypeError: Assignment to constant variable.

Class

Define a new class. You can 1) define input parameters for constructor; 2) define a computed variable in constructor; 3) define an instance method such as toEmail(); In an instance method, when referencing an instance variable, you must use the keyword this — it cannot be omitted.

class User {
  constructor(name, age) { // 1
    this.name = name;
    this.age = age;
    this.username = name + '_' + age; // 2
  }

  getLabel() { // 3
    return this.name + ' (' + this.age + ')';
  }
}

There can be only one method called constructor in a class. Having more than one occurence will throw a SyntaxError error.

Instantiate a class instance.

var u = new User('Foo', 10);

Query instance members. Instance variables are accessible using the following syntax. Method can be called in similar way, however, don’t forget the parentheses “()”:

instance.variable
instance.method()

console.log(u.name); // "Foo"
console.log(u.age);  // 10
console.log(u.getLabel());  // "Foo (10)"
console.log(u.getLabel));
// f getLabel() {
//     return this.name + '( ' + this.age + ')';
//   }

Comparison Operators

Equality (==). The equality operator converts the operands if they are not of the same type, then applies strict comparison. If both operands are objects, then JavaScript compares internal references which are equal when operands refer to the same object in memory.

Identity / strict equality (===). The identity operator returns true if the operands are strictly equal with no type conversion.

1 == 1    // true
1 == '1'  // true
1 === '1' // false
1 === 1   // true

Array

Create an array.

var arr = [1, 2];

Iterate an array. There’re many ways to achieve this:

  1. A simple loop
  2. A for…of loop
  3. Array.prototype.forEach()
var arr = [1, 2];

// A simple loop
for (var i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

// for...of (ECMAScript 6)
for (i of arr) {
  console.log(i);
}

// Array.prototype.forEach() (ECMAScript 5)
arr.forEach(i => console.log(i));

Add an element to array.

var arr = [1, 2];
arr.push(3);
// (3) [1, 2, 3]

Remove an element from array. Note that we can only remove the last one:

var arr = [1, 2];
arr.pop(); // 2
// [1]

Function map(). Use map() to create a new array from the existing one:

var users = [{id: 1}, {id: 2}];
var ids = users.map(u => u.id);
// (2) [1, 2]

Sorting. Sort by natural order, by numeric value, by string:

// natural order
[1, 3, 2].sort();
// (3) [1, 2, 3]

// numeric order
[{v:1},{v:3},{v:2}].sort((a, b) => a.v - b.v);
// (3)
// 0: {v: 1}
// 1: {v: 2}
// 2: {v: 3}

// alphabetical order
[{v:'b'},{v:'a'}].sort((a, b) => a.v.localeCompare(b.v));
// (2)
// 0: {v: "a"}
// 1: {v: "b"}

Serialization

JSON.stringify() allows you to serialize an instance to string.

JSON.stringify({ id: 1, v: "2" });
// "{"id":1,"v":"2"}"

JSON.parse() allows you to deserialize a string into an instance.

JSON.parse('{"id":1,"v":"2"}');
// {id: 1, v: "2"}

References

Search