JavaScript

TypeScript

Variables

Functions

function callMe(name) {
	console.log(name);
}

const callMe = function(name) {
	console.log(name);
}

const callMe = (name) => {
	console.log(name);
}

const callMe = () => {
	console.log("Blah");
}

const returnMe = name => { // can omit braces if exactly one argument
	return name;
}

const returnMe = name => name;

Async Functions

// ASYNC FUNCTION
async function callMe(name) {
	console.log(name);
}

// ASYNC ARROW FUNCTION
const callMe = async (name) => {
	console.log(name);
}

await callMe('Markus');

Strings ⌨️

const string1 = "A string primitive";
const string2 = 'Also a string primitive';
const string3 = `Yet another string primitive`;
const string4 = new String("A String object");

'cat'.charAt(1) // gives value "a"
'cat'[1] // gives value "a"

const name = 'Markus';
console.log(`Hello, ${name}`); // prints: Hello, Markus

Equality

1 == 1; // true
'1' == 1; // true
0 == false; // true

0 != false; // false

1 === 1; // true
'1' === 1; // false
0 === false; // false

0 !== false; // true

Loops and iteration ⚙️

for(let i = 0; i < 10; i++) {
	console.log(i);
}

const arr = [3, 5, 7];
arr.foo = 'hello';

// for .. in - gives you keys
for (const i in arr) {
  console.log(i); // logs: 0, 1, 2, foo
}

// for .. of - gives you values (but only of iterable objects - notice how it leaves out 'hello'!)
for (const i of arr) {
  console.log(i); // logs: 3, 5, 7
}

const fruits = ["apple", "orange", "cherry"];
fruits.forEach((fruit) => console.log(fruit)); // logs: apple, orange, cherry

let i = 0;
while(i < 10) {
	console.log(i);
	i++;
}

let i = 0;
do {
	console.log(i);
	i++;
} while(i < 10);

let i = 0;

while (i < 6) {
  if (i === 5) break; // exit
  i = i + 1;
	if(i === 3) continue;
	console.log(i);  
}
// output: 1, 2, 4, 5

Modules 📦

// FILE A
export default const returnMe; //export as default (unnamed)
export const someData = 123; //named export
export const someFunction = () => { console.log('blah'); };

//FILE B
import whatever from './path/to/file.js'; //import default export and give it whatever name you want in the process
import { someData, someFunction } from './path/to/file.js'; //import named exports
import whatever, { someData } from './path/to/file.js'; //import default and named exports
import * as upToYou from './path/to/file.js'; //import all named exports at once

console.log(upToYou.someData);

Objects

const myCar = new Object();
myCar.make = 'Tesla';
myCar.model = 'Model 3';
myCar.year = 2022;

const myCar = {
	make: 'Tesla',
	model: 'Model 3',
	year: 2022
};

const myCar = {
	color: 'red',
	wheels: 4,
	engine: { // <-- Object
		type: 'electric',
		kW: 336,
		torque: 639
	},
	logPower() { // <-- method
		console.log(this.engine.kW); // Note the use of `this` to refer to the current object
	}
}

const obj = {
	property1: value1,
	2: value2,
	'property n': value3
};

myCar.model = 'Model Y';
myCar['model'] = 'Cybertruck';
const key = 'model';
myCar[key] = 'Model 2; // anything that converts to a string can be a key!

function Car(make, model, year) {
	this.make = make;
	this.model = model;
	this.year = year;
}

const car1 = new Car('Tesla', 'Model 3', 2022);
const car2 = new Car('Nissan', 'X-Trail', 2014);

Car.prototype.color = null; // add color property to all objects of type Car
car1.color = 'black'; // assign color black only to the object car1

const Animal = {
	type: 'Invertebrates', // Default value of property
	displayType() { // Method to display the type of Animal
		console.log(this.type);
	}
};

const animal1 = Object.create(Animal);
animal1.displayType(); // Output: Invertebrates

const fish = Object.create(Animal);
fish.type = 'Fishes';
fish.displayType(); // Output: Fishes

