JavaScript cheat sheet

Shortcuts

Basics

console.log("Hello World!");

Defining a variable

let name = "Kasra";
// It's common to define a string with single quote in JS

Defining a constant

const englishLanguageCode = "EN";

Primitive types

let name = "Kasra"; // string
let evenNumber = 20; // number
let isMarried = false; // boolean

// If variable is not initialized the default value is 'undefined'

// It is also possible to set a variable to null

name = null;

Getting the type of variable

typeof name; // prints 'string'

let someVar = null;
typeof someVar; // prints 'object'
let anotherVar;
typeof anotherVar; // prints 'undefined'

Defining an object

let person = {
  name: "Kasra",
  age: 30,
  gender: "Male"
};

console.log(person.name); // prints 'Kasra'
person.name = "John";
console.log(person.name); // prints 'John'
// Another approach of setting value of an object
person["name"] = "Joe"; // sets name as 'Joe'
// Or
let propertyVal = "name";
person[propertyVal] = "David"; // sets name as 'David'

delete person.age; // delete the object property

person.hasOwnProperty("age"); // returns false, since the property is deleted

Object with functions

let person = {
  name: "Kasra",
  age: 30,
  getMood: function(timeOfDay) {
    timeOfDay = timeOfDay.toLowerCase();
    if (timeOfDay === "noon") {
      return "No bad!";
    } else if (timeOfDay === "morning") {
      return "Okaish";
    } else {
      return "No Good!";
    }
  }
};

Defining an array

let languages = ["English", "German", "Persian"];

console.log(languages[0]); // prints 'English'

languages[3] = "French"; // Add 'French' to language array

typeof languages; // prints object

Defining a function

function add(x, y) {
  return x + y;
}

console.log(add(10, 20)); // prints '30'

function printFullName(firstName, lastName) {
  console.log("FirstName: " + firstName + "\n" + "LastName: " + lastName);
}

function printFullNameDefault(firstName, lastName = "Wick") {
  printFullName(firstName, lastName);
}

printFullName("Kasra"); // since only one argument has passed, it prints 'FirstName: Kasra \n LastName: undefined'
printFullNameDefault("Kasra"); // because lastName has default value like Python, it prints 'FirstName: Kasra \n LastName: Wick'

Note: If you don’t define a return value, the default value is undefined.

Function parameters

JS function can have as many parameters as we want in the method declaration. And when call just pass one or two:

function printFullName(firstName, lastName) {
    console.log(firstName, lastName);
}

printFullName("Kasra");

The above code throws an error because we use the second param as well. To make the method call working it has to be modified to:

function printFullName(firstName, lastName) {
    if(typeof lastName !== "undefined") {
        console.log(firstName, lastName);
    } else {
        console.log(firstName);
    }
}

printFullName("Kasra");

Function inside of a function

It’s possible to define a function inside of a function. But the inner function will not be accessible to outside and only the parent function can access it.

function printFullName(firstName, lastName) {
    console.log(firstName, lastName);

    function printLength(firstName, lastName) {
        console.log(firstName.length + lastName.length);
    }
    printLength();
}

Strings

Length

str = "Kasra";
str.length;

Get first character

str[0];

String interpolation

function concat(str1, str2) {
  return `${str1} ${str2}`;
}

Array

let arr = ["Kasra", 30, "Male"];

Nested array

let people = [
  ["John", 40, "Male"],
  ["Kasra", 30, "Male"]
];

console.log(people[0]); // prints `[ 'John', 40, 'Male' ]`

people[0][1] = 37;

console.log(people[0]); // prints `[ 'John', 37, 'Male' ]`

Add element to array

people.push(["Elizabeh", 20, "Female"]);

Remove the last element

let elizabethProfile = people.pop();

Remove from the first element

let johnProfile = people.shift();

Add element to the first index

people.unshift(["Bean", 60, "Male"]);

Getting index number

people.indexOf("Hello");

Removing elements

array.splice(2, 1); // Removes index 2 and 1 element only

Natural sorting

let arr = [100, 20, 30, 5, 60]
arr.sort() // returns alphabetic sort which will be wrong for number
// to fix it

arr.sort(function(a,b) { return a - b });

Looping

let games = ["Counter Strike", "Delta Force", "Red Alert", "NFS"];

games.foreach((gameName, index) => {
console.log(gameName);
});

Equality and strict equality

console.log(10 == 10); // prints true
console.log(10 == "10"); // prints true
console.log(10 === 10); // prints true
console.log(10 === "10"); // prints false

console.log(10 != 10); // prints false
console.log(10 != "10"); // prints false
console.log(10 !== 10); // prints false
console.log(10 !== "10"); // prints true

Clone an object

let clone = JSON.parse(JSON.stringify(originalObject));

Constructor function

