webdesignberlin

(function() {
  let canvas = document.querySelector('canvas');
  // Optional frames per second argument.
  let stream = canvas.captureStream(25);
  let recorder = new MediaRecorder(stream, options);
  let blobs = [];

  function download(blob) {
    var url = window.URL.createObjectURL(blob);
    var a = document.createElement('a');

webdesignberlin

const original = [0,1,2,3];
const copy = Object.assign([], original, { 2: 42 }); // [0,1,42,3]

console.log(original);
// [ 0, 1, 2, 3 ]

console.log(copy);
// [ 0, 1, 42, 3 ]

webdesignberlin

function WhySoManyProps(props) {
  const user = extractUser(props);
  const fudge = calculateFudge();
  const bits = computeBits();
  
  // This is soooooo redundant.
  return <SomeComponent user={user} fudge={fudge} bits={bits} />;
}

function Shorthand(props) {

webdesignberlin

const moment = require('moment');
const PERIOD = moment.duration(3, 'days');

module.exports = {
  PERIOD,
  
  isWithinPeriod(test) {
    return moment().add(PERIOD).isAfter(test);
  },
};

webdesignberlin

#!/usr/bin/env node

// skip the first two args as they are node and this script
const [,,filepath] = process.argv;

doSomethingFSLike(filepath);

webdesignberlin

const {
  topLevel: {
    intermediate,    // declaration of intermediate
    intermediate: {
      nested         // declaration of nested
    }
  }
} = {
  topLevel: {
    intermediate: {

webdesignberlin

function defaults({ a = 1, b = 2 } = {}) {
  console.log('a', a); 
  console.log('b', b);
}

defaults();
// a 1
// b 2

defaults({ a: 42, b: 32 });

webdesignberlin

function defaults({ a, b } = { a: 1, b: 2 }) {
  console.log('a', a); 
  console.log('b', b);
}

defaults();
// a 1
// b 2

defaults({ a: 42, b: 32 });

webdesignberlin

// simple renaming to avoid collisions or just as a preference.
const a = 5;
const { a: b } = { a: 3 };

console.log(b); // prints 3

// rename for another API and use enhanced object literal notation.
function verifyUser({ userId: id }) {
  return User.update({ id, verified: true });
}

webdesignberlin

// can destructure arrays
const [a, b] = [1,2]; // a = 1, b = 2

// can destructure object keys
const { a } = { a: 3 }; // a = 3

// even function parameters
function foo({ a }) {
  console.log(a);
}