JS Quick Tips

_JS Quick Tips.md

JS Quick Tips

This is a collection of quick and helpful JS tips or code snippets that might be useful in various circumstances.

assertRequired.js

function assertRequired(params) {
  Object.keys(params).forEach((key) => {
    if (params[key] === undefined) {
      throw new Error(`${key} is required`);
    }
  });
};

function someFunction({ requiredArg, optionalArg }) {
  assertRequired({ requiredArg });
  return 'ok';
}

someFunction({}); // Error: requiredArg is required
someFunction({ requiredArg: 1 }); // ok

asyncDefaults.js

async function buildUser(user = {}) {
  return db.User.create(user);
}

async function buildRole({ user, ...role } = {}) {
  return db.Role.create({
    userId: (user || await buildUser()).id,
    ...role,
  });
}

const user = await buildUser({ name: 'Test' });
await buildRole({ user }); // use custom value

await buildRole(); // use the async default

checkForFeature.js

// Prefer explicit checks for features over hardcoded environment dependencies
// explicit checks make it easier to compose and change feature sets on the fly
// i.e. if you want to add new QA environments, unit tests or even disable something quickly

// avoid
if (process.env.NODE_ENV === 'production') { // hardcoded
  sendEmails();
}

// do
if (process.env.ENABLE_SENDING_EMAILS) { // explicit
  sendEmails(); 
}

guardClause.js

async function sendEmail(templateName, data) {
  if (process.env.SHOULD_SEND_EMAIL) {
    const renderedEmail = await templates.render(templateName, {
      renderedAt: new Date(),
      ...data,
    });
    
    // more code?
    
    await emails.send(renderedEmail);
  }
}

// with guard clause:

async function sendEmail(templateName, data) {
  if (!process.env.SHOULD_SEND_EMAIL) {
    return;
  }
  
  const renderedEmail = await templates.render(templateName, {
    renderedAt: new Date(),
    ...data,
  });

  // more code?
  
  await emails.send(renderedEmail);
}

ifsToObject.js

function symbolFor(currency) {
  if (currency === 'EUR') {
    return '€';
  } else if (currency === 'USD') {
    return '$';
  } else {
    return currency;
  }
}

// vs

const symbolForCurrency = { // data over logic, so easier to add more and simpler to understand
  EUR: '€',
  USD: '$',
}

const symbolFor = currency => symbolForCurrency[currency] || currency;

jestCleanup.js

it('should work', () => {
  expect(onPress).toBeCalledWith(expect.objectContaining({
    x: expect.any(Number),
    y: expect.any(Number),
  }));
});

// vs

const { objectContaining, any } = expect;

it('should work', () => {
  expect(onPress).toBeCalledWith(objectContaining({
    x: any(Number),
    y: any(Number),
  }));
});

reactComponent.jsx

// Since often have to switch between React.Component and a functional one or introduce React.Fragment temporarily
// Importing React only helps avoid extra diff lines

import React, { Fragment } from 'react';

const Header = () => (
  <Fragment>
    Hello World
  </Fragment>
);

import React from 'react';

const Header = () => (
  <div>
    Hello World
  </div>
);

// vs

import React from 'react';

const Header = () => (
  <React.Fragment>
    Hello World
  </React.Fragment>
);

import React from 'react';

const Header = () => (
  <div>
    Hello World
  </div>
);