Faable.com CEO. ☁Deploy next generation of cloud apps.
👨🏼💻Ironhack Lead Teacher.
Published
Edited
Nov 25, 2019
2 forks
1 star
md`# Advanced JS
**Today topics**:
1. setInterval & setTimeout
2. Context & Function invocation
3. JS Scope & Closure
Learnings:
* JS | Async & Callbacks v1
* JS | Context & Function invocation (bonus)
* JS | Closures & Scope
* JS | Debugging, Error Handling and JS Hint
`
md`## 1. setInterval & setTimeout`
/*{
console.log("Hola")
setTimeout(function(){
console.log("Adios")
},3000);
console.log("Hola2")
}*/
{
/*console.log("Hola")
setInterval(function(){
console.log("Adios")
},3000);
console.log("Hola2")*/
}
{
/*setInterval(function(){
console.log("Pepe")
},0);
setInterval(function(){
console.log("Pepe2")
},0);
*/
console.log("IntervalID is:")
}
md`## 2. Context & Function invocation`
md`### 2.1 Global context vs local context - (this)`
function suma(a,b){
console.log(this)
return a+b;
}
suma(5,4)
mando = {
return {
pilas:0,
addPila: function(){
console.log(this)
this.pilas++;
}
}
}
{
// Esto da un error porque la invocación no es como método sino como funcion.
let x = mando.addPila
x();
}
mando2 = {
return {
pilas:0,
addPila: function(){
var that = this;
function test(a){
console.log(that);
console.log("Prueba",a);
that.pilas++;
}
return test;
}
}
}
mando2.addPila()("X")
md`### 2.2 Types of invocations: method, function, constructor`
{
var value = 500;
var obj = {
value: 0,
increment: function() {
var that = this;
that.value++;
var innerFunction = function() {
console.log(that.value);
}
innerFunction(); // Function invocation pattern
}
}
obj.increment();
}
md`### 2.3 call, apply, bind`
// https://repl.it/@boyander/bind
// https://repl.it/@boyander/Context-call-apply
md`## 3. JS Scope & Closure`
md`### 3.1 Global vs local Scope`
{
var fn = function(){
var z = 10;
var fn2 = function(){
console.log("La variable del clousure Z es:",z);
}
return fn2;
}
var q = fn()
q()
}
md`### 3.2 Closure`
{
var z = 1000;
function hola(){
console.log("Z vale:",z);
}
hola();
console.log(z)
}
{
function clExample(){
var a = 50;
console.log(a)
}
clExample();
console.log(a);
}
{
for(var i = 0; i < 10; i++){
var q = 5
console.log(i)
}
console.log(q);
console.log("ultimo valor",i)
}
{
let i = 0;
for(i = 0; i < 10; i++){
console.log(i)
}
console.log("ultimo valor",i)
}
md`**clousure definition:** functions that refer to independent (free) variables. In other words, the function defined in the closure ‘remembers’ the environment in which it was created.`
md`### 3.3 Hoisting, Shadowing`
{
// Shadowing
var j = 10;
function hola(){
var j = 100;
console.log("Dentro",j);
}
hola();
console.log("Fuera",j)
}
{
// Shadowing con hoisting
var z = 10;
function saludo(){
console.log(z);
var z = 50;
}
saludo();
console.log(z);
}
{
// VARIABLE HOISTING
console.log(m)
var m = 5;
// var m;
// console.log(m);
// m = 5;
}
{
// FUNCTION HOISTING
saludo();
function saludo(){
console.log("Hola");
}
}
{
m();
let m = function (){
console.log("pepe")
}
}
{
var name = "Fer";
function changeName() {
console.log("Original name was " + name);
var name = "Harry";
console.log("New name is " + name);
}
changeName();
}
md`### 3.4 IIFE - Immediately-invoked function expression`
(function(){
console.log("JUAN");
})()
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
