JavaScript is everywhere these days. You can do almost everything with just JavaScript (Web development, Mobile, Desktop, and so on). In addition to that, it’s very friendly and powerful at the same time.
The ecosystem of JavaScript is vast. There are many libraries and frameworks that you can use to save time and speed up your development. However, if you have time, it’s always better to do things on your own instead of just using libraries.
JavaScript has many features and techniques that you can use to easily achieve your coding tasks. So in this article, we will go through some simple JavaScript coding techniques that you can use as a developer. Let’s get started.
1. Get the last element of an array
Many times when you’re coding in JavaScript, you will have to get the last element of an array. To do that, you just need to use the length the property when accessing the element.
Example:
let numbersArray = [2, 6, 9, 80, 90];
numbersArray[numbersArray.length - 1]; //return 90As the index of an array starts from 0, we can use the array length minus 1 as an index to get that last element.
2. Random number in a specific range
We use the method Math.random() to return a random number between 0 and 1.
In some cases, you will need to get a random number within a specific range. For example random numbers between 0 and 100 and so on.
Example:
// Random numbers between 0 and 4.
Math.floor(Math.random() * 5);// Random numbers between 0 and 49.
Math.floor(Math.random() * 50);// Random numbers between 0 and 309.
Math.floor(Math.random() * 310);3. Flattening multidimensional array
You can easily flatten a multi-dimensional array using the method flat() which was released in ES2017. The method flat() takes one single argument that defines how deep we want to flatten an array (level of flattening).
Example:
let multiArr = [5, [1, 2], [4, 8]];
multiArr.flat(); //returns [5, 1, 2, 4, 8]
let multiLevelArr = [4, ["Junaid", 7, [5, 9]]]
multiLevelArr.flat(2); //returns [4, "Junaid", 7, 5, 9]4. Check for multiple conditions
When we want to check for multiple conditions in one IF statement, it is always better to use the array method includes() to handle that.
Example:
let name = "Junaid";
//Bad way.
if(name === "Junaid" || name === "Aadil" || name === "Musaddik"){
console.log("Found");
}
//Better way.
if(["Junaid", "Aadil", "Musaddik"].includes(name)){
console.log("Found");
}The method includes() in this situation is just a shorthand if you want to make your code cleaner.
5. Extract unique values
In some cases, you will get into situations where you will have to remove duplicates from an array.
To achieve that, you can use the Set object in JavaScript with the spread operator (...).
Example:
const languages = ['JavaScript', 'Python', 'Python', 'JavaScript', 'HTML', 'Python'];
const uniqueLangs = [...new Set(languages)];
console.log(uniqueLangs);
//Output: ["JavaScript", "Python", "HTML"]6. Run an event only once
If you have an event that you want to only run once, you can use the option once as a third parameter for addEventListener() .
Example:
document.body.addEventListener('click', () => {
console.log('Run only once');
}, { once: true });You just have to set the option to true and the event will only run once.
7. Sum all numbers in an array
The easiest way to sum all the numbers within an array is to use the reduce() a method in JavaScript.
Example:
let numbers = [6, 9 , 90, 120, 55];
numbers.reduce((a, b) => a + b, 0); //returns 2808. Sum numbers inside an array of objects
Getting the sum of all numbers within an array of objects is not the same as getting it from a normal array. You can still use the method reduce() in this situation, but you have to return an object inside the callback.
Example:
const users = [
{name: "Junaid", age: 25},
{name: "Aadil", age: 20},
{name: "Musaddik", age: 31},
];
users.reduce(function(a, b){
return {age: a.age + b.age}
}).age;
//returns 76.We are accessing the age inside the returned object. Then we access it again after the reduce() method because it returns an object containing the total age number.
9. The keyword “in”
The in keyword in JavaScript is used to check if properties are defined inside an object or if elements are included inside an array.
Example:
const employee = {
name: "Junaid",
age: 25
}
"name" in employee; //returns true.
"age" in employee; //returns true.
"experience" in employee; //returns false.10. Numbers to an array of digits
For this, we can use the spread operator, the map() method, and the method parseInt() as a way to convert a number into an array of digits.
Example:
const toArray = num => [...`${num}`].map(elem => parseInt(elem));
toArray(1234); //returns [1, 2, 3, 4]
toArray(758999); //returns [7, 5, 8, 9, 9, 9]In the above example, we spread the parameter num inside an empty array and we map through each element to convert it into a number using parseInt().
These are the simple JavaScript coding techniques that you can use in your code. There are always situations where you will need to use them.