The document provides an overview of JavaScript, emphasizing the importance of understanding its foundational concepts rather than just copying code. It covers key topics such as the syntax parser, execution context, name/value pairs, and objects. The focus is on grasping how JavaScript operates at a fundamental level to appreciate its power and beauty.

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