JavaScript is a very forgiving language. It’s easy to write code that runs but has mistakes in it.
In this article, we’ll look at the proper way to rename imports and how to declare JavaScript variables properly.
No Renaming Import, Export, and Destructured Assignments to the Same Name
In JavaScript, we can rename our imported members and members that are exported with the as keyword.
Likewise, we can rename destructured assignments variable to the name that we want with the colon and the name we want after it.
For instance, we can rename an imported member as follows:
import { foo as bar } from "./module";
In the code above, we imported the foo member from module.js and then renamed it to bar in the current module by using the as keyword as we did above.
Then we can reference bar instead of foo in the current module.
We can also do the same thing for exports. For instance, we can write the following to export a member with a different name than it’s defined as.
To do that, we can write the following:
module.js
const foo = 1;
export { foo as bar };
index.js
import { bar } from "./module";
In the code above, we defined the constant foo in module.js and exported it as bar by using the as keyword in our export statement.
This lets us rename our exports before it’s exported.
We can also rename destructured assignments as by writing the following code:
const {
foo: bar
} = {
foo: 1
};
In the code above, we renamed our destructured foo property to bar by writing:
{
foo: bar
}
Then the JavaScript will pick up the foo property from the right side and then set its value as the value of bar so that we reference it with bar instead of foo .
This is a convenient way to destructure object properties to variables and also rename them with the variable name that we want.
However, with these syntactic sugars, we can use them in useless ways by renaming them to the same name as they’re originally defined.
For instance, with imports, we can write the following code:
import { foo as foo } from "./module";
With exports, we can write something like:
const foo = 1;
export { foo as foo };
And with destructuring syntax, we can write:
const {
foo: foo
} = {
foo: 1
};
Since we renamed the variable to the same name as before, the renaming code is useless.
Therefore, we should remove them.
For imports, we just write:
import { foo } from "./module";
We can rewrite our export code as follows:
export const foo = 1;
And with destructuring, we can write:
const {
foo
} = {
foo: 1
};
Use let or const Instead of var to Declare Variables and Constants
In modern versions of JavaScript, there’s a right way to declare variables and constants.
We should eliminate anything that’s declared with var and use let or const instead.
With var the variables declared with it are function scoped and are hoisted, leading to lots of confusion among developers.
We don’t want lots of confusing in are code that is caused by that.
For instance, with var , our code can be accessed outside blocks. For instance, we can define and access a variable as follows:
const foo = () => {
if (true) {
var x = 1;
}
console.log(x);
}
foo();
In the code above, we’ll see that the console log outputs 1 because x is available outside the block since it’s declared with var .
Also, we can reference x before it’s defined because of hoisting, so if we have:
const foo = () => {
console.log(x);
if (true) {
var x = 1;
}
}
Then logging x will log undefined since we logged x ‘s value before it’s defined.
This is confusing to lots of people, and so since ES6, we have the let and const keywords to declare variables and constants respectively.
let and const are block-scoped so that variables and constants declared with them can’t be accessed outside blocks.
For instance, the following will give us an error because we tried to access the variable outside the block:
const foo = () => {
console.log(x);
if (true) {
let x = 1;
}
}
The following will also give us an error:
const foo = () => {
if (true) {
let x = 1;
}
console.log(x);
}
We can only access x inside the if block as follows:
const foo = () => {
if (true) {
let x = 1;
console.log(x);
}
}
With const , we can declare constants, which means that they can’t be reassigned to a new value. It’s also block-scoped like let .
When we declare variables with let and const , there’s no confusion.
Conclusion
We shouldn’t rename imports, exports, and destructured assignments to the same as it was before since it’s useless.
Also, let and const should be used to declare variables and constants respectively instead of var .
