ES6

arrow function – => this nie jest przenoszone

ternary operator – ${ condition ? true : false }

template literal, template strings – kod pomiędzy „ pozwala na łamanie lini kodu i zamieszczanie zmiennych jako ${}

 

const aga = 'Aga';
function getHello(name = 'Agnieszka') {
  console.log(`Hello ${name}`); 
} 
getHello(); //Agnieszka 
getHello(aga); //Aga 

stringi zamknięte w ` ` (backticks) pozwalają na łatwiejsze zapisanie,

 

destructuring

wyciąganie zmienny z obiektu lub tablic, zapis do zmiennej za pomocą {}

const newEmployee {
  name: 'Tom',
  job: 'frontend',
  age: '33',
  hobby: {
    pet: 'cat',
    book: 'Sapkowski'
  }
};

const { name, age} = newEmployee;
console.log(`Hello ${name}, how are you?`); //Hello Tom, how are you?
console.log(age); //33

function newJob({name, job, hobby: {book}}) {
  console.log('New man is ${name} and he is a ${job} and he like ${book}.`) //New man is Tom and he is a frontman and he like Sapkowski
}

zagnieżdzony destructuring hobby: {book}
w tym przypadku hooby nie jest możliwe do użycia jako zmienne ${hobby}, stanowi tylko odnniesienie do zmiennej ${book}

destructuring tablic

Przenoszenie wartości pomiedzy plikami

//file myItemList.js
const = myItemList = [
  {
    name: "Name1",
    category: "cat1",
    city: "NYC",
    debt: 44,

  }
  {
    name: "Name2",
    category: "cat2",
    city: "LA",
    debt: 3,
  }
  {
    name: "Name3",
    category: "cat2",
    city: "WRO",  
    debt: 15,
  }  
  {
    name: "Name4",
    category: "cat2",
    city: "WRO",  
    debt: 1,
  } 
];

module.exports = myItemList;

//new file
const myItemList = require('./'myItemList');

filter

zwraca nową tablice spełniającą określony warunek:

const newItemList = myItemList.filter(item => {
  return item.category === 'cat2';
});

const newItemList = myItemList.filter(item => item.category === "cat2");

const newItemList = myItemList.filter(({categoty}) => category === "cat2");

find

zwraca pierwszy element spełniający określony warunek:

const myName = myItemList.finf(item => item.name === "Name1");

map

zwraca nową tablice z wykonanymi operacjami na elementach

const myFriends = myItemList.map(item => {
  return '${item.name} from ${item.city}';
});

const myFriends = myItemList.map({name, city}=> {
  return '${name} from ${city}';
});

reduce

accumulator object – trzyma wynik każdej operacji zwróconej podczas iteracji po tablicy
po wywołaniu funkcji określamy poczatkową wartość accumulator object

const totalDebt = myItemList.reduce((acc, item) => {
  return acc + item.debt
}, 0);

łączenie:
policzenie zadłuzenia dla znajomych z danej miejscowości:

const debtsOfWro = myItemList
  .filter(item => item.city === "WRO")
  .reduce((acc, item) => acc + item.debt, 0);

const debtsOfWro = myItemList
  .filter(({city}) => city === "WRO")
  .reduce((acc, {debt}) => acc + debt, 0);

the Promise object represents the eventual completion (or failure) of an asynchronous operations, and its resulting value.

 

 


const name = "jim holden";
const hero = {
[name]: "hello",
[1+3]: "Hi!"
}

hero {

"jim holden" : "hello",
3: "Hi!"

}

 

kiedy wartość i deklaracja są takie same pomijamy przypisanie:


const a = "Jim Holden";
const b = true;
const c = {};

const obj = {
a, b, c
}

Closures – funkcja ma dostęp do zmiennych rodzica ale do dzieci nie.

 

Currying – proces konwersji funkcji zawierającej wiele argumentów w funkcje biorące po jednym argumencie


const multiply = (a, b) => a*b;
const curriedMultiply = (a) => (b) => a*b;
const multiplyBy5 = curriedMultiply(5);

multiply(3,4); //12
curriedMultiply(3)(4); //12
multiplyBy5(50); //250

Compose – stworzenie jednej funkcji z dwóch osobnych, gdzie output jednej funkcji jest inputem drugiej


const compose = (f,g) => (a) => f(g(a));
const sum = (num) => num + 1;
compose(sum, sum)(5); //7 sum(sum(5));

Agnieszka Trefler

Agnieszka Trefler (Ruda) - freelancer, web developer, specjalistka od WordPressa z Wrocławia. Z pasją budowania stron, blogowania i fotografowania. Twórca Inspiracji fotograficznych.