these thoughts of mine
I find myself googling the same few things way more often than others. Then, through simple muscle memory, I end up learning that thing. However, every now and then, my muscle memory betrays me. Here's a tribute to all the times I've had to google some of the most basic programming concepts, proving once and for all that our brains are just monkey brains amped up to eleven.
Ternary operators exist in most languages, and in Javscript, they're these two special characters - the question mark ( ? ) and the colon ( : ).
Think of it as shorthand if-else.
function isLegal(age: number){
return age >= 18 ? true : false
}
Now, I know, I know, I could just return age >= 18, but I'm trying to explain ternary operators here. Just like an if-else statement, the condition comes first, then a question mark in front of the truthy statement, then a colon in front of the falsy statement.
In large codebases, this aids with brevity and seriously ups code readability. Just make sure you don't go overboard with ternary operators - or you'll wind up with something like this.
function returnDayString(day: number) {
return day === 0
? "Sunday"
: day === 1
? "Monday"
: day === 2
? "Tuesday"
: day === 3
? "Wednesday"
: day === 5
? "Thursday"
: day === 6
? "Friday"
: "Saturday";
}
In React, there's two kinds of inputs - controlled, meaning the state of the input is controlled by React, and uncontrolled inputs, where the value of the input is handled by the native DOM, and you access the value with useRef.
It's encouraged in the React docs to always opt for controlled components. The code's going to be much cleaner, you'll have the option to mutate the value programmatically, and you'll also be able to debug problems much easier (this is an opinion, don't quote me on this.)
For large forms, it's not really encouraged to try to build a ton of inputs handled by multiple React state objects - instead, there's libraries like Formik exactly for this purpose.
However, if you have, say, maybe an input box to enter your email address for a mailing list, it's kind of overkill to use Formik. Here's an example of how I'd build a controlled input form for this exact purpose.
const EmailBox: React.FC = () => {
const [inputValue, setInputValue] = useState("");
const handleChange = (event:FormEvent<HTMLInputElement>) => {
setInputValue(event.currentTarget.value);
};
return (
<input
type="email"
value={inputValue}
onChange={handleChange}
/>
);
};
Hey, a little bit of alliteration there.
A switch in Javascript is a chain of if-else statements, just like ternary operators. However, this is the exact use case for the ternary hell I wrote earlier.
Here's an example.
function returnDayString(day: number){
let dayString;
switch(day){
case(day === 0):
dayString = "Sunday"
break;
case(day === 1):
dayString = "Monday"
break;
case(day === 2):
dayString = "Tuesday"
break;
case(day === 3):
dayString = "Wednesday"
break;
case(day === 4):
dayString = "Thursday"
break;
case(day === 5):
dayString = "Friday"
break;
case(day === 6):
dayString = "Saturday"
break;
default:
dayString = "Error."
break;
}
}
This is a very over-engineered way of implementing a switch statement, but I think you get the idea.
First off, this is a concept I properly understood very recently, so apologies if there's any mistakes in what I've written. I'm not even sure if I'm using the correct terms in the header.
Let's take a look at two colors, red and purple. Up until I was about 14, I loved the color red - it was in Ketchup (my favorite condiment at the time), I was a glutton for red velvet cakes, and I... played a lot of Mortal Kombat.
However, when I discovered vaporwave and the whole aesthetic around it, I switched up my entire repertoire to more purple-y colors. Hydrangeas, Grape Fanta and purple phone covers - my stuff looked like something straight out of a lavender farm.
Why am I telling you all of this? Well, that I didn't want to bore you to death with all the code stuff is a small part of it, but I also wanted to segue into this example.
Check out this code.
const me = {
name: "zwe",
favoriteColor: "red"
};
const meAtAge20 = me;
meAtAge20.favoriteColor = "purple";
What's wrong with this code?
Let's first see what we're doing here. We create a Javscript object, me, with a favoriteColor key of value red.
We then assign a new object called meAtAge20 to the first object, then mutate the favoriteColor of the second object. Why is this a mistake?
When we did the object assigning, instead of copying me into meAtAge20, what we did was set a pointer for the latter to the former. This means that when I mutate the favoriteColor attribute, both objects get mutated. We DON'T want this.
If you come from other programming languages, you've probably come across this at one point or another. Most languages have their own ways of handling this, but here's a few methods in JS.
const meAtAge20 = {...me}
Here, we destructure the values of the first object, then put it back into another object, which we then assign to the new variable. This is by far the most readable method, and it's called making a deep copy.
const meAtAge20 = JSON.parse(JSON.stringify(me))
Here, we first turn the original object into a string, then parse said string. This is, however, not suitable for more complex data types, as JSON.stringify and JSON.parse cannot handle some non-primitives, such as undefined or a function as a value.
const _ = require("lodash");
const meAtAge20 = _.cloneDeep(me)
The most reliable (albeit most space-intensive) method is using an external library like Lodash. It's not great if you don't want to install external libraries, but this will guarantee a deep clone.
???
Finally, you could also just implement your own deep cloning function. It probably won't work perfectly for all edge cases - it almost definitely is over-engineering, but hey, if you have the time, go for it!
Or you can just do what most people do when they're 4 hours deep with a horrible bug in their custom abomination of 200 lines for a single deep cloning function - and just go into Lodash's source code to see how they did it.
I'll close this out with that. Maybe I'll add more in the future, maybe I'll have a sudden quarter-life crisis and go for a career change. Who knows.