Duplicating Objects

let nData = { ...data }; // only a shallow copy
let nData = structuredClone(data); // deep clone, yeah!

Classes

class Person {
	constructor() {
		this.name = 'Markus';
	}
}

const person = new Person();
console.log(person.name);

class Person {
	name = 'Markus;
}

const person = new Person();
console.log(person.name);

class Person {
	name = 'Markus';
	printName() {
		console.log(this.name);
	}
}
const person = new Person();
person.printName();

class Person {
	name = 'Markus';
	printName = () => {
		console.log(this.name);
	}
}
const person = new Person();
person.printName();

class Human {
	species = 'human';
}

class Person extends Human {
	name = 'Markus';
	printName = () => {
		console.log(this.name);
	}
}

const person = new Person();
person.printName();
console.log(person.species);	

class Person {
	#name = '';
	constructor(name) {
		this.#name = name;
  }
	printName = () => {
		console.log(this.#name);
	}
}
const person = new Person("Markus");
person.printName(); // Markus
//console.log(person.#name); // ERROR

Spread and Rest Operator

const oldArray = [1, 2, 3];
const newArray = [...oldArray, 4, 5]; //this is now [1, 2, 3, 4, 5]

const oldObject = {
	name: 'Cat'
};
const newObject = {
	...oldObject,
	age: 3
};

// newObject is now { name: 'Cat', age: 3 }

const someObject = { a: 1, b: 2, c: 3, d: 4 };
const { a, b, ...otherAttrs } = someObject; // a, b and rest goes into otherAttrs

console.log(otherAttrs); // prints { c: 3, d: 4 }

Destructuring

const array = [1, 2, 3];
const [a, b] = array;
console.log(a); // prints 1
console.log(b); // prints 2
console.log(array); // prints [1, 2, 3]

const printName = (personObject) => {
	console.log(personObj.name);
}

printName({ name: 'Markus', age: 40 }); // prints 'Markus'

const printName = ({name}) => {
	console.log(name);
}
printName({ name: 'Markus', age: 40 }); // prints 'Markus'

const printName = ({name='Billy', age=12}) => {
	console.log( `${name}, ${age}` );
}
printName({ name: 'Markus' }); // prints 'Markus, 12'
printName({}); // prints 'Billy, 12'
printName(); // ERROR

True and False

• false

• 0

• “” (empty string)

• null

• Undefined

• NaN (not a number)

Promises 🙏

createAudioFileAsync(audioSettings).then(successCallback, failureCallback);

• pending: initial state, neither fulfilled nor rejected.

• fulfilled: meaning that the operation was completed successfully.

• rejected: meaning that the operation failed.

Guarantees

• Callbacks added with then() will never be invoked before the completion of the current run of the JavaScript event loop.

• These callbacks will be invoked even if they were added after the success or failure of the asynchronous operation that the promise represents.

• Multiple callbacks may be added by calling then() several times. They will be invoked one after another, in the order in which they were inserted.

Chaining

doSomething()
  .then(function (result) {
    return doSomethingElse(result);
  })
  .then(function (newResult) {
    return doThirdThing(newResult);
  })
  .then(function (finalResult) {
    console.log(`Got the final result: ${finalResult}`);
  })
  .catch(failureCallback); //you can leave out error handling until a final .catch()!
	.finally((info) => console.log("All Done")); //when the original promise is resolved

doSomething()
  .then((result) => doSomethingElse(result))
  .then((newResult) => doThirdThing(newResult))
  .then((finalResult) => {
    console.log(`Got the final result: ${finalResult}`);
  })
  .catch(failureCallback);
	.finally((info) => console.log("All Done"));

process.on("unhandledRejection", (reason, promise) => {
  /* You might start here by adding code to examine the
   * "promise" and "reason" values. */
});

Static methods

Arrays

Create ➕

Stats 📊

Add and Remove ✂️

Find, Filter and Sort 🔍

Convert and Process 🔨