Did you know? (JS & React Edition)

A good developer constanly learns new things on a daily basis ;)
Here are a few things I discovered last week & I wanted to share them with you!

🧪 Conditional rendering with Booleans in React

Booleans are used to control rendered elements with the && operator.
The intention here is to display nothing if count is 0, but in reality, the content of Hi is 0.

const count = 0;
const Hi = () => count && <h1>Its me, hi! I am the problem its me 🎵</h1>;

That because, in JavaScript, this is how the && works:

• It will return the first falsy operand it encountered

Or

• It will return the value of last operand if they are ALL true

// please forgive my variable naming haha!
const falsy = 0;
const truthy = 1;
const truthyAgain = 1;
const truthyYetAgain= "Lara";

console.log(falsy && truthy;) // 0
console.log(truthyAgain && truthyYetAgain); // Lara

There are four solutions, they all entail a conversion of your expression to a Boolean value:
1. You can be more specific with your expression

count > 0 && <h1>Its me, hi! I am the problem its me 🎵</h1>

2. You can cast count to a Boolean value with the Boolean constructor

Boolean(count) && <h1>Its me, hi! I am the problem its me 🎵</h1>

3. You can also use the !!operator to cast count to a Boolean value

!!count && <h1>Its me, hi! I am the problem its me 🎵</h1>

4. You can use a ternary expression instead

count ? <h1>Its me, hi! I am the problem its me 🎵</h1> : <></>

🧪 Undefined vs Null

Main Difference

• undefined is a value of a variable that has been declared but hasn’t been initialized

let b; 
console.log(b) // undefined

let c = [];
console.log(c[0]) // undefined

let d = undefined 
console.log(d); // undefined

• null is a value of a variable has been explicitly set to be empty
• In other words: null is explicitly set to be empty, and undefined is empty as it hasn't been set yet

Why is the following true?

// triple equals
null === undefined // false

// double equals
undefined == null // true

• null and undefined are not the same type.
  Hence triple equals which checks the type and the content will return false

console.log(typeof null) // object
console.log(typeof undefined) // undefined

• when using double equals (loose equality), we are only focusing on the content
  Note: we are technically also checking the type, but with loose equality we perform type coercion which means we compare both values after converting them into a common type.
  In this case, both null and undefined are falsy

Another difference between null and undefined

• Lets say we have a method defined that accepts one optional parameter
• When no parameter is passed to that method , its input considered to be undefined
• Only undefined parameters will be overridden by the default value (if there is one), whereas null parameters will remain null

const sing = (song = "Anti Hero - Taylor Swift" ) => {
 console.log(song);
}

// defined value
const song = "As It Was - Harry Styles"
sing(song); // "As It Was - Harry Styles"

// undefined value
sing(); // "Anti Hero - Taylor Swift"

// null value
sing(null); // null 

🧪 Enum and initial values

• Enum is a data type that has a set of named constants

enum OneDirection{
  Harry = 1,
  Niall, // 2
  Liam, // 3
  Louis, // 4
  Zayn // 5
}

• The cool thing here, we initialized Harry to start with index 1. All of the other elements will auto increment from that point on
• Without the initializer for Harry, we would have started at the default index, being 0
• With that been said, if we initialize Liam with 4, the next element will be auto incremented from the previous index. Hence Louis will be 5 and so on

enum OneDirection{
  Harry, // 0
  Niall, // 1
  Liam = 4, // 4 
  Louis, // 5 
  Zayn // 6
}

That’s it dear reader!

P.S
I still think JS is (“b” + “a” + +”a” +”a” +”s”).toLowerCase() (bananas) 🍌
-Lara