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'