DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

Cover image for Some cool little hacks I've learned.
Aaron Wolf
Aaron Wolf

Posted on • Updated on

Some cool little hacks I've learned.

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>
)
Enter fullscreen mode Exit fullscreen mode

Better: Using and or statement

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

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: ''
}
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

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})
  }
}
Enter fullscreen mode Exit fullscreen mode

Better Way:

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

Top comments (0)

๐ŸŒš Life is too short to browse without dark mode