JavaScript
Beyond the Basics
We expect cooperation from all participants to help ensure a safe environment for everybody.
We treat everyone with respect, we refrain from using offensive language and imagery, and we encourage to report any derogatory or offensive behavior to a member of the JSLeague community.
We provide a fantastic environment for everyone to learn and share skills regardless of gender, gender identity and expression, age, sexual orientation, disability, physical appearance, body size, race, ethnicity, religion (or lack thereof), or technology choices.
We value your attendance and your participation in the JSLeague community and expect everyone to accord to the community Code of Conduct at all JSLeague workshops and other events.
Code of conduct
Whoami
Alexandru Albu
Trainer @JSLeague
frontend developer @7yo
design: photoshop, illustrator
development: javascript. python, sql, mongo
devops: docker, circle-ci
and gaming and basketball
Overview
JavaScript Beyond the Basics
JavaScript Beyond the Basics
Agenda
Types and coercion
Scope and the "this" keyword
Closures
Objects and prototypes
Shims/Polyfills
Functional Programming
Types and coercion
JavaScript Beyond the Basics
JavaScript Beyond the Basics
Data types
primitives
objects
JavaScript Beyond the Basics
Type Coercion
is the process of converting value from one type to another (such as string to number, object to boolean, and so on).
End result of coercion will always be either a string, a number or a boolean value
JavaScript Beyond the Basics
Implicit vs. Explicit
Number("5")
String(true)
Boolean(31)
5 + "3"
true + false
"6" - 1
JavaScript Beyond the Basics
Loose vs Strict Equality
(== vs. ===)
JavaScript Beyond the Basics
False positives
false, 0, "", null, undefined, NaN
JavaScript Beyond the Basics
QUIZ TIME
- true + false
- 12 / "6"
- "number" + 15 + 3
- 15 + 3 + "number"
- [1] > null
- "foo" + + "bar"
- 'true' == true
- false == 'false'
- null == ''
- !!"false" == !!"true"
- [‘x’] == ‘x’
- [] + null + 1
- [1,2,3] == [1,2,3]
- {}+[]+{}+[1]
- !+[]+[]+![]
- new Date(0) - 0
- new Date(0) + 0
Scope and the "this" keyword
JavaScript Beyond the Basics
JavaScript Beyond the Basics
Scope
global
function
block
JavaScript Beyond the Basics
Hoisting
JavaScript Beyond the Basics
this
Closures
JavaScript Beyond the Basics
JavaScript Beyond the Basics
Why?
> control side effects
> separate scopes for private use
Objects and prototypes
JavaScript Beyond the Basics
JavaScript Beyond the Basics
a prototype based language
before es6 no class definitions
how did anything actually work?
Shims/Polyfills
JavaScript Beyond the Basics
JavaScript Beyond the Basics
A shim is a library that brings a new API to an older environment, using only the means of that environment.
A polyfill is a type of shim that retrofits legacy browsers with modern HTML5/CSS3 features usually using Javascript or Flash.
Functional programming
JavaScript Beyond the Basics
JavaScript Beyond the Basics
Two pillars of JavaScript:
Prototypal Inheritance
Functional Programming
JavaScript Beyond the Basics
Functional Programming
Pure functions
Function composition
Avoid shared state
Avoid mutating state
Avoid side effects
JavaScript Beyond the Basics
Pure functions
implements pattern input-output
given same input, has same output
no side-effects
JavaScript Beyond the Basics
Function composition
combine multiple functions to result one
no shared state
high reusability
JavaScript Beyond the Basics
Avoid shared state
Avoid mutating state
Avoid side effects
Q&A
JavaScript Beyond the Basics
Thank you!
JavaScript Beyond the Basics
By Alex Albu
