This goes to a long story of javascript history. In early ages you had to manually specify your javascript files using <script src="name.js"> tag with the exact order - top to bottom. After the script is attached all it's declarations like var a = 5 or function util(){} will be available for all the scripts below it and globally. It was very hard to hide this declarations from the global scope to achieve encapsulation, so there became a need to create something new.
Later on the es modules arrived. In order to use some function from other script, you had to export it at the very end of that script. That means that all the other, non-exported declarations (functions and variables), were encapsulated (hidden) from other scripts. This led to more resilient scripts with some defense from accident modifications (imagine someone uses a bunch of scripts for the first time, it would be a nightmare to analyze 10+ scripts without any docs). The script with export declaration looked like:
var a = 5;function b(){};module.exports = { a: a, b: b}In 2012s the Typescript was created. Besides all it's beautiful capabilities like static types, proper type-checking and syntax sugar, it also provided a better way to export/import functions, variables and classes. The syntax became:
import Something from '../other.script'for default exports
// other.script.ts contentsexport default const A = '5'; // this will be imported in other fileimport {exactOne, exactTwo} from '../other.script'for non-default exports
// other.script.ts contentsexport const exactOne = 1;export const exactTwo = 2;export const exactThree = 3; // this is NOT imported above, but it's possible to import this const.const exactFour = 4; // this const cannot be imported at allimport * as AllTogether from '../other.script'for bulk import.
// other.script.ts contentsexport const a = 'a';export const b = 'b';// the AllTogether variable above will be imported like {a: 'a', b: 'b'}Hope this helped!