SlideShare a Scribd company logo
JAVASCRIPT DEVELOPMENT DONE RIGHT 
CONFITURA 2014 
Created by 
Paweł Szulc 
/ / 
http://rabbitonweb.com @paulszulc paul.szulc@gmail.com 
var microphone = { 
testing: function(oneTwoThree) { 
console.log("testing, testing " + oneTwoThree); 
} 
}
PEACEFUL JAVA 
Understandable object oriented language 
Vast and rich ecosystem of frameworks, tools and 
technologies 
Static code analysis, well-known conventions and best 
practices 
Testable, clean and readable code
Javascript development done right
Javascript development done right
MORDOR SCRIPT
JAVASCRIPT 
Strange, bizarre and non deterministic language 
Coding like its 1996 all over again 
Not a single unit test, no static code analysis
Javascript development done right
$ GIT CLONE GIT://GITHUB.COM/YOU/YOUR-PROJECT. 
GIT
Javascript development done right
JAVA VS JAVASCRIPT
“JAVASCRIPT IS 
TO JAVA AS 
HAMBURGER IS 
TO HAM.”
KEY DIFFERENCES 
Language nature: object vs functional 
Different concepts (e.g function vs method, scope definitions) 
Different set of operators and key words (===, undefined) 
Different nature of operators and key words (e.g this)
IMPORTANT 
“TO USE THE LANGUAGE 
PROPERLY, UNDERLYING 
CONCEPTS UNDERSTAND YOU 
MUST”
FUNCTIONS
FUNCTIONS ARE FIRST CLASS CITIZENS 
They can be assigned to variables, arrays and properties of 
other objects 
They can be passed as arguments to functions 
They can be returned as values from functions 
The only difference between a function and an object, is that 
functions can be invoked
EXAMPLES 
function () { 
} 
// ? 
function problemSolver() { 
} 
problemSolver(); 
problemSolver("I have a problem, please do solve it"); 
function problemSolver(problem, hint) { 
} 
problemSolver(problem, hint); 
problemSolver(problem); 
problemSolver(); 
problemSolver(problem, hint, "some other parameter out of nowhere"); 
function problemSolver(problem, hint) { 
return 42; 
}
THIS
THIS 
THE THIS PARAMETER REFERS TO AN OBJECT 
THAT’S IMPLICITLY ASSOCIATED WITH THE 
FUNCTION INVOCATION.
THIS = CONTEXT
THIS = CONTEXT
Javascript development done right
IF IT QUACKS LIKE A DUCK, IT MUST BE A ... 
var duck = {}; 
duck.name = "Donald Duck"; 
var dog = {}; 
dog.name = "Pluto"; 
duck.say = function() { 
console.log("Quack quack, call me " + this.name); 
} dog.say = function() { 
console.log("Bark bark, call me " + this.name); 
} 
duck.say(); 
dog.say(); 
Quack quack, call me Donald Duck 
Bark bark, call me Pluto 
duck.say.call(dog); 
Quack quack, call me Pluto
WHAT THE QUACK? 
duck.say = function() { 
console.log("Quack quack, call me " + this.name); 
} dog.say = function() { 
console.log("Bark bark, call me " + this.name); 
} 
duck.say.call(dog); 
Quack quack, call me Pluto
FUNCTION INVOCATION 
THERE ARE FOUR DIFFERENT WAYS FOR 
FUNCTION TO BE INVOKED 
1. as function 
2. as method 
3. as constructor 
4. by apply() or call()
AS FUNCTION 
function timestamp() { 
this.stamp = new Date(); 
}; 
timestamp(); 
console.log(window.stamp) 
Fri Apr 11 2014 01:56:07 GMT+0200 (Central European Daylight Time)
AS METHOD 
var problemSolver = {}; 
problemSolver.timestamp = function() { 
this.stamp = new Date(); 
}; 
problemSolver.timestamp(); 
console.log(problemSolver.stamp) 
Fri Apr 11 2014 01:56:07 GMT+0200 (Central European Daylight Time)
AS CONSTRUCTOR 
function person(name) { 
this.name = name; 
return this; 
}; 
var p1 = new person('Captain Bomba'); 
console.log(p1.name) 
Captain Bomba
BY APPLY() OR CALL() 
var duck = {}; 
duck.name = "Donald Duck"; 
var dog = {}; 
dog.name = "Pluto"; 
duck.say = function() { 
console.log("Quack quack, call me " + this.name); 
} dog.say = function() { 
console.log("Bark bark, call me " + this.name); 
} 
duck.say.call(dog); 
Quack quack, call me Pluto
SCOPE EXTRAVAGANZA
IN MOST C-LIKE LANGUAGES BLOCK CREATES 
A SCOPE 
// java 
if(true) { 
Engine engine = new Engine(); 
} engine.start(); // compilation error
IN JAVASCRIPT FUNCTION CREATES A SCOPE 
function pkp(where) { 
if(where === 'Szczecin') { 
var announcment = 'Sorry, taki mamy klimat'; 
} 
return announcment; // ok, in scope 
} assert(announcment === undefined); // out of scope
JAVASCRIPT KILLER 
var a = 1; 
function b() { 
a = 10; 
return; 
function a() {} 
} b(); 
console.log(a); // ?
HOISTING 
FUNCTION DECLARATIONS AND VARIABLE DECLARATIONS ARE 
ALWAYS MOVED (“HOISTED”) INVISIBLY TO THE TOP OF THEIR 
CONTAINING SCOPE BY THE JAVASCRIPT INTERPRETER. 
function foo() { 
bar(); 
var x = 1; 
function bar() { } 
} 
function foo() { 
function bar() { } 
var x; 
bar(); 
x = 1; 
}
HOISTING 
function foo() { 
bar(); // exception! 
var bar = function() {} 
} 
function foo() { 
var bar; 
bar(); 
bar = function() { } 
}
CLOSURES 
function outer() { 
var name = "Bob"; 
function inner() { 
return "Somewhere out there, there's a guy called " + name; 
} 
console.log(inner()); 
} 
outer(); 
Somewhere out there, there's a guy called Bob
CLOSURES 
function outer() { 
var name = "Bob"; 
function inner() { 
return "Somewhere out there, there's a guy called " + name; 
} 
return inner; 
} 
var ref = outer(); 
console.log(ref()); 
Somewhere out there, there's a guy called Bob
OBJECTS 
Everything is an object (even function) 
No such thing as class 
Everything is a map
OBJECTS 
var person = {}; 
var person = {}; 
person.name = "John"; 
person.eat = function(food) { ... }; 
var person = {}; 
person["name"] = "John"; 
person["eat"] = function(food) { ... }; 
var person = { 
name: "John", 
eat: function(food) { ... }; 
};
MODULES
THERE IS NO SUCH THING 
AS 'PRIVATE'
MODULES 
CLOSURE TO THE RESCUE! 
var JDBC = (function() { 
function connection() { ... } 
function runSQL(sql) { 
var c = connection(); 
c.execute(sql); 
} 
return { 
runSQL: runSQL 
}; 
})();
TOOLS 
Testing: Jasmine, Mocha, much much more... 
Static code analysis: JSLint 
Dependency injection: require.js
THE END 
BY PAWEŁ SZULC / RABBITONWEB.COM 
email: paul.szulc@gmailcom / twitter: @paulszulc