function Person(name, age, gender) {
  this.name = name;
  this.age = age;
  this.gender = gender;
  this.mood = function(timeOfDay) {
    timeOfDay = timeOfDay.toLowerCase();
    if (timeOfDay === "noon") {
      return "No bad!";
    } else if (timeOfDay === "morning") {
      return "Okaish";
    } else {
      return "No Good!";
    }
  };
}

let kasra = new Person("Kasra", 30, "Male");
kasra.mood("morning");

Note: Since the above code is the constructor function, the name should start with a capital letter to mimic the class in Java.

Generate random number between 0..X

Math.floor(Math.random() * factor); // factor = 20 generates number between 0 to 19

Prototyping (AKA class inheritaince ploymorphism)

function Rectangle(width, height) {
  this.width = width;
  this.height = height;
}

Rectangle.prototype.render = function() {
  console.log("I'm a " + this.width + " x " + this.height + " rectangle");
};

var rectangle = new Rectangle(2, 4);
rectangle.render();

function Square(dimension) {
  Rectangle.call(this, dimension, dimension);
}
Square.prototype = Object.create(Rectangle.prototype);

var square = new Square(16);
Square.prototype.render = function() {
  console.log("I'm a square!");
};

square.render();

Inheritance

class Animal {
    constructor(gender, age, size) {
         this.gender = gender;
         this.age = age;
         this.size = size
    }
}

class Human extends Animal {
     constructor(firstName, lastName, gender, age, size) {
          super(gender, age, size);
          this.firstName = firstName;
          this.lastName = lastName;
     }
}

Private fields, functions

var rectObject = (function() {
  var width = 0;
  var height = 0;

  return {
    resize: function(w, h) {
      width = w;
      height = h;
    },

    printSizes: function() {
      console.log(width + " " + height);
    }
  };
})();

rectObject.printSizes();
rectObject.resize(10, 10);
rectObject.printSizes();

console.log(rectObject.width);

Note: In the above code width and height properties are private and inaccessible from outside.

String to int

parseInt("10"); // returns 10

Strict mode

Use "use strict"; to catch common mistake. Can be added on the top of the file or at the function level.

Read only variable

const LOCAL_EN = "EN";

Block object manipulation

function Person(firstName, age, gender) {
  this.firstName = firstName;
  this.age = age;
  this.gender = gender;
}

let johnProfile = new Person("John", 35, "Male");

console.log(johnProfile); // prints `Person { firstName: 'John', age: 35, gender: 'Male' }`

Object.freeze(johnProfile);

johnProfile.age = 10;

console.log(johnProfile); // prints `Person { firstName: 'John', age: 35, gender: 'Male' }` ignores the changes applied

Anonymous function

Without using arrow (lambda),

let sum = function(x, y) {
  return x + y;
};

With arrow,

let sum = (x, y) => {
  return x + y;
};

let sum = (x, y) => x + y;

Higher order function (Filter and map)

function Person(firstName, lastName, age) {
  this.firstName = firstName;
  this.lastName = lastName;
  this.age = age;
}

let arr = [10, 20, 0, 50, -100, -21, 9, 8, 5, 3, 1];

// filter
console.log(arr.filter(x => x > 0 && x % 2 === 0));

let people = [
  new Person("John", "Wick", 40),
  new Person("Kasra", "Mp", 30),
  new Person("David", "Moron", 45)
];

// map
let fullNames = people.map(person => `${person.firstName} ${person.lastName}`);

console.log(fullNames);

Default parameter

function Person(firstName, lastName, age = -1) {
  this.firstName = firstName;
  this.lastName = lastName;
  this.age = age;
}

let personNoLastname = new Person("John", "Wick");

console.log(personNoLastname);

Note: The default parameter should be the last one always.

Reduce

function sum(...args) {
  return args.reduce((a, b) => a + b, 0);
}

console.log(sum(10, 20, 30));

Clone

let arr0 = ["Hello", "Hi", "Hey", "Salute"];

let arr1 = arr0;
arr1[0] = "XYZ";

console.log(arr0);
arr0 = ["Hello", "Hi", "Hey", "Salute"];

// to avoid side effect, can use rest operator to clone
let arr2 = [...arr0];

arr2[0] = "Hallo";

console.log(arr0);

Object destructuring

let objs = { 1: "One", 2: "Two", 3: "Three" };

let { 1: oneVariable } = objs;

console.log(oneVariable);

let people = {
  kasra: {
    name: "Kasra",
    age: 30
  },
  john: {
    name: "John",
    age: 45
  }
};

let {
  john: { age: johnAge }
} = people;

console.log(johnAge);

Array destructuring

let arr = [1, 2, 3, 4, 5, 6, 7, 8];

let [, , , , five, , , eight] = arr; // gets 5 and 8

console.log(five, eight);

(() => {
  [five, eight] = [eight, five]; //swap
})();

let [, , ...greatherThanThree] = arr;
console.log(greatherThanThree); // prints [ 3, 4, 5, 6, 7, 8 ]

