Deeper JS

var vs. let vs. const

Which is best?

It depends but var should be treated as  💀

var

How we used to define variables.

var faveNum = 3;

💀💀💀

let

The new "var", use when you want to adjust value of variable you are creating.

let age = 29;

const

Should be used most of the time. Treated as constant that cannot be changed.

const me = {
    name: 'Bryan',
    location: {
        city: 'Hanalei',
        state: 'Hawaii'
    }
    tattoos: {
        has: false,
        count: 0
    }
}

const continued

Keep in mind that while you cannot change this variable type, you can change the contents

const me = {
    name: 'Bryan',
    location: {
        city: 'Holladay',
        state: 'Utah'
    }
    tattoos: {
        has: true,
        count: 5
    }
}

Scope

Where a functions/variables are visible and "who" can access them

var name = 'Bryan'

function sayName(){
    return name //accessible here because name is global
}

sayName() //'Bryan'
var name = 'Bryan'

function sayName(){
    var name = 'Eric'
    return name //What will the invocation of sayName output?
}
sayName()

Eric

var name = 'Bryan'

sayName()


function sayName(){
    return `the name is ${name}` //What will the invocation of sayName output?
}

"the name is Bryan"

function sayName(){
    return name 
}
sayName() //What will the invocation of sayName output?
let name = 'Bryan'

WTF
JavaScript

Hoisting

Hoisting

A process ran by the JS interpreter that will literally hoist variable/function definitions to the top of the file to be used

greet()

function greet(){
    return 'hey, fam'
}
function greet(){
    return 'hey, fam'
}

greet() // 'hey, fam'
function sayName(){
    return name
}

var name = 'Bryan'

let faveNum = 3

const me = {
    name: 'Bryan',
    age: 29
}

sayName()
function sayName(){
    return name
}

var name;

name = 'Bryan'

let faveNum = 3

const me = {
    name: 'Bryan',
    age: 29
}

sayName() //'Bryan'
var a = 1;

function b() {
  a = 10;
  return;
  function a() {}
}

b();

console.log(a); //what will this log to the console?
var a = 1;

function b() {
    function a() {} // hoisted to the top
    a = 10;
    return;
}

b();

console.log(a);

1

function foo(){
    function bar() {
        return 3;
    }
    return bar();
    function bar() {
        return 8;
    }
}
alert(foo()); //what will this output?
function foo(){
    function bar() { //hoisted first
        return 3;
    }
    function bar() { //hoisted second
        return 8;
    }
    return bar();
    
}
alert(foo());

8

Summary

  • var : hoisted to top of scope (global/function)

  • function declaration: Same ^^

  • let: not hoisted, can be altered

  • const: not hoisted, cannot be altered

  • function expression: not hoisted

Call
Apply

How to alter the context of "this"

But what is context?

Context is important when deciding the meaning of "this". Context refers to the object which a function belongs to.

this.calculateTotal()
me.greet()

this

me

.call

invokes a function with two parts; 1: a value for this, 2: an optional argument list

const person = {
    sayHey: function(){
        return this.firstName + " says hey!"
    }
}

const me = {
    firstName: 'Bryan',
    age: 29
}

const eric = {
    firstName: 'Eric',
    age: 28
}

person.sayHey.call(me) //outputs 'Bryan says hey!'
person.sayHey.call(eric) //outputs 'Eric says hey!'

.call

const person = {
    sayHey: function(){
        return this.firstName + " says hey!"
    },
    whatYouDo: function(whatIDo, whatITeach){
        return `${this.firstName} ${whatIDo} ${whatITeach}`
    }
}

const me = {
    firstName: 'Bryan',
    age: 29
}

const eric = {
    firstName: 'Eric',
    age: 28
}

person.sayHey.call(me, 'teaches', 'code') //outputs 'Bryan says hey!'
person.whatYouDo.call(eric, 'runs', 'lehi') //outputs 'Eric runs lehi'

.apply

invokes a function with two parts; 1: a value for this, 2: an optional array of arguments.

const person = {
    sayHey: function(){
        return this.firstName + " says hey!"
    }
}

const me = {
    firstName: 'Bryan',
    age: 29
}

const eric = {
    firstName: 'Eric',
    age: 28
}

person.sayHey.apply(me) //outputs 'Bryan says hey!'
person.sayHey.apply(eric) //outputs 'Eric says hey!'

.apply

const person = {
    sayHey: function(){
        return this.firstName + " says hey!"
    },
    whatYouDo: function(whatIDo, whatITeach){
        return `${this.firstName} ${whatIDo} ${whatITeach}`
    }
}

const me = {
    firstName: 'Bryan',
    age: 29
}

const eric = {
    firstName: 'Eric',
    age: 28
}

person.sayHey.apply(me, ['teaches', 'code']) //outputs 'Bryan says hey!'
person.whatYouDo.apply(eric, ['runs', 'provo']) //outputs 'Eric runs provo'

What is the difference?

.call: arguments come in as list

.apply: arguments come in as array

Deeper JS

By bryansmith33

Made with Slides.com

Deeper JS

  • 528

More from bryansmith33