var userAttributes = { id: 1, username: 'andy' };
var updatedUserAttributes = { username: 'Bill', firstName: 'Stephen' };

// old style
var user = {};
Object.keys(userAttributes).forEach(function (key) {
    user[key] = userAttributes[key];
});
Object.keys(updatedUserAttributes).forEach(function (key) {
    user[key] = updatedUserAttributes[key];
});

// new style
var user = { ...userAttributes, ...updatedUserAttributes };
// or
var user = Object.assign(
  {},
  userAttributes,
  updatedUserAttributes
);

// result
user === { id: 1, username: 'Bill', fistName: 'Stephen' };

function mergeUsers(userA, userB) {
  return { ...userA, ...userB };
}

var usersToMerge = [
  { firstName: 'Bill', lastName: 'Jobs' },
  { firstName: 'William' }
];

// old style
mergeUsers(usersToMerge[0], usersToMerge[1]);
// or
mergeUsers.apply(this, usersToMerge);

// new style
mergeUsers(...usersToMerge);

var userToMergeTo = { id: 1, username: 'Bill' };
var otherUser1 = { id: 2, firstName: 'William' };
var otherUser2 = { id: 4, lastName: 'Jobs' };

var result = mergeUsers(userToMergeTo, otherUser1, otherUser2);

// result should preserve the id of the userToMergeTo
result === { id: 1, username: 'Bill', firstName: 'William', lastName: 'Jobs' }

// Old style
function mergeUsers(userToMergeTo) {
  var otherUsers = Array.prototype.slice.call(arguments, 1);

  otherUsers.forEach(function (user) {
    Object.keys(user).forEach(function (key) {
      if (key !== 'id') userToMergeTo[key] = user[key];
    });
  });

  return userToMergeTo;
}

// new style (similar to python's *kwargs or ruby's splat (*))
function mergeUsers(userToMergeTo, ...otherUsers) {
  otherUsers.forEach(function (user) {
    Object.keys(user).forEach(function (key) {
      if (key !== 'id') userToMergeTo[key] = user[key];
    });
  });

  return userToMergeTo;
}

var usersToMerge = [
  { firstName: 'Bill', lastName: 'Jobs' },
  { firstName: 'William' }
];
mergeUsers(usersToMerge);

// Old style
function mergeUsers(usersArray) {
  var userA = usersArray[0];
  var userB = usersArray[1];
  return {
    ...userA,
    ...userB
  };
}

// New style
function mergeUsers([userA, userB]) {
  return {
    ...userA,
    ...userB
  };
}

• Well... it depends!
• by default it is likely window or global
• using strict mode there is no default binding, it is undefined
• in an object it is the object itself
• in DOM event listeners it will be the event.target node
• usually though, this is related to whatever called the function asking for this

this.numbers = [...Array(50).keys()];
this.multiplesOfFive = [];

this.numbers.forEach(function (number) {
  if (isMultiplesOfFive(number)) {
    // "this" here could be undefined or
    // it could be something else depending
    // on how this function is called
    this.multiplesOfFive.push(number);
  }
});

// Old style function
function doSomething (someId, onSuccess, onFailure, onFinally) {
  try {
    var data = getSomeData(someId);
    onSuccess(data);
  } catch (error) {
    onFailure(error);
  } finally {
    onFinally();
  }
}

doSomething(1, console.log, console.error, function () {
  // this always happens!
});

// new Promise style
function doSomething (someId) {
  return new Promise((resolve, reject) => {
    try {
      var data = getSomeData(someId);
      resolve(data);
    } catch (error) {
      reject(error);
    }
  })
}

doSomething(1)
  .then(data => {
    var modifiedData = doSomethingWithData(data);
    return data;
  })
  .then(console.log)
  .catch(console.error)
  .finally(() => {
    // This always happens!
  })

function runAll(functions, onSuccess, onError) {
  var results = [];
  var overallError;

  functions.forEach(function (func, index) {
    function handleFuncSuccess(data) {
      results[index] = data;
    }

    function handleFuncError(error) {
      overallError = error;
      break;
    }

    func(handleFuncSuccess, handleFuncError);
  });

  if (overallError) {
    onError(overallError);
  } else {
    onSuccess(results);
  }
}

