ES2015 intro chat

next.js

'use strict';

// What is ES2015?

// !!!!!!!!!!!!!!    let, const   !!!!!!!!!!!!!!!!!!!!!!

const ONE_HOUR = 60 * 60 * 1000;

ONE_HOUR = 60 * 60;
// Throws error

// Block scoping
var something = function(item, array) {
  var value = getMyValue(item);
  var isValid = false;
  if (value) {
    let idx = array.indexOf(value);
    if (idx > -1)
      isValid = true;
  }
  console.log(idx);
  // returns undefined!!

  console.log(isValid);
  // true

  return isValid;
};



// !!!!!!!!!!!!!!    Functions    !!!!!!!!!!!!!!!!!!!!!!

// ES5
var greet = function(name, greeting) {
  if (!greeting) greeting = 'Hello';
  return greeting + ' ' + name + '!';
};

// Default args
var greet = function(name, greeting = 'Hello') {
  return greeting + ' ' + name + '!';
};

// Template strings
var greet = function(name, greeting = 'Hello') {
  return `${greeting} ${name}!`;
};

// arrow functions
var greet = (name, greeting = 'Hello') => {
  ///
  return `${greeting} ${name}!`;
};

function() {
  this.x = 10;
  var greet = (name, greeting = 'Hello') => `${this.x} ${greeting} ${name}!`;
}



greet('Bill');
// Hello Bill!

// Rest args
var greetTeam = function(greeting, ...names) {
  return names.map( name => `${greeting} ${name}!`);
};

var welcomeTeam = greetTeam.bind(null, 'Welcome');

welcomeTeam('Ivana');
// Welcome Ivana!

greetTeam('Welcome', 'Niel', 'Mike', 'Phil');
// [ 'Welcome Niel!',
//   'Welcome Mike!',
//   'Welcome Phil!' ]





// !!!!!!!!!!!!!!    Destructuring    !!!!!!!!!!!!!!!!!!!!!!

var [a, b] = [10, 20];

console.log(b);
// 20

var user = { name: 'Tony', location: 'California', age: 40 };

// ES5
var age = user.age;
var location = user.location;

// ES2015
var { age, location } = user;

// Helpful w/ modules:
var { throttle, debounce } = require('underscore');

// or w/ ES2015 modules
import { throttle, debounce } from 'underscore';


// This can be helpful with functions too!
var getDateRange = function(days = 30) {
  const DAY_MILLISECONDS = 24 * 60 * 60 * 1000;
  var today = new Date().valueOf();
  return [
    today,
    today + days * DAY_MILLISECONDS
  ];
};

var [start, finish] = getDateRange();

console.log(start, finish);
// 1445487454505 1448079454505

// As well is in arguments for passing options to a constructor!
var printLocation = function({ name: x, location: y }) {
  console.log(`${x} is in ${y}`);
};

var user = { name: 'Tony', location: 'California', age: 40 };
printLocation(user);
// Tony is in California



// !!!!!!!!!!!!!!    Modules    !!!!!!!!!!!!!!!!!!!!!!

// Import something!
import _ from 'underscore';
import ProfileAvatar from './views/ProfileAvatar';

// this is the same as
var _ = require('underscore');

// export something!
var getCountryCode = function(country) { /* ... */ };
export default getCountryCode;

// this is the same as
module.exports = getCountryCode;

// Usage:
import getCountryCode from '../utils/getCountryCode';


// Or a set of utilities!
var utils = {};
utils.formatDate = function() //...
utils.formatTime = function() //...

export default utils;

// usage with Destructuring:
import { formatDate } from './utils';





// !!!!!!!!!!!!!!    Classes    !!!!!!!!!!!!!!!!!!!!!!

class MyAwesomeClass {

  constructor(options) {
    this.name = options.name;
  }

  getName() {
    return this.name;
  }

}

var x = new MyAwesomeClass({ name: 'Bill' });



class MyMoreAwesomeClass extends MyAwesomeClass {

  constructor(options) {
    super(options); // call the base class's constructor
    this.location = options.location;
  }

  // ...
}


// w/ React!

var MyComponent = React.createClass({

class MyComponent extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      count: 20
    };

    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState({ count: ++this.state.count });
  }

  render() {
    return (
      <div className="my-component"
           onClick={this.handleClick}>
        {this.state.count}
      </div>
    );
  }

}