julienetie

/*
 If you don't want something mutable to remain mutable, create a new context.
*/
const createBasket = (externalMutable) => {
    const privateConstant = 123; 
    let privateMutable = 'abc'; 
      return {
        get getValues(){ // New context
          return {privateConstant, privateMutable, externalMutable};
        }, 

julienetie

/* Higher-Order JavaScript */
const point = (x, y) => {
    point.distance = (a, b) => {
       const dx = a.x - b.x;
       const dy = a.y - b.y;

       return Math.hypot(dx, dy);
    };
    Object.freeze(point);
    return {x, y}; 

julienetie

/* Object Oriented JavaScript */
class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  static distance(a, b) {
    const dx = a.x - b.x;
    const dy = a.y - b.y;

julienetie

/* Higher-Order JavaScript */
const rectangle = (height, width) => {
   return () => {
      // "height" and "width" are available privately  
   }
}

julienetie

/* Higher-Order JavaScript */
const rectangle = (height, width) => {
    const calcArea = () => height * width; 
    return {
        get area(){
            return calcArea(); 
        }, 
        calcArea
    }
}; 

julienetie

/* Object Oriented JavaScript */
class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
  // Getter
  get area() {
    return this.calcArea();
  }

julienetie

/* Object Oriented JavaScript */ 
class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

julienetie

const getProperty = (object) => {
  return ([path]) => {
    return path.split('.').reduce((acc, property) =>
       acc[property] || null
    ,object);
  };
};

// getProperty({a:{b:{c:'Hello World!'}}}) `a.b.c` 
// "Hello World!"

julienetie

import { create, make } from 'wavefront'
// To create a component we first need to create a component-maker:

// Create keypad component-maker.
create('keypad', ({ title, keypadClass, option, noticeText }) => `
  <div class="${keypadClass}">
     <h1>${title}</h1>
    <div $keys>
      <div>On<div>
      <div>Off<div>

julienetie

Highlight Template Literals in VSCode

By jesperorb

1. Install extension lit-html
2. Open the file:

~/.vscode/extensions/bierner.lit-html-1.3.0/syntaxes/lit-html.json

3. Replace line: