JS Snippets

composeMixins.js

const pipe = (...fns) => (x) => fns.reduce((acc, f) => f(acc), x);

const res = pipe(
  (i) => Object.assign(i, {'a': 'b'}),
  (i) => Object.assign(i, {'c': 'd'}),
  (i) => Object.assign(i, {'e': 'f'}),
)({});
console.log(res);
// result: { a: 'b', c: 'd', e: 'f' }

const composeMixins = (...fns) => (
  instance = {}, // start with {}
  mixer = pipe
) => pipe(...fns)(instance);

const res2 = composeMixins(
  (i) => Object.assign(i, {'a': 'b'}),
  (i) => Object.assign(i, {'c': 'd'}),
  (i) => Object.assign(i, {'e': 'f'}),
);

console.log(res2());
// result: { a: 'b', c: 'd', e: 'f' }

// ==================================== //

const _pipe = x => (...fns) => fns.reduce((acc, f) => f(acc), x);
// usage
_pipe(x)(f1, f2, f3); // x |> f1 |> f2 |> f3

const _compose = (...fns) => x => fns.reduceRight((acc, f) => f(acc), x);

// usage
const complexFunc = _compose(f1, f2, f3);
complexFunc(x); // f1 . f2 . f3 $ x

contextAndScope.js

// define a higherOrder function
const higherOrder = () => {
  let c = 0;
  // a closure lives within this higherOrder function lexical scope / context
  const closureFunc = () => {
    c ++;
    return c;
  }
  return closureFunc;
};

// here we initialize the entire scope itself
let inc = higherOrder();
// as long as inc lives, c = inc() will be called within this lexical scope,
// we executing closureFunc within the hiderOrder()'s lexical scope
let c = inc(); // results 1
// again, calling closureFunc within higherOrder() scope
// in this snapshot, calling c1 within inc()
let c1 = inc(); // results 2

// say we create another inc
// inc2 will be a separate scope from inc1,
// in this case c will evaluates to 0 again,
// we are initializing another higherOrder scope
let inc2 = higherOrder();
let c3 = inc2(); // results 1 again
let c4 = inc2(); // results 2

debouncedSearch.jsx

class MyComponent extends React.Component {  
  constructor(props) {
    super(props);
    this.state = {
      filter: {
        field: '',
      },
      render: {
        stuffs: initStuffsToRender();
      }
    }
    this._timeout = null;
  }

  handleEdit = field => e => {
    const newValue = e.target.value;

    if ( this._timeout ) { // if there is already a timeout in process cancel it
      clearTimeout( this._timeout );
    }

    this._timeout = setTimeout(() => {
      this._timeout = null;
      this.setState( prevState => {
        prevState.filter[field] = newValue;
        prevState.render.stuffs = heavyFilter();

        return prevState;
      });
    }, 1000 );
  }
  
  render() {
    const stuffs = this.render.stuffs;
    
    return (
      // ... some logic to render stuffs
      <Input onChange={this.handleEdit('field')} />
    );
  }
}

diff_component.jsx

  componentDidUpdate = ( prevProps, prevState ) => {
    console.log( '=== updated' );
    this.props && Object.entries( this.props ).forEach(( [key, val] ) =>
      prevProps[key] !== val &&
      console.log( `Prop '${key}' changed: ${JSON.stringify( prevProps[key] )} -> ${JSON.stringify( val )}` ));

    this.state && Object.entries( this.state ).forEach(( [key, val] ) =>
      prevState[key] !== val &&
      console.log( `State '${key}' changed: ${JSON.stringify( prevState[key] )} -> ${JSON.stringify( val )}` ));
  }

explodeDotNotation.es6

// explode dot-separated string: value into nested object
// as used in lodash _.set

// dotString = 'aa.bb.cc.dd', value = 'test'
const dotObject = (dotString, value) =>
  dotString.split('.').reverse().reduce(
    (acc, cur) => ({ [cur]: acc }),
    value
  );

HoC.jsx

// Enhancer.js
import { transform } from 'magic';

export const Enhancer = WrappedComponent =>
  class EnhancedComponent {
    // ...
    const transformedProps = transform(this.props);
    
    render() {
      return <WrappedComponent ...transformedProps />;
    }
  };

// ============== //

// HigherOrderComponent.js
import { Enhancer } from 'Enhancer.js';

class SomeComponent {
  render() {
    return <div />
  }
}
  
export default Enhancer(SomeComponent);

// ============== //

// decorator python equivalent
function decoratorFunc(wrappedFunc) {
  function wrapper(...args) {
    // stuff
    return wrappedFunc(...args);
  }
  return wrapper;
}

@decoratorFunc
function myFunc(a, b) {
  // stuff
}
// equivalent to
myfunc = decoratorFunc(myFunc);

// == pattern with arbitrary callback

intervalBatchedActions.js

// ...

  performActions = () => {
      const partitions = [];
      const chunk = 10;

      let partitionIndex = 0;

      myArray.forEach(( t, i ) => {
        if ( ! partitions[partitionIndex] ) {
          partitions[partitionIndex] = [];
        }

        partitions[partitionIndex].push( t );
        if (( i + 1 ) % chunk === 0 ) {
          partitionIndex = partitionIndex + 1;
        }
      });

      let batch = 1;

      partitions[0].map( p => p.loading !== true
        ? this.props.mappedDispatch( p )
        : null
      );

      if ( partitions.length > 1 ) {
        const batchSubmit = setInterval( _ => {
          partitions[batch].map( p => p.loading !== true
            ? this.props.mappedDispatch( p )
            : null
          );
          batch ++;
          if ( batch >= partitions.length ) {
            clearInterval( batchSubmit );
          }
        }, 12000 );
      }
  }