10 Tips & Tricks For New JavaScript Developers
Wanna develop your JavaScript coding skills and save time during coding? Check out these 10 Tips & Tricks which will simplify your code and make you a smart developer.
Let’s get started.
1) Use let or const instead of var
You should use let or const when you define a variable. You might be asking, “Why should I do that?” Let’s see some examples of differences between let, const, and var then you will get your answer.
const ages = [4, 5, 6, 7, 8, 9]
for (var i = 0; i < ages.length; i++) {
// Do your stuff...
}
console.log(i)Output: 6
Here you can see that by declaring a variable using the var keyword, you can call it outside of the block where you have declared that variable.
But what if you use let keyword instead of var? Let’s see…
const ages = [4, 5, 6, 7, 8, 9]
for (let i = 0; i < ages.length; i++) {
// Do your stuff...
}
console.log(i)Output:
ReferenceError: i is not defined
See? You can’t call a variable that has been declared using let outside of the declaring block. This will help your project will become larger and there will be hundreds of variables to work with.
Note: You can’t change the value of a variable that has been declared using the const keyword. const is the simplified version of the word Constant.
2) Spread Operator (Three dots Magic)
Are you thinking of making a single array by joining 2 arrays? And trying to do this by iterating through each element of an array and pushing them to a single array? Oh, Man! That’s an antique style. Let’s see some magic of spread operator…
array1 = [1, 2, 3, 4]
array2 = [5, 6, 7, 8]
array3 = [...array1, ...array2]
console.log(array3)Output: [1, 2, 3, 4, 5, 6, 7, 8]
See? Here three dots before the array2 is the spread operator. It spreads all the elements of an array and helps you to use these elements.
3) Destructuring Object
Are you thinking of destructuring an object? And trying to do this in this antique style?
const object = {name: 'Tom Cruise',
info: {address: 'Berlin', heroOf: 'Mission Impossible'}}
const name = object.name;
const heroOf = object.info.heroOf;What about this style?
const object = {name: 'Tom Cruise',
info: {address: 'Berlin', heroOf: 'Mission Impossible'}};
const { name } = object;
const { heroOf } = object.info;The two curly brackets around name and heroOf, make the destructuring so easy and you can just declare their parent object. They will automatically search for the name and heroOf element in that object
4) Destructuring Array
Are you thinking of destructuring an array? Try this new style. It will save you time and you can do this in a few lines of code.
const friends = ['Shahrukh Khan', 'Amir Khan', 'Arman Khan', 'Salman Khan', 'Sakib Khan'];
const [firstFriend, nextFriend, ...restFriends] = friends;
console.log(firstFriend, nextFriend, restFriends)Output: Shahrukh Khan Amir Khan [ 'Arman Khan', 'Salman Khan', 'Sakib Khan' ]
Those third brackets around firstFriend nextFriend and …restFriends are destructuring the array. “…” before the restFriends are spreading the elements from the index[2] to index[4].
5) Arrow Function
Are you bored of writing functions for one line of operation? You should try arrow functions.
const doubleIt = num => num * 2;const add = (x, y) => x + y;doubleIt(5) //Result: 10
add(4, 4) //Result: 8
It might look like declaring a variable. But this is the magic of arrow functions.Use const functionName = parameters = doOperations; for declaring a arrow function.
6) Default Parameter
Are you worried if a function will get all the necessary arguments when someone calls the function? Default Parameter will help you in these situations.
function add(x=0, y=0) {
return r+ y;
}By putting a “=” after the parameter, you can write a default value for that parameter. If you give values when you call the function, the function will use your given values instead of these default values.
7) Template String
Are you angry while doing string concatenation? Putting all the “+”, “\n” and space stuff before every part of the string? You should use back-ticks instead of double or single quotes. Back-ticks are located before the “1” key in your keyboard.
const firstName = 'Justin'
const lastName = 'TimberLake'
const fullName = `${firstName} ${lastName} is a good boy.`You can write any valid JavaScript code inside of ${}. It will make all the concatenation stuff easier.
8) Map
Tired of writing for loops for getting the elements from an array and do operations with them? You should use the map method. Here is an example.
const numbers = [3, 4, 5, 6, 7, 8];
const result = numbers.map(x => x * x);
console.log(result)Output: [ 9, 16, 25, 36, 49, 64 ]
map method automatically goes through each element of an array and takes that element as an argument. Then it does operations and returns a new list of results.
9)Filter
Bored with writing “ if-else ” conditions for simple operations? Filter is there for you. It will check your given condition and return a new array of results.
const numbers = [3, 4, 5, 6, 7, 8];
const bigger = numbers.filter(x => x > 5)
console.log(bigger);Output: [ 6, 7, 8 ]
In this case, it is checking all the elements if the element is bigger than 5. If the element is bigger than 5, it puts the element into a new array called results.
10) Find
Are you looking for something? There is a method in JavaScript called “find”. This method will help you to find if any element of an array fulfills your given condition, it will give you that. Otherwise, it will through an undefined.
const numbers = [3, 4, 5, 6, 7, 8];
const isThere = numbers.find(x => x > 5);
console.log(isThere);Output: 6
In this case, the find method is searching for an element that is bigger than 5. When it gets “6”, it returns it and stops the operation. Remember, find will give you only the first element which fulfills your condition.