More Related Content

What's hot (20)

PDF
Python postgre sql a wonderful wedding
Stéphane Wirtel
 
PPTX
Nice to meet Kotlin
Jieyi Wu
 
PPTX
Introduction to Ecmascript - ES6
Nilesh Jayanandana
 
ODP
AST Transformations
HamletDRC
 
PDF
はじめてのGroovy
Tsuyoshi Yamamoto
 
PPTX
Visualizing ORACLE performance data with R @ #C16LV
Maxym Kharchenko
 
PDF
"PostgreSQL and Python" Lightning Talk @EuroPython2014
Henning Jacobs
 
PPTX
Building native Android applications with Mirah and Pindah
Nick Plante
 
PDF
Clojurian Conquest
Kent Ohashi
 
PPT
Ggug spock
Skills Matter
 
KEY
Alfresco the clojure way
Carlo Sciolla
 
ZIP
Oral presentation v2
Yeqi He
 
PDF
Kotlin Bytecode Generation and Runtime Performance
intelliyole
 
PDF
Groovy ネタ NGK 忘年会2009 ライトニングトーク
Tsuyoshi Yamamoto
 
PDF
Android dev toolbox - Shem Magnezi, WeWork
DroidConTLV
 
PPTX
2015 555 kharchenko_ppt
Maxym Kharchenko
 
