1 / <count>
JAVASCRIPT:
‘UNDERSTANDING THE WEIRD PART’(I)
@RajohnsonAndry
2 / <count>
INTRODUCTION AND THE
GOAL
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 / <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 / <count>
UNDERSTAND, FRAMEWORKS, AND THE
WEIRD PARTS..
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 / <count>
Your Code :
Function hello() {
let a = ‘Hello World’ ;
}
Computer Instructions
Function
variable
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 / <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 / <count>
Address = ‘9 rue George Marette’
11 / <count>
OBJECT :
A COLLECTION OF NAME/ VALUE PAIRS
The simplest definition when talking about
JavaScript.
12 / <count>
Address :
{
Street : ‘George Marette’,
Number : 9
Appartment :
{
Floor : 1
Number : 201,
}
}
13 / <count>
THE GLOBAL ENVIRONMENT AND THE
GLOBAL OBJECT
 PEOPLE : ‘ARE WE GOING TO CODE
ACTUALLY ?’
 ME : ‘YES !’
Setup
15 / <count>
Execution Context (Global)
Global Object
(window)
‘this’
16 / <count>
Live coding to show you...
17 / <count>
Execution Context
Global Object
« not inside a
Function »
‘this’
Outer
Environnent
Your code
18 / <count>
EXECUTION CONTEXT :
CREATION AND
‘HOISTING’(‘hissage’ en français)
19 / <count>
//b();
//console.log(a);
var a = 'Hello World';
function b(){
console.log('called b!');
}
b();
console.log(a);
20 / <count>
Execution Context is Created (CREATION PHASE)
Global Object ‘this’
Outer
Environnent
Setup Memory Space for
Variables and Functions
« Hoisting »
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 / <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

Java script the weird part (PART I )

  • 1.
    1 / <count> JAVASCRIPT: ‘UNDERSTANDINGTHE WEIRD PART’(I) @RajohnsonAndry
  • 2.
  • 3.
    3 / <count> FOCUSON 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’TIMITATE, 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> SYNTAXPARSER 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> YourCode : Function hello() { let a = ‘Hello World’ ; } Computer Instructions Function variable
  • 8.
    8 / <count> EXECUTIONCONTEXT : 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> CONCEPTOF 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> THEGLOBAL ENVIRONMENT AND THE GLOBAL OBJECT  PEOPLE : ‘ARE WE GOING TO CODE ACTUALLY ?’  ME : ‘YES !’
  • 14.
  • 15.
    15 / <count> ExecutionContext (Global) Global Object (window) ‘this’
  • 16.
    16 / <count> Livecoding to show you...
  • 17.
    17 / <count> ExecutionContext Global Object « not inside a Function » ‘this’ Outer Environnent Your code
  • 18.
    18 / <count> EXECUTIONCONTEXT : CREATION AND ‘HOISTING’(‘hissage’ en français)
  • 19.
    19 / <count> //b(); //console.log(a); vara = 'Hello World'; function b(){ console.log('called b!'); } b(); console.log(a);
  • 20.
    20 / <count> ExecutionContext is Created (CREATION PHASE) Global Object ‘this’ Outer Environnent Setup Memory Space for Variables and Functions « Hoisting »
  • 21.
    21 / <count> Variablesare 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