The document discusses various concepts of JavaScript including coercion, scope, hoisting, closures, and comparisons. It features examples demonstrating explicit and implicit type conversion, the behavior of functions with different variable scopes, and the implementation of closure. Additionally, it references resources for further understanding of JavaScript.

2. Nuestras
locaciones

3. Nuestros
Panelistas
Jorge Bernal
Senior Engineer
Laura Rodrigo
Marketing Analyst

4. Contenido
 Coercion
 Scope
 Hoisting
 Closures

5. QUESTIONS?
#JSBelatrixCoercion
3 < 2 < 1
True False
3 < 2 // false
false <1 // coercion
0 < 1 // true

6. QUESTIONS?
#JSBelatrix
var str = "123";
parseInt(str, 10); // 123
Number(str); // 123
+str; // 123
var num = 789;
num.toString(); // "789"
String(num); // "789“
var a = 42;
var b = a + ""; // "42"
var c = "3.14";
var d = c - 0; // 3.14
var e = null;
if (a) {
console.log('here'); // here
}
while (e) {
console.log('never runs');
}
Explicit Implicit

7. QUESTIONS?
#JSBelatrix
"5" == "5" // "5" === "5"
"5" == 5 // !ToNumber("5") == 5
true == 5 // !ToNumber(true) == 5
"5" == {} // 5" == ToPrimitive({})
undefined == null // true
+0 === -0 // true
5 === 5 // true
"Hello" === "hello" // false
{a: 'hi'} === {a: 'hi'} // false
Abstract Equality Sctrict Equality
(==) (===)

8. QUESTIONS?
#JSBelatrixScope
function b() {
}
function a() {
b();
}
a();

9. QUESTIONS?
#JSBelatrix
function b() {
var myVar;
}
function a() {
var myVar = 2;
b();
}
var myVar = 1;
a();
myVar
undefined
myVar
2
myVar
1

10. QUESTIONS?
#JSBelatrix
myVar
undefined
myVar
2
myVar
1
function b() {
console.log(myVar);
}
function a() {
var myVar = 2;
b();
}
var myVar = 1;
a();

11. Reference to
Outer
Environment
Reference to
Outer
Environment
QUESTIONS?
#JSBelatrix
myVar
2
myVar
1
function b() {
console.log(myVar);
}
function a() {
var myVar = 2;
b();
}
var myVar = 1;
a();

12. Reference to
Outer
Lexical
Environment
QUESTIONS?
#JSBelatrix
function a() {
function b() {
console.log(myVar);
}
var myVar = 2;
b();
}
var myVar = 1;
a();
b(); //ReferenceError
myVar
2
myVar
1
Reference to
Outer
Lexical
Environment

13. QUESTIONS?
#JSBelatrix
var foo = true;
if (foo) {
let bar = foo * 2;
bar = something( bar );
console.log( bar );
}
console.log( bar ); // ReferenceError
Let

14. QUESTIONS?
#JSBelatrix
var foo = true;
if (foo) {
var a = 2;
const b =3;
a = 3; // Works
b = 4; // Error
}
console.log( a ); // 3
console.log( b ); // ReferenceError
Const

15. QUESTIONS?
#JSBelatrixHoisting
a = 2;
var a;
console.log(a);
var a;
a = 2;
console.log(a);
console.log(a);
var a = 2;
var a;
console.log(a);
a = 2;
// 2
// undefined

16. QUESTIONS?
#JSBelatrix
foo();
function foo () {
console.log(a); // undefined
var a = 2;
}
function foo () {
var a;
console.log(a); // undefined
a = 2;
}
foo();

17. QUESTIONS?
#JSBelatrix
foo(); // TypeError
bar(); // ReferenceError
var foo = function bar() {
// ...
};
var foo
foo(); // TypeError
bar(); // ReferenceError
foo = function () {
// ...
};

18. QUESTIONS?
#JSBelatrix
foo(); // 1
var foo;
function foo () {
console.log(1);
}
foo = function () {
console.log(2);
};
function foo () {
console.log(1);
}
foo(); // 1
foo = function () {
console.log(2);
};

19. QUESTIONS?
#JSBelatrixClosures
Closure: Cuando
una función es
capaz de recordar y
acceder a su scope,
incluso cuándo se
ejecuta fuera del
scope.
function foo() {
var a = 2;
function bar() {
console.log(a);
}
return bar;
}
var baz = foo();
baz(); // 2

20. QUESTIONS?
#JSBelatrix
function wait(message) {
setTimeout( function timer() {
console.log(message);
}, 1000);
}
wait('Hello, closure!');

21. QUESTIONS?
#JSBelatrix
function foo() {
var something = "cool";
var another = [1, 2, 3];
function doSomething() {
console.log( something );
}
function doAnother() {
console.log( another.join( " ! " ) );
}
}
Module Pattern

22. function CoolModule() {
var something = "cool";
var another = [1, 2, 3];
function doSomething() {
console.log( something );
}
function doAnother() {
console.log( another.join( " ! " ) );
}
return {
doSomething: doSomething,
doAnother: doAnother
};
}
var foo = CoolModule();
foo.doSomething(); // cool
foo.doAnother(); // 1 ! 2 ! 3
Revealing Module Pattern QUESTIONS?
#JSBelatrix

23. References
 https://tc39.github.io/ecma262/
 You Don't Know JS (book series) - Kyle Simpson
 JavaScript: Understanding the Weird Parts - Anthony Alicea

24. ¿Preguntas?

25. ¡Muchas Gracias!
www.belatrixsf.com