Javascript under the hood 1
-
Upload
thang-tran-duc -
Category
Technology
-
view
1.235 -
download
0
Transcript of Javascript under the hood 1
![Page 1: Javascript under the hood 1](https://reader030.fdocuments.us/reader030/viewer/2022021419/58a9b6491a28ab1f1a8b498d/html5/thumbnails/1.jpg)
>< nextprevious
Javascript Under The HoodThe Mysterious Parts
Tran Duc Thang Framgia Vietnam - Business Strategy Office - Human Development Section
Demystifying Javascript’s “First-class functions”, “Scope”, “Closure”, and “this” keyword binding
1
![Page 2: Javascript under the hood 1](https://reader030.fdocuments.us/reader030/viewer/2022021419/58a9b6491a28ab1f1a8b498d/html5/thumbnails/2.jpg)
>< nextprevious
“Javascript is the World's Most Misunderstood
Programming Language!” ~ Douglas Crockford ~
2
![Page 3: Javascript under the hood 1](https://reader030.fdocuments.us/reader030/viewer/2022021419/58a9b6491a28ab1f1a8b498d/html5/thumbnails/3.jpg)
>< nextprevious3
Too much to remember, too weird to understand?
first-class functions
lexical scope
function scopeclosure
IIFE
prototypefunction statement
function expressionhoisting
this
function constructornew
block scope
![Page 4: Javascript under the hood 1](https://reader030.fdocuments.us/reader030/viewer/2022021419/58a9b6491a28ab1f1a8b498d/html5/thumbnails/4.jpg)
>< nextprevious
Some JS Quizes
4
http://jsbin.com/tojavun/edit?html,js,console,output
![Page 5: Javascript under the hood 1](https://reader030.fdocuments.us/reader030/viewer/2022021419/58a9b6491a28ab1f1a8b498d/html5/thumbnails/5.jpg)
>< nextprevious
Some JS Quizes
5
http://jsbin.com/wabedaf/3/edit?html,js,output
![Page 6: Javascript under the hood 1](https://reader030.fdocuments.us/reader030/viewer/2022021419/58a9b6491a28ab1f1a8b498d/html5/thumbnails/6.jpg)
Table of Contents
01 Basic Introductions‣ First-class functions ‣ IIFE ‣ Hoisting
020304
>< nextprevious
Scope
‣ Lexical Scope ‣ Function Scope vs Block Scope
Closure‣ Understanding Closure ‣ Fixing the problems with Closure
this keyword binding‣ Understanding this keyword ‣ Binding this
6
![Page 7: Javascript under the hood 1](https://reader030.fdocuments.us/reader030/viewer/2022021419/58a9b6491a28ab1f1a8b498d/html5/thumbnails/7.jpg)
>< nextprevious
First-class functions‣ Javascript value types
‣ string
‣ number
‣ boolean
‣ null
‣ undefined
‣ symbol (ES6)
‣ object
7
Primitive values
Object
![Page 8: Javascript under the hood 1](https://reader030.fdocuments.us/reader030/viewer/2022021419/58a9b6491a28ab1f1a8b498d/html5/thumbnails/8.jpg)
>< nextprevious
First-class functions
‣ Everything which is not primitive is object.
‣ Function (and even Class in ES6) in Javascript is actually object.
8
![Page 9: Javascript under the hood 1](https://reader030.fdocuments.us/reader030/viewer/2022021419/58a9b6491a28ab1f1a8b498d/html5/thumbnails/9.jpg)
>< nextprevious
First-class functions
9
![Page 10: Javascript under the hood 1](https://reader030.fdocuments.us/reader030/viewer/2022021419/58a9b6491a28ab1f1a8b498d/html5/thumbnails/10.jpg)
>< nextprevious
First-class functions
‣ First-class citizen (also type, object, entity, or value) is an entity which supports all the operations generally available to other entities.
‣ These operations typically include being passed as an argument, returned from a function, and assigned to a variable
10
![Page 11: Javascript under the hood 1](https://reader030.fdocuments.us/reader030/viewer/2022021419/58a9b6491a28ab1f1a8b498d/html5/thumbnails/11.jpg)
>< nextprevious
First-class functions
‣ A programming language is said to have first-class functions if it treats functions as first-class citizens.
‣ Javascript has first-class functions!
11
![Page 12: Javascript under the hood 1](https://reader030.fdocuments.us/reader030/viewer/2022021419/58a9b6491a28ab1f1a8b498d/html5/thumbnails/12.jpg)
>< nextprevious
First-class functions
12
![Page 13: Javascript under the hood 1](https://reader030.fdocuments.us/reader030/viewer/2022021419/58a9b6491a28ab1f1a8b498d/html5/thumbnails/13.jpg)
>< nextprevious
First-class functions
‣ Function Statement
‣ Function Expression
13
![Page 14: Javascript under the hood 1](https://reader030.fdocuments.us/reader030/viewer/2022021419/58a9b6491a28ab1f1a8b498d/html5/thumbnails/14.jpg)
>< nextprevious
First-class functions
14
Function Statement Function Expression
Defines function. Also known as function declaration.
Defines a function as a part of a larger expression syntax
Must begins with “function” keyword
Must not begin with “function” keyword
Must have a name Can have a name or not (can be anonymous)
![Page 15: Javascript under the hood 1](https://reader030.fdocuments.us/reader030/viewer/2022021419/58a9b6491a28ab1f1a8b498d/html5/thumbnails/15.jpg)
>< nextprevious
First-class functions
15
![Page 16: Javascript under the hood 1](https://reader030.fdocuments.us/reader030/viewer/2022021419/58a9b6491a28ab1f1a8b498d/html5/thumbnails/16.jpg)
>< nextprevious
First-class functions
‣ IIFE: Immediately Invoked Function Expression is a Javascript function that runs as soon as it is defined.
16
![Page 17: Javascript under the hood 1](https://reader030.fdocuments.us/reader030/viewer/2022021419/58a9b6491a28ab1f1a8b498d/html5/thumbnails/17.jpg)
>< nextprevious
First-class functions
17
![Page 18: Javascript under the hood 1](https://reader030.fdocuments.us/reader030/viewer/2022021419/58a9b6491a28ab1f1a8b498d/html5/thumbnails/18.jpg)
>< nextprevious
Hoisting
‣ Hoisting: The ability to use variable, function before they are declared.
‣ Javascript only hoists declarations, not initializations
18
![Page 19: Javascript under the hood 1](https://reader030.fdocuments.us/reader030/viewer/2022021419/58a9b6491a28ab1f1a8b498d/html5/thumbnails/19.jpg)
>< nextprevious
Hoisting
19
![Page 20: Javascript under the hood 1](https://reader030.fdocuments.us/reader030/viewer/2022021419/58a9b6491a28ab1f1a8b498d/html5/thumbnails/20.jpg)
>< nextprevious
Scope
‣ Scope is the set of variables, objects, and functions you have access to
‣ 2 ways to create a Scope: Function and Block*
20
![Page 21: Javascript under the hood 1](https://reader030.fdocuments.us/reader030/viewer/2022021419/58a9b6491a28ab1f1a8b498d/html5/thumbnails/21.jpg)
>< nextprevious
Scope‣ Lexical Scope vs Dynamic Scope
‣ Lexical Scope, or Static Scope: The scope of a variable is defined by its location within the source code and nested functions have access to variables declared in their outer scope.
‣ Dynamic Scope: The scope of a variable depends on where the functions and scopes are called from
‣ Lexical Scope is write-time, whereas Dynamic Scope is runtime
‣ Javascript has Lexical Scope!
21
![Page 22: Javascript under the hood 1](https://reader030.fdocuments.us/reader030/viewer/2022021419/58a9b6491a28ab1f1a8b498d/html5/thumbnails/22.jpg)
>< nextprevious
Scope
22
‣ Global Scope
‣ Local Scope
‣ Nested Scope
‣ Outer Scope
‣ Inner Scope
‣ Function Scope
‣ Block Scope
![Page 23: Javascript under the hood 1](https://reader030.fdocuments.us/reader030/viewer/2022021419/58a9b6491a28ab1f1a8b498d/html5/thumbnails/23.jpg)
>< nextprevious
Scope
23
IIFE can be used to create a new scope!
![Page 24: Javascript under the hood 1](https://reader030.fdocuments.us/reader030/viewer/2022021419/58a9b6491a28ab1f1a8b498d/html5/thumbnails/24.jpg)
>< nextprevious
Closure‣ Closure is a function that can remember and
access its lexical scope even when it's invoked outside its lexical scope
24
![Page 25: Javascript under the hood 1](https://reader030.fdocuments.us/reader030/viewer/2022021419/58a9b6491a28ab1f1a8b498d/html5/thumbnails/25.jpg)
>< nextprevious
Closure
25
Unravel the problems http://jsbin.com/wabedaf/3/edit?html,js,output
![Page 26: Javascript under the hood 1](https://reader030.fdocuments.us/reader030/viewer/2022021419/58a9b6491a28ab1f1a8b498d/html5/thumbnails/26.jpg)
>< nextprevious
“this” keyword‣ “this” does not refer to the function itself.
‣ “this” does not refer to the function’s lexical scope.
‣ In most cases, the value of “this” is determined by how a function is called.
‣ “this” may be different each time the function is called.
26
![Page 27: Javascript under the hood 1](https://reader030.fdocuments.us/reader030/viewer/2022021419/58a9b6491a28ab1f1a8b498d/html5/thumbnails/27.jpg)
>< nextprevious
“this” keyword‣ “this” does not refer to the function itself.
27
![Page 28: Javascript under the hood 1](https://reader030.fdocuments.us/reader030/viewer/2022021419/58a9b6491a28ab1f1a8b498d/html5/thumbnails/28.jpg)
>< nextprevious
“this” keyword‣ Default binding: Standalone function invocation.
“this” is bind to global object (in non-strict mode)
28
![Page 29: Javascript under the hood 1](https://reader030.fdocuments.us/reader030/viewer/2022021419/58a9b6491a28ab1f1a8b498d/html5/thumbnails/29.jpg)
>< nextprevious
“this” keyword
‣ Implicit binding: Function is invoked from a containing object. “this” is bind to the containing object.
29
![Page 30: Javascript under the hood 1](https://reader030.fdocuments.us/reader030/viewer/2022021419/58a9b6491a28ab1f1a8b498d/html5/thumbnails/30.jpg)
>< nextprevious
“this” keyword
‣ Explicit binding: Function is called with call, apply or bind method. “this” is bind to the object passed to the binding method.
30
![Page 31: Javascript under the hood 1](https://reader030.fdocuments.us/reader030/viewer/2022021419/58a9b6491a28ab1f1a8b498d/html5/thumbnails/31.jpg)
>< nextprevious
“this” keyword‣ new keyword binding: “this” is bind to the new
object that is created
31
![Page 32: Javascript under the hood 1](https://reader030.fdocuments.us/reader030/viewer/2022021419/58a9b6491a28ab1f1a8b498d/html5/thumbnails/32.jpg)
>< nextprevious
“this” keyword‣ Arrow function: “this” is lexically adopted from the
enclosing scope
32
![Page 33: Javascript under the hood 1](https://reader030.fdocuments.us/reader030/viewer/2022021419/58a9b6491a28ab1f1a8b498d/html5/thumbnails/33.jpg)
>< nextprevious
“this” keyword
‣ Binding priority
‣ Arrow function
‣ new keyword
‣ Explicit binding, by using call, apply and bind
‣ Implicit binding
‣ Default binding
33
![Page 34: Javascript under the hood 1](https://reader030.fdocuments.us/reader030/viewer/2022021419/58a9b6491a28ab1f1a8b498d/html5/thumbnails/34.jpg)
>< nextprevious
Some best practices‣ Try to avoid Global variables
‣ Always declare variables
‣ Put variables declaration on top
34
Use Strict Mode
![Page 35: Javascript under the hood 1](https://reader030.fdocuments.us/reader030/viewer/2022021419/58a9b6491a28ab1f1a8b498d/html5/thumbnails/35.jpg)
>< nextprevious
References‣ You don’t know JS (https://github.com/getify/You-
Dont-Know-JS)
‣ Speaking JS (http://speakingjs.com/)
‣ Exploring ES6 (http://exploringjs.com/es6/)
‣ http://www.2ality.com/ JavaScript and more
‣ Mozilla Developer Network (https://developer.mozilla.org/en-US/docs/Web/JavaScript)
‣ Tìm hiểu về Strict Mode trong Javascript (https://viblo.asia/thangtd90/posts/jaqG0QQevEKw)
35
![Page 36: Javascript under the hood 1](https://reader030.fdocuments.us/reader030/viewer/2022021419/58a9b6491a28ab1f1a8b498d/html5/thumbnails/36.jpg)
>< nextprevious
Thank you for listening!
Q&A
For any discussion, you can refer this post on Viblo https://viblo.asia/thangtd90/posts/WApGx3P3M06y
36