The function
declaration defines a function with the specified parameters.
The function
keyword can be used to define a function inside an expression.
ex:
The function
declaration defines a function with the specified parameters.
The function
keyword can be used to define a function inside an expression.
ex:
The shorthand techniques in any programming language help you write code in a much cleaner, optimized, and shorter form. And these techniques let you write code in fewer lines and also will help you save some time. Now, let’s go through some shorthand techniques one by one.
If you just want to assign a value to a variable based on a condition, this is a great alternative.
You can also add an equivalent of an else if
statement to this shorthand as shown.
If you want to assign a default value to a variable only if it is either null
or undefined
, you can use the nullish coalescing operator (??
) to do this.
The ??
operator executes the right-side expression only if the left-side expression returns anything other than null
or undefined
.
Generally, when you access the properties within an object using the .
operator, if any of them are not defined then an error is thrown. When you use the ?.
operator, if any of the properties are either null
or undefined
, the operator returns undefined
instead of throwing an error.
This operator is similar to the ??
and will reduce a step further. Instead of the user assigning the value separately, the ??=
checks assigns the default value at once if the given value is null
or undefined
.
You can assign multiple values at the same time using destructuring.
Note: In the case of object destructuring, please make sure that the variable names should be the same as the property name of that object. You can also change the variable name instead of the default property name using an alias, as shown below.
const { name: firstName, age:myAge } = person;
And you can also assign just the required values using destructuring as well. Since the elements/properties spread out if you are using destructuring, the values get assigned to left side variables based on positions while dealing with arrays and depending on the name of the keys for objects.
You can merge two different arrays and also add new elements to an existing one using spread syntax.
You can also use spread syntax with destructuring for assigning the leftover elements or properties to a new variable altogether.
If you want to execute a function only if a condition evaluates to anything other than falsy values, then you can use short-circuit evaluation with &&
as shown.
Note: Please note that in JavaScript, the values of
null
,undefined
,‘’
,false
, and0
are falsy, and all the other values are truthy.
If you wanted to concatenate variables with static string content, you would use the +
operator. And while using the +
operator, you would need to manage spaces yourself.
You can achieve the same thing in a much simpler way using template literals.
You can use the same for multiline strings as well.
You can use an object with function names associated with a key as an alternative for a switch statement.
If an object key should be the same as the variable name, then defining object literals can be done in a much easier way, as shown below.
If you have a function nested within another function, it can become a bit confusing. So you can make use of arrow functions to write them in a much simpler and shorter way.
In an arrow function, if you have just a single statement that you need to return, you can skip the curly braces and the return
keyword as well. And you can write it in a much simpler way, as shown below.
Instead of using the traditional for-loop to iterate over array elements, you can use forEach()
.
If you want to access just the index values in an array or just the keys in a list of given objects, you can use a for…in
loop.
Earlier, you used to check if the parameters passed to a function had all the values defined using an if statement and assign them a default value. You can do the same thing in the function declaration itself, as shown.
It is a good practice to declare and assign variables at the top of your scope. Rather than declaring each of them separately, you can do it in a shorter way to save both time and the number of lines in your code.
Earlier, if you need to find an object in the array by a given condition, you would iterate over that array using a for
loop. You can make use of the find()
to return the object satisfying the condition.
You can convert a string into a number in a much simpler way using the +
operator like shown.
If you need to check multiple conditions in an if statement using the ||
operator, then you can do that using includes()
, as shown below.
Instead of using a temporary variable for swapping the values, you can easily do the same using the array destructuring syntax.
When you want to raise the power of a given number, you use the Math.pow()
. Instead, you can do the same using the **
in a much easier way.
If you want to check whether the mandatory parameters are provided or not, instead of using an if
condition, you can use a shorter way like shown here.
What we are doing here is assigning the parameter with a default value of an error in case the user does not provide the required parameter
If a number is long with multiple zeros at the end, then you can write that number in a decimal base exponent format, as shown.
You can use ~~
instead of Math.floor()
to find the floor value of a number with a decimal point in a much quicker and easy way.
// Longhand
Math.floor(5.25) === 5 //true//Shorthand
~~5.25 === 5 //true
If you are checking if an element is present in an array, you usually use indexOf()
. It returns -1
if the item is not there, and if the value returned is anything higher than -1
, then the item is available.
A shorthand way of checking is by using the includes()
, which returns true
if the element is present or false
if not found.
These were a list of 30 shorthand techniques that I have found to be very useful. I hope you also find them to be helpful when you use them in your coding.
The function declaration defines a function with the specified parameters. The function keyword can be used to define a function ins...