JavaScript essentials

JavaScript Workshops
Advanced JavaScript

View Slide

“ For at least the next decade, you won't
be able to move forward witout a good
understanding of #javascript.
— Orion Henry (Heroku)

View Slide

#1: Variables
Let's create a variable
called m
e
v
a
r m
e = "
D
i
m
i
t
r
i
"
;
What happens when you
enter:
What about:
c
o
n
s
o
l
e
.
l
o
g
(
m
e
)
;
c
o
n
s
o
l
e
.
l
o
g
(
y
o
u
)
;

View Slide

#1: Variables
Will it be t
r
u
e
?
"
1
" =
= 1
;
"
" =
= n
u
l
l
;
0 =
= n
u
l
l
;
[
] =
= "
"
;

View Slide

#1: Variables
JavaScript is dynamically typed and "autocasts" types to
compare. This can lead to funny behavior, for example:
BUT:
0 =
= "
0
"
; /
/ t
r
u
e
0 =
= "
"
; /
/ t
r
u
e
"
0
" =
= "
"
; /
/ f
a
l
s
e
Always use =
=
=
"
1
" =
=
= 1
; /
/ f
a
l
s
e
[
] =
=
= "
"
; /
/ f
a
l
s
e
0 =
=
= "
0
"
; /
/ f
a
l
s
e
0 =
=
= "
"
; /
/ f
a
l
s
e

View Slide

Tip 1: Always Use =
=
=

View Slide

#2: Scopes
JavaScript uses scopes:
f
u
n
c
t
i
o
n f
o
o
(
) {
v
a
r f
o
o = "
b
a
r
"
;
f
u
n
c
t
i
o
n b
a
r
(
) {
c
o
n
s
o
l
e
.
l
o
g
(
f
o
o
)
; /
/ "
b
a
r
" o
r e
r
r
o
r
?
}
}
What about:
f
u
n
c
t
i
o
n f
o
o
(
) {
v
a
r f
o
o = "
b
a
r
"
;
f
u
n
c
t
i
o
n b
a
r
(
) {
v
a
r f
o
o = "
b
a
z
"
;
c
o
n
s
o
l
e
.
l
o
g
(
f
o
o
)
; /
/ "
b
a
r
" o
r "
b
a
z
"
?
}
c
o
n
s
o
l
e
.
l
o
g
(
f
o
o
)
; /
/ "
b
a
r
" o
r "
b
a
z
"
?
}

View Slide

#2: Scopes
v
a
r e = "
f
o
o
"
;
c
o
n
s
o
l
e
.
l
o
g
(
e
)
; /
/ ?
t
r
y {
t
h
r
o
w "
b
a
r
"
;
} c
a
t
c
h
(
e
) {
c
o
n
s
o
l
e
.
l
o
g
(
e
)
; /
/ ?
}
c
o
n
s
o
l
e
.
l
o
g
(
e
)
; /
/ ?
Scopes are everywhere
v
a
r a = "
f
o
o
"
;
c
o
n
s
o
l
e
.
l
o
g
(
a
)
;
f
u
n
c
t
i
o
n b
a
r
(
) {
i
f (
t
r
u
e
) {
v
a
r a = "
b
a
r
"
;
c
o
n
s
o
l
e
.
l
o
g
(
a
)
;
}
c
o
n
s
o
l
e
.
l
o
g
(
a
)
; /
/ "
f
o
o
"
, "
b
a
r
" o
r e
r
r
o
r
?
}
Well... ALMOST everywhere

View Slide

Tip 2: There Is No Such Thing As
A Block Scope!

View Slide

#2 Scopes
Each scope has access to its outer scope. There is also a
"root" scope, which we call the global scope
In browsers this is w
i
n
d
o
w
On Node.js it is g
l
o
b
a
l
Be careful, if you don't use v
a
r in front of your variable, it
will create the variable on the global scope!
f
u
n
c
t
i
o
n f
o
o
(
) {
a = "
b
a
r
"
;
}
f
o
o
(
)
;
c
o
n
s
o
l
e
.
l
o
g
(
w
i
n
d
o
w
)
;

View Slide

Tip 3: Always Use v
a
r To Create
Variables!

View Slide

#3: Objects
To create a new object, you can use:
v
a
r m
e = {
f
i
r
s
t
n
a
m
e
: "
D
i
m
i
t
r
i
"
,
n
a
m
e
: "
M
e
s
t
d
a
g
h
"
}
;
But what about classes & constructors?

View Slide

#3: Objects
JavaScript uses prototypes:
v
a
r O
p
t
i
c
i
e
n = f
u
n
c
t
i
o
n
(
f
i
r
s
t
n
a
m
e
, l
a
s
t
n
a
m
e
) {
t
h
i
s
.
f
i
r
s
t
n
a
m
e = f
i
r
s
t
n
a
m
e
;
t
h
i
s
.
l
a
s
t
n
a
m
e = l
a
s
t
n
a
m
e
;
t
h
i
s
.
s
a
y
N
a
m
e = f
u
n
c
t
i
o
n
(
) {
c
o
n
s
o
l
e
.
l
o
g
(
t
h
i
s
.
f
i
r
s
t
n
a
m
e + " " + t
h
i
s
.
l
a
s
t
n
a
m
e
)
;
}
;
}
;
v
a
r m
e = n
e
w O
p
t
i
c
i
e
n
(
"
D
i
m
i
t
r
i
"
, "
M
e
s
t
d
a
g
h
"
)
;
m
e
.
s
a
y
N
a
m
e
(
)
;
O
p
t
i
c
i
e
n appears to be a normal function, but it can be
instantiated using the n
e
w keyword. We call this a
prototype.

View Slide

#3: Objects
The difference between classes vs prototypes in JavaScript is
that they can be changed at runtime:
v
a
r P
e
r
s
o
n = f
u
n
c
t
i
o
n
(
f
i
r
s
t
n
a
m
e
, l
a
s
t
n
a
m
e
, j
o
b
) {
t
h
i
s
.
f
i
r
s
t
n
a
m
e = f
i
r
s
t
n
a
m
e
;
t
h
i
s
.
l
a
s
t
n
a
m
e = l
a
s
t
n
a
m
e
;
t
h
i
s
.
j
o
b = j
o
b
;
}
;
P
e
r
s
o
n
.
p
r
o
t
o
t
y
p
e
.
s
a
y
J
o
b = f
u
n
c
t
i
o
n
(
) {
c
o
n
s
o
l
e
.
l
o
g
(
t
h
i
s
.
j
o
b
)
;
}
;
P
e
r
s
o
n
.
p
r
o
t
o
t
y
p
e
.
s
a
y
N
a
m
e = f
u
n
c
t
i
o
n
(
) {
c
o
n
s
o
l
e
.
l
o
g
(
t
h
i
s
.
f
i
r
s
t
n
a
m
e + " " + t
h
i
s
.
l
a
s
t
n
a
m
e
)
;
}
;
v
a
r m
e = n
e
w P
e
r
s
o
n
(
"
D
i
m
i
t
r
i
"
, "
M
e
s
t
d
a
g
h
"
, "
I
T C
o
n
s
u
l
t
a
n
t
"
)
;
m
e
.
s
a
y
J
o
b
(
)
;
m
e
.
s
a
y
N
a
m
e
(
)
;

View Slide

#3: Objects
Inheritance is also possible through prototypal
inheritance:
v
a
r O
p
t
i
c
i
e
n = f
u
n
c
t
i
o
n
(
f
i
r
s
t
n
a
m
e
, l
a
s
t
n
a
m
e
) {
P
e
r
s
o
n
.
c
a
l
l
(
t
h
i
s
, f
i
r
s
t
n
a
m
e
, l
a
s
t
n
a
m
e
)
; /
/ s
u
p
e
r
(
f
i
r
s
t
n
a
m
e
, l
a
s
t
n
a
m
e
)
t
h
i
s
.
j
o
b = "
I
T C
o
n
s
u
l
t
a
n
t
"
;
}
;
O
p
t
i
c
i
e
n
.
p
r
o
t
o
t
y
p
e = n
e
w P
e
r
s
o
n
(
)
; /
/ O
p
t
i
c
i
e
n e
x
t
e
n
d
s f
r
o
m P
e
r
s
o
n
v
a
r m
e = n
e
w O
p
t
i
c
i
e
n
(
"
D
i
m
i
t
r
i
"
, "
M
e
s
t
d
a
g
h
"
)
;
m
e
.
s
a
y
J
o
b
(
)
;
m
e
.
s
a
y
N
a
m
e
(
)
;

View Slide

#3: Objects
Overriding a function is also possible:
O
p
t
i
c
i
e
n
.
p
r
o
t
o
t
y
p
e
.
s
a
y
J
o
b = f
u
n
c
t
i
o
n
(
) {
c
o
n
s
o
l
e
.
l
o
g
(
"
A
w
e
s
o
m
e " + t
h
i
s
.
j
o
b
)
;
}
;

View Slide

Tip 4: Prototypes Can Be
Inherited, Extended And
Overriden Any Time.

View Slide

#4: Functions
Functions are multifunctional:
We can use them as simple functions
We can use them as prototypes
F
u
n
c
t
i
o
n i
n
s
t
a
n
c
e
o
f O
b
j
e
c
t
; /
/ t
r
u
e
O
b
j
e
c
t i
n
s
t
a
n
c
e
o
f F
u
n
c
t
i
o
n
; /
/ t
r
u
e

View Slide

#4: Functions
You can do a lot with functions, you can even call them
directly:
(
f
u
n
c
t
i
o
n
(
) {
c
o
n
s
o
l
e
.
l
o
g
(
"
I
'
m e
x
e
c
u
t
e
d d
i
r
e
c
t
l
y
"
)
;
}
(
)
)
;
This is an Immediately Invoked Function Expression or an
IIFE.

View Slide

