Scribd
Upload
11 views

Export and Import in Javascript

helped in React Native course in Coursera

Uploaded by

Ankit Karmakar
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
11 views

Export and Import in Javascript

helped in React Native course in Coursera

Uploaded by

Ankit Karmakar
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

Export and Import

Export before declarations


 We can label any declaration as exported by placing export before it, be
it a variable, function or a class.
// export an array
export let months = ['Jan', 'Feb', 'Mar','Apr', 'Aug', 'Sep', 'Oct',
'Nov', 'Dec'];

// export a constant
export const MODULES_BECAME_STANDARD_YEAR = 2015;

// export a class
export class User {
constructor(name) {
this.name = name;
}
}

Export separately
 Here we first declare, and then export:
// say.js
function sayHi(user) {
alert(`Hello, ${user}!`);
}

function sayBye(user) {
alert(`Bye, ${user}!`);
}

export {sayHi, sayBye}; // a list of exported variables


Import *
 Usually, we put a list of what to import in curly braces import {...}, like
this:
// main.js
import {sayHi, sayBye} from './say.js';

sayHi('John'); // Hello, John!


sayBye('John'); // Bye, John!

 But if there’s a lot to import, we can import everything as an object


using import * as <obj>, for instance:
// main.js
import * as say from './say.js';

say.sayHi('John');
say.sayBye('John');

Import under different names


 For instance, let’s import sayHi into the local variable hi, and
import sayBye as bye:
// main.js
import {sayHi as hi, sayBye as bye} from './say.js';

hi('John'); // Hello, John!


bye('John'); // Bye, John!

Export “as”
 The similar syntax exists for export.
 Let’s export functions as hi and bye:
// say.js
export {sayHi as hi, sayBye as bye};

 Now hi and bye are official names for outsiders, to be used in imports:
// main.js
import * as say from './say.js';

say.hi('John'); // Hello, John!


say.bye('John'); // Bye, John!

Export default
 Modules provide a special export default (“the default export”) syntax to
make the “one thing per module” way look better.
 Put export default before the entity to export:
// user.js
export default class User { // just add "default"
constructor(name) {
this.name = name;
}
}
 There may be only one export default per file.
 …And then import it without curly braces:
// main.js
import User from './user.js'; // not {User}, just User

new User('John');

 As there may be at most one default export per file, the exported entity
may have no name.

Another example of default export

In the file greet.js:

// default export
export default function greet(name) {
return `Hello ${name}`;
}
export const age = 23;
Then when importing, you can use:

import random_name from './greet.js';

While performing default export, random_name is imported from greet.js.


Since, random_name is not in greet.js, the default export (greet() in this case)
is exported as random_name. You can directly use the default export without
enclosing curly brackets {}.

Note: A file can contain multiple exports. However, you can only have one
default export in a file.

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy