JavaScript es un lenguaje potente y dinámico, que cuenta con conceptos muy interesantes. ¿Quién no ha tenido que explicar la diferencia entre == y ===? Revisaremos lo que realmente sucede en este tipo de comparaciones. Incluyendo nuevos conceptos de ES6 y entendiendo realmente cómo funciona el lenguaje.

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