Learn JavaScript ES6 Modules in 6 minutes! 🚢

#javascript #tutorial #course
// ES6 Module = An external file that contains reusable code
// that can be imported into other JavaScript files
// Can contain variables, classes, functions ... and more
// Introduced as part of ECMAScript 2015 update
// --------- index.js ---------
import {PI, getCircumference, getArea, getVolume} from './mathUtil.js';
console.log(PI);
const circumference = getCircumference(10);
const area = getArea(10);
const volume = getVolume(10);
console.log(`${circumference.toFixed(2)}cm`);
console.log(`${area.toFixed(2)}cm^2`);
console.log(`${volume.toFixed(2)}cm^3`);
// --------- mathutil.js ---------
export const PI = 3.14159;
export function getCircumference(radius){
return 2 * PI * radius;
}
export function getArea(radius){
return PI * radius * radius;
}
export function getVolume(radius){
return 4 * PI * radius * radius;
}

[@BroCodez]

UPDATE: (4 * PI * radius * radius) is for surface area of a sphere, not volume. I mixed up my formulas.
(4 /3 * PI * radius * radius * radius) is for volume of a sphere.
#javascript #tutorial #course
// ES6 Module = An external file that contains reusable code
// that can be imported into other JavaScript files
// Can contain variables, classes, functions ... and more
// Introduced as part of ECMAScript 2015 update
// ---------- index.js ----------
import {PI, getCircumference, getArea, getVolume} from './mathUtil.js';
console.log(PI);
const circumference = getCircumference(10);
const area = getArea(10);
const volume = getVolume(10);
console.log(`${circumference.toFixed(2)}cm`);
console.log(`${area.toFixed(2)}cm^2`);
console.log(`${volume.toFixed(2)}cm^3`);
// ---------- mathutil.js ----------
export const PI = 3.14159;
export function getCircumference(radius){
return 2 * PI * radius;
}
export function getArea(radius){
return PI * radius * radius;
}
export function getVolume(radius){
return 4 /3 * PI * radius * radius * radius;
}

[@noelkitonga]

I now see where React and its many minions got all their super powers.

[@ricardomoraes9850]

Will you remake your JavaScript course? I like the way you teach 🙏🙏

[@futuredoctor7148]

Why remake?

[@fadi_mousa]

Yor are a great teacher
but 4 pi r*r is surface area of sphere
the volume is 4/3 pi r*r*r 😊
thank you

[@ShewaFaf]

You've done fucking good job!

[@hunin27]

isnt volume: 4/3 * pi * r^3

[@xzex2609]

one thing I didn't understand is that while mathutils.js is a module why in we put index.js with attribute of type ="modele" >?? I add an object to the packages.json to solve this

[@victorr_olu]

how did you do this

[@shrikanthn5017]

Have the same question. Please answer if you understood

[@xzex2609]

@@shrikanthn5017 I forgot to tell you if your project is node and you want to use ES6 imports you need to add an object in package.json file saying that type: 'module'
otherwise you can't import and must be use require('package name') [ or use .mjs file : michael jackson script 😜😜]
if you don't know yet javascript runs either in browser ( using an html file with script tag) or as node js ( a run time environement that you don't need browser , and you use it for libraries and write backend code in javascript) consider node projects don't have window object they have global object that is much smaller object)
much of the confusion is that we are learning java script in ES7 era and older java script codders did not have so many things that we use today , things like arrow functions , import statements and so many more , so when you hear that is something related to the ES6 it just means that totally new ways of doing things in java script, and that is a wide difference between ES5 and ES6 but we need to learn them not to get confused when we encounter old codes and you will see lots of things in those fashion.

[@xzex2609]

@@shrikanthn5017 th-cam.com/video/mK54Cn4ceac/w-d-xo.html

[@xzex2609]

@@shrikanthn5017 Hi this is my third response to this comment for some reason it don't post my reply.
I send you a complete guide that will explain this in other comment.
it is es6 way of importing things that is different from old ways (common js) if you run your code in the browser you need to add this tag to the script tag in your html and you can use statements like import something from 'path' .
if you run your code in node (runtime environment) if you don't declare the type: 'module" in the package json file ( create it with npm init -y) you can only use require() function to import the things from another file . but if you want to use es6 import you need to add this or use mjs extension file.
if you are using only javascript in browser you may be confuse what the heck am I talking about. javascript runs both in browser or node (for backend mostly) and you will use a lot of import statement in the frameworks like react and you need to underestand the different import/export or you get confuse a lot

[@xzex2609]

(please help Bro) I Had this error in React too than it wants me to add an object in packages.json :: Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension , I couldn't find packages.json file so I made one on the directory and it worked , I think there must be a packages.json files for solving {'type' : 'module'} for all files with export ability that I don't know where it is . and the OTHER SOLUTION to renaming it .mjs file didn't work at all ( in the console of node js inside vscode ) I am sure people have my trouble and don't know where exactly must add the object {"type": "module"}

[@aimbot_user19]

NO WAY!!!! I THOUGHT YOU QUIT!!!!

[@PingAmeen]

83174 Osbaldo Common