{"slug": "nothing-beats-fundamentals-javascript-fundamentals", "title": "Nothing beats Fundamentals -Javascript fundamentals", "summary": "A developer released a JavaScript fundamentals collection called 'JavaScript By Example' to help both beginners and seniors refresh core concepts. The project provides concise examples covering values, variables, conditionals, loops, functions, and closures, with production-grade tips on syntax caveats. The developer built the resource to counter over-reliance on AI coding assistants.", "body_md": "Hi, lately i've been using AI Coding assitant intensively, i always worry that i might lost my edge relying too much on AI\n\nHence i decided, to release Javascript fundamentals that Beginner and Senior can read through on daily basis, to enhance more knowledge on javascript fundamentals.\n\nContent below are based on:\n\n[Click to open: Javascript By example](https://www.softwarejutsu.com/jsbyexample)\n\nI build Javascript collections of fundamental concepts and syntax, presented as concise as possible using **examples**.\n\nPages developed to provide you on-the-go experience, so you can pickup and resume honing your fundamental anwhere with your phone.\n\nExtra, I provided \"In production\" section, where you can get production-grade tips on the specific syntax's caveats based on my experience or industry best practice,\n\nHere is Fundamental of Javascripts for your refresher:\n\nThe simplest JavaScript program: printing something to the console.\n\n```\nconsole.log(\"Hello, World!\");\n```\n\nGood for understanding how JavaScript code starts running.\n\n⸻\n\nValues are the actual data JavaScript works with, such as strings, numbers, booleans, objects, null, and undefined.\n\n```\n\"hello\";      // string\n42;           // number\ntrue;         // boolean\nnull;         // empty value\nundefined;    // missing value\n```\n\nJavaScript has primitive values and object values, and knowing the difference helps avoid weird bugs.\n\n⸻\n\nVariables store values so they can be reused later.\n\n``` js\nlet name = \"Rick\";\nconst language = \"JavaScript\";\nvar oldStyle = \"avoid when possible\";\n```\n\nIn modern JavaScript, let and const are usually preferred over var.\n\nVar is function scope.\n\nlet and const are block scope.\n\n⸻\n\nconst prevents reassignment, but it does not make objects or arrays immutable.\n\n``` js\nconst user = {\n  name: \"Rick\"\n};\nuser.name = \"Aldi\"; // allowed\n// user = {}; // not allowed\n```\n\nThis is important because const protects the variable binding, not the internal value.\n\n⸻\n\nJavaScript numbers are floating-point numbers by default.\n\n``` js\nconst price = 0.1 + 0.2;\nconsole.log(price); // 0.30000000000000004\n```\n\nThis is why money calculation should be handled carefully in production. Use BigInt for large number, for fraction please use the number as the smallest unit of whatever you dealing with (e.g storing value of 1 dollar as 100 cent instead)\n\n⸻\n\nStrings represent text.\n\n``` js\nconst name = \"Rick\";\nconsole.log(`Hello, ${name}`);\n```\n\nTemplate literals make string interpolation much cleaner than manual concatenation.\n\n⸻\n\nBooleans represent true or false.\n\n``` js\nconst isLoggedIn = true;\nif (isLoggedIn) {\n  console.log(\"Welcome back!\");\n}\n```\n\nJavaScript also has truthy and falsy values, which affect how conditions behave.\n\n⸻\n\nConditionals let your program make decisions.\n\n``` js\nconst score = 80;\nif (score >= 90) {\n  console.log(\"Excellent\");\n} else if (score >= 70) {\n  console.log(\"Good\");\n} else {\n  console.log(\"Keep practicing\");\n}\n```\n\nYou use conditionals almost everywhere: validation, rendering, permissions, and business logic.\n\n⸻\n\nLoops repeat work.\n\n``` js\nconst items = [\"apple\", \"banana\", \"orange\"];\nfor (const item of items) {\n  console.log(item);\n}\n```\n\nDifferent loops solve different problems: for, for...of, for...in, and forEach.\n\n⸻\n\nFunctions group reusable logic.\n\n```\nfunction greet(name) {\n  return `Hello, ${name}`;\n}\nconsole.log(greet(\"Rick\"));\n```\n\nThey help you avoid repeating the same logic everywhere.\n\n⸻\n\nArrow functions provide shorter syntax and lexical this.\n\n``` js\nconst add = (a, b) => {\n  return a + b;\n};\nconsole.log(add(2, 3));\n```\n\nThey are great for callbacks, but not always ideal for object methods that need their own this.\n\n⸻\n\nA closure happens when a function remembers variables from its outer scope.\n\n``` js\nfunction createCounter() {\n  let count = 0;\n  return function increment() {\n    count++;\n    return count;\n  };\n}\nconst counter = createCounter();\nconsole.log(counter()); // 1\nconsole.log(counter()); // 2\n```\n\nClosures are useful for private state, factories, and memoization.\n\n⸻\n\nArrays store ordered lists of values.\n\n``` js\nconst numbers = [1, 2, 3];\nconst doubled = numbers.map((number) => number * 2);\nconsole.log(doubled); // [2, 4, 6]\n```\n\nCommon array methods include map, filter, reduce, find, and some.\n\n⸻\n\nA higher-order function accepts another function or returns one.\n\n``` js\nfunction runTwice(callback) {\n  callback();\n  callback();\n}\nrunTwice(() => {\n  console.log(\"Running\");\n});\n```\n\nThis pattern powers array methods, event listeners, middleware, and async workflows.\n\n⸻\n\nObjects store key-value pairs.\n\n``` js\nconst user = {\n  name: \"Rick\",\n  role: \"Developer\"\n};\nconsole.log(user.name);\n```\n\nObjects are one of the most important structures in JavaScript because most real-world data is object-shaped.\n\n⸻\n\nMap stores key-value pairs, while Set stores unique values.\n\n``` js\nconst uniqueIds = new Set([1, 2, 2, 3]);\nconsole.log(uniqueIds); // Set(3) { 1, 2, 3 }\n```\n\nUse Set when you need deduplication, and Map when object keys are not flexible enough.\n\n⸻\n\nModules let you split code across files.\n\n``` js\n// math.js\nexport function add(a, b) {\n  return a + b;\n}\n// app.js\nimport { add } from \"./math.js\";\nconsole.log(add(1, 2));\n```\n\nModules make code easier to organize, reuse, and test.\n\n⸻\n\nPromises represent work that finishes later.\n\n``` js\nasync function fetchUser() {\n  const response = await fetch(\"/api/user\");\n  const user = await response.json();\n  return user;\n}\n```\n\nasync/await makes asynchronous code easier to read, but you still need to understand concurrency and error handling.\n\n⸻\n\nClasses are syntax for creating objects with shared behavior.\n\n```\nclass User {\n  constructor(name) {\n    this.name = name;\n  }\n  greet() {\n    return `Hello, ${this.name}`;\n  }\n}\nconst user = new User(\"Rick\");\nconsole.log(user.greet()); // Logs: \"Hello, rick\"\n\nconst variableGreet = user.greet()\nconsole.log(variableGreet()) // Logs: \"Hello, undefined\"\n```\n\nThe tricky part is often not the class itself, but how this behaves when methods are passed around.\n\n⸻\n\nRecursion is when a function calls itself.\n\n```\nfunction countdown(number) {\n  if (number === 0) {\n    return \"done\";\n  }\n  return countdown(number - 1);\n}\nconsole.log(countdown(3));\n```\n\nRecursion is useful for trees, nested data, and repeated problems that can be broken into smaller versions of themselves.\n\n⸻\n\nDates represent time in JavaScript.\n\n``` js\nconst now = new Date();\nconsole.log(now.toISOString());\n```\n\nIn production, dates can become tricky because of time zones, formatting, and storage formats.\n\n⸻\n\nDOM manipulation means reading or changing the HTML document with JavaScript.\n\n``` js\nconst title = document.querySelector(\"h1\");\ntitle.textContent = \"Updated title\";\n```\n\nThis is how JavaScript changes what users see in the browser.\n\n⸻\n\nEvents let JavaScript respond to user actions.\n\n``` js\nconst button = document.querySelector(\"button\");\nbutton.addEventListener(\"click\", () => {\n  console.log(\"Button clicked\");\n});\n```\n\nClicks, typing, scrolling, and form submissions are all handled through events.\n\n⸻\n\nForm validation checks user input before submitting it.\n\n``` js\nconst email = \"\";\nif (!email) {\n  console.log(\"Email is required\");\n}\n```\n\nClient-side validation improves user experience, but the server must always validate again.\n\n⸻\n\nDebounce delays a function until rapid calls stop.\n\n``` js\nfunction debounce(callback, delay) {\n  let timer;\n  return function (...args) {\n    clearTimeout(timer);\n    timer = setTimeout(() => {\n      callback(...args);\n    }, delay);\n  };\n}\nconst search = debounce((keyword) => {\n  console.log(\"Searching:\", keyword);\n}, 500);\n```\n\nUseful for search inputs, resize handlers, and expensive operations triggered too often.\n\n⸻\n\nAccessibility means making interfaces usable by more people, including keyboard and screen reader users.\n\n```\n<button aria-label=\"Close modal\">\n  ×\n</button>\n```\n\nGood accessibility often starts with semantic HTML before reaching for ARIA.\n\n⸻\n\nBrowser storage lets you save simple data on the client.\n\n``` js\nlocalStorage.setItem(\"theme\", \"dark\");\nconst theme = localStorage.getItem(\"theme\");\nconsole.log(theme);\n```\n\nUseful for preferences, but not safe for sensitive data like auth tokens or personal information.\n\n⸻\n\nCRUD means Create, Read, Update, and Delete.\n\n``` js\nconst todos = JSON.parse(localStorage.getItem(\"todos\") || \"[]\");\ntodos.push({\n  id: Date.now(),\n  text: \"Learn JavaScript\"\n});\nlocalStorage.setItem(\"todos\", JSON.stringify(todos));\n```\n\nThis is a good beginner-friendly way to practice app-like data operations.\n\n⸻\n\nRegular expressions match text patterns.\n\n``` js\nconst email = \"hello@example.com\";\nconst isEmail = /\\S+@\\S+\\.\\S+/.test(email);\nconsole.log(isEmail); // true\n```\n\nRegex is useful for validation, searching, replacing, and parsing text.\n\n⸻\n\nA stack is Last In, First Out. A queue is First In, First Out.\n\n``` js\nconst stack = [];\nstack.push(\"first\");\nstack.push(\"second\");\nconsole.log(stack.pop()); // second\n```\n\nThese structures are useful for undo features, task processing, traversal, and scheduling logic.\n\n⸻\n\nA linked list is made of nodes pointing to the next node.\n\n``` js\nconst node1 = {\n  value: \"A\",\n  next: null\n};\nconst node2 = {\n  value: \"B\",\n  next: null\n};\nnode1.next = node2;\n```\n\nLinked lists are useful for understanding pointers and data structures, even if arrays are more common in daily JavaScript.\n\n⸻\n\nA tree is a hierarchical structure with parent and child nodes.\n\n``` js\nconst tree = {\n  value: \"root\",\n  children: [\n    {\n      value: \"child\",\n      children: []\n    }\n  ]\n};\n```\n\nTrees appear in DOM nodes, file systems, comments, menus, and organization charts.\n\n⸻\n\nA graph contains nodes connected by edges.\n\n``` js\nconst graph = {\n  A: [\"B\", \"C\"],\n  B: [\"A\", \"D\"],\n  C: [\"A\"],\n  D: [\"B\"]\n};\n```\n\nGraphs are useful for relationships, networks, routes, dependencies, and recommendation systems.\n\n⸻\n\nThrottle limits how often a function can run.\n\n``` js\nfunction throttle(callback, delay) {\n  let waiting = false;\n  return function (...args) {\n    if (waiting) return;\n    callback(...args);\n    waiting = true;\n    setTimeout(() => {\n      waiting = false;\n    }, delay);\n  };\n}\n```\n\nUseful for scroll, resize, pointer movement, and other high-frequency events.\n\n⸻\n\nYou can read the full collection here:\n\n[https://www.softwarejutsu.com/jsbyexample](https://www.softwarejutsu.com/jsbyexample)", "url": "https://wpnews.pro/news/nothing-beats-fundamentals-javascript-fundamentals", "canonical_source": "https://dev.to/rickvian/nothing-beats-fundamentals-javascript-fundamentals-50o7", "published_at": "2026-06-29 13:43:48+00:00", "updated_at": "2026-06-29 13:48:54.200752+00:00", "lang": "en", "topics": ["developer-tools", "large-language-models", "artificial-intelligence"], "entities": ["JavaScript By Example", "softwarejutsu.com"], "alternates": {"html": "https://wpnews.pro/news/nothing-beats-fundamentals-javascript-fundamentals", "markdown": "https://wpnews.pro/news/nothing-beats-fundamentals-javascript-fundamentals.md", "text": "https://wpnews.pro/news/nothing-beats-fundamentals-javascript-fundamentals.txt", "jsonld": "https://wpnews.pro/news/nothing-beats-fundamentals-javascript-fundamentals.jsonld"}}