PDF
Lambdas and Streams Master Class Part 2
José Paumard
 
PDF
GoCracow #5 Bartlomiej klimczak - GoBDD
Bartłomiej Kiełbasa
 
PDF
What's in Kotlin for us - Alexandre Greschon, MyHeritage
DroidConTLV
 
PDF
Do you Promise?
jungkees
 
Python postgre sql a wonderful wedding
Stéphane Wirtel
 
Nice to meet Kotlin
Jieyi Wu
 
Introduction to Ecmascript - ES6
Nilesh Jayanandana
 
AST Transformations
HamletDRC
 
はじめてのGroovy
Tsuyoshi Yamamoto
 
Visualizing ORACLE performance data with R @ #C16LV
Maxym Kharchenko
 
"PostgreSQL and Python" Lightning Talk @EuroPython2014
Henning Jacobs
 
Building native Android applications with Mirah and Pindah
Nick Plante
 
Clojurian Conquest
Kent Ohashi
 
Ggug spock
Skills Matter
 
Alfresco the clojure way
Carlo Sciolla
 
Oral presentation v2
Yeqi He
 
Kotlin Bytecode Generation and Runtime Performance
intelliyole
 
Groovy ネタ NGK 忘年会2009 ライトニングトーク
Tsuyoshi Yamamoto
 
Android dev toolbox - Shem Magnezi, WeWork
DroidConTLV
 
2015 555 kharchenko_ppt
Maxym Kharchenko
 
Lambdas and Streams Master Class Part 2
José Paumard
 
GoCracow #5 Bartlomiej klimczak - GoBDD
Bartłomiej Kiełbasa
 
What's in Kotlin for us - Alexandre Greschon, MyHeritage
DroidConTLV
 
Do you Promise?
jungkees
 

Viewers also liked (20)

PPT
19th March Session 2 By Anuradha Das Mathur
Sharath Kumar
 
PDF
Emprender en la Actualidad - JECA 2015 Universidad Nacional del Sur
Lisandro Sosa
 
PPTX
Salut!
LadaBu
 
PDF
Informe de gestión
ENTRERRIOS
 
PPT
D:\Introduccion A Sql 2000 Server
guestb4f410
 
PDF
Cuentos 2008 De Cristian Carcamo
guestefe2634
 
DOCX
Cuál es mi idea
Ander Gonzalez
 
DOCX
Data recovery
KOSTO182
 
PDF
La ética y la moral
okeliuladech
 
DOC
Análisis Fílmico
Patrizia Castrogiovanni
 
PDF
RESUMEN DE MUELLE Y LOS SALTAPIEDRA, POR IZAN SÁNCHEZ 1º B
paloma59
 
PPTX
Falsafah keperawatan
mertayasa
 
PPTX
Introduccion a SQL
AaAaA88
 
PPTX
Taller de informatica_803_(2)
Tatiana Nieves
 
PPT
Презентація:Матеріали до уроків
sveta7940
 
DOCX
Joseph Gigliotti - Resume (Linked-In)
Joseph Gigliotti
 
PDF
Estatuto del representante legal
Junta Arquidiocesana de Educacion Católica
 
PPTX
Wearables en la comunicación
Jorge Antonio Prado Gómez
 
DOCX
Planes y programas
javiermartinmartin
 
DOC
Vocabulario dibujos
ElviraHalaja
 
19th March Session 2 By Anuradha Das Mathur
Sharath Kumar
 
Emprender en la Actualidad - JECA 2015 Universidad Nacional del Sur
Lisandro Sosa
 
Salut!
LadaBu
 
Informe de gestión
ENTRERRIOS
 
D:\Introduccion A Sql 2000 Server
guestb4f410
 
Cuentos 2008 De Cristian Carcamo
guestefe2634
 
Cuál es mi idea
Ander Gonzalez
 
Data recovery
KOSTO182
 
La ética y la moral
okeliuladech
 
Análisis Fílmico
Patrizia Castrogiovanni
 
RESUMEN DE MUELLE Y LOS SALTAPIEDRA, POR IZAN SÁNCHEZ 1º B
paloma59
 
