Some cool little hacks I've learned.
Tags: javascript, react, beginners, tutorial
Published: 2022-02-10 11:20:23

#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
```Javascript
{phoneNumbers.map((phoneNumber, i) => (
  <div>
    {i === 0 ? <PhoneIcon /> : ''}
    {phoneNumber}
  </div>
)
```

####Better: Using and or statement
```Javascript
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:
```javascript
{ firstName: null,
  lastName: null,
  phone: '',
  location: null,
  favoriteColor: ''
}
```

####Original code:
```javascript
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: 
```javascript
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. 

```javascript
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:
```javascript
const onChange = key => e => {
  const val = e.target.value
  setContact(prevState => ({...prevState, [key]: val})
}
```