{"id":26652555,"url":"https://github.com/subraatakumar/javascript-clean-code-and-best-practices","last_synced_at":"2026-01-06T00:05:25.343Z","repository":{"id":277363325,"uuid":"932191681","full_name":"subraatakumar/JavaScript-clean-code-and-best-practices","owner":"subraatakumar","description":null,"archived":false,"fork":false,"pushed_at":"2025-03-20T10:23:26.000Z","size":7,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-20T10:37:48.596Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"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/subraatakumar.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":"2025-02-13T14:19:05.000Z","updated_at":"2025-03-20T10:23:30.000Z","dependencies_parsed_at":"2025-02-13T15:39:51.126Z","dependency_job_id":null,"html_url":"https://github.com/subraatakumar/JavaScript-clean-code-and-best-practices","commit_stats":null,"previous_names":["subraatakumar/javascript-clean-code-and-best-practices"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/subraatakumar%2FJavaScript-clean-code-and-best-practices","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/subraatakumar%2FJavaScript-clean-code-and-best-practices/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/subraatakumar%2FJavaScript-clean-code-and-best-practices/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/subraatakumar%2FJavaScript-clean-code-and-best-practices/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/subraatakumar","download_url":"https://codeload.github.com/subraatakumar/JavaScript-clean-code-and-best-practices/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245394760,"owners_count":20608125,"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","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":[],"created_at":"2025-03-25T03:57:20.319Z","updated_at":"2026-01-06T00:05:25.337Z","avatar_url":"https://github.com/subraatakumar.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"\n### 1. Introduction to Clean Code  \nClean code is easy to read, maintain, and debug.  \n**Key principles:**  \n- [**KISS (Keep It Simple, Stupid)** – Avoid unnecessary complexity.](https://github.com/subraatakumar/JavaScript-clean-code-and-best-practices/blob/main/files/KISS.md)  \n- [**DRY (Don’t Repeat Yourself)** – Reuse code instead of duplicating it.](https://github.com/subraatakumar/JavaScript-clean-code-and-best-practices/blob/main/files/DRY.md)\n- [**SOLID** – Apply five principles to write flexible, extensible, and robust code. ](https://github.com/subraatakumar/JavaScript-clean-code-and-best-practices/blob/main/files/SOLID.md)\n- [**YAGNI (You Ain’t Gonna Need It)** – Avoid writing code for features you don’t need yet.](https://github.com/subraatakumar/JavaScript-clean-code-and-best-practices/blob/main/files/YAGNI.md)\n\n---\n\n### 2. Writing Readable JavaScript Code  \n✅ **Variable \u0026 Function Naming Conventions**  \n- Use meaningful and descriptive names.  \n- Use camelCase for variables and functions (`userName`, `fetchData`).  \n- Use PascalCase for classes and constructors (`UserModel`).  \n- Boolean variables should start with `is`, `has`, `can` (e.g., `isLoggedIn`).  \n\n✅ **Code Formatting \u0026 Structure**  \n- Maintain consistent indentation (2 or 4 spaces).  \n- Use line breaks and spacing to improve readability.  \n- Avoid long functions – break them into smaller reusable functions.  \n\n---\n\n### 3. Modern JavaScript Best Practices (ES6+)  \n✅ **Use `let` and `const` Instead of `var`**  \n```javascript\n// Bad\nvar age = 25;\nage = 30;\n\n// Good\nlet age = 25;\nage = 30;\n\n// Best\nconst name = \"John\"; // Immutable\n```\n\n✅ **Use Template Literals Instead of String Concatenation**  \n```javascript\n// Bad\nconst message = \"Hello, \" + name + \"!\";\n\n// Good\nconst message = `Hello, ${name}!`;\n```\n\n✅ **Use Destructuring for Cleaner Code**  \n```javascript\nconst user = { name: \"Alice\", age: 30 };\n\n// Bad\nconst name = user.name;\nconst age = user.age;\n\n// Good\nconst { name, age } = user;\n```\n\n---\n\n### 4. Writing Cleaner Functions  \n✅ **Keep Functions Short \u0026 Focused**  \n- A function should do one thing well.  \n- Avoid functions with more than 20-30 lines.  \n\n✅ **Limit Function Parameters**  \n- Avoid too many parameters.  \n- Use an object instead:  \n```javascript\n// Bad\nfunction createUser(name, age, email) { ... }\n\n// Good\nfunction createUser({ name, age, email }) { ... }\n```\n\n✅ **Use Arrow Functions for Simplicity**  \n```javascript\n// Bad\nfunction add(a, b) {\n  return a + b;\n}\n\n// Good\nconst add = (a, b) =\u003e a + b;\n```\n\n---\n\n### 5. Avoiding Common JavaScript Mistakes  \n✅ **Use `===` Instead of `==`**  \n```javascript\n// Bad\nif (value == 0) { ... }\n\n// Good\nif (value === 0) { ... }\n```\n\n✅ **Avoid Modifying Global Variables**  \n```javascript\n// Bad\nlet count = 0;\nfunction increment() {\n  count++;\n}\n\n// Good\nfunction increment(count) {\n  return count + 1;\n}\n```\n\n✅ **Always Handle `undefined` \u0026 `null` Values**  \n```javascript\n// Bad\nfunction getName(user) {\n  return user.name.toUpperCase(); // Error if user is undefined\n}\n\n// Good : use optional chaining and or operator \nfunction getName(user) {\n  return user?.name?.toUpperCase() || \"Guest\";\n}\n```\n\n---\n\n### 6. Asynchronous JavaScript Best Practices  \n✅ **Use `async/await` Instead of `.then()`**  \n```javascript\n// Bad\nfetchData().then(data =\u003e process(data)).catch(err =\u003e console.error(err));\n\n// Good\nasync function getData() {\n  try {\n    const data = await fetchData();\n    process(data);\n  } catch (err) {\n    console.error(err);\n  }\n}\n```\n\n✅ **Use `Promise.all()` for Parallel Execution**  \n```javascript\nconst [user, orders] = await Promise.all([fetchUser(), fetchOrders()]);\n```\n\n---\n\n### 7. Error Handling \u0026 Debugging  \n✅ **Use `try...catch` and Meaningful Error Messages**  \n```javascript\ntry {\n  processUser(user);\n} catch (error) {\n  console.error(\"User processing failed: \", error.message);\n}\n```\n\n✅ **Use `console.log()`, `console.table()`, and DevTools Effectively**  \n- Use `console.table(users)` for better visualization of arrays.  \n- Set breakpoints in DevTools for debugging.  \n\n---\n\n### 8. Performance Optimization  \n✅ **Debounce \u0026 Throttle for Event Handling**  \n```javascript\nfunction debounce(func, delay) {\n  let timer;\n  return function (...args) {\n    clearTimeout(timer);\n    timer = setTimeout(() =\u003e func(...args), delay);\n  };\n}\n\nconst handleSearch = debounce(() =\u003e console.log(\"Searching...\"), 300);\n```\n\n✅ **Lazy Loading for Performance**  \n```html\n\u003cimg loading=\"lazy\" src=\"image.jpg\" alt=\"Optimized Image\" /\u003e\n```\n\n✅ **Use Memoization for Expensive Computations**  \n```javascript\nconst memoizedFunction = (function () {\n  const cache = {};\n  return function (n) {\n    if (cache[n]) return cache[n];\n    console.log(\"Computing result...\");\n    cache[n] = n * n;\n    return cache[n];\n  };\n})();\n```\n\n---\n\n### 9. Best Practices Summary  \n✅ Keep code simple \u0026 readable.  \n✅ Avoid unnecessary complexity.  \n✅ Follow modern JavaScript practices.  \n✅ Use async/await for clean async code.  \n✅ Optimize performance \u0026 debugging.  \n\n---\n\n### 10. Q\u0026A + Live Coding Demo  \n- Discuss common code issues.  \n- Live refactoring example.  \n\n---\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsubraatakumar%2Fjavascript-clean-code-and-best-practices","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsubraatakumar%2Fjavascript-clean-code-and-best-practices","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsubraatakumar%2Fjavascript-clean-code-and-best-practices/lists"}