Intro

This is going to be an ongoing "documentation" of cool little hacks that I've learned. Each entry will consist of what I did originally and what the better version is.

Hack 1: Using and instead of conditional (React)

Context:

While iterating through a list of phone numbers, show <PhoneIcon /> next to only the first phone number.

Original code: Using a ternary operator

{phoneNumbers.map((phoneNumber, i) => (
  <div>
    {i === 0 ? <PhoneIcon /> : ''}
    {phoneNumber}
  </div>
)

Better: Using and or statement

contact.phones?.map((phoneNumber, i) => (
  <div>
    {!i && (<PhoneIcon />)}
    {phoneNumber}
  </div>
)

Explanation:

This works because the truthiness value of 0 is false. So while iterating through the phone numbers, if the index is 0 we can conditionally show the <PhoneIcon /> with !i && (<PhoneIcon />)

Hack 2: Joining an array

Context:

Sometimes there is an object with empty values, and I don't want this object to display if the values are empty. The problem is, empty values can be either null, or empty strings ''.

Example:

{ firstName: null,
  lastName: null,
  phone: '',
  location: null,
  favoriteColor: ''
}

Original code:

const emptyChecker = (obj) => {
  const nulls = Object.values(obj).filter(val => val === null)
  const empties = Object.values(obj).filter(val => val === '')
  // checks length of nulls && empties against length of the whole
  return nulls.concat(empties).length === Object.values(obj).length
}

Iterate through the values of the object and if they're null add them to an array. Do it again, but with empty strings. Concat the 2 arrays and compare the length to the original.

Better:

const emptyChecker = (obj) => {
  const empties = Object.values(obj).filter(val => !val)
    // checks length of nulls && empties against length of the whole
  return empties.length === Object.values(obj).length
}

Explanation:

This works because instead of iterating through the object values twice we convert the values to booleans as they're being iterated over. This works because null has a truthiness value of false as does an empty string ''. Therefore .filter(val => !val) only adds false values to the array and then we can compare the length to to the original.

Hack 3: Dealing with objects conditionally.

Context:

Say you have a function that edits an object. It could be something like an onChange that needs to change the state of your application.

Original code:

I have the following code to update the contact. This is exaggerated code to prove a point.

const [contact, setContact] = {
  name: 'Aaron',
  job: 'developer',
  address: '123 fourth st.'
}

const onChange = key => e => {
  const val = e.target.value
  if (key === 'name') {
    setContact(prevState => ({...prevState, 'name': val})
  } else if (key === 'occupation') {
    setContact(prevState => ({...prevState, 'job': val})
  } else if (key === 'address') {
    setContact(prevState => ({...prevState, 'address': val})
  }
}

Better Way:

const onChange = key => e => {
  const val = e.target.value
  setContact(prevState => ({...prevState, [key]: val})
}