#4: Functions
Common use case for IIFE's:
(
f
u
n
c
t
i
o
n
(
$
) {
}
(
j
Q
u
e
r
y
)
)
;
Many libraries use the dollar sign ($
)
IIFE's have their own local scope

View Slide

#4: Functions
Remember that we should always check with =
=
=
, what
about:
v
a
r h
a
s
N
a
m
e = f
u
n
c
t
i
o
n
(
p
e
r
s
o
n
) {
r
e
t
u
r
n p
e
r
s
o
n
.
n
a
m
e !
=
= u
n
d
e
f
i
n
e
d
;
}
;
c
o
n
s
o
l
e
.
l
o
g
(
h
a
s
N
a
m
e
(
{
n
a
m
e
: "
D
i
m
i
t
r
i M
e
s
t
d
a
g
h
"
}
)
)
;
... works fine, don't you think so?

View Slide

#4: Functions
However, in ECMAScript 4 and lower (everything up to IE8),
u
n
d
e
f
i
n
e
d is a mutable object:
w
i
n
d
o
w
.
u
n
d
e
f
i
n
e
d = "
D
i
m
i
t
r
i M
e
s
t
d
a
g
h
"
;
v
a
r h
a
s
N
a
m
e = f
u
n
c
t
i
o
n
(
p
e
r
s
o
n
) {
r
e
t
u
r
n p
e
r
s
o
n
.
n
a
m
e !
=
= u
n
d
e
f
i
n
e
d
;
}
;
c
o
n
s
o
l
e
.
l
o
g
(
h
a
s
N
a
m
e
(
{
n
a
m
e
: "
D
i
m
i
t
r
i M
e
s
t
d
a
g
h
" /
/ T
h
i
s w
i
l
l r
e
t
u
r
n f
a
l
s
e i
n I
E
8
!
!
!
}
)
)
;

View Slide

View Slide

#4: Functions
To solve this, you can use IIFE's as well:
(
f
u
n
c
t
i
o
n
(
$
, u
n
d
e
f
i
n
e
d
) {
}
(
j
Q
u
e
r
y
)
)
;
Add u
n
d
e
f
i
n
e
d as the last argument
Nothing is passed to it, so it's REALLY u
n
d
e
f
i
n
e
d

View Slide

#4: Functions
Functions into detail:
v
a
r i
n
c
r
e
m
e
n
t = f
u
n
c
t
i
o
n
(
n
u
m
) {
n
u
m +
= 1
;
}
;
v
a
r n
u
m = 2
;
i
n
c
r
e
m
e
n
t
(
n
u
m
)
;
c
o
n
s
o
l
e
.
l
o
g
(
n
u
m
)
; /
/ ?
Just like Java, arguments are passed by value

View Slide

#4: Functions
Functions into detail:
v
a
r c
h
a
n
g
e
N
a
m
e = f
u
n
c
t
i
o
n
(
p
e
r
s
o
n
) {
p
e
r
s
o
n = {
n
a
m
e
: "
J
o
h
n D
o
e
"
}
;
}
;
v
a
r m
e = {
n
a
m
e
: "
D
i
m
i
t
r
i M
e
s
t
d
a
g
h
"
}
;
c
h
a
n
g
e
N
a
m
e
(
m
e
)
;
c
o
n
s
o
l
e
.
l
o
g
(
m
e
.
n
a
m
e
)
; /
/ ?
Also, objects are passed by reference.

View Slide

#4: Functions
Let's try to write the numbers 1 to 10 with one second delay
each.
Will this work?
No!, think of .
f
o
r (
v
a
r i
d
x = 1
; i
d
x <
= 1
0
; i
d
x
+
+
) {
s
e
t
T
i
m
e
o
u
t
(
f
u
n
c
t
i
o
n
(
) {
c
o
n
s
o
l
e
.
l
o
g
(
i
d
x
)
;
}
, 1
0
0
0 * i
d
x
)
;
}
Tip 2

View Slide

View Slide

#4: Functions
Hmmzz... IIFE's solve everything right? Let's try them!
f
o
r (
v
a
r i
d
x = 1
; i
d
x <
= 1
0
; i
d
x
+
+
) {
(
f
u
n
c
t
i
o
n
(
n
u
m
) {
s
e
t
T
i
m
e
o
u
t
(
f
u
n
c
t
i
o
n
(
) {
c
o
n
s
o
l
e
.
l
o
g
(
n
u
m
)
;
}
, 1
0
0
0 * n
u
m
)
;
}
(
i
d
x
)
)
;
}
It works because arguments to a function are ...
passed by value

View Slide

View Slide

Tip 5: Always Wrap Your Code In
An IIFE

View Slide

Now Class, What Did We Learn
Today?
Always use =
=
=
There is no such thing as a block scope!
Always use v
a
r to create variables!
Prototypes can be inherited, extended and overriden at
any time.
Always wrap your code in an IIFE

View Slide

View Slide

The End
Go Home And Code Some JavaScript!

View Slide

JavaScript essentials

JavaScript essentials

Dimitri

More Decks by Dimitri

Other Decks in Programming

Featured

Transcript