Falsafah keperawatan
mertayasa
 
Introduccion a SQL
AaAaA88
 
Taller de informatica_803_(2)
Tatiana Nieves
 
Презентація:Матеріали до уроків
sveta7940
 
Joseph Gigliotti - Resume (Linked-In)
Joseph Gigliotti
 
Estatuto del representante legal
Junta Arquidiocesana de Educacion Católica
 
Wearables en la comunicación
Jorge Antonio Prado Gómez
 
Planes y programas
javiermartinmartin
 
Vocabulario dibujos
ElviraHalaja
 
Ad

Similar to Javascript development done right (20)

PPTX
Ian 20150116 java script oop
LearningTech
 
DOC
Jsphp 110312161301-phpapp02
Seri Moth
 
PPTX
5 Tips for Better JavaScript
Todd Anglin
 
PDF
JavaScript for PHP developers
Stoyan Stefanov
 
PDF
JavaScript Survival Guide
Giordano Scalzo
 
PPTX
Kotlin For Android - Functions (part 3 of 7)
Gesh Markov
 
PDF
The Future of JVM Languages
VictorSzoltysek
 
PPSX
What's New In C# 7
Paulo Morgado
 
PDF
No excuses, switch to kotlin
Thijs Suijten
 
PPTX
JavaScript - i och utanför webbläsaren (2010-03-03)
Anders Jönsson
 
PDF
Presentatie - Introductie in Groovy
Getting value from IoT, Integration and Data Analytics
 
PDF
Swift Study #7
chanju Jeon
 
PDF
CoffeeScript
Scott Leberknight
 
ODP
AST Transformations at JFokus
HamletDRC
 
KEY
Javascript tid-bits
David Atchley
 
PDF
Discover Dart(lang) - Meetup 07/12/2016
Stéphane Este-Gracias
 
ODP
Groovy Ast Transformations (greach)
HamletDRC
 
PDF
Easily mockingdependenciesinc++ 2
drewz lin
 
PDF
Discover Dart - Meetup 15/02/2017
Stéphane Este-Gracias
 
Ian 20150116 java script oop
LearningTech
 
Jsphp 110312161301-phpapp02
Seri Moth
 
5 Tips for Better JavaScript
Todd Anglin
 
JavaScript for PHP developers
Stoyan Stefanov
 
JavaScript Survival Guide
Giordano Scalzo
 
Kotlin For Android - Functions (part 3 of 7)
Gesh Markov
 
The Future of JVM Languages
VictorSzoltysek
 
What's New In C# 7
Paulo Morgado
 
No excuses, switch to kotlin
Thijs Suijten
 
JavaScript - i och utanför webbläsaren (2010-03-03)
Anders Jönsson
 
Presentatie - Introductie in Groovy
Getting value from IoT, Integration and Data Analytics
 
Swift Study #7
chanju Jeon
 
CoffeeScript
Scott Leberknight
 
AST Transformations at JFokus
HamletDRC
 
Javascript tid-bits
David Atchley
 
Discover Dart(lang) - Meetup 07/12/2016
Stéphane Este-Gracias
 
Groovy Ast Transformations (greach)
HamletDRC
 
Easily mockingdependenciesinc++ 2
drewz lin
 
Discover Dart - Meetup 15/02/2017
Stéphane Este-Gracias
 
Ad

More from Pawel Szulc (20)

PDF
Getting acquainted with Lens
Pawel Szulc
 
PDF
Impossibility
Pawel Szulc
 
PDF
Maintainable Software Architecture in Haskell (with Polysemy)
Pawel Szulc
 
PDF
Painless Haskell
Pawel Szulc
 
PDF
Trip with monads
Pawel Szulc
 
PDF
Trip with monads
Pawel Szulc
 
PDF
Illogical engineers
Pawel Szulc
 
PDF
RChain - Understanding Distributed Calculi
Pawel Szulc
 
PDF
Illogical engineers
Pawel Szulc
 
PDF
Understanding distributed calculi in Haskell
Pawel Szulc
 
PDF
Software engineering the genesis
Pawel Szulc
 
PDF
Make your programs Free
Pawel Szulc
 
PDF
Going bananas with recursion schemes for fixed point data types
Pawel Szulc
 
