Javascript Concepts

- Logesh Paul

Agenda

• Hoisting
• Objects
• Closure
• `this` keyword

Hoisting

function doTheThing() {
  // ReferenceError: notDeclared is not defined
  console.log(notDeclared);

  // Outputs: undefined
  console.log(definedLater);
  var definedLater;

  definedLater = 'I am defined!'
  // Outputs: 'I am defined!'
  console.log(definedLater)

  // Outputs: undefined
  console.log(definedSimulateneously);
  var definedSimulateneously = 'I am defined!'
  // Outputs: 'I am defined!'
  console.log(definedSimulateneously)

  // Outputs: 'I did it!'
  doSomethingElse();

  function doSomethingElse() {
    console.log('I did it!');
  }

  // TypeError: undefined is not a function [Because functionVar is a variable]
  functionVar();

  var functionVar = function() {
    console.log('I did it!');
  }
}

To make things easier to read

• Declare all of your variables at the top of your function scope so it is clear which scope the variables are coming from.
• Define your variables before you need to use them.
• Define your functions at the bottom of your scope to keep them out of your way.

Just remember function definitions are hoisted to the top. Variable definitions are not, even if you declare and define a variable on the same line.

Objects

Javascript is a object oriented programming language

Object are containers with information/functionalities

Information - Values

Functionalities - Functions

Object - McDonald's Example

Show pre-defined JS objects - Navigator, Console, Document

Function - perform some action [or] return some value (eg. document.hidden)

Objects

Object Creation

var pizza = new Object();
var pizza = {};

Preview Object

console.log(pizza);
console.dir(pizza);  // detailed view

Add Properties, Methods

var pizza = {
    crust: "thin",
    hasBacon: true,
    toppings: 3,
    noOfToppings: function() {
        return this.toppings;
    }
};

console.log(pizza.crust);

Objects

Add Properties

pizza.price = "$12";

Access Functions

//pizza.noOfToppings();
console.log(pizza.noOfToppings());

Delete Properties

delete(pizza.crust);
console.log(pizza);

Objects

Inheritance, Share objects

var pizza = function() {
    
}

console.dir(pizza);

var pizza = function() {
    this.crust = "thin";
    this.hasBacon = true;
    this.toppings = 3;

    this.noOfToppings = function() {
        return this.toppings + 1;
    }
};

var pizzaA = new pizza();
var pizzaB = new pizza();


console.dir(pizza); // returns undefined
console.dir(pizzaA.crust);

pizzaA.crust = "pan"

Objects

Public, Private — Variables, Methods

var pizza = function() {
    // private variables
    var crust =  "thin";

    // public variables
    this.toppings = 3;
    this.hasBacon = true;
    
    // public method
    this.getCrust = function() {
        return crust;
    }

    // private method
    var getToppings = function() {
        return toppings;
    }
}

var pizzaA = new pizza();

console.log(pizzaA);
console.log(pizzaA.getCrust());
console.log(pizzaA.getToppings()); // throws error because its private

Closure

Closure is when a function 'remembers' its lexical scope even when the function is executing outside that lexical scope. ~ Kyle Simpson

var pizza = function() {
    var crust = "thin";
    var toppings = 3;
    var hasBacon = true;

    var getToppings = function() {
        return toppings;
    }

    var pizzaInfo = {};
    pizzaInfo.getToppings = getToppings;
    
    return pizzaInfo;
}

var pizzaA = new pizza();

Closures are useful in hiding the implementation of functionality while still revealing the interface

this

The elusive `this` keyword in JS

function identify() {
    return this.name.toUpperCase();
}

function speak() {
    var greeting = "Hello I'm"+ identify.call(this);
    console.log(greeting);
}

var me = {
    name: "LP"
}

var you = {
    name: "Listener"
}

identify.call(me); // LP
identify.call(you); // LISTENER

speak.call(me); // Hello, I'm LP
identify.call(you); // Hello, I'm LISTENER

this

function foo(num) {
    console.log("foo:" + num);

    // keep track how many times `foo` is called
    this.count++;
}

foo.count = 0;

var i;

for(i=0; i<10; i++) {
    if(i >5) {
        foo(i);
    }
}

console.log(foo.count); // 0 ??????

function foo(num) {
    console.log("foo:" + num);

    // keep track how many times `foo` is called
    data.count++;
}

var data = {
    count: 0
}

var i;

for(i=0; i<10; i++) {
    if(i >5) {
        foo(i);
    }
}

console.log(data.count); // 4

Thank You!

-LP