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

and gaming and basketball

Overview

JavaScript Beyond the Basics

JavaScript Beyond the Basics

Agenda

Basic concepts of JS

Scope and “this”

Arrow functions

Template literals

Destructuring, spread, rest

Enhanced objects

Iterators: generators, for...loops

Callbacks, promises, async, observables

Functional programming

Nice to have

Classes

ES modules

Set and Map

Error handling & debugging

Shims / Polyfills

Basic concepts of JS

JavaScript Beyond the Basics

JavaScript Beyond the Basics

Data types

primitives

objects

JavaScript Beyond the Basics

constructors and inheritance

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

Hoisting

evaluating stuff that doesn't exist (yet)

JavaScript Beyond the Basics

Closures

function inception

Scope and "this"

JavaScript Beyond the Basics

JavaScript Beyond the Basics

Scope

global

function

block

JavaScript Beyond the Basics

this

at root level

*unless strict mode

browser == window

node == global

at function level

call, apply

bind

arrow function

Arrow functions

JavaScript Beyond the Basics

JavaScript Beyond the Basics

lexical this

cannot be used as constructors

(param1, param2, …, paramN) => { statements }

shorter syntax

no arguments

JavaScript Beyond the Basics

ARTICLE = { ID,  TITLE, CONTENT }

const titles = articles.map(function (article) {
  return article.title;
});
ARTICLE = { ID,  TITLE, CONTENT }

const titles = articles.map(article => {
  return article.title;
});
ARTICLE = { ID,  TITLE, CONTENT }

const titles = articles.map(article => article.title);

Template literals

JavaScript Beyond the Basics

JavaScript Beyond the Basics

string interpolation

multiline

Destructuring, spread, rest

JavaScript Beyond the Basics

JavaScript Beyond the Basics

Destructuring

breaking down objects and arrays

into named variables

JavaScript Beyond the Basics

Spread

unpacking (or expanding)

iterable collections

JavaScript Beyond the Basics

Rest

aggregation of remaining params

into a single variable

Enhanced objects

JavaScript Beyond the Basics

JavaScript Beyond the Basics

shorthand properties and functions

computed key names

Iterators: generators, for...loops

JavaScript Beyond the Basics

JavaScript Beyond the Basics

Generators

functions that behave as iterators

declared using function*  

does not return values, yields them

can create iterators out of anything

JavaScript Beyond the Basics

JavaScript Beyond the Basics

for...loop

iterate over values

iterate over keys

for...in

for...of

Callbacks, promises, async, observables

JavaScript Beyond the Basics

JavaScript Beyond the Basics

Callback

a function that is triggered

and resolved

at the end of another function

JavaScript Beyond the Basics

Promise

a fulfillment of an already started action ending in a resolve or failure

JavaScript Beyond the Basics

Async

similar to promise

but now its called async*

*also now it actually looks like js code

JavaScript Beyond the Basics

Observables

asynchronous turned into streams

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

Classes

JavaScript Beyond the Basics

JavaScript Beyond the Basics

es5

var Person = function(fname, lname) {
  this.fname = fname;
  this.lname = lname;
}

Person.prototype.getFullName = function() {
  return this.fname + " " + this.lname;
}

es6

class Person {
  constructor(fname, lname) {
    this.fname = fname;
    this.lname = lname;
  }
  
  getFullName() {
  	return `${this.fname} ${this.lname}`
  }
}

ES modules

JavaScript Beyond the Basics

JavaScript Beyond the Basics

es5

// enums/numbers.js
var Numbers = {};

Numbers.ONE = 1;
Numbers.TWO = 2;
Numbers.THREE = 1;
Numbers.FOUR = 2;

// app.js
var EnumNumbers = {};

EnumNumbers.ONE = Numbers.ONE;
EnumNumbers.TWO = Numbers.TWO;

es6

// enums/numbers.js
export {
  ONE: 1,
  TWO: 2,
  THREE: 3,
  FOUR: 4
}

// app.js
import { 
  ONE, 
  TWO 
} from "enums/numbers.js"

Set and Map

JavaScript Beyond the Basics

JavaScript Beyond the Basics

Map

Map is a collection of keyed data items, just like an Object. But the main difference is that Map allows keys of any type.

JavaScript Beyond the Basics

Set

A Set is a special type collection – “set of values” (without keys), where each value may occur only once.

Error handling & debugging

JavaScript Beyond the Basics

JavaScript Beyond the Basics

Errors

always use throw new Error as it provides stacktrace

throwing errors in async returns the actual error

JavaScript Beyond the Basics

class ValidationError extends Error {
  constructor(message) {
    super(message)
    this.name = 'ValidationError'
    this.message = message
  }
}
class PermissionError extends Error {
  constructor(message) {
    super(message)
    this.name = 'PermissionError'
    this.message = message
  }
}
class DatabaseError extends Error {
  constructor(message) {
    super(message)
    this.name = 'DatabaseError'
    this.message = message
  }
}
module.exports = {
  ValidationError,
  PermissionError,
  DatabaseError
}
const { 
  ValidationError 
} = require('./error')

function myFunction(input) {
   if (!input)
     throw new ValidationError(
       'A validation error'
     )
   return input
}

new class based

error approach

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.

Q&A

JavaScript Beyond the Basics

Thank you!

JavaScript Beyond the Basics

By Alex Albu

JavaScript Beyond the Basics

  • 491

More from Alex Albu