Object destructuring on functions

function Person(firstName, lastName, age, gender) {
  this.firstName = firstName;
  this.lastName = lastName;
  this.age = age;
  this.gender = gender;
}

let printFullName = ({ firstName, lastName }) =>
  console.log(`${firstName} ${lastName}`);

let john = new Person("John", "Wick", 40, "Male");

printFullName(john);

A different way of creating object

let Person = (name, age) => ({ name, age });

let john = Person("John", 45);
console.log(john);

Class

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

let john = new Person("John Wick", 40);

Encapsulation

function createPerson() {
  class Person {
    constructor(name, age) {
      this._name = name;
      this._age = age;
    }

    get name() {
      return this._name;
    }

    set name(name) {
      this._name = name;
    }

    get age() {
      return this._age;
    }

    set age(age) {
      this._age = age;
    }
  }
  return Person;
}

const Person = createPerson();

let john = new Person("John", 40);

let age = john.age;

john.age = ++age;

console.log(john);

Import and export

Export:

export const isBlank = str => str === undefined || str.length === 0;

Import:

import { isBlank } from "./stringUtils";

console.log(isBlank("test"));

Import everything:

import * as strUtil from "./stringUtils";

Default export:

It allows the module to be exported at function, or class level.

export default const isBlank = str => str === undefined || str.length === 0;

Default import:

Allos a single function to be imported from a file.

import isBlank from "./stringUtils";

When importing class or function can use default keyword.

For function and variables both import and export should be wrapped around {},

// TestModule.js
class Test {

}

const testFunction = () => {
  // do whatever
}

export default Test

export {testFunction} // notice `{}`

import Test from './TestModule';
import {testFunction} from './TestModule'; // again notice `{}`

Class vs Constructor Function vs Factory Function

// class
class ClassCar {
  drive () {
    console.log('Vroom!');
  }
}

const car1 = new ClassCar();
console.log(car1.drive());


// constructor
function ConstructorCar () {}

ConstructorCar.prototype.drive = function () {
  console.log('Vroom!');
};

const car2 = new ConstructorCar();
console.log(car2.drive());


// factory
const proto = {
  drive () {
    console.log('Vroom!');
  }
};

const factoryCar = () => Object.create(proto);

const car3 = factoryCar();
console.log(car3.drive());

Event listener

// const Emitter = require('events').EventEmitter;
import EventEmitter as Emitter from events;
const studentEventEmitter = new Emitter();

// emit an event
studentEventEmitter.emit("registered", student);

// event listener
studentEventEmitter.on("registered", (registeredStudent) => {
  console.log(`Student with id ${registeredStudent.id} is registered!`);
});

Event listener for HTML

let btn = document.getElementById("btn");

function printHello() {
    console.log("Hello");
    btn.removeEventListener("click", printHello);
    document.getElementById("msg-box").innerHTML="Hello World";
}

btn.addEventListener("click", printHello);

// <div id="msg-box">This is a message</div> HTML

Read file with stream

// const fs = require("fs");
import fs from "fs";
const fis = fs.createReadStream("file.txt");
fis.on("data", (content) => {
  console.log(content.toString());
});

// pause an stream
fis.pause(); 

// end event
fis.on("end", () => {
  console.log("Stream has ended");
});

Copying file

// const fs = require("fs");
import fs from "fs";

const fis = fs.createReadStream("file.txt");
const fos = fs.createWriteStream("copy_file.txt");

// print the file content
fis.pipe(process.stdout);

// pipe the stream to write stream [make copy literally]
fis.pipe(fos);

Some ES6 (ECMAScript 2015) recommendations

Don’t use var, instead use let or const

Don’t use function, instead use arrow function

// Don't use
function doSomething(x) {
  // Busincess logics
}

// Use
const doSomething = (x) => {
  // Business logics
}
const doSomething = x => // Business logics

Use object literals

const prop = 'lastName';
const age: 43;

const obj = {
  name: 'John',
  getName: () => {},
  [prop]: 'Wick', // Dynamic property, it will evaluate to `lastName` => obj.lastName
  age: age
}

Use new import/export syntax

// import ES5 - Don't use
var something = require('./something');

// export ES5 - Don't use
module.exports = something;

// import ES6
import something from './something';  // Import default
import {anotherThing} from './something'; // Import a named export (any export that's not default)

// export ES6
const something = {
// funcs and variables
}
export default something; // Default export
export anotherthing = '1000'; // Named export
export yetanotherthing = '101';

Use async, await over then

// ES5 of waiting for a response AKA callback hell
const getData = () => {
	fetch('https://api.example.come').then(resp => {
		resp.json().then(data => {
			console.log(data);
		});
	});
};

// ES6 using async await that makes the function returns a promise
const getDataPromise = async () => {
	const resp = await fetch('https://api.example.com');
	const data = await resp.json();
	console.log(data);
}

References