Behind the scenes of some basic building blocks of javascript. Topics covered: Hoisting Scopes Closure this new

1. Knowing Nuances
Insights into some of the basic concepts in JavaScript and
how they work
JavaScript

2. Crazy facts of JavaScript not found

3. Basic building blocks explained

4. Agenda
❏ Hoisting
❏ Scopes
❏ Closure
❏ this
❏ new

5. A brief history
❏ Created by Brendan Eich in 1995
❏ Mocha LiveScript JavaScript
❏ ECMA Script from 1997
❏ TC 39
❏ Stage 0 Stage 4
❏ V8, Spider Monkey, Chakra & ...

6. Hoisting

7. Definition

8. Hoisting moves all your
declarations (both
variable and function)
to top of their scope

9. Variable Hoisting
Function Hoisting
It’s Demo Time

10. But how?
❏ Really no pulling up
❏ Two phase execution
Compile Phase
Execution Phase
JS engine goes line by line and collect variable and
function declarations and puts them into memory
JS engine starts again from line #1 and begins
execution of lines.

16. Lexical
Dynamic
Name resolution is based on where the code is written.
Name resolution is based on when the code is being called (execution
context).
Types of scope

17. Scope in JavaScript
❏ Supports lexical scope
❏ Function scope
❏ Block scopes
,
❏ Scope pollution
❏ Strict mode
let const withtry...catch
eval with
Demo
(Not Recommended)

18. var baz = "from global scope";
function foo() {
var baz = "from function scope";
function bar () {
vaz = "global accident";
console.log(baz);
}
return bar;
}
foo()();
console.log(vaz);
Global Scope
baz = “from global scope”
foo = function() {..}
foo Scope
baz = “from function scope”
bar = function() {..}
bar Scope
vaz = “global accident”

19. A closure is the
combination of a function
and the lexical
environment within which
that function was declared
Demo

20. function adder(baseValue){
return function(value){
return baseValue + value;
}
}
var addByTen = adder(10);
console.log(addByTen(2));
var addByFive = adder(5);
console.log(addByFive(2));
Global Scope
Adder = function(){..}
adder Scope
baseValue = 10
adder Scope
baseValue = 5
addByFive
value = 2
addByTen
value = 2

22. Types of bindings
❏ Default Binding
❏ browser
❏ node
❏ Object Binding
❏ Node
❏ Explicit Bindings
❏ call
❏ apply
❏ Hard binding
❏ bind

24. this
name : Karur
print : function(){...}
speciality : Textiles
karur

25. ❏ MDN
❏ You Don’t Know Javascript
❏ And many online articles

27. THANK YOU
For questions or suggestions:
Ramesh Ramalingam
rrama@ThoughtWorks.com