├── .babelrc
├── .gitignore
├── README.md
├── package-lock.json
├── package.json
├── public
└── index.html
├── src
├── README.md
├── index.js
└── recursion.js
└── webpack.config.js
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [
3 | [ "@babel/preset-env", {
4 | "modules": false,
5 | "targets": {
6 | "browsers": [
7 | "last 2 Chrome versions",
8 | "last 2 Firefox versions",
9 | "last 2 Safari versions",
10 | "last 2 iOS versions",
11 | "last 1 Android version",
12 | "last 1 ChromeAndroid version",
13 | "ie 11"
14 | ]
15 | },
16 | "useBuiltIns": "usage"
17 | } ]
18 | ]
19 | }
20 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .idea/
2 | *.log
3 | npm-debug.log
4 | yarn-error.log
5 | .DS_Store
6 | build/
7 | node_modules/
8 | dist/
9 | .cache
10 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # JavaScript Concepts :mortar_board:
2 |
3 | ## Description :clipboard:
4 | > A demo app for JavaScript Concept
5 |
6 | ## Installation :wrench:
7 |
8 | 1. Clone this repo by running `git clone https://github.com/imranhsayed/javascript-concepts`
9 | 2. `cd javascript-concepts`
10 | 3. `cd branch-name`
11 | 4. `npm install`
12 | 5. `npm run server`
13 |
14 | ## Branch Information :link:
15 |
16 | #### 1. [callbacks]()
17 |
18 | * Callbacks add complexity and readability issue. And its messy to chain the tasks
19 |
20 | #### 2. [promises](https://github.com/imranhsayed/javascript-concepts/tree/promises)
21 |
22 | * A promise is an object that represent the eventual( future ) completion(or failure) of an asynchronous operation, and its future result value.
23 | Promises are thin abstraction around call backs. ( e.g. `readFile.( 'config.json' ).then(...).catch(...)` )
24 | In below example what you pass in resolve will be available as value in `.then(( value )=> ...)`
25 |
26 | ```ruby
27 | var promise1 = new Promise(function(resolve, reject) {
28 | setTimeout(function() {
29 | resolve('foo');
30 | }, 300);
31 | });
32 |
33 | promise1.then(function(value) {
34 | console.log(value);
35 | // expected output: "foo"
36 | });
37 | ```
38 |
39 | 3. [async-await](https://github.com/imranhsayed/javascript-concepts/tree/async-await)
40 |
41 | ##### Async - declares an asynchronous function `(async function someName(){...})`.
42 | * Automatically transforms a regular function into a Promise.
43 | * When called async functions resolve with whatever is returned in their body.
44 | * Async functions enable the use of `await`.
45 |
46 | ##### Await - pauses the execution of async functions. `(const result = await someAsyncCall();)`.
47 | * When placed in front of a Promise call, await forces the rest of the code to wait until that Promise finishes and returns a result.
48 | * Await works only with Promises, it does not work with callbacks.
49 | * Await can only be used inside async functions.
50 |
51 | ##### Async Await Example
52 |
53 | ```ruby
54 | async function getTodoData() {
55 | const todoData = await fetch( 'https://jsonplaceholder.typicode.com/todos/' );
56 | return todoData;
57 | }
58 |
59 | getTodoData()
60 | .then( res => res.json() )
61 | .then( ( result ) => {
62 | console.warn( result );
63 | } );
64 | ```
65 |
66 |
67 | ##### Try and Catch Method
68 |
69 | ```ruby
70 | async function getPosts() {
71 | try {
72 | const postsData = await await fetch( 'https://jsonplaceholder.typicode.com/posts/' );
73 | return postsData;
74 | }
75 | catch ( error ) {
76 | console.warn( 'error', error );
77 | }
78 | }
79 |
80 | getPosts()
81 | .then( res => res.json() )
82 | .then( ( result ) => {
83 | console.warn( result );
84 | } );
85 |
86 | ```
87 |
88 | ## Fetch Example
89 | ```ruby
90 | fetch('https://example.com/wp-json/wp/v2/posts')
91 | .then(
92 | function(response) {
93 | if (response.status !== 200) {
94 | console.log('Looks like there was a problem. Status Code: ' +
95 | response.status);
96 | return;
97 | }
98 |
99 | // Examine the text in the response
100 | response.json().then(function(data) {
101 | console.log(data);
102 | });
103 | }
104 | )
105 | .catch(function(err) {
106 | console.log('Fetch Error :-S', err);
107 | });
108 | ```
109 |
110 | ## Useful Links :link:
111 |
112 | 1. [async-await concept blog](https://tutorialzine.com/2017/07/javascript-async-await-explained)
113 | 2. [try-catch](https://www.w3schools.com/js/js_errors.asp)
114 | 3. [Promise.all()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all)
115 |
116 | ## Instructions :point_right:
117 |
118 | ## Common Commands :computer:
119 |
120 | 1. `npm run dev` starts a webpack dev server at [http://localhost:8080](http://localhost:8080)
121 | 2. `npm run prod` runs build for production in dist directory.
122 |
123 | ## Built With :zap:
124 |
125 | 1. Node
126 | 2. Express
127 | 3. ES6
128 | 4. Webpack
129 | 5. Babel
130 |
131 | ## Author :bust_in_silhouette:
132 |
133 | * **[Imran Sayed](https://codeytek.com)**
134 |
135 | ## License
136 |
137 | [](http://badges.mit-license.org)
138 |
139 | - **[MIT license](http://opensource.org/licenses/mit-license.php)**
140 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "javascript-concepts",
3 | "version": "1.0.0",
4 | "description": "JavaScript Concept Examples",
5 | "main": "index.js",
6 | "scripts": {
7 | "webpack-dev-server": "webpack-dev-server",
8 | "dev": "webpack-dev-server --mode=development",
9 | "prod": "webpack --mode=production"
10 | },
11 | "keywords": [
12 | "javascript"
13 | ],
14 | "author": "Imran Sayed",
15 | "license": "ISC",
16 | "dependencies": {
17 | "@babel/core": "^7.4.5",
18 | "@babel/polyfill": "^7.4.4",
19 | "@babel/preset-env": "^7.4.5",
20 | "babel-loader": "^8.3.0",
21 | "html-webpack-plugin": "^5.5.0",
22 | "webpack": "^5.75.0",
23 | "webpack-cli": "^5.0.1",
24 | "webpack-dev-server": "^3.4.1"
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | JavaScript Concepts
6 |
7 |
8 | Welcome to JavaScript Concepts
9 |
10 |
11 |
--------------------------------------------------------------------------------
/src/README.md:
--------------------------------------------------------------------------------
1 | const allParamIds = getAllParamIds( checkboxesForCurrentId, [] );
2 | 
3 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 |
2 | ( function () {
3 |
4 | /**
5 | * Async Await Example
6 | */
7 | async function getTodoData() {
8 | const todoData = await fetch( 'https://jsonplaceholder.typicode.com/todos/' );
9 | return todoData;
10 | }
11 |
12 | getTodoData()
13 | .then( res => res.json() )
14 | .then( ( result ) => {
15 | console.warn( result );
16 | } );
17 |
18 | /**
19 | * Promise.all()
20 | *
21 | * Send all request at one time
22 | * The Promise.all() method returns a single Promise that resolves
23 | * when all of the promises passed as an iterable have resolved
24 | */
25 | const promise1 = Promise.resolve(3);
26 | const promise2 = 42;
27 | const promise3 = new Promise( ( resolve, reject ) => {
28 | setTimeout( () => {
29 | resolve( 'Third: response received' );
30 | },2000 )
31 | } );
32 |
33 | async function getABC() {
34 | /**
35 | * Promise.all() allows us to send all
36 | * requests at the same time.The Promise.all() method returns a single Promise that resolves when all of the promises passed as an iterable have resolved
37 | * @type {[number, number, any]}
38 | */
39 | let results = await Promise.all([promise1, promise2, promise3])
40 |
41 | return results;
42 | }
43 |
44 | getABC().then( result => {
45 | console.warn( result );
46 | } )
47 |
48 | /**
49 | * Try and catch
50 | */
51 | async function getPosts() {
52 | try {
53 | const postsData = await await fetch( 'https://jsonplaceholder.typicode.com/posts/' );
54 | return postsData;
55 | }
56 | catch ( error ) {
57 | console.warn( 'error', error );
58 | }
59 | }
60 |
61 | getPosts()
62 | .then( res => res.json() )
63 | .then( ( result ) => {
64 | console.warn( result );
65 | } );
66 |
67 | } )();
68 |
--------------------------------------------------------------------------------
/src/recursion.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Recursively calls itself to get the nested param ids.
3 | *
4 | * @param {Object} checkbox Checkbox.
5 | * @param {Array} allParamIds Used to build the ids array, by constantly pushing an id into it.
6 | *
7 | * @return {Array} allParamIds All param ids.
8 | */
9 | const getAllParamIds = ( checkbox = {}, allParamIds = [] ) => {
10 | // Push the checkbox value(id) in allParamIds.
11 | allParamIds.push( checkbox.value );
12 |
13 | /**
14 | * If child checkboxes exist, loop through each one of them,
15 | * and recursively call getAllParamIds() to push ids from children.
16 | */
17 | const childCheckboxes = checkbox?.children ?? {};
18 | if ( Object.keys( childCheckboxes ).length ) {
19 | Object.keys( childCheckboxes ).forEach( ( key ) => {
20 | getAllParamIds( childCheckboxes[ key ], allParamIds );
21 | } );
22 | }
23 |
24 | return allParamIds;
25 | };
26 |
27 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const HtmlWebPackPlugin = require( 'html-webpack-plugin' );
2 | const path = require( 'path' );
3 | module.exports = {
4 | context: __dirname,
5 | entry: './src/index.js',
6 | output: {
7 | path: path.resolve( __dirname, 'dist' ),
8 | filename: 'main.js',
9 | publicPath: '/',
10 | },
11 | devServer: {
12 | historyApiFallback: true
13 | },
14 | module: {
15 | rules: [
16 | {
17 | test: /\.js$/,
18 | use: 'babel-loader',
19 | }
20 | ]
21 | },
22 | plugins: [
23 | new HtmlWebPackPlugin({
24 | template: path.resolve( __dirname, 'public/index.html' ),
25 | filename: 'index.html'
26 | })
27 | ]
28 | };
29 |
--------------------------------------------------------------------------------