Untitled

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="ES6 Spread and Rest">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

<script id="jsbin-javascript">
// Arrow functions

// normal function:

//function myFunc() {
//}

// equivalent arrow function

//const myFunc = () => {
//}

'use strict';

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

function printMyName(name) {
  console.log(name);
}

printMyName('Simon');

var printMyNameArrow = function printMyNameArrow(name) {
  console.log(name);
};

printMyNameArrow('Arrow function');

//if only one argument

var printMyNameArrow1 = function printMyNameArrow1(name) {
  console.log(name);
};

printMyNameArrow1('shorthand Arrow function with only one argument');

// more than one argument

var printMyNameArrow2 = function printMyNameArrow2(name, age) {
  console.log(name, age);
};

printMyNameArrow2('Simon', 21);

//if we want to just return something

var multiply = function multiply(number) {
  return number * 2;
};

console.log('multiply: ' + multiply(2));

//shorthand

var multiplyShort = function multiplyShort(number) {
  return number * 2;
};

console.log('multiplyShort: ' + multiplyShort(2));

//Spread

var numbers = [1, 2, 3];

//add additional element to numbers array

var newNumbers = [].concat(numbers, [4]);

console.log(newNumbers);

// [1, 2, 3, 4]

var person = {
  name: 'Max'
};

// add a new property to the person object
var newPerson = _extends({}, person, {
  age: 28
});

console.log(newPerson);

//[object Object] {
// age: 28,
// name: "Max"
//}

//Rest

var filter = function filter() {
  for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
    args[_key] = arguments[_key];
  }

  return args.filter(function (el) {
    return el === 2;
  });
};
// === checks for type and value so must be a number and 2
// filter expects true or false
//

// creates an array from 'args'

console.log(filter(1, 2, 3));

// filter function in standard Js with no arrow function

var filterStandardJs = function filterStandardJs() {
  for (var _len2 = arguments.length, args = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
    args[_key2] = arguments[_key2];
  }

  return args.filter(function el() {
    return el;
  });
};

console.log("filterStandardJs: " + filterStandardJs(1, 2, 3));

// applys a method to args to filter the required element from the array

//Destructuring

// array destructuring
num1 = numbers[0];
num2 = numbers[1];

console.log(num1, num2);

//pulls num1 and num2 out of 'numbers' array defined at top but not num3
</script>


<script id="jsbin-source-javascript" type="text/javascript">
// Arrow functions


// normal function:

//function myFunc() {
//}

// equivalent arrow function

//const myFunc = () => {
//}

function printMyName(name){
  console.log(name);
}

printMyName('Simon');


const printMyNameArrow = (name) => {
  console.log(name);
}

printMyNameArrow('Arrow function')


//if only one argument

const printMyNameArrow1 = name => {
  console.log(name);
}

printMyNameArrow1('shorthand Arrow function with only one argument')


// more than one argument

const printMyNameArrow2 = (name, age) => {
  console.log(name, age);
}

printMyNameArrow2('Simon', 21)

//if we want to just return something

const multiply = (number) => {
  return number * 2;
}

console.log('multiply: ' + multiply(2));


//shorthand

const multiplyShort = number => number *2;


console.log('multiplyShort: ' + multiplyShort(2));


//Spread

const numbers = [1,2,3];

//add additional element to numbers array

const newNumbers = [...numbers, 4]

console.log(newNumbers);

// [1, 2, 3, 4]


const person = {
  name: 'Max'
};


// add a new property to the person object
const newPerson = {
  ...person,
  age: 28
}

console.log(newPerson);

//[object Object] {
// age: 28,
// name: "Max"
//}


//Rest

const filter = (...args) => {
  return args.filter(el => el === 2);
}
// === checks for type and value so must be a number and 2
// filter expects true or false
//

// creates an array from 'args'

console.log(filter(1,2,3));


// filter function in standard Js with no arrow function

const filterStandardJs = (...args) => {
  return args.filter(function el(){
    return el;
  });
}

console.log("filterStandardJs: " + filterStandardJs(1,2,3));


// applys a method to args to filter the required element from the array


//Destructuring

// array destructuring
[num1, num2] = numbers;

console.log(num1, num2)

//pulls num1 and num2 out of 'numbers' array defined at top but not num3


</script></body>
</html>