PDF
“Going bananas with recursion schemes for fixed point data types”
Pawel Szulc
 
PDF
Writing your own RDD for fun and profit
Pawel Szulc
 
PDF
The cats toolbox a quick tour of some basic typeclasses
Pawel Szulc
 
PDF
Introduction to type classes
Pawel Szulc
 
PDF
Functional Programming & Event Sourcing - a pair made in heaven
Pawel Szulc
 
PDF
Apache spark workshop
Pawel Szulc
 
PDF
Introduction to type classes in 30 min
Pawel Szulc
 
Getting acquainted with Lens
Pawel Szulc
 
Impossibility
Pawel Szulc
 
Maintainable Software Architecture in Haskell (with Polysemy)
Pawel Szulc
 
Painless Haskell
Pawel Szulc
 
Trip with monads
Pawel Szulc
 
Trip with monads
Pawel Szulc
 
Illogical engineers
Pawel Szulc
 
RChain - Understanding Distributed Calculi
Pawel Szulc
 
Illogical engineers
Pawel Szulc
 
Understanding distributed calculi in Haskell
Pawel Szulc
 
Software engineering the genesis
Pawel Szulc
 
Make your programs Free
Pawel Szulc
 
Going bananas with recursion schemes for fixed point data types
Pawel Szulc
 
“Going bananas with recursion schemes for fixed point data types”
Pawel Szulc
 
Writing your own RDD for fun and profit
Pawel Szulc
 
The cats toolbox a quick tour of some basic typeclasses
Pawel Szulc
 
Introduction to type classes
Pawel Szulc
 
Functional Programming & Event Sourcing - a pair made in heaven
Pawel Szulc
 
Apache spark workshop
Pawel Szulc
 
Introduction to type classes in 30 min
Pawel Szulc
 

Recently uploaded (20)

PDF
Book industry state of the nation 2025 - Tech Forum 2025
BookNet Canada
 
PDF
Newgen 2022-Forrester Newgen TEI_13 05 2022-The-Total-Economic-Impact-Newgen-...
darshakparmar
 
PPTX
Agentforce World Tour Toronto '25 - Supercharge MuleSoft Development with Mod...
Alexandra N. Martinez
 
PDF
CIFDAQ Market Wrap for the week of 4th July 2025
CIFDAQ
 
PPTX
Designing_the_Future_AI_Driven_Product_Experiences_Across_Devices.pptx
presentifyai
 
PPTX
New ThousandEyes Product Innovations: Cisco Live June 2025
ThousandEyes
 
PDF
The Rise of AI and IoT in Mobile App Tech.pdf
IMG Global Infotech
 
PPTX
COMPARISON OF RASTER ANALYSIS TOOLS OF QGIS AND ARCGIS
Sharanya Sarkar
 
PDF
“Voice Interfaces on a Budget: Building Real-time Speech Recognition on Low-c...
Edge AI and Vision Alliance
 
PPT
Ericsson LTE presentation SEMINAR 2010.ppt
npat3
 
PPTX
Mastering ODC + Okta Configuration - Chennai OSUG
HathiMaryA
 
PDF
“Computer Vision at Sea: Automated Fish Tracking for Sustainable Fishing,” a ...
Edge AI and Vision Alliance
 
PPTX
Future Tech Innovations 2025 – A TechLists Insight
TechLists
 
PDF
UPDF - AI PDF Editor & Converter Key Features
DealFuel
 
PDF
“NPU IP Hardware Shaped Through Software and Use-case Analysis,” a Presentati...
Edge AI and Vision Alliance
 
PDF
Newgen Beyond Frankenstein_Build vs Buy_Digital_version.pdf
darshakparmar
 
PDF
“Squinting Vision Pipelines: Detecting and Correcting Errors in Vision Models...
Edge AI and Vision Alliance
 
PPTX
Seamless Tech Experiences Showcasing Cross-Platform App Design.pptx
presentifyai
 
PDF
Kit-Works Team Study_20250627_한달만에만든사내서비스키링(양다윗).pdf
Wonjun Hwang
 
PPTX
Agentforce World Tour Toronto '25 - MCP with MuleSoft
Alexandra N. Martinez
 
Book industry state of the nation 2025 - Tech Forum 2025
BookNet Canada
 
