es6.md

ES6 - 2015

.map()

Similar to forEach(). BUT: it creates a new array with the results of calling a provided function on every element in the calling array. Example:

const [int, dec] = count.toString().split('.').map(el => parseInt(el, 10))
// 1. Will perform parseInt(el, 10) 
// 2. For ALL elements from count.toString().split('.') array
// 3. Will create new array with the above results.

Maps

const question = new Map();
question.set('question', 'What is the official name of the latest major JavaScript version?');
question.set(1, 'ES5');
question.set(2, 'ES6');
question.set(3, 'ES2015');
question.set(4, 'ES7');
question.set('correct', 3);
question.set(true, 'Correct answer :D');
question.set(false, 'Wrong, please try again!');

Features:

//
question.has(4)
question.clear()
question.entries()

// Loops:
question.forEach((value, key) => console.log(`This is ${key}, and it's set to ${value}`));

for (let [key, value] of question.entries()) {
    if (typeof(key) === 'number') {
        console.log(`Answer ${key}: ${value}`);
    }
}

Reduce

function calc(arr) {
    const sum = arr.reduce((prev, cur, index) => prev + cur, 0); // summ all of elements with each other
    return [sum, sum / arr.length];
}

We can destruct it as follows:

const [totalAge, avgAge] = calc(ages);

findIndex

// find index of the element more than 1000
findIndex(el => el >= 1000)

objects simplisity

objIng = {
  count: 1,
  unit: '',
  // ingridient: ingridient
  ingridient
}

Means:

ingridient: ingridient ===  ingridient

clicks

Closest:

elements.shopping.addEventListener('click', e => {
  const id = e.target.closest('.shopping__item').dataset.itemid
})

Matches:

elements.recipe.addEventListener('click', e => {
  if (e.target.matches('.btn-decrease, .btn-decrease *')) {
    // ...
  }
}

arrays (events)

Array.from( document.querySelectorAll('.pagination a') ).forEach(curr => {
    curr.addEventListener('click', (e)=>{
        e.preventDefault();
        console.log(e);

    })
});

throw error (instead try...catch)

const getGlobal = () => {
 if (typeof self !== 'undefined') { return self; }
 if (typeof window !== 'undefined') { return window; }
 if (typeof global !== 'undefined') { return global; }
 throw new Error('unable to locate global object');
};

Object.keys

raw data:

const offerCard = {
    0: {
      price: 190,
      pricePer: `Night`,
      currency: `$`,
      title: `Apartment in 3-star hotel (#6) Long-Stay discount`,
      id: `23423`,
      type: `apartment`,
      rating: 4,
      badge: `Premium`,
      thumbnail: `https://source.unsplash.com/user/hutomoabrianto/260x300`
    },
    1: {
      price: 100,
      pricePer: `Night`,
      currency: `€`,
      title: `Einzelzimmer in München Innenstadt`,
      id: `56234`,
      type: `apartment`,
      rating: 4.5,
      badge: `Premium`,
      thumbnail: `https://source.unsplash.com/user/hutomoabrianto/260x300`
    },
    2: {
      price: 200,
      pricePer: `Night`,
      currency: `€`,
      title: `Cozy room for singles, couples or friends`,
      id: `55234524`,
      type: `house`,
      rating: 3,
      badge: `Premium`,
      thumbnail: `https://source.unsplash.com/user/hutomoabrianto/260x300`
    },
    3: {
      price: 2500,
      pricePer: `Month`,
      currency: `$`,
      title: `Amazing Apartment ✨ Center Munich`,
      id: `4624234`,
      type: `house`,
      rating: 5,
      badge: `LUXURY`,
      thumbnail: `https://source.unsplash.com/user/hutomoabrianto/260x300`
    },
  }

this: {Object.keys(offerCardMockData).map((placeID) => (... will pass each 0, 1, 2 to placeID, to use like this: offerCardMockData[placeID].id offerCardMockData[placeID].currency etc

get some specific data from object

get entire entry from object by one of the key

export const INIT_CITY = `amsterdam`;

// get the only entries where they key `city` === INIT_CITY;
const initCityOffersList = mockData.offerCard.filter((offer) => offer.city === INIT_CITY);

get the only UNIQUE cities from all the object;

// example: const obj = {city: a}, {city: c}, {city: c}, {city: c}

const citiesOfAllOffers = mockData.offerCard.map((offer) => offer.city);
// citiesOfAllOffers = [a, c, c, c]

const citiesAvailable = Array.from(new Set(citiesOfAllOffers));
// citiesAvailable = [a, c]

Sort by Date

ref here

const sortedActivities = activities.slice().sort((a, b) => b.date - a.date)
// .slice() - is used for not modifying the original array. 

find duplicated items in an Array

let numOne = [0, 2, 4, 6, 8, 8];
let numTwo = [1, 2, 3, 4, 5, 6];
let duplicatedValues = [...new Set(numOne)].filter(item => numTwo.includes(item));
console.log(duplicatedValues); // returns [2, 4, 6]

get unique items from the array

const allCitiesAvailable = mockData.offerCard.map((offer) => offer.city.toUpperCase()); // Amsterdam, Amsterdam, Kyiv
const citiesAvailable = Array.from(new Set(allCitiesAvailable)); // Amsterdam, Kyiv

// unique items from the array using Set:
const arr = [0, 0, 4, 4, 2, 4, 6, 8, 8];
const [...new Set(arr)]

// unique items from the array using Filter:
const arr = [0, 0, 4, 4, 2, 4, 6, 8, 8];
arr.filter((item,index) => {
  return arr.indexOf(item) === index
});

// unique items from the array using Reduce:

https://medium.com/dailyjs/how-to-remove-array-duplicates-in-es6-5daa8789641c