S C O P E , C L O S U R E S , T H I S , P R O T O T Y P E
I N T R O D U C T I O N T O J AVA S C R I P T B Y N I G A M PA T E L
Slide 2
Slide 2 text
S C O P E , C L O S U R E S , T H I S , P R O T O T Y P E
I N T R O D U C T I O N T O J AVA S C R I P T B Y N I G A M PA T E L
Slide 3
Slide 3 text
S C O P E , C L O S U R E S , T H I S , P R O T O T Y P E
U N D E R S TA N D I N G J AVA S C R I P T B Y N I G A M PA T E L
PA R T 1
Slide 4
Slide 4 text
A B O U T N I G A M
• Principal Developer at Hyatt
• @nigam02
• nigam-patel
• nigampatel
Slide 5
Slide 5 text
W H AT I S T H I S TA L K A L L
A B O U T ?
Slide 6
Slide 6 text
H I S T O RY
Slide 7
Slide 7 text
H I S T O RY
1995 - Netscape hires Brendan Eich
Slide 8
Slide 8 text
H I S T O RY
S C H E M E S E L F
J AVA
L I V E S C R E I P T
Slide 9
Slide 9 text
H I S T O RY
• LiveScript
• ECMAScript
• javaScript
Slide 10
Slide 10 text
J AVA S C R I P T I S …
•dynamic, weakly typed,
prototype-based language
with first-class functions.
Slide 11
Slide 11 text
D Y N A M I C
• Can define functions and objects on the fly.
• Can view the code as well as run it.
• No need to specify types explicitly.
Slide 12
Slide 12 text
W E A K LY T Y P E D
• Type associated with value, not variable.
var x = 10;
x = “ten”
x = [10];
x = {ten:10};
Slide 13
Slide 13 text
P R O T O T Y P E - B A S E D
• Prototypal inheritance is a form of object-oriented
code reuse. Javascript is one of the only [mainstream]
object-oriented languages to use prototypal
inheritance. Almost all other object-oriented
languages are classical.
Slide 14
Slide 14 text
F I R S T- C L A S S F U N C T I O N S
• A function is an instance of the Object type.
• A function can have properties and has a link back to
its constructor method.
• You can store the function in a variable.
• You pass the function as a parameter to another
function.
• You can return the function from a function.
Slide 15
Slide 15 text
J AVA S C R I P T I S …
•dynamic, weakly typed,
prototype-based language
with first-class functions.
Slide 16
Slide 16 text
D ATA T Y P E S
Undefined
undefined
Null
null
Boolean
true
String
"hello"
Number
2
Object
{name: "value"}
Array
[1,2,3]
Date
new Date()
RegExp
/.*/g,
Function
function(){}
Primitive
Object
Slide 17
Slide 17 text
O P E R AT O R S
var
var foo
new
new
Foo
assignment
foo = {bar: "a value"}
foo.bar = value
delete
delete
foo.bar
member
foo.bar
foo["bar"]
call
bar()
foo.bar()
comparison
==
===
Slide 18
Slide 18 text
S C O P E
Global Scope
Local Scope
Slide 19
Slide 19 text
S C O P E
var str = “Hyatt”;
Slide 20
Slide 20 text
S C O P E
var first = "Andy"
function shortName(){
var first = "Mike";
}
function fullName(first){
first = "Michael";
last = "Smith";
}
Slide 21
Slide 21 text
Andy
Error
Andy
Smith
Error
S C O P E
var first = "Andy"
function shortName(){
var first = "Mike";
function fullName(first){
first = "Michael";
last = "Smith";
}
fullName("Tom");
}
first; //
last //
shortName();
first; //
last; //
fullName(); //
Slide 22
Slide 22 text
S C O P E - F U N C T I O N S C O P E
function foo(){
return bar();
}
var bar = function(){
function baz(){
return 10;
}
return baz();
}
Slide 23
Slide 23 text
S C O P E - F U N C T I O N S C O P E
function foo(){
return bar();
}
var bar = function someName(){
function baz(){
return 10;
}
return baz();
}
foo(); // 10
someName() //
baz() //
Slide 24
Slide 24 text
S C O P E - B L O C K S C O P E
var foo;
try {
foo.length;
}
catch (err) {
console.log(err); //TypeError
}
console.log(err); //ReferenceError
Slide 25
Slide 25 text
S C O P E - L E X I C A L S C O P E
L O C A L
G L O B A L
Slide 26
Slide 26 text
S C O P E - L E X I C A L S C O P E
function foo (a) {
var b = a * 2;
function bar (c) {
console.log(a , b, c );
}
bar (b * 3);
}
foo(2)
Slide 27
Slide 27 text
S C O P E - L E X I C A L S C O P E
function foo (a) {
var b = a * 2;
function bar (c) {
console.log(a , b, c );
}
bar (b * 3);
}
foo(2)
Slide 28
Slide 28 text
S C O P E - L E X I C A L S C O P E
function foo {
var b = a * 2;
function bar (c) {
console.log(a , b, c );
}
bar (b * 3);
}
foo(2)
(a)
Slide 29
Slide 29 text
S C O P E - L E X I C A L S C O P E
function foo {
var b = a * 2;
function bar {
console.log(a , b, c );
}
bar (b * 3);
}
foo(2)
(a)
(c)
Slide 30
Slide 30 text
S C O P E - L E X I C A L S C O P E
function foo {
var b = a * 2;
function bar {
console.log(a , b, c );
}
bar (b * 3);
}
foo(2)
(a)
(c)
1
2
3
Slide 31
Slide 31 text
S C O P E - L E X I C A L S C O P E
function foo {
var b = a * 2;
function bar {
console.log(a , b, c );
}
bar (b * 3);
}
foo(2) // 2 4 12
(a)
(c)
1
2
3
Slide 32
Slide 32 text
var car = "Civic";
function vehicle (str) {
console.log(car);
}
vehicle("var car = 'Accord';");
S C O P E - C H E AT L E X I C A L S C O P E
Slide 33
Slide 33 text
var car = "Civic";
function vehicle (str) {
eval(str);
console.log(car);
}
vehicle("var car = 'Accord';");
S C O P E - C H E AT L E X I C A L S C O P E
Slide 34
Slide 34 text
var obj = {
a: 1,
b: 2,
c: 3
}
obj.a = obj.b + obj.c;
obj.c = obj.b - obj.a
with (obj){
a = b + c;
c = b - a;
d = 3; // mean to create obj.d but created global
}
obj.d // undefined
d; // 3 — oh no created global
S C O P E - C H E AT L E X I C A L S C O P E
Slide 35
Slide 35 text
var a = 10;
(function () {
var a = 5
})();
S C O P E - F U N C T I O N S C O P E - I I F E
Slide 36
Slide 36 text
New Keyword coming called let
You can define block level scope
S C O P E - E S 6
Slide 37
Slide 37 text
Hoisting
‘this’ Keyword
closures
N E X T T O P I C