Gist for "Upcoming ESNext features - Part 1"

argument-placeholders.js

const add = function (a, b) { return a + b }

const addOne = add(1, ?) // will return a function, that needs one argument

addOne(2) // 3
addOne(6) // 7

[ 1,2,3 ].map(addOne) // [ 2,3,4 ]

async-pipeline-problem.js

// composing functions into a pipeline
// using the Pipeline Operator
// one of the piped functions is async

const userId = 1234

const greeting = userId
  |> await getName
  |> capitalize
  |> greet

console.log(greeting)
// Hello John!

async-pipeline-proposals.js

const userId = 1234

// this would be the solution of the F# Pipeline proposal
const greeting = userId
  |> getName // the awaited function precedes the await keyword
  |> await
  |> capitalize
  |> greet

console.log(greeting)
// Hello John!

// this would be the solution of the Smart Pipeline proposal
const greeting = userId
  |> await getName(#) // we use a placeholder
  |> capitalize
  |> greet

await-pipeline.js

// is it
await getName(userId)

// or
(await getName())(userId)

decorators.js

// Decorator used to pass this whole class to "window.customElements.define"
// with the tagName "num-counter"
@defineElement('num-counter')
class Counter extends HTMLElement {

  // Decorator used to observe the field x,
  // and call the "render" method every time its value updates
  @observed
  x = 0;

  // Decorator used to create a method that is already bound to this instance
  // so we can use just "this.clicked" as a callback everywhere
  // without the need of ".bind()"
  @bound
  clicked() {
    this.x++;
  }

  constructor() {
    super();
    this.onclick = this.clicked; // we can do this since we've used the @bound decorator
  }

  connectedCallback() { this.render(); }

  @bound // the @observed decorator relies on a bound "this.render"
  render() {
    this.textContent = this.x.toString();
  }
}

multiple-placeholders.js

const greet = function (greeting, to, name)  {
    return `${greeting} to ${to}, ${name}`
}

const welcomeTo = greet('welcome', ?, ?);
const welcomeToMyBlog = welcomeTo('my blog', ?);

welcomeTo('Disneyworld', 'Goofy') // welcome to Disneyworld, Goofy
welcomeToMyBlog('Szabolcs') // welcome to my blog, Szabolcs

no-pipeline.js

const getName = function (data) {
  return data.firstName
}

const capitalize = function (str) {
  return str[0].toUpperCase() + str.substring(1)
}

const greet = function (name) {
  return `Hello ${name}!`
}

// composing functions into a pipeline
// using async.compose

const greetUser = async.compose(
  getName,
  capitalize,
  greet
)

greetUser({ fistName: 'john' }, (greeting) => console.log(greeting))
// Hello John!

partial-application.js

const add = function (a, b) { return a + b }

const addOne = _.partial(add, 1)
const addTen = _.partial(add, 10)

addOne(2) // 3
addOne(6) // 7

addTen(2) // 12
addTen(6) // 16

// or use it as an iterator
[ 1,2,3 ].map(addOne) // [ 2,3,4 ]
[ 1,2,3 ].map(addTen) // [ 11,12,13 ]

partial-explainer.js

const x = 42

fn(x, ?)           // partial application from left
fn(x, ...)         // partial application from left with rest
fn(?, x)           // partial application from right
fn(..., x)         // partial application from right with rest
fn(?, x, ?)        // partial application for any argument
fn(..., x, ...)    // partial application for any argument with rest

pipeline-explainer.js

const returnValue = initialData
  |> pipedFn1 // takes initiaData as input
  |> pipedFn2 // takes whatever putput came from pipedFn1
  |> pipedFn3 // takes whatever putput came from pipedFn2

  // returnValue is the value that returned from pipedFn3

pipeline.js

// composing functions into a pipeline
// using the Pipeline Operator

const greeting = { fistName: 'john' }
  |> getName
  |> capitalize
  |> greet

console.log(greeting)
// Hello John!

rest-placeholder.js

const largestThanTen = Math.max(10, ...)

largestThanTen(2, 7, 11) // 11
largestThanTen(6, 5, 4) // 10