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}) }