[🛠 JavaScript - Snippets] Snippets, Gists and Workflows about general JavaScript functionality #dev

chain-immutable.js

import { List } from 'immutable';

const pets = List(['cat', 'dog']);

const finalPets = pets.push('goldfish').push('tortoise');

console.log(pets.toJS()); // prints ['cat', 'dog'];

console.log(finalPets.toJS()); // prints ['cat', 'dog', 'goldfish', 'tortoise'];

convert-from-immutable.js

import { Map } from 'immutable';

const immutablePerson = Map({ name: 'Will' });

const person = immutablePerson.toJS();

console.log(person); // prints { name: 'Will' };

convert-to-immutable.js

import { Map, List, fromJS } from 'immutable';

// Normal Javascript
const person = {
  name: 'Will',
  pets: ['cat', 'dog']
};

// To create the equivalent in Immutable:
const immutablePerson = Map({
  name: 'Will',
  pets: List(['cat', 'dog'])
});

// Or ...
const immutablePerson = fromJS(person);

fetch-GET-with-headers.js

// Custom Header
const request = new Request('./file.json', { 
  headers: new Headers({ 'Content-Type': 'application/json' }) 
});

fetch(request);

fetch-POST-with-headers.js

const options = { 
  method: 'post', 
  headers: { 
    "Content-type": "application/x-www-form-urlencoded; charset=UTF-8" }, 
    body: 'foo=bar&test=1' 
} 

fetch(url, options) 
  .catch((err) => { 
    console.error('Request failed', err) 
  })

filter.js

const fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];

/**
 * Array filters items based on search criteria (query)
 */
const filterItems = (query) => {
  return fruits.filter((el) =>
    el.toLowerCase().indexOf(query.toLowerCase()) > -1
  );
}

console.log(filterItems('ap')); // ['apple', 'grapes']

get-nested-value-from-object.js

import { fromJS } from 'immutable';

const data = fromJS({ my: { nested: { name: 'Will' } } });

const goodName = data.getIn(['my', 'nested', 'name']);

console.log(goodName); // prints Will

const badName = data.getIn(['my', 'lovely', 'name']);

console.log(badName); // prints undefined - no error thrown

immutable-data.js

import { fromJS } from 'immutable';

const data = fromJS({ name: 'Will' });

const newNameData = data.set('name', 'Susie');

console.log(data.get('name')); // prints 'Will'

console.log(newNameData.get('name')); // prints 'Susie'

map.js

var kvArray = [{key: 1, value: 10}, 
               {key: 2, value: 20}, 
               {key: 3, value: 30}];

var reformattedArray = kvArray.map(obj =>{ 
   var rObj = {};
   rObj[obj.key] = obj.value;
   return rObj;
})

reduce.js

// friends - an array of objects 
// where object field "books" - list of favorite books 
var friends = [{
  name: 'Anna',
  books: ['Bible', 'Harry Potter'],
  age: 21
}, {
  name: 'Bob',
  books: ['War and peace', 'Romeo and Juliet'],
  age: 26
}, {
  name: 'Alice',
  books: ['The Lord of the Rings', 'The Shining'],
  age: 18
}];

// allbooks - list which will contain all friends' books +  
// additional list contained in initialValue
var allbooks = friends.reduce(function(accumulator, currentValue) {
  return [...accumulator, ...currentValue.books];
}, ['Alphabet']);

// allbooks = [
//   'Alphabet', 'Bible', 'Harry Potter', 'War and peace', 
//   'Romeo and Juliet', 'The Lord of the Rings',
//   'The Shining'
// ]

SNIPPETS-JAVASCRIPT.md

Snippets - JavaScript