DEV Community

Snookums
Snookums

Posted on

Is Javascript's import syntax semantically wrong?

#javascript

In JS, if when import a file as a whole, the syntax is
import XXX from './xxx'

But I think this is semantically wrong, because the word from indicates that the thing you are importing is a part of the file, not the file itself.

For example, if A takes a candy from B, then the candy is just a part of B's belongings, not B himself.

So it should be just import './xxx', and it is like this in other languages such as Java.

If we need to give it an alias, it is import './xxx' as xxx.

If it is like this, then when importing parts from a file, we can omit the dereference curly brackets, so it is import XXX from './xxx' instead of import { XXX } from './xxx'.

In the latter, {} and from are redundant and confusing.

Top comments (4)

Collapse
 
jonrandy profile image
Jon Randy 🎖️ • • Edited

The syntax to just import the file as a whole (without plucking default or individual exports) is:

import './xxx'
Enter fullscreen mode Exit fullscreen mode

This will import the file for its side-effects only. All variations of the import syntax will import the whole file.

The syntax you show is importing the default export - for which you need to specify a variable name in which to store the import.

You can read more about using import in JS at MDN

Collapse
 
snookums profile image
Snookums •

I see. I didn't know what is "side effects", thanks for teaching me.

But I still think this syntax is wrong in 2 ways:

Firstly, as you said "...you need a name in which to store it", when importing the default export, it is just a renaming operation.

But it semantically doesn't have any meaning of renaming. The English words as indicates an alias, but it is not used here.

Its syntax import a thing from a place means this thing must exist in the place.

For example, "I imported some cattle from Mongolia", meaning there must be cattle in
Mongolia; but if I say "I imported some warships from Mongolia", it will be weird, because Mongolia doesn't have any warships.

So I think this syntax shouldn't allow renaming at all.

Secondly, the dereferencing curly brackets are unnecessary. The English word "import" already indicates a process of selection.

So by "I import cattle from Mongolia", the nation has lots of resources, but I only select cattle to ship to me.

But if I have to dereference like I import { Cattle } from Mongolia, that sound like the whole country of Mongolia is shipped to me, then I select some cattle and ship the rest of the country back to where it is located.

Anyway, will import XXX, YYY, ZZZ from SomeModule cause any confusion?

Collapse
 
jonrandy profile image
Jon Randy 🎖️ •

But it semantically doesn't have any meaning of renaming. The English words as indicates an alias, but it is not used here.

It's just a shortcut to simply import the default export as your required name. Otherwise you would need to do:

import { default as myChosenName } from "./xxx"
Enter fullscreen mode Exit fullscreen mode

Instead of just:

import myChosenName from "./xxx"
Enter fullscreen mode Exit fullscreen mode

Which is much less verbose, and is the most common use case. It's shorthand, nothing more.

A variety of different syntaxes are offered to cover different use cases.

Collapse
 
derso profile image
derso •

it had to be the same as python from rest_framework import serializers, I think it's semantically intuitive

Read next

harshboricha98 profile image

Cloud Computing Beyond Containers: How Cloudflare’s Isolates Are Changing the Game

Harsh boricha -

ayusharpcoder profile image

ReactJS Best Practices: Writing Clean and Maintainable Code

Ayush Kumar Vishwakarma -

usluer profile image

Building a High-Performance Cache Manager in Node.js with TypeScript and ioredis

... -

arindam_1729 profile image

Building a Kanban Board with Next.js,Vercel AI and Tolgee

Arindam Majumder -