Skip to content

Commit b04c9e0

Browse files
brijeshkumar-chavdabrijeshkumar-chavda
committed
refactor: modules
1 parent a3f0692 commit b04c9e0

41 files changed

Lines changed: 32 additions & 774 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

pending_concept/modules/1_modules.js renamed to 24_modules/01_modules.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
// Modules (ES6)
22

3-
// Q. What is JavaScript Modules?
4-
// - In JavaScript, a module is a self-contained unit of code that encapsulates related functionality. It allows you to split your code into separate files, each containing its own set of variables, functions, classes, or other code elements. Modules help organize and maintain the codebase by promoting modularity, reusability, and encapsulation.
3+
// What
4+
// - In JavaScript, a module is a self-contained unit of code that encapsulates related functionality. It allows you to split your code into separate files, each containing its own set of variables, functions, classes, or other code elements. Modules help organize and maintain the codebase by promoting modularity, reusability, and encapsulation.
55
// - Modules provide a way to declare private variables and functions that are not accessible from outside the module unless explicitly exported. This enables you to control the visibility and accessibility of the code within your program.
66

7-
// SIMPLE TERM
7+
// Simple Words
88
// - Module it just a file which have some code in it. We are using that code in different file. By importing that file.
99

10-
// NOTE
10+
// Note
1111
// - ES6 Modules: The ECMAScript 2015 (ES6) specification introduced native support for modules in JavaScript. ES6 modules use the import and export keywords to define dependencies and expose functionality between modules. ES6 modules are supported in modern browsers and can also be used with bundlers like Webpack or Rollup.

pending_concept/modules/2_export.js renamed to 24_modules/02_export.js

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
11
// `export`
22

3-
// Q. What is `export`?
3+
// What
44
// - In JavaScript, the export keyword is used to expose functionality from a module so that it can be imported and used in other modules.
55
// - When you use export, you can make variables, functions, or classes available for use in other modules. By exporting specific elements, you define the public interface of your module, allowing other modules to access and utilize those exported elements.
66

7-
//! NOTE
7+
// Note
88
// - You can only use default export one time. In most case it is your class.
99
// - You can't export default const value.
1010

11-
// Q. How to use Modules?
12-
// - In JavaScript there are two keyword `export default` and `export {}` to use modules feature.
11+
// How
12+
// - In JavaScript there are two keyword `export default` and `export {}` to use modules.
1313

14-
// - There are three type of export
14+
// There are three types of export:
1515
// 1. Named export
1616
// 2. Default export
1717
// 3. Exporting multiple element
1818

19-
// - There are two way to export
19+
// There are two ways to export:
2020
// 1. Inline export
2121
// 2. Endline export
2222

@@ -27,10 +27,10 @@ export default class MyClass {
2727
}
2828

2929
// 2. Named export
30-
export let var1 = "value";
31-
export function fun() {}
30+
export let variable = "value";
31+
export function function1() {}
3232

3333
// 3. Exporting multiple items
3434
// Endline export
3535
// export default MyClass
36-
// export {var1 , fun}
36+
// export {variable , function1}

pending_concept/modules/3_import.js renamed to 24_modules/03_import.js

Lines changed: 9 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,20 @@
1-
// `import`
1+
// Import
22

3-
//? Q. What is `import`?
3+
// What
44
// - In JavaScript, the import statement is used to import functionality from other modules. It allows you to access and use functions, variables, or classes defined in separate JavaScript files or modules within your current module.
55

6-
//! NOTE
6+
// Note
77
// - When you are using `import` for importing the code form the other file (modules). You need to update the file type in the HTML that JavaScript file is the module.
88

9-
//* SYNTAX
10-
//* Importing Class
9+
// Syntax
10+
// Importing Class
11+
// - When you import class from one file to another file you can actually set custom name for that ClassName.
1112

1213
// import ClassName from "./fileName" (./ for relative file path)
1314
// import ClassName from "/fileName" (/ for absolute file path)
14-
// - When you import class from one file to another file you can actually set custom name for that ClassName.
15-
16-
//* Importing selected function
17-
18-
// import {functionName} from "./fileName"
19-
// import {functionName as customFunctionName} from "./fileName"
2015

16+
// Importing selected function
2117
// - When you import function from one file to another file you can actually set custom name for that function.
2218

23-
// - YES, YOU CAN SET CUSTOM NAME WHILE IMPORTING BUT CONVENTION IS TO FOLLOW THE SAME FILE, CLASS OR FUNCTION NAME FOR BETTER READABILITY. SO IT DOES'T CREATE CONFUSION OR WE LOST TRACK OF IMPORTED MODULE. EVEN IF YOU WANT TO USE CUSTOM NAME FOR IMPORTED MODULE MAKE SURE THE FILE PATH IS THE RIGHT.
19+
// import {functionName} from "./fileName"
20+
// import {functionName as customFunctionName} from "./fileName"

‎24_modules/modules_example/file_02.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import MyClass from "../file_1";
2+
import { function1 } from "../file_1";
3+
4+
// Importing class from file_01 and creating object in file_02
5+
const object = new MyClass("value1", "value2");
6+
console.log(object);
7+
8+
// Importing function form file_01 and using in file_02
9+
function1();

pending_concept/modules/modules_example/file_1.js renamed to 24_modules/modules_example/file_1.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,6 @@ export default class MyClass {
55
}
66
}
77

8-
function fun() {
8+
function function1() {
99
console.log("I am export function.");
1010
}

pending_concept/javascript_execution_context/1_context.md renamed to 25_javascript_execution_context/1_context.md

File renamed without changes.

pending_concept/javascript_execution_context/2_execution_context.js renamed to 25_javascript_execution_context/2_execution_context.js

File renamed without changes.

pending_concept/javascript_execution_context/2_execution_context_diagram.png renamed to 25_javascript_execution_context/2_execution_context_diagram.png

File renamed without changes.

pending_concept/javascript_execution_context/3_memory_creation_phase.js renamed to 25_javascript_execution_context/3_memory_creation_phase.js

File renamed without changes.

pending_concept/javascript_execution_context/4_execution_phase.js renamed to 25_javascript_execution_context/4_execution_phase.js

File renamed without changes.

0 commit comments

Comments
 (0)