JavaScript

Quick references for fundamental things in JavaScript.

👉 Reading: You Don't Know JS Yet 1 - Get Started

Miscellaneous

Using // for 1 line comment, /* */ for multi-line comment.

End of each command by ;.

Variables and function name are case sensitive.

Variables / functions should be named in the form of nameOfVariable.

Naming a constant: const FAV_PET = 'Cat';.
UpperCamelCase should be used by convention for ES6 class names.

Using \\ for special characters, for example, \\" for a " inside a "".

'' can be used inside a "" and vice versa.

Practice directly on the browser

Open the browser (I use Chrome), press F12 to open the Inspect window, then choose tab Console. Now, you can practice on this console window, for example, try with 1+1 and press Ent.

ES6

"ES" = "ECMAScript" ~ "Javascript".

Most of browsers use ES6 but not all.

ES6 = ES2015

JS timeline.

New features: Arrow functions, Classes, Modules, Promises, Generators, let and const.

Read more about ES6 on w3schools.

Concise things

1// Concise Object Literal Declarations
2const getMousePosition = (x, y) => ({ x, y });

1// Concise Declarative Functions
2const person = {
3  name: "Taylor",
4  sayHello() {
5    return `Hello! My name is ${this.name}.`;
6  }
7};

Getters and setters

1class Book {
2  constructor(author) {
3    this._author = author;
4  }
5  // getter
6  get writer() {
7    return this._author;
8  }
9  // setter
10  set writer(updatedAuthor) {
11    this._author = updatedAuthor;
12  }
13}
14const lol = new Book('anonymous');
15console.log(lol.writer);  // anonymous
16lol.writer = 'wut';
17console.log(lol.writer);  // wut

1// file ./math_funcs.js
2const add = (x, y) => {return x + y};
3const subtract = (x, y) => {return x - y};
4export { add, subtract }; // can be imported in other scripts
5
6// file ./math_default.js only has 1 export
7export default function(x, y) { // without name
8  return x + y;
9}

1// main.js
2import {add, subtract } from './math_funcs.js';
3import * as myMathModule from "./math_functions.js"; // everything
4
5import anything from './math_default.js'; // from export default

Declare variables & Scopes

1var varName; // global scope
2let varName; // ES6, block scope (inside {} or function,...)
3const varName; // ES6, can't be changed

1function funcName(){
2  oopsGlobal = 5;  // without `var`, it's a global variable
3}
4oppsGlobal; // returns 5

Difference between var, let and const

1var a = 1;
2var a = 2; // ok, a=2 now
3a = 5; // a=5 now

1let c = 1;
2let c = 2; // error
3c = 3; // c=3 now

1const b = 1;
2const b = 2; // error
3b = 2 // error

1const s = [1, 2, 3];
2s = [1, 2, 4]; // error
3s[2] = 4; // OK

var is "function" scope whereas log and const are "block" scope.

1function someFn() {
2  if (true) {
3    var localVar=1000
4    console.log(localVar)      //ok
5  }
6  console.log(localVar)        //ok
7  function nested() {
8    console.log(localVar)      //ok
9  }
10}
11console.log(localVar)      //error

1function someFn() {
2  if (true) {
3    let localVar=1000
4    console.log(localVar)      //ok
5  }
6  console.log(localVar)        //error
7  function nested() {
8    console.log(localVar)      //error
9  }
10}
11console.log(localVar)      //error

Output

1myName = "Thi"
2console.log("I'm " + myName + ".");
3console.log(`I'm ${myName}.`); // ES6

Basic operators

Check more operators & more operators with Math.

1i = i + 1; // i++; // i += 1;
2i = i - 1; // i--; // i -= 1;
3i = i * 3; // i *= 3;
4i = i / 2; // i /= 2;
5
611 % 3 // = 2, remainder

1Math.random(); // give a random number between 0 and 1
2Math.floor(); // round to its nearest whole number
3
4parseInt("007a"); // give number 7
5parseInt("11", 2); // give number 3, "2" is radix

Special operators

`||` vs `??`

|| checks falsy values whearas ?? check null or undefined!

1const a = 0 || 1; // 1
2const b = 0 ?? 1; // 0
3const c = false || 1; // 1
4const d = false ?? 1; // false
5const e = null || 1; // 1
6const f = null ?? 1; // 1

