JavaScript 101 ^draft

This post was updated more than 1 year ago, some information may be outdated!

This is a draft, the content is not complete and of poor quality!

Quick references for fundamental things in JavaScript.

👉 Notion note: JS 101.

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 Enter.

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

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

// Concise Declarative Functions
const person = {
  name: "Taylor",
  sayHello() {
    return `Hello! My name is ${this.name}.`;
  }
};

Getters and setters

class Book {
  constructor(author) {
    this._author = author;
  }
  // getter
  get writer() {
    return this._author;
  }
  // setter
  set writer(updatedAuthor) {
    this._author = updatedAuthor;
  }
}
const lol = new Book('anonymous');
console.log(lol.writer);  // anonymous
lol.writer = 'wut';
console.log(lol.writer);  // wut

Export/Import to share code blocks

// file ./math_funcs.js
const add = (x, y) => {return x + y};
const subtract = (x, y) => {return x - y};
export { add, subtract }; // can be imported in other scripts

// file ./math_default.js only has 1 export
export default function(x, y) { // without name
  return x + y;
}

// main.js
import {add, subtract } from './math_funcs.js';
import * as myMathModule from "./math_functions.js"; // everything

import anything from './math_default.js'; // from export default

Declare variables & Scopes

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

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

Difference between var, let and const,

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

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

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

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

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

function someFn() {
  if (true) {
    var localVar=1000
    console.log(localVar)      //ok
  }
  console.log(localVar)        //ok
  function nested() {
    console.log(localVar)      //ok
  }
}
console.log(localVar)      //error

function someFn() {
  if (true) {
    let localVar=1000
    console.log(localVar)      //ok
  }
  console.log(localVar)        //error
  function nested() {
    console.log(localVar)      //error
  }
}
console.log(localVar)      //error

Output

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

Basic operators

Check more operators & more operators with Math.

i = i + 1; // i++; // i += 1;
i = i - 1; // i--; // i -= 1;
i = i * 3; // i *= 3;
i = i / 2; // i /= 2;

11 % 3 // = 2, remainder

Math.random(); // give a random number between 0 and 1
Math.floor(); // round to its nearest whole number

parseInt("007a"); // give number 7
parseInt("11", 2); // give number 3, "2" is radix

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.

if (true){
  // commands
}

if (true){
  // commands
} else if (true){
  // commands
} else{
  // commands
}

let var = 'papaya';
switch (var) {
  case 'val1':
    // commands
    break;
  case 'val2':
    // commands
    break;
  default:
    // commands
    break;
}

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

Functions

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

// if there is no parameter
const <func> = () => {};

// if there is only one parameter
const <func> = <para> => {};

// single line: no need "{}"
const sumNumbers = number => number + number;

Older ways (ES5),

function <funcName>(<para>){
  // commands
}

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

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

Strings

Check more methods.

var a = 'Anh-Thi' + 'Dinh'; // plus the strings
a.length; // length of the string
a[0]; // first letter of the string
a[3]; // 4th letter
a[a.length - 1]; // last letter

a[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.

var arrName = ['a', 1, 'c'];
var nestedArr = [[1, 2], [3, 4]];

arrName[0] = 2; // 1st element is changed (different from string!)
nestedArr[1]; // gives [3, 4]

arrName.push(5); // add 5 at the END of an array
arrName.unshift(6); // add 6 at the BEGINNING of an array

popedElement = arrName.pop() // remove the LAST element of an array
shiftedElement = arrName.shift() // remove the FIRST element of an array

Objects

var myObj = {
  top: "hat",
  "bottom": "pants"
};

// CHECK PROPERTIES
myObj.hasOwnProperty("top");    // true
myObj.hasOwnProperty("middle"); // false

// Accessing Object Properties
myObj.top; // dot
myObj["bottom"]; // bracket

var pos = "top";
myObj[pos]; // via a variable

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

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

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

We can create a nested object inside an object.

Prevent object mutation,

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

Destructuring Assignment (ES6)

Extract values from object,

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

Assign variable from object,

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

Assign Variables from Nested Objects,

const user = {
  anhThi: {
    age: 30,
    email: '[email protected]'
  }
};
const {anhThi: {age, email}} = user;
const {anhThi: {age: userAge, email: userEmail}} = user;

Assign Variables from Arrays,

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

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

Assignment with the Rest Parameter to Reassign Array Elements,

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

Pass an Object as a Function's Parameters,

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

JSON

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

var ourMusic = [
  {
    "artist": "Daft Punk",
    "title": "Homework",
    "release_year": 1997,
    "formats": [
      "CD",
      "Cassette",
      "LP"
    ],
    "gold": true
  }, // first artist
  {
  ...
  } // second artist
];

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

Iterate with while / for / do..while loops

Check more statements.

while (<conditions>){
  // commands
}

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

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

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

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

References

• freeCodeCamp -- JavaScript Algorithms and Data Structures Certification (300 hours).
• w3schools -- JavaScript Tutorial.
• Event bubbling and capture