CODEWITHSUNDEEP
javascript
Alwaysblue
Alwaysblue

Reputation: 11830

Javascript Import/Export statement

In javascript, will they both be similar (Part 1 and Part 2)?

[Part 1]

const sething = () => {
  //Something
}

const sething1 = () => {
  //Something 
}

[Part 2]

const sething = () => {
  //Something 
}

export default sething

and then

import sething from /location 

const sething1 = () => {
  //Something 
}

If they both aren't similar can someone tell me why not? and suggest any articles to read.

Also what will be the result if we do something like this for classes?

Upvotes: 1

Views: 68

Answers (2)

Luca Kiebel
Luca Kiebel

Reputation: 10096

Both examples are essentially doing the same.

In the first example you have two functions that are not === in one file, and in the second example you are defining two functions, that are also not ===, only difference being, that you imported one of them.

What I meant with

Similar? Yes. Equal? No.

is that they are obviously not the same thing. Import/Export has nowhere near the performance of just having the two functions in one file and it's simply more code.

Both would function the same, though there are also advantages to defining functions in files you later import.

You can use them multiple times, if you need that and you can then easily change it in one place instead of having to change the function everywhere. Otherwise this would be Code Duplication.

Upvotes: 1

Rajit
Rajit

Reputation: 808

I take it that you're asking: "Is Part 1 equivalent to Part 2" where Part 2 defines sething in a separate file and then imports it into the same scope as sething1.

My answer is:

  • There are some ways that these are equivalent
  • There are some ways that these are different

How are they equivalent?

In both Part 1 and Part 2, you end up with sething and sething1 defined as constants. If all you're concerned about is the behaviour of your application then for the most part I'd treat these as equivalent.

How are they different?

  1. If you re-use sething somewhere else, you'll simple be able to import it there. You can do that in Part 2 but not without refactoring or repeating yourself in Part 1. Or perhaps having one massive file.
  2. If you wish to refactor the name sething, it'll be easier in Part 1 than in Part 2. In Part 2 most IDEs will change the imported name without changing the name of the constant inside the imported file. If it's used anywhere else, those uses will not be renamed. This can easily be fixed by using a named export instead of a default export.

I hope that helps and answers your question!

Upvotes: 1

Related Questions