{"id":15505631,"url":"https://github.com/imranhsayed/javascript-concepts","last_synced_at":"2025-10-23T22:42:24.314Z","repository":{"id":39529486,"uuid":"189277386","full_name":"imranhsayed/javascript-concepts","owner":"imranhsayed","description":":mortar_board: A demo app for JavaScript Concepts","archived":false,"fork":false,"pushed_at":"2024-03-26T10:41:29.000Z","size":405,"stargazers_count":14,"open_issues_count":18,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-03T12:06:27.710Z","etag":null,"topics":["async-await","javascript","promise-all","promise-library","promises","try-catch"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/imranhsayed.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-05-29T18:22:16.000Z","updated_at":"2024-10-04T09:57:19.000Z","dependencies_parsed_at":"2023-01-31T20:46:19.740Z","dependency_job_id":"5cb72927-7861-4464-a2ec-31aba1c611cd","html_url":"https://github.com/imranhsayed/javascript-concepts","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/imranhsayed/javascript-concepts","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imranhsayed%2Fjavascript-concepts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imranhsayed%2Fjavascript-concepts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imranhsayed%2Fjavascript-concepts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imranhsayed%2Fjavascript-concepts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/imranhsayed","download_url":"https://codeload.github.com/imranhsayed/javascript-concepts/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imranhsayed%2Fjavascript-concepts/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":280706795,"owners_count":26376970,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-23T02:00:06.710Z","response_time":142,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["async-await","javascript","promise-all","promise-library","promises","try-catch"],"created_at":"2024-10-02T09:24:04.409Z","updated_at":"2025-10-23T22:42:24.278Z","avatar_url":"https://github.com/imranhsayed.png","language":"JavaScript","readme":"# JavaScript Concepts :mortar_board:\n\n## Description :clipboard:\n\u003e A demo app for JavaScript Concept\n\n## Installation :wrench:\n\n1. Clone this repo by running `git clone https://github.com/imranhsayed/javascript-concepts`\n2. `cd javascript-concepts`\n3. `cd branch-name`\n4. `npm install`\n5. `npm run server`\n\n## Branch Information :link:\n\n#### 1. [callbacks]()\n\n* Callbacks add complexity and readability issue. And its messy to chain the tasks\n\n#### 2. [promises](https://github.com/imranhsayed/javascript-concepts/tree/promises)\n\n* A promise is an object that represent the eventual( future ) completion(or failure) of an asynchronous operation, and its future result value.\nPromises are thin abstraction around call backs. ( e.g. `readFile.( 'config.json' ).then(...).catch(...)` )\nIn below example what you pass in resolve will be available as value in `.then(( value )=\u003e ...)`\n\n```ruby\nvar promise1 = new Promise(function(resolve, reject) {\n  setTimeout(function() {\n    resolve('foo');\n  }, 300);\n});\n\npromise1.then(function(value) {\n  console.log(value);\n  // expected output: \"foo\"\n});\n```\n\n3. [async-await](https://github.com/imranhsayed/javascript-concepts/tree/async-await) \n\n##### Async - declares an asynchronous function `(async function someName(){...})`.\n* Automatically transforms a regular function into a Promise.\n* When called async functions resolve with whatever is returned in their body.\n* Async functions enable the use of `await`.\n\n##### Await - pauses the execution of async functions. `(const result = await someAsyncCall();)`.\n* 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.\n* Await works only with Promises, it does not work with callbacks.\n* Await can only be used inside async functions.\n\n##### Async Await Example\n\n```ruby\n\tasync function getTodoData() {\n\t\tconst todoData = await fetch( 'https://jsonplaceholder.typicode.com/todos/' );\n\t\treturn todoData;\n\t}\n\n\tgetTodoData()\n\t\t.then( res =\u003e res.json() )\n\t\t.then( ( result ) =\u003e {\n\t\tconsole.warn( result );\n\t} );\n```\n\n\n##### Try and Catch Method\n\n```ruby\n\tasync function getPosts() {\n\t\ttry {\n\t\t\tconst postsData = await await fetch( 'https://jsonplaceholder.typicode.com/posts/' );\n\t\t\treturn postsData;\n\t\t}\n\t\tcatch ( error ) {\n\t\t\tconsole.warn( 'error', error );\n\t\t}\n\t}\n\n\tgetPosts()\n\t\t.then( res =\u003e res.json() )\n\t\t.then( ( result ) =\u003e {\n\t\t\tconsole.warn( result );\n\t\t} );\n\n```\n\n## Fetch Example\n```ruby\n\tfetch('https://example.com/wp-json/wp/v2/posts')\n\t\t.then(\n\t\t\tfunction(response) {\n\t\t\t\tif (response.status !== 200) {\n\t\t\t\t\tconsole.log('Looks like there was a problem. Status Code: ' +\n\t\t\t\t\t\tresponse.status);\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\t// Examine the text in the response\n\t\t\t\tresponse.json().then(function(data) {\n\t\t\t\t\tconsole.log(data);\n\t\t\t\t});\n\t\t\t}\n\t\t)\n\t\t.catch(function(err) {\n\t\t\tconsole.log('Fetch Error :-S', err);\n\t\t});\n```\n\n## Useful Links :link:\n\n1. [async-await concept blog](https://tutorialzine.com/2017/07/javascript-async-await-explained)\n2. [try-catch](https://www.w3schools.com/js/js_errors.asp)\n3. [Promise.all()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all)\n\n## Instructions :point_right:\n\n## Common Commands :computer:\n\n1. `npm run dev` starts a webpack dev server at [http://localhost:8080](http://localhost:8080)\n2. `npm run prod` runs build for production in dist directory. \n\n## Built With :zap:\n\n1. Node\n2. Express\n3. ES6\n4. Webpack\n5. Babel\n\n## Author :bust_in_silhouette:\n\n* **[Imran Sayed](https://codeytek.com)**\n\n## License\n\n[![License](http://img.shields.io/:license-mit-blue.svg?style=flat-square)](http://badges.mit-license.org)\n\n- **[MIT license](http://opensource.org/licenses/mit-license.php)**\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimranhsayed%2Fjavascript-concepts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fimranhsayed%2Fjavascript-concepts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimranhsayed%2Fjavascript-concepts/lists"}