Async / Promise / Sync

You don't need to use try/catch in every async/await. You only need to do it at the top level.

Timeout Async

1timeoutAsync(ms) {
2  return new Promise(resolve => setTimeout(resolve, ms));
3}

Sync vs Async

Sync: tuần tự, lệnh này xong mới đến lệnh khác.

Async: không đồng bộ, 1 command có thể execute trong khi thằng khác đang chạy → function chạy in background while program tiếp tục chạy những dòng khác!

Why wee need asynchronous → js is single thread → perform long network requests without blocking the main thread. ← ref

Timing difference `Promise.all` & `async...await`

1const data = await Promise.all([res(3000), res(2000), res(1000)])
2//                              ^^^^^^^^^  ^^^^^^^^^  ^^^^^^^^^
3//                               delay 1    delay 2    delay 3
4//
5// ms ------1---------2---------3
6// =============================O delay 1
7// ===================O           delay 2
8// =========O                     delay 3
9//
10// =============================O Promise.all

1const data = await Promise.all([res(3000), res(2000), rej(1000)])
2//                              ^^^^^^^^^  ^^^^^^^^^  ^^^^^^^^^
3//                               delay 1    delay 2    delay 3
4//
5// ms ------1---------2---------3
6// =============================O delay 1
7// ===================O           delay 2
8// =========X                     delay 3
9//
10// =========X                     Promise.all

1const delay1 = res(3000)
2const delay2 = res(2000)
3const delay3 = rej(1000)
4
5const data1 = await delay1
6const data2 = await delay2
7const data3 = await delay3
8
9// ms ------1---------2---------3
10// =============================O delay 1
11// ===================O           delay 2
12// =========X                     delay 3
13//
14// =============================X await

Statements

Conditional statements `if` / `switch`

Comparison Operators: <, ==, === (strict equality), >, >=, <=, !=, !== (strict inequality).

Difference between == and ===: 3=='3' (true), 3==='3' (false).
Difference between != and !==: 3!='3' (false), 3!=='3' (true).

Logical operators: &&, ||, !.

Short-circuit evaluation: let a = b || 'Thi'; (if b isn't defined yet, a takes value 'Thi')

Ternary Operator: isNightTime ? console.log('Yes!') : console.log('No!');. We can use multiple nested ternary.

1if (true){
2  // commands
3}
4
5if (true){
6  // commands
7} else if (true){
8  // commands
9} else{
10  // commands
11}

1let var = 'papaya';
2switch (var) {
3  case 'val1':
4    // commands
5    break;
6  case 'val2':
7    // commands
8    break;
9  default:
10    // commands
11    break;
12}

You can remove break; to apply the same result for multiple cases.

Iterate with `while` / `for` / `do..while` loops

Check more statements.

1while (<conditions>){
2  // commands
3}

1do{
2  // commands
3} while (<conditions>);

1for (var i=0; i<5; i++){
2  // commands
3}

1// Iterate odd numbers
2for (var i=0; i<5; i+=2){
3  // commands
4}

1// Count backwards
2for (var i=10; i?5; i-=2){
3  // commands
4}

Try...catch

1try {
2  // statements to try
3} catch (err) {
4  // catch statements to handle err
5} finally {
6  // statements performed even there is err
7}

Nested? 👉 Read these clear examples on MDN.

Functions

1// ES6 way
2const rectangleArea = (width=10, height=5) => {
3  let area = width * height;
4  return area;
5};

1// if there is no parameter
2const <func> = () => {};
3
4// if there is only one parameter
5const <func> = <para> => {};
6
7// single line: no need "{}"
8const sumNumbers = number => number + number;

Older ways (ES5),

1function <funcName>(<para>){
2  // commands
3}

Rest parameter (ES6)

1const last_element = (...args) => {
2  return args[-1];
3}
4last_element(1,2,3); // 3
5

Spread Operator (ES6)

1const arr = [6, 89, 3, 45];
2const maximus = Math.max(...arr); // 89

Strings

Check more methods.

1var a = 'Anh-Thi' + 'Dinh'; // plus the strings
2a.length; // length of the string
3a[0]; // first letter of the string
4a[3]; // 4th letter
5a[a.length - 1]; // last letter
6
7a[0] = 'D'; // !!! CAN'T change an individual word

Special characters: \\' (single quote), \\" (double quote), \\\\(backslash), \\n (newline), \\r (carriage return), \\t (tab), \\b (word boundary), \\f (form feed).

Arrays

Check more methods.

1var arrName = ['a', 1, 'c'];
2var nestedArr = [[1, 2], [3, 4]];
3
4arrName[0] = 2; // 1st element is changed (different from string!)
5nestedArr[1]; // gives [3, 4]
6
7arrName.push(5); // add 5 at the END of an array
8arrName.unshift(6); // add 6 at the BEGINNING of an array
9
10popedElement = arrName.pop() // remove the LAST element of an array
11shiftedElement = arrName.shift() // remove the FIRST element of an array

Objects

1var myObj = {
2  top: "hat",
3  "bottom": "pants"
4};
5
6// CHECK PROPERTIES
7myObj.hasOwnProperty("top");    // true
8myObj.hasOwnProperty("middle"); // false

1// Accessing Object Properties
2myObj.top; // dot
3myObj["bottom"]; // bracket
4
5var pos = "top";
6myObj[pos]; // via a variable

1myObj.top = "T-shirt"; // Update object properties
2myObj.middle = "New shoe"; // Add new properties
3delete myObj.middle; // Delete a property

We can use object for lookups instead of using if..else or switch

1var alpha = {1:"A", 2:"B", 3:"C"};
2value = 2;
3alpha[value]; // instead of using if value==2 or switch value...

We can create a nested object inside an object.

Prevent object mutation,

1let obj = {
2  name:"FreeCodeCamp",
3  review:"Awesome"
4};
5Object.freeze(obj); // obj can't be changed

Destructuring Assignment (ES6)

Extract values from object,

1const user = {name: "Thi", age: 30};
2const {name, age} = user; // name="Thi", age=30

Assign variable from object,

1const {name: uName, age: uAge} = user; // uName="Thi", uAge=30

Assign Variables from Nested Objects,

1const user = {
2  anhThi: {
3    age: 30,
4    email: '[email protected]'
5  }
6};
7const {anhThi: {age, email}} = user;
8const {anhThi: {age: userAge, email: userEmail}} = user;

Assign Variables from Arrays,

1const [a, b] = [1, 2, 3, 4, 5, 6];
2console.log(a, b); // 1, 2

1const [a, b,,, c] = [1, 2, 3, 4, 5, 6];
2console.log(a, b, c); // 1, 2, 5

Assignment with the Rest Parameter to Reassign Array Elements,

1const [a, b, ...arr] = [1, 2, 3, 4, 5, 7];
2console.log(a, b); // 1, 2
3console.log(arr); // [3, 4, 5, 7]

Pass an Object as a Function's Parameters,

1const profileUpdate = ({ name, age, nationality, location }) => {
2  // do something with these fields
3}

JSON

JavaScript Object Notation or JSON is a related data interchange format used to store data,

1var ourMusic = [
2  {
3    "artist": "Daft Punk",
4    "title": "Homework",
5    "release_year": 1997,
6    "formats": [
7      "CD",
8      "Cassette",
9      "LP"
10    ],
11    "gold": true
12  }, // first artist
13  {
14  ...
15  } // second artist
16];

To access "CD": ourMusic[0].formats[0].

References

freeCodeCamp -- JavaScript Algorithms and Data Structures Certification (300 hours).

w3schools -- JavaScript Tutorial.

Event bubbling and capture

1class Book { 2 constructor(author) { 3 this._author = author; 4 } 5 // getter 6 get writer() { 7 return this._author; 8 } 9 // setter 10 set writer(updatedAuthor) { 11 this._author = updatedAuthor; 12 } 13} 14const lol = new Book('anonymous'); 15console.log(lol.writer); // anonymous 16lol.writer = 'wut'; 17console.log(lol.writer); // wut

1// file ./math_funcs.js 2const add = (x, y) => {return x + y}; 3const subtract = (x, y) => {return x - y}; 4export { add, subtract }; // can be imported in other scripts 5 6// file ./math_default.js only has 1 export 7export default function(x, y) { // without name 8 return x + y; 9}

1function someFn() { 2 if (true) { 3 var localVar=1000 4 console.log(localVar) //ok 5 } 6 console.log(localVar) //ok 7 function nested() { 8 console.log(localVar) //ok 9 } 10} 11console.log(localVar) //error

1function someFn() { 2 if (true) { 3 let localVar=1000 4 console.log(localVar) //ok 5 } 6 console.log(localVar) //error 7 function nested() { 8 console.log(localVar) //error 9 } 10} 11console.log(localVar) //error

1const data = await Promise.all([res(3000), res(2000), res(1000)]) 2// ^^^^^^^^^ ^^^^^^^^^ ^^^^^^^^^ 3// delay 1 delay 2 delay 3 4// 5// ms ------1---------2---------3 6// =============================O delay 1 7// ===================O delay 2 8// =========O delay 3 9// 10// =============================O Promise.all

1const data = await Promise.all([res(3000), res(2000), rej(1000)]) 2// ^^^^^^^^^ ^^^^^^^^^ ^^^^^^^^^ 3// delay 1 delay 2 delay 3 4// 5// ms ------1---------2---------3 6// =============================O delay 1 7// ===================O delay 2 8// =========X delay 3 9// 10// =========X Promise.all

1const delay1 = res(3000) 2const delay2 = res(2000) 3const delay3 = rej(1000) 4 5const data1 = await delay1 6const data2 = await delay2 7const data3 = await delay3 8 9// ms ------1---------2---------3 10// =============================O delay 1 11// ===================O delay 2 12// =========X delay 3 13// 14// =============================X await

1// if there is no parameter 2const <func> = () => {}; 3 4// if there is only one parameter 5const <func> = <para> => {}; 6 7// single line: no need "{}" 8const sumNumbers = number => number + number;

1var a = 'Anh-Thi' + 'Dinh'; // plus the strings 2a.length; // length of the string 3a[0]; // first letter of the string 4a[3]; // 4th letter 5a[a.length - 1]; // last letter 6 7a[0] = 'D'; // !!! CAN'T change an individual word

1var arrName = ['a', 1, 'c']; 2var nestedArr = [[1, 2], [3, 4]]; 3 4arrName[0] = 2; // 1st element is changed (different from string!) 5nestedArr[1]; // gives [3, 4] 6 7arrName.push(5); // add 5 at the END of an array 8arrName.unshift(6); // add 6 at the BEGINNING of an array 9 10popedElement = arrName.pop() // remove the LAST element of an array 11shiftedElement = arrName.shift() // remove the FIRST element of an array

1var ourMusic = [ 2 { 3 "artist": "Daft Punk", 4 "title": "Homework", 5 "release_year": 1997, 6 "formats": [ 7 "CD", 8 "Cassette", 9 "LP" 10 ], 11 "gold": true 12 }, // first artist 13 { 14 ... 15 } // second artist 16];

JavaScript

JavaScript

Miscellaneous

Practice directly on the browser

ES6

Concise things

Getters and setters

Export/Import to share code blocks

Declare variables & Scopes

Output

Basic operators

Special operators

|| vs ??

Async / Promise / Sync

Sync vs Async

Timing difference Promise.all & async...await

Statements

Conditional statements if / switch

Iterate with while / for / do..while loops

Try...catch

Functions

Strings

Arrays

Objects

Destructuring Assignment (ES6)

JSON

References

JavaScript

JavaScript

Miscellaneous

Practice directly on the browser

ES6

Concise things

Getters and setters

Export/Import to share code blocks

Declare variables & Scopes

Output

Basic operators

Special operators

|| vs ??

Async / Promise / Sync

Sync vs Async

Timing difference Promise.all & async...await

Statements

Conditional statements if / switch

Iterate with while / for / do..while loops

Try...catch

Functions

Strings

Arrays

Objects

Destructuring Assignment (ES6)

JSON

References

`||` vs `??`

Timing difference `Promise.all` & `async...await`

Conditional statements `if` / `switch`

Iterate with `while` / `for` / `do..while` loops

`||` vs `??`

Timing difference `Promise.all` & `async...await`

Conditional statements `if` / `switch`

Iterate with `while` / `for` / `do..while` loops