Newgen 2022-Forrester Newgen TEI_13 05 2022-The-Total-Economic-Impact-Newgen-...
darshakparmar
 
Agentforce World Tour Toronto '25 - Supercharge MuleSoft Development with Mod...
Alexandra N. Martinez
 
CIFDAQ Market Wrap for the week of 4th July 2025
CIFDAQ
 
Designing_the_Future_AI_Driven_Product_Experiences_Across_Devices.pptx
presentifyai
 
New ThousandEyes Product Innovations: Cisco Live June 2025
ThousandEyes
 
The Rise of AI and IoT in Mobile App Tech.pdf
IMG Global Infotech
 
COMPARISON OF RASTER ANALYSIS TOOLS OF QGIS AND ARCGIS
Sharanya Sarkar
 
“Voice Interfaces on a Budget: Building Real-time Speech Recognition on Low-c...
Edge AI and Vision Alliance
 
Ericsson LTE presentation SEMINAR 2010.ppt
npat3
 
Mastering ODC + Okta Configuration - Chennai OSUG
HathiMaryA
 
“Computer Vision at Sea: Automated Fish Tracking for Sustainable Fishing,” a ...
Edge AI and Vision Alliance
 
Future Tech Innovations 2025 – A TechLists Insight
TechLists
 
UPDF - AI PDF Editor & Converter Key Features
DealFuel
 
“NPU IP Hardware Shaped Through Software and Use-case Analysis,” a Presentati...
Edge AI and Vision Alliance
 
Newgen Beyond Frankenstein_Build vs Buy_Digital_version.pdf
darshakparmar
 
“Squinting Vision Pipelines: Detecting and Correcting Errors in Vision Models...
Edge AI and Vision Alliance
 
Seamless Tech Experiences Showcasing Cross-Platform App Design.pptx
presentifyai
 
Kit-Works Team Study_20250627_한달만에만든사내서비스키링(양다윗).pdf
Wonjun Hwang
 
Agentforce World Tour Toronto '25 - MCP with MuleSoft
Alexandra N. Martinez
 

