Solid JavaScript Coding

S O L I D J AVA S C R I P T

C O D I N GM A Y 2 4 , 2 0 1 5 - D I W A D E L M U N D O / V O YA G E R I N N O VA T I O N S

JavaScript is …

– C H A R L E S J O S E P H U Y

“swiss army knife romance.”

JavaScript is …

– M A . C Z A R I N A S . B O N G AT

“is a cool scripting language but hard to learn.”

JavaScript is …

– S A M U E L F R A N C I S C O

“the language to rule them all.”

JavaScript is …

- S E T A B A S E S TA N D A R D F O R J AVA S C R I P T D E V E L O P M E N T

W H Y A R E W E H E R E ?

- F O S T E R A C O L L A B O R AT I V E E N V I R O N M E N T F O R J AVA S C R I P T K N O W L E D G E L E A R N I N G

- G E T T O G E T H E R A N D H AV E L U N C H !

O V E R V I E W O F T O D AY ’ S S E S S I O N

• JavaScript Review - Diwa del Mundo

• Object-Oriented Programming in JS - Zander Magtipon

• JavaScript Anti-Patterns - Russell Santos

• JS Race Conditions - Arisa Ochavez

• ECMAScript 6 - Ruel Pagayon

git clone https://goo.gl/fNA4Ex

// If you have nvm: nvm use v0.12

node

J AVA S C R I P T R E V I E W

• Variables, Globals

• Functions (Scopes, Constructor Functions, Self-executing)

• Object Literals and the “new” operator

• Closures

1 . VA R I A B L E S . J S

• Primitives

• typeof

2 . O B J E C T-L I T E R A L S . J S

• You can create variables either by literals or built-in constructors

• Object literals: key-value notation

• For non-custom objects, you’ll use literals most of the time

3 . VA R S -G L O B A L S . J S

• Variables are declared via ‘var’, optional but recommended

• Not using ‘var’ makes your variable an implied global

• Implied globals can be deleted, explicit globals cannot be deleted

4 . N O T E S - O N - T H I S . J S

• The variable ‘this’ inside a non-constructor function points to the global object

global

5 . H O I S T I N G . J S

• Hoisting refers to the ‘jump to top’ behaviour of the JavaScript interpreter

• Interpreter “preprocesses” code

6 . F U N C T I O N S . J S

• Functions are 1st-class objects in JS: they have properties and methods

• They provide scope

• Created dynamically, assigned, copied by reference

• Can be passed as arguments to other functions

• Types: function declarations, functional expression, named functional expression

I M M E D I AT E F U N C T I O N S A N D C U R R Y I N G

• Immediate functions executes immediately - good for initialisation

• Currying - partial application of functions - good when calling functions with similar arguments

N E W

7 . C O N S T R U C T O R -F U N C T I O N S . J S

• You can create object instances using the ‘new’ operator

• “Objects” are defined via constructor functions

• ‘this’ refers to the instance

http://www.thehindu.com/multimedia/dynamic/00846/20SM_VIJAY_846767f.jpg

– C H A P T E R 3 , E X P E R T J AVA S C R I P T ( D A G G E T T )

A closure is the act of binding all free variables and functions into a closed expression that persist

beyond the lexical scope from which they were created.

8 . C L O S U R E S . J S

• Most basic definition: an outer function that returns an inner function

• A way to have access to variables and functions that it shouldn’t have

S U M M A R Y

• Use literals.

• Define objects through constructor functions.

• Understand ‘this’.

• Learn functions by heart.

• Whatever happens, make sure you know closures.

Colophon

The animal in the photo in this presentation is a Tarsier.

References

See References.md JavaScript Patterns Expert JavaScript