This is slide from an advanced Javascript workshop for everyone, giving a deep understanding of the language by understanding how it works under the hood.

1. 1 / <count>
JAVASCRIPT:
‘UNDERSTANDING THE WEIRD PART’(I)
@RajohnsonAndry

2. 2 / <count>
INTRODUCTION AND THE
GOAL

3. 3 / <count>
FOCUS ON JAVASCRIPT
« THE PROGRAMMING LANGUAGE »
 LEARN HOW JAVASCRIPT WORKS UNDER THE
HOOD
 UNDERSTAND THINGS THAT PEOPLE WHO
BUILD JQUERY UNDERSTAND
 UNDERSTAND HOW POWERFULL AND
BEAUTIFUL IS JAVASCRIPT

4. 4 / <count>
DON’T IMITATE,
UNDERSTAND !
 STOP LEARNING CODE BY COPYING SOME CODE ON
SCREEN OR PIECE OF PAPER
 FOCUS ON BASICS CONCEPTS:
 SYNTHAX PARSER,
 EXECUTION CONTEXT,
 NAME/PAIR VALUES,
 OBJECTS,
 VARIABLES ,
 FUNCTIONS ;

5. 5 / <count>
UNDERSTAND, FRAMEWORKS, AND THE
WEIRD PARTS..

6. 6 / <count>
SYNTAX PARSER
A PROGRAM THAT READS YOUR CODE AND
DETERMINE WHAT IT DOES AND IF ITS
GRAMMAR IS VALID.
« Your code isn’t magic. Someone else wrote a
program to translate it for the computer »

7. 7 / <count>
Your Code :
Function hello() {
let a = ‘Hello World’ ;
}
Computer Instructions
Function
variable

8. 8 / <count>
EXECUTION CONTEXT :
A WRAPPER TO HELP MANAGE THE CODE THAT
IS RUNNING
 There are lots of lexical environnements . Which one is
currently running is managed via execution contexts. It can
contain things beyond what you’ve written in your code

9. 9 / <count>
CONCEPT OF NAME/VALUE PAIR AND
OBJECTS
A NAME WHICH MAPS TO A UNIQUE VALUE
 The name may be defined more than one , but only
can have one value in any giving context.
 That value may be more name/value pair.

10. 10 / <count>
Address = ‘9 rue George Marette’

11. 11 / <count>
OBJECT :
A COLLECTION OF NAME/ VALUE PAIRS
The simplest definition when talking about
JavaScript.

12. 12 / <count>
Address :
{
Street : ‘George Marette’,
Number : 9
Appartment :
{
Floor : 1
Number : 201,
}
}

13. 13 / <count>
THE GLOBAL ENVIRONMENT AND THE
GLOBAL OBJECT
 PEOPLE : ‘ARE WE GOING TO CODE
ACTUALLY ?’
 ME : ‘YES !’

14. Setup

15. 15 / <count>
Execution Context (Global)
Global Object
(window)
‘this’

16. 16 / <count>
Live coding to show you...

17. 17 / <count>
Execution Context
Global Object
« not inside a
Function »
‘this’
Outer
Environnent
Your code

18. 18 / <count>
EXECUTION CONTEXT :
CREATION AND
‘HOISTING’(‘hissage’ en français)

19. 19 / <count>
//b();
//console.log(a);
var a = 'Hello World';
function b(){
console.log('called b!');
}
b();
console.log(a);

20. 20 / <count>
Execution Context is Created (CREATION PHASE)
Global Object ‘this’
Outer
Environnent
Setup Memory Space for
Variables and Functions
« Hoisting »

21. 21 / <count>
Variables are setup and set equal to
‘undefined’
b();
console.log(a);
var a = 'Hello World';
function b() {
console.log('Called b');
}
// Called b
// Undefined

22. 22 / <count>
Understanding ‘undifined’
concept in JS ?
Let try out this code and see what happens :
let a;
console.log(a);
if (a === undefined) {
console.log('a is undifed!');
}
else {
console.log('a is defined!');
}
//expected output undifined , a is undifined