Typescript tips: ‘code this not that’ to have a clean and maintainable code
Here are some pro typescript/JavaScript tips that will help you in writing everyday code. Lets start!
1-Loops:
Certainly loops are everywhere when you are developing, from calculating and iterating through arrays to filtering and extracting values. that’s why you need to have a hold of some functions that will save a lot of time example: map(), reduce(), filter().
— What is map() ?
→ create a new array[] based on the first array
→ by calling a function on each element of the array
→ we have a new modified array.
Example:
Imagine we have an array of squares, using map() we will create a new array of circles, each element will be converted to a circle.
In a classic case we use a for-loop where we iterate through an existing array and we push every element with computed logic to a new array. But with map() we can do the the whole process only in one-line.
lets say we have an array of orders and we want to calculate the tax of each order. Here are 2 methods on how we implement that, one with a for-loop (bad code) and the other with map() (good code)
Instead of using a classic for-loop we reduce code to one line, performance is ⬆ and clean code ⬆ you can find this example in my repository
— What is reduce() ?
→ start with an array of items
→ iterate over them and compute to have in the end a single value
Example:
imagine we have an array of orders, we want the total of all orders. In a classic use case we use a loop iterate through the array and add to the total the value of each element.
instead of using a for-loop we can simply use one line of code
where acc is the last value of the reducer function
(in our example is an add function since we are calculating a total)
and cur is the current value to compute.
— What is filter() ?
→ start with an array of items
→ create a new array where its all elements pass the test implemented by the provided function.
All code is available from this repository 😺
2- Spread-Syntax:
In Typescript, you can use spread operator to expand and assign element to arrays and objects.
Example:
lets say we have an array of fruits and we want to add some fruits to it, we probably we will push every item using the push() function.
Another option is to use spread SYNTAX
this way keeps your code readable and easier to maintain 🛠️
3- Set Function
Set objects are collections of values, it lets you store unique values of any type.
A value in the Set may only occur once; it is unique in the Set’s collection.
Example:
has() function checks if an element exists in the set or not
return true if it exists , false if not.
=> this comes handy if you want to create array of unique values.
Hopefully this is helpful 😀 and happy coding to you 💻! if you have any cool stuff let me know in the comments.
If you have found this post useful make sure to leave some claps and don’t hesitate to follow me.👋👋👋
here is the link of the repo:
