ES5 kontra ES6

Arrow Function (fat arrow)

I alla anonyma funktioner kan nyckelordet function

const myFunc = function(){}

const myFunc = () => {}

Vidare har arrow function en implicit return, betyder att vi kan skippa att skriva ut return också om vi direkt returnerar något

const add = function(a,b){
  return a + b;
}

const add = (a,b) => a + b;

Template Literals

Shift + ´: Grav accent

var a = 5;
var b = 10;

console.log(`${a} + ${b} equals ${ a + b }`);
//5 + 10 equals 15

var name = "Gnurufr";
console.log(`I AM ${name.toUpperCase()}!!!!`);

Template literals

Vi slipper oroa oss för att behöva escapea

var text = " \"double quotes\"";

var text = `"double quotes"`;

var text = 'I'm a noob';

var text = `I'm a noob`;

Template literals

const name = "Jesper";
const html = `
  <ul>
    <li>Wowo this is great ${name}</li>
    <li>Awesome</li>
  </ul>`; 

Destructuring

var obj = {
  x: 100,
  y: 100
};

var x = obj.x;
var y = obj.y;

ES6 Destructuring

var obj = {
  x: 100,
  y: 100
}

var { x , y } = obj;

Destructuring

När du vill plocka ut egenskaper eller värden från ett objekt eller array

Tänk på att det är viktigt med positionen i arrayen:

//Jumping over values
var [x,,,,y] = array;

Spread

The spread syntax allows an expression to be expanded in places where multiple arguments/elements or variables are expected.

Rest operator

Ser exakt ut som spread operator

Skillnaden är bara hur ... används

"Gör detta med resten av argumenten"

function restFunction(a, b, ...rest){
  console.log(a,b, rest);
}

Spread/rest

The spread operator (...) looks exactly like the rest operator, but is used inside function calls and Array literals (not inside destructuring patterns).

I JavaScript kan vi skicka med fler eller färre argument än parametrar.

De överiga argumenten kommer bara att struntas i.

function add(a,b,c){
  add a + b + c;
}
add(5,5); //Will work

Default parameters

ES6 gör det även möjligt att skicka med default värden

function add(x = 0, y = 2){
  return x + y;
}

add() //2

add(2) //4

add(2,8) // 10

Livet innan fetch

Två huvudsakliga val

• XMLHttpRequest
• jQuerys $.ajax()

Standard XMLHttpRequest

var request = new XMLHttpRequest();
request.onreadystatechange = function() {
  if (request.readyState === 4) {
    var data = JSON.parse(request.responseText);
    console.log(data);
  }
};

request.open('GET', 'https://fed17.herokuapp.com/todos');
request.send();

Grundutförandet av $.ajax()

$.ajax({
  method: 'GET',
  url: 'http://fed17.herokuapp.com/todos',
  success: (response) => {
    console.log(response);
  },
  error: (error) => {
    console.log(error);
  }
})

Finns även alternativ syntax

$.ajax({
  method: 'GET',
  url: 'http://fed17.herokuapp.com/todos'
})
.done((response) => {
  console.log(response);
})
.fail((error) =>{
  console.log(error);
})

Samt shorthands

$.get(''http://fed17.herokuapp.com/todos'')
  .done((response) => {
    console.log(response);
  })
  .fail((error) => {
    console.log(error);
  })