JavaScript Basics

JavaScriptBasic.md

JavaScript Basics

Block Scope

Block scope - Generally speaking, whenever you see {curly brackets}, it is a block

{
    // Block Scope
}

Const vs Let vs Var

const: a blocked scoped which point to object reference that can not be change. Not to be confused with immuttablity.

// Can not altered
const a = 4 

// Can not be altered
const a = function() { console.log("Hello World") }

// The array can be altered but not reassigned. c must point to an array
const c = [1, 2, 3]

RULE OF THUMBS - use const for variable you don't plan on changing and let for variable that you plan on changing.

let: a blocks scoped variable that may be redefined.

var b = 2;

if (a === 1) {
  let b = 22;      // variable b is block scoped to if block
  console.log(b);  // 22
} 

console.log(b); // 2

var: declarations are globally scoped or function scoped

var a = 1;

if (a === 1) {
  var a = 11;      // this a is globally scoped
  console.log(a);  // 11
} 

console.log(a); // 11

JavaScript Object Literal

A JavaScript object literal is a comma-separated list of name-value pairs wrapped in curly braces. Object literals encapsulate data, enclosing it in a tidy package. This minimizes the use of global variables which can cause problems when combining code.

var myObject = {
    sProp: 'some string value',
    numProp: 2,
    bProp: false
};

Destructuring

The destructuring assignment syntax is a JavaScript (ES6)expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.

let a, b, rest;
[a, b] = [10, 20];

console.log(a);     // expected output: 10

console.log(b);     // expected output: 20

[a, b, ...rest] = [10, 20, 30, 40, 50];

console.log(rest);  // expected output: Array [30,40,50]

JavaScript Function

// Regular JavaScript function
const X = function() {
    // 'this' here is the caller of X.
}

// Arrow function
const Y = () => {
    // this is an arrow function
    // scopes to the defining environment not calling environment
}

The arrow function was introduced in ES6. It is recommended to be used with listeners and event handler.

JavaScript Classes

A JavaScript class is an obejct use to declare shared structure and behaviour for an object

class Person { 
    constructor(name) { 
        this.name = name; 
    }
    greet() { 
        console.log(`Hello ${this.name}!`};
    }
}

class Student extends Person
    constructor(name, level) { 
        super(name)
        this.level = level
    }
    greet() { 
        console.log(`Hello ${this.name}, from {this.level}!`};
    }
}

const o1 = new Person("Billy")
const o2 = new Student("Fin", "1st Grade")
const o3 = new Student("Jake", "2nd Grade")

Promise and Async/Await

// Old Way
const fetchData = () => { 
    fetch('https://api.github.com').then(resp => { 
        resp.json().then(date => { 
            console.log(data) 
        }); 
    }) 
};

// Modern Way
/* MUST LABEL THE FUNCTION ASYNC */
const fetchData = async () => { 
    const resp = await fetch('https://api.github.com');
    const data = await resp.json()
    console.log(data)
}

fetchData();

Promise Class

// Basic usage of Promises
const myPromise = new Promise(func1ReturnsPromise)
    .then(func2ReturnsPromise)
    .then(func1ReturnsPromise)
    .catch(handleRejectedAny);

// Using Promise.all()
var p1 = Promise.resolve(3);
var p2 = 1337;
var p3 = new Promise(function(resolve, reject) {
  setTimeout(resolve, 100, "foo");
}); 

Promise.all([p1, p2, p3]).then(function(values) { 
  console.log(values); // [3, 1337, "foo"] 
});

Template Strings

Template Strings - String defined with the backtick character `Some String. Supports interpolation.

JavaScript Styles vs Global Styles

// myVariable is substituted in within the string
let myString = `This is the ${myVariable} string ever!`;

Other Notes

Declarative programming - is a programming paradigm — a style of building the structure and elements of computer programs—that expresses the logic of a computation without describing its control flow

Imperative programming is a programming paradigm that uses statements that change a program's state

Functional programming is a programming paradigm where programs are constructed by applying and composing functions

Procedural programming is a programming paradigm, derived from structured programming, based on the concept of the procedure call

Control Flow (or flow of control) is the order in which individual statements, instructions or function calls of an imperative program are executed or evaluated