Javascript: Conceptos básicos
Download as PPTX, PDF0 likes63 views
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.
![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](https://image.slidesharecdn.com/webinarjavascript-180928160331/85/Javascript-Conceptos-basicos-21-320.jpg)
![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](https://image.slidesharecdn.com/webinarjavascript-180928160331/85/Javascript-Conceptos-basicos-22-320.jpg)
Javascript: Conceptos básicos
- 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?