JavaScript - Tips


(how to) merge objects

(how to) pass class prototype methods as arguments

  1. https://stackoverflow.com/questions/35814872/es6-class-pass-function-as-parameter
  2. https://stackoverflow.com/questions/35446486/binding-a-function-passed-to-a-component

if it’s necessary to keep current context (say, class method uses instance properties of current class) there are 2 options:

(how to) print form data (multipart/form-data)

console.log('formData: ' + JSON.stringify(formData));

(how to) post form data (application/x-www-form-urlencoded)

  1. https://github.com/facebook/react-native/issues/3349
  2. https://stackoverflow.com/a/32445457/3632318
const jsonToFormData = (json) => {
  return Object.entries(json)
    .map(entry => {
      const [key, value] = entry;
      const encodedKey = encodeURIComponent(key);
      const encodedValue = encodeURIComponent(value);

      return `${encodedKey}=${encodedValue}`;
    }, [])
    .join('&');
}

const response = fetch(url, {
  method: 'POST',
  headers: {'Content-Type': 'application/x-www-form-urlencoded'},
  body: jsonToFormData(json)
})

[ES6] (how to) get subset of object properties

  1. https://stackoverflow.com/questions/17781472
const object = {a: 5, b: 6, c: 7};
const picked = (({a, c}) => ({a, c}))(object);

console.log(picked); // {a: 5, c: 7}

or else remove unnecessary properties (see the next tip).

[ES6] (how to) remove object property

  1. https://stackoverflow.com/a/33053362/3632318

to remove static property:

const object = {a: 5, b: 6, c: 7};
const {b, ...rest} = object;

console.log(rest); // {a: 5, c: 7}

to remove calculated property (say, ID):

const object = {1: 'foo', 2: 'bar', 3: 'baz'};
const id = 2;
const {[id]: _value, ...rest} = object;

console.log(rest); // {1: "foo", 3: "baz"}

[ES6] (how to) create empty array of N elements

  1. https://stackoverflow.com/a/41246860/3632318
[...Array(100)]

(how to) create array with the same element repeated multiple times

  1. https://stackoverflow.com/a/34104348/3632318
> Array(7).fill(false)
< [false, false, false, false, false, false, false]

[ES6] (how to) conditionally add property to object

  1. https://stackoverflow.com/a/40560953/3632318
const foo = 1;
const bar = {
  ...!!foo ? {foo} : null,
  baz: 2,
};

NOTE: don’t use ...!!foo && {foo} because RN JS server might complain about some performance optimizations if something else but false or undefined is expanded inside object.

[ES6] (how to) remove duplicate values from array

  1. https://stackoverflow.com/a/41364433/3632318
Array.from(new Set([1, 2, 3, 2, 2, 3, 1]))
// => [1, 2, 3]

// or
[...new Set([1, 2, 3, 2, 2, 3, 1])]
// => [1, 2, 3]

NOTE:

(how to) flatten array

const array = [1, [2, 3], 4];
[].concat(...array);
// => [1, 2, 3, 4]

(how to) wrap a long template literal to multiline

  1. https://stackoverflow.com/a/45153504/3632318
<Checkbox
  checkedHint={
    `foo${gc.NBSP}bar ` +
    `baz${gc.NBSP}qux`
  }
/>

using line continuation at the point of newline in the literal preserves all spaces at the beginning of the next line:

const variable =
  `foo${gc.NBSP}bar \
   baz${gc.NBSP}qux`; // leading spaces are preserved

[ES6] (how to) export and import

  1. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export
  2. https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/import