Lightning Talk 3 - How To Read Javascript

-David Wong

Slides Recording

Overview

• Expression and Statements
• Data Types
• Functions

Expressions

• Code that evaluates to a value
• Can be assigned or used as operands

    3 + 4 //7
    const value = 3 + 4 // value == 7

Statements

• Carry out actions such as creating a variable, functions, looping or evaluating code based on a specific condition
• Can only be declared

//If Statement
function testNum(a) {
  let result;
  if (a > 0) {
    result = "positive";
  } else {
    result = "NOT positive";
  }
  return result;
}

console.log(testNum(-5)); // Not Positive

Declarations

• Binding identifiers to values
• The terms Statements and Declarations have precise meaning in the formal syntax of Javascript. For example, If statement require statements in its body rather than declarations

    const varName = "";
    let varName2;

    function foo() {} 

    if (true) 
        const test = 123;
    // SyntaxError: declarations can only be declared inside a block statement

Primitive Types

• Data that is not an object
• Has no methods or properties
• Immutable: Meaning it can't be altered. Assigning a value is not altering. Altering is directly modifying the data in memory.
• When a property is accessed on a primitive value, Javascript automatically wraps the value into the corresponding wrapper object and accesses the property on the object instead.
• Examples;
  • string
  • number
  • boolean
  • etc

    const thisIsANumber = 123;
    //Number wrapper
    thisIsANumber.<methods()> // methods under the Number Wrapper
    const numberIntoString = thisIsANumber.toString();
    typeof thisIsANumber // number
    typeof numberIntoString // string
    numberIntoString.<methods()> // methods under the String wrapper

Objects

• Everything in Javscript is an Object, if not then it is a primitive type
• An object is a collection of related data or functionality.
• Is a key value pair
• You can reference a property on an object with their key

    //{ key: value }
    const User = { name: "David" }
    // User { name: "David"}
    User.name; // Property on User called name, which has a value of "David"

Using Objects

• You can access properties of an object with;
  • Dot Notation (.)
  • Square Bracket Notation ([])

const obj = { thisIsAKey: "this is a value" };
console.log(obj); // { thisIsAKey: "this is a value" }
console.log(obj.thisIsAKey); // "this is a value"

const person = {
  name: "David",
  email: "@email.com",
  house: {
    address: "123 Street",
    prevOwners: {
      owners: ["Alice", "Bob", "Charlie"],
    },
  },
  "variable with spaces": "value of variable with spaces",
  displayRandomStuff() {
    return "Random Stuff";
  },
  same: 1,
  same: 2,
};

console.log(person); // Output Object above
console.log(person.name); // "David"
console.log(person.house.address); // "123 Street"
console.log(person.house.prevOwners.owners[1]); // "Bob" with notation
console.log(person["house"]["prevOwners"]["owners"][1]); // "Bob" with bracket notation
console.log(person["variable with spaces"]); // "value of variable with spaces"
console.log(person.displayRandomStuff()); // "Random Stuff"
console.log(person.same); // 2

Operators

• Perform certain actions on operands
• Unary (1 Operand)

    typeof "Hello" //'string'

• Binary (2 Operands)

    3 + 4 // 7
    // 3 and 4 are operands
    // + is the operator
    // + can also be used as a unary, turns the value into a Number ( typeof +"5" => 'number')

• Ternary (3 Operands)
• Conditional Ternary Operator, only one in Javscript

// condition ? expressionIfTrue : expressionIfFalse
70 >= 50 ? console.log("Pass") : console.log("Fail");
//Pass
20 >= 50 ? console.log("Pass") : console.log("Fail");
//Fail

Keywords

• Reserved words part of the language syntax. Which means they can't be used as an identifier for variable declarations or function declarations.
• Examples;
  • const
  • var
  • let
  • this
  • etc

    const var = 123 // Not allowed to use var as name

Functions

• Functions in Javascript are first-class, meaning they are treated like any other variables
• You can have function declarations or function expressions
  • Function Declarations are loaded into memory during creation phase
  • Function expressions are not loaded into memory but assigned as undefined
  • You can reference a function declaration before you declare it in code, but not for function expressions
• You can assign functions to variables
• You can pass functions as an argument (The passsed function is called a callback function)
• You can return a function from a function
• A function that returns a function or takes another function as arguments are called higher-order functions
• A function is an object with a property prototype of Function.

sumA(10, 5);

// Function declaration
function sumA(x, y) {
  console.log(x + y);
}

sumB(1, 3); // wont work
// Cannot access sumB before intialisation

// Function expression
const sumB = function (x, y) {
  console.log(x + y);
};

sumB(1, 3); // works

// Arrow Function, assigning anonymous function into a variable
const sumC = (x, y) => {
  console.log(x + y);
};

sumC(10, 20); // works

// Assigning an anonymous function into a variable
const variableFunction = () => {
  console.log("Hello");
};
variableFunction(); // Invoke using the variable name

//Immediately Invoked Function Expression
(
  () => {
  console.log("Hello");
}
)();