function func1(onSuccess) { onSuccess('great success!') }
function func2(onSuccess) { onSuccess('yes, very nice') }
runAll([func1, func2], function (data) {
  data === [
    'great success!',
    'yes, very nice'
  ]
});

function func1(onSuccess) { onSuccess('great success!') }
function func2(onSuccess, onFailure) { onFailure('fail') }
runAll([func1, func2], null, function (error) {
  error === 'fail';
});

Promise.all([
  Promise.resolve('great success!'),
  Promise.resolve('yes, very nice')
]).then(data => {
  // data === [
  //   'great success!',
  //   'yes, very nice'
  // ]
})

Promise.all([
  Promise.resolve('great success!'),
  Promise.reject('fail')
]).catch(error => {
  // error === 'fail'
})

function fetchDataFromApi () {
  return new Promise((resolve, reject) => {
    try {
      var data = getData();
      resolve(data);
    } catch (error) {
      reject(error);
    }
  });
}

// Trigger the data request then carry on doing other stuff
fetchDataFromApi().then(data => {
  // do something with the data
  // when it eventually completes
})

// continue working on other stuff

async function fetchDataFromApi () {
  var promise = new Promise((resolve, reject) => {
    try {
      var data = getData();
      resolve(data)
    } catch (error) {
      reject(error)
    }
  });

  return await promise;
}

// function will wait for promis to be resolved
// and assign the result before continuing
let data = fetchDataFromApi();

// continue working on other stuff

// old style
function Shape (x, y) {
    this.x = x;
    this.y = y;
}

Shape.prototype.move = function (x, y) {
    this.x = x;
    this.y = y;
};

var shape = new Shape(x, y);
shape.move(newX, newY);

// new style
class Shape {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  move(x, y) {
    this.x = x;
    this.y = y;
  }
}

var shape = new Shape(x, y);
shape.move(newX, newY);

// old style
function Shape (sides) {
  this.sides = sides;
}

function Triangle () {
  Shape.call(this, 3);
}

Triangle.prototype = Object.create(
  Shape.prototype
);

// new style
class Shape {
  constructor(sides) {
    this.sides = sides;
  }
}

class Triangle extends Shape {
  constructor() {
    super(3);
  }
}

// old style
function Shape (sides) {
  this.sides = sides
}

Shape.prototype.toString = function () {
  return "I have " + this.sides + " sides";
};

function Triangle () {
  Shape.call(this, 3);
}
Triangle.prototype = Object.create(Shape.prototype);

Triangle.prototype.toString = function () {
  return "As a Triangle " + Shape.prototype.toString.call(this);
}

var shape = new Shape(4);
shape.toString() === "I have 4 sides"

var triangle = new Triangle();
triangle.toString() === "As a Triangle I have 3 sides"

// new style
class Shape {
  constructor (sides) {
    this.sides = sides;
  }

  toString () {
    return "I have " + this.sides + " sides";
  }
}

class Triangle extends Shape {
  constructor () {
    super(3)
  }

  toString () {
    return "As a Triangle " + super.toString();
  }
}

var shape = new Shape(4);
shape.toString() === "I have 4 sides"

var triangle = new Triangle();
triangle.toString() === "As a Triangle I have 3 sides"

// old style
function Shape (sides) {
  this.sides = sides;
}

Shape.defaultShape = function () {
  return new Shape(3);
}

var shape = Shape.defaultShape();
shape.sides === 3;
typeof shape === "object";
shape.__proto__.constructor.name === "Shape";

// new style
class Shape {
  constructor (sides) {
    this.sides = sides;
  }

  static defaultShape () {
    return new Shape(0);
  }
}

var shape = Shape.defaultShape();
shape.sides === 3;
typeof shape === "object";
shape.__proto__.constructor.name === "Shape";

// old style
function Shape (sides) {
  this._sides = sides;
}

Shape.prototype = {
    set sides (sides) {
      this._sides = sides;
    },

    get sides () {
      return this._sides;
    }
};

var shape = new Shape(0);
shape.sides = 2
shape.sides === 2

// new style
class Shape {
  constructor(sides) {
    this._sides = sides;
  }

  set sides (sides) {
    this._sides = sides;
  }

  get sides () {
    return this._sides;
  }
}

var shape = new Shape(0);
shape.sides = 2
shape.sides === 2