Cacher is the code snippet organizer for pro developers

/* By David Walsh on April 16, 2019   14
Just like every other programming language, JavaScript has dozens of tricks to accomplish both easy and difficult tasks. Some tricks are widely known while others are enough to blow your mind. Let's have a look at seven JavaScript tricks you can start using today!


Get Unique Values of an Array
Getting an array of unique values is probably easier than you think: */

var j = [...new Set([1, 2, 3, 3])]
>> [1, 2, 3]

/* I love the mixture of rest expression and Set!

Array and Boolean
Ever need to filter falsy values (0, undefined, null, false, etc.) out of an array? You may not have known this trick: */

myArray
    .map(item => {
        // ...
    })
    // Get rid of bad values
    .filter(Boolean);

/** Just pass Boolean and all those falsy value go away!

Create Empty Objects
Sure you can create an object that seems empty with {}, but that object still has a __proto__ and the usual hasOwnProperty and other object methods. There is a way, however, to create a pure "dictionary" object: */

let dict = Object.create(null);

// dict.__proto__ === "undefined"
// No object properties exist until you add them


/** There are absolutely no keys or methods on that object that you don't put there!

Merge Objects
The need to merge multiple objects in JavaScript has been around forever, especially as we started creating classes and widgets with options: */

const person = { name: 'David Walsh', gender: 'Male' };
const tools = { computer: 'Mac', editor: 'Atom' };
const attributes = { handsomeness: 'Extreme', hair: 'Brown', eyes: 'Blue' };

const summary = {...person, ...tools, ...attributes};
/*
Object {
  "computer": "Mac",
  "editor": "Atom",
  "eyes": "Blue",
  "gender": "Male",
  "hair": "Brown",
  "handsomeness": "Extreme",
  "name": "David Walsh",
}
*/


/** Those three dots made the task so much easier!

Require Function Parameters
Being able to set default values for function arguments was an awesome addition to JavaScript, but check out this trick for requiring values be passed for a given argument: */

const isRequired = () => { throw new Error('param is required'); };

const hello = (name = isRequired()) => { console.log(`hello ${name}`) };

// This will throw an error because no name is provided
hello();

// This will also throw an error
hello(undefined);

// These are good!
hello(null);
hello('David');

/** That's some next level validation and JavaScript usage!

Destructuring Aliases
Destructuring is a very welcomed addition to JavaScript but sometimes we'd prefer to refer to those properties by another name, so we can take advantage of aliases: */

const obj = { x: 1 };

// Grabs obj.x as { x }
const { x } = obj;

// Grabs obj.x as { otherName }
const { x: otherName } = obj;

/** Useful for avoiding naming conflicts with existing variables!

Get Query String Parameters
For years we wrote gross regular expressions to get query string values but those days are gone -- enter the amazing URLSearchParams API: */

// Assuming "?post=1234&action=edit"

var urlParams = new URLSearchParams(window.location.search);

console.log(urlParams.has('post')); // true
console.log(urlParams.get('action')); // "edit"
console.log(urlParams.getAll('action')); // ["edit"]
console.log(urlParams.toString()); // "?post=1234&action=edit"
console.log(urlParams.append('active', '1')); // "?post=1234&action=edit&active=1"


/** Much easier than we used to fight with!

JavaScript has changed so much over the years but my favorite part of JavaScript these days is the velocity in language improvements we're seeing. Despite the changing dynamic of JavaScript, we still need to employ a few decent tricks; keep these tricks in your toolbox for when you need them!

*/

/**
 * Pass in an element and its CSS Custom Property that you want the value of.
 * Optionally, you can determine what datatype you get back.
 *
 * @param {String} propKey
 * @param {HTMLELement} element=document.documentElement
 * @param {String} castAs='string'
 * @returns {*}
 */
const getCSSCustomProp = (propKey, element = document.documentElement, castAs = 'string') => {
  let response = getComputedStyle(element).getPropertyValue(propKey);

  // Tidy up the string if there's something to work with
  if (response.length) {
    response = response.replace(/\"/g, '').trim();
  }

  // Convert the response into a whatever type we wanted
  switch (castAs) {
    case 'number':
    case 'int':
      return parseInt(response, 10);
    case 'float':
      return parseFloat(response, 10);
    case 'boolean':
    case 'bool':
      return response === 'true' || response === '1';
  }

  // Return the string response by default
  return response;
};

// https://andy-bell.design/wrote/get-css-custom-property-value-with-javascript/

/**
 * Symbol()
 * 
 * One possible reason to use a symbol if you want to 
 * capture a unique identifier and associate that 
 * with an object, make it a symbol and you'll never 
 * get into naming conflicts.
 */

const test = Symbol()
const test2 = Symbol()

const obj = {
    der: "derValue",
    test: "derValue",
    test2: "derValue"
}
obj[test] = "symDerValue"
obj[test2] = "symDerValue2"

console.dir(obj.test2 + " " + obj[test2])

//Output: 'derValue symDerValue2'