Javascript development done right

  • 1. JAVASCRIPT DEVELOPMENT DONE RIGHT CONFITURA 2014 Created by Paweł Szulc / / http://rabbitonweb.com @paulszulc [email protected] var microphone = { testing: function(oneTwoThree) { console.log("testing, testing " + oneTwoThree); } }
  • 2. PEACEFUL JAVA Understandable object oriented language Vast and rich ecosystem of frameworks, tools and technologies Static code analysis, well-known conventions and best practices Testable, clean and readable code
  • 6. JAVASCRIPT Strange, bizarre and non deterministic language Coding like its 1996 all over again Not a single unit test, no static code analysis
  • 8. $ GIT CLONE GIT://GITHUB.COM/YOU/YOUR-PROJECT. GIT
  • 11. “JAVASCRIPT IS TO JAVA AS HAMBURGER IS TO HAM.”
  • 12. KEY DIFFERENCES Language nature: object vs functional Different concepts (e.g function vs method, scope definitions) Different set of operators and key words (===, undefined) Different nature of operators and key words (e.g this)
  • 13. IMPORTANT “TO USE THE LANGUAGE PROPERLY, UNDERLYING CONCEPTS UNDERSTAND YOU MUST”
  • 15. FUNCTIONS ARE FIRST CLASS CITIZENS They can be assigned to variables, arrays and properties of other objects They can be passed as arguments to functions They can be returned as values from functions The only difference between a function and an object, is that functions can be invoked
  • 16. EXAMPLES function () { } // ? function problemSolver() { } problemSolver(); problemSolver("I have a problem, please do solve it"); function problemSolver(problem, hint) { } problemSolver(problem, hint); problemSolver(problem); problemSolver(); problemSolver(problem, hint, "some other parameter out of nowhere"); function problemSolver(problem, hint) { return 42; }
  • 17. THIS
  • 18. THIS THE THIS PARAMETER REFERS TO AN OBJECT THAT’S IMPLICITLY ASSOCIATED WITH THE FUNCTION INVOCATION.
  • 22. IF IT QUACKS LIKE A DUCK, IT MUST BE A ... var duck = {}; duck.name = "Donald Duck"; var dog = {}; dog.name = "Pluto"; duck.say = function() { console.log("Quack quack, call me " + this.name); } dog.say = function() { console.log("Bark bark, call me " + this.name); } duck.say(); dog.say(); Quack quack, call me Donald Duck Bark bark, call me Pluto duck.say.call(dog); Quack quack, call me Pluto
  • 23. WHAT THE QUACK? duck.say = function() { console.log("Quack quack, call me " + this.name); } dog.say = function() { console.log("Bark bark, call me " + this.name); } duck.say.call(dog); Quack quack, call me Pluto
  • 24. FUNCTION INVOCATION THERE ARE FOUR DIFFERENT WAYS FOR FUNCTION TO BE INVOKED 1. as function 2. as method 3. as constructor 4. by apply() or call()
  • 25. AS FUNCTION function timestamp() { this.stamp = new Date(); }; timestamp(); console.log(window.stamp) Fri Apr 11 2014 01:56:07 GMT+0200 (Central European Daylight Time)
  • 26. AS METHOD var problemSolver = {}; problemSolver.timestamp = function() { this.stamp = new Date(); }; problemSolver.timestamp(); console.log(problemSolver.stamp) Fri Apr 11 2014 01:56:07 GMT+0200 (Central European Daylight Time)
  • 27. AS CONSTRUCTOR function person(name) { this.name = name; return this; }; var p1 = new person('Captain Bomba'); console.log(p1.name) Captain Bomba
  • 28. BY APPLY() OR CALL() var duck = {}; duck.name = "Donald Duck"; var dog = {}; dog.name = "Pluto"; duck.say = function() { console.log("Quack quack, call me " + this.name); } dog.say = function() { console.log("Bark bark, call me " + this.name); } duck.say.call(dog); Quack quack, call me Pluto
  • 30. IN MOST C-LIKE LANGUAGES BLOCK CREATES A SCOPE // java if(true) { Engine engine = new Engine(); } engine.start(); // compilation error
  • 31. IN JAVASCRIPT FUNCTION CREATES A SCOPE function pkp(where) { if(where === 'Szczecin') { var announcment = 'Sorry, taki mamy klimat'; } return announcment; // ok, in scope } assert(announcment === undefined); // out of scope
  • 32. JAVASCRIPT KILLER var a = 1; function b() { a = 10; return; function a() {} } b(); console.log(a); // ?
  • 33. HOISTING FUNCTION DECLARATIONS AND VARIABLE DECLARATIONS ARE ALWAYS MOVED (“HOISTED”) INVISIBLY TO THE TOP OF THEIR CONTAINING SCOPE BY THE JAVASCRIPT INTERPRETER. function foo() { bar(); var x = 1; function bar() { } } function foo() { function bar() { } var x; bar(); x = 1; }
  • 34. HOISTING function foo() { bar(); // exception! var bar = function() {} } function foo() { var bar; bar(); bar = function() { } }
  • 35. CLOSURES function outer() { var name = "Bob"; function inner() { return "Somewhere out there, there's a guy called " + name; } console.log(inner()); } outer(); Somewhere out there, there's a guy called Bob
  • 36. CLOSURES function outer() { var name = "Bob"; function inner() { return "Somewhere out there, there's a guy called " + name; } return inner; } var ref = outer(); console.log(ref()); Somewhere out there, there's a guy called Bob
  • 37. OBJECTS Everything is an object (even function) No such thing as class Everything is a map
  • 38. OBJECTS var person = {}; var person = {}; person.name = "John"; person.eat = function(food) { ... }; var person = {}; person["name"] = "John"; person["eat"] = function(food) { ... }; var person = { name: "John", eat: function(food) { ... }; };
  • 40. THERE IS NO SUCH THING AS 'PRIVATE'
  • 41. MODULES CLOSURE TO THE RESCUE! var JDBC = (function() { function connection() { ... } function runSQL(sql) { var c = connection(); c.execute(sql); } return { runSQL: runSQL }; })();
  • 42. TOOLS Testing: Jasmine, Mocha, much much more... Static code analysis: JSLint Dependency injection: require.js
  • 43. THE END BY PAWEŁ SZULC / RABBITONWEB.COM email: paul.szulc@gmailcom / twitter: @paulszulc