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

  1. true + false
  2. 12 / "6"
  3. "number" + 15 + 3
  4. 15 + 3 + "number"
  5. [1] > null
  6. "foo" + + "bar"
  7. 'true' == true
  8. false == 'false'
  9. null == ''
  10. !!"false" == !!"true"
  11. [‘x’] == ‘x’
  12. [] + null + 1
  13. [1,2,3] == [1,2,3]
  14. {}+[]+{}+[1]
  15. !+[]+[]+![]
  16. new Date(0) - 0
  17. 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!