{"id":24792661,"url":"https://github.com/bansimplified567/30days_javascript_for_beginners","last_synced_at":"2025-03-24T15:40:21.614Z","repository":{"id":271236703,"uuid":"912341281","full_name":"BanSimplified567/30Days_Javascript_For_Beginners","owner":"BanSimplified567","description":"Welcome to my **30 Days of JavaScript for Beginners** program! This project represents the knowledge and skills I've gained during my first two years of learning how to code as a beginner. It's not entirely complete, but I wanted to share my journey and progress with you.","archived":false,"fork":false,"pushed_at":"2025-01-26T13:47:04.000Z","size":15,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-26T14:29:00.285Z","etag":null,"topics":["30daysofcode","30daysofjavascript","async-await","beginner","beginner-friendly","fundamentals","fundamentals-of-programming","javascript","js","practice","projects","promises","tips-and-tricks","tutorial","webdevelopment"],"latest_commit_sha":null,"homepage":"","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/BanSimplified567.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-01-05T09:57:28.000Z","updated_at":"2025-01-26T13:47:07.000Z","dependencies_parsed_at":"2025-01-06T13:40:14.489Z","dependency_job_id":"b3cb1a15-1242-43e7-98f7-92376eb667c6","html_url":"https://github.com/BanSimplified567/30Days_Javascript_For_Beginners","commit_stats":null,"previous_names":["bansimplified567/30days_javascript_for_beginners"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BanSimplified567%2F30Days_Javascript_For_Beginners","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BanSimplified567%2F30Days_Javascript_For_Beginners/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BanSimplified567%2F30Days_Javascript_For_Beginners/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BanSimplified567%2F30Days_Javascript_For_Beginners/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BanSimplified567","download_url":"https://codeload.github.com/BanSimplified567/30Days_Javascript_For_Beginners/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245300823,"owners_count":20593048,"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":["30daysofcode","30daysofjavascript","async-await","beginner","beginner-friendly","fundamentals","fundamentals-of-programming","javascript","js","practice","projects","promises","tips-and-tricks","tutorial","webdevelopment"],"created_at":"2025-01-29T20:39:26.829Z","updated_at":"2025-03-24T15:40:21.578Z","avatar_url":"https://github.com/BanSimplified567.png","language":null,"readme":"# 30 Days of JavaScript for Beginners\n\nWelcome to my **30 Days of JavaScript for Beginners** program! This project represents the knowledge and skills I've gained during my first two years of learning how to code as a beginner. It's not entirely complete, but I wanted to share my journey and progress with you.\n\n## Table of Contents\n\n1. [Getting Started with JavaScript](#getting-started-with-javascript)\n2. [JavaScript Conditionals](#javascript-conditionals)\n3. [JavaScript Functions](#javascript-functions)\n4. [JavaScript Scope](#javascript-scope)\n5. [JavaScript Arrays](#javascript-arrays)\n6. [JavaScript Loops](#javascript-loops)\n7. [JavaScript Iterators](#javascript-iterators)\n8. [JavaScript Objects](#javascript-objects)\n9. [JavaScript Classes](#javascript-classes)\n10. [JavaScript Modules](#javascript-modules)\n11. [JavaScript Promises](#javascript-promises)\n12. [JavaScript Async-Await](#javascript-async-await)\n13. [JavaScript Requests](#javascript-requests)\n14. [Tips and Tricks for Beginners](#tips-and-tricks-for-beginners)\n\n---\n\n## 1. Getting Started with JavaScript\n\nLearn the basics of JavaScript, including what it is, how it works, and how to set up your development environment. Topics covered include embedding JavaScript in HTML, using the browser console, and writing your first JavaScript program.\n\n```js\n//Console\n\n// =\u003e Hello world!\nconsole.log('Hello world!');\n\n// =\u003e Hello QuickRef.ME\nconsole.warn('hello %s', 'QuickRef.ME');\n\n// Prints error message to stderr\nconsole.error(new Error('Oops!'));\n\n```\n\n```js\n//Variables\nlet x = null;\nlet name = \"Tammy\";\nconst found = false;\n\n// =\u003e Tammy, false, null\nconsole.log(name, found, x);\n\nvar a;\nconsole.log(a); // =\u003e undefined\n\n\n```\n\n```js\n//Strings\nlet single = 'Wheres my bandit hat?';\nlet double = \"Wheres my bandit hat?\";\n\n// =\u003e 21\nconsole.log(single.length);\n\n```\n\n```js\n//Arithmetic Operators\n5 + 5 = 10     // Addition\n10 - 5 = 5     // Subtraction\n5 * 10 = 50    // Multiplication\n10 / 5 = 2     // Division\n10 % 5 = 0     // Modulo\n\n```\n\n```js\n//Comments\n\n// This line will denote a comment\n\n/*\nThe below configuration must be\nchanged before deployment.\n*/\n\n\n\n```\n\n```js\n//Assignment Operators\nlet number = 100;\n\n// Both statements will add 10\nnumber = number + 10;\nnumber += 10;\n\nconsole.log(number);\n// =\u003e 120\n\n\n```\n\n```js\n//String Interpolation\nlet age = 7;\n\n// String concatenation\n'Tommy is ' + age + ' years old.';\n\n// String interpolation\n`Tommy is ${age} years old.`;\n\n\n```\n\n```js\n// let Keyword\nlet count;\nconsole.log(count); // =\u003e undefined\ncount = 10;\nconsole.log(count); // =\u003e 10\n\n\n```\n\n```js\n//const Keyword\nconst numberOfColumns = 4;\nconst fullname = \"Jade Ivan Bringcola\";\nconst knownAs = \"Ban Ban\";\nconst age = 22;\n\n// TypeError: Assignment to constant...\nnumberOfColumns = 8;\n\n\n```\n\n---\n\n## 2. JavaScript Conditionals\n\nUnderstand how to make decisions in your code using conditional statements like `if`, `else if`, `else`, and `switch`. Control the flow of your program based on different conditions.\n\n```js\n//if Statement\nconst isMailSent = true;\n\nif (isMailSent) {\n  console.log('Mail sent to recipient');\n}\n\n```\n\n```js\n//Ternary Operator\nvar x=1;\n\n// =\u003e true\nresult = (x == 1) ? true : false;\n\n```\n\n```js\n// Operators\ntrue || false;       // true\n10 \u003e 5 || 10 \u003e 20;   // true\nfalse || false;      // false\n10 \u003e 100 || 10 \u003e 20; // false\n\n\n// Logical Operators \u0026\u0026\ntrue \u0026\u0026 true;        // true\n1 \u003e 2 \u0026\u0026 2 \u003e 1;      // false\ntrue \u0026\u0026 false;       // false\n4 === 4 \u0026\u0026 3 \u003e 1;    // true\n\n\n// Comparison Operators\n1 \u003e 3                // false\n3 \u003e 1                // true\n250 \u003e= 250           // true\n1 === 1              // true\n1 === 2              // false\n1 === '1'            // false\n\n\n\n//Logical Operator !\nlet lateToWork = true;\nlet oppositeValue = !lateToWork;\n\n// =\u003e false\nconsole.log(oppositeValue);\n\n\n//Nullish coalescing operator ??\nnull ?? 'I win';           //  'I win'\nundefined ?? 'Me too';     //  'Me too'\n\nfalse ?? 'I lose'          //  false\n0 ?? 'I lose again'        //  0\n'' ?? 'Damn it'            //  ''\n\n\n// else if\nconst size = 10;\n\nif (size \u003e 100) {\n  console.log('Big');\n} else if (size \u003e 20) {\n  console.log('Medium');\n} else if (size \u003e 4) {\n  console.log('Small');\n} else {\n  console.log('Tiny');\n}\n// Print: Small\n\n\n// switch Statement\nconst food = 'salad';\n\nswitch (food) {\n  case 'oyster':\n    console.log('The taste of the sea');\n    break;\n  case 'pizza':\n    console.log('A delicious pie');\n    break;\n  default:\n    console.log('Enjoy your meal');\n}\n\n// == vs ===\n0 == false   // true\n0 === false  // false, different type\n1 == \"1\"     // true,  automatic type conversion\n1 === \"1\"    // false, different type\nnull == undefined  // true\nnull === undefined // false\n'0' == false       // true\n'0' === false      // false\n\n// The == just check the value, === check both the value and the type.\n\n```\n\n---\n\n## 3. JavaScript Functions\n\nExplore how to define and use functions to create reusable blocks of code. Learn about function expressions, function declarations, and arrow functions.\n\n```js\n// Functions\n// Defining the function:\nfunction sum(num1, num2) {\n  return num1 + num2;\n}\n\n// Calling the function:\nsum(3, 6); // 9\n\n```\n\n```js\n// Anonymous Functions\n// Named function\nfunction rocketToMars() {\n  return 'BOOM!';\n}\n\n// Anonymous function\nconst rocketToMars = function() {\n  return 'BOOM!';\n}\n\n```\n\n```js\n// Arrow Functions (ES6)\n// With two arguments\nconst sum = (param1, param2) =\u003e {\n  return param1 + param2;\n};\nconsole.log(sum(2,5)); // =\u003e 7\n\n\n// With no arguments\nconst printHello = () =\u003e {\n  console.log('hello');\n};\nprintHello(); // =\u003e hello\n\n\n// With a single argument\nconst checkWeight = weight =\u003e {\n  console.log(`Weight : ${weight}`);\n};\ncheckWeight(25); // =\u003e Weight : 25\n\n\n//Concise arrow functions\nconst multiply = (a, b) =\u003e a * b;\n// =\u003e 60\nconsole.log(multiply(2, 30));\n\n```\n\n```js\n// return Keyword\n// With return\nfunction sum(num1, num2) {\n  return num1 + num2;\n}\n\n// The function doesn't output the sum\nfunction sum(num1, num2) {\n  num1 + num2;\n}\n\n```\n\n```js\n// Calling Fucntions\n// Defining the function\nfunction sum(num1, num2) {\n  return num1 + num2;\n}\n\n// Calling the function\nsum(2, 4); // 6\n\n```\n\n```js\n//Function Expressions\nconst dog = function() {\n  return 'Woof!';\n}\n\n```\n\n```js\n// Functions Parameters\n// The parameter is name\nfunction sayHello(name) {\n  return `Hello, ${name}!`;\n}\n\n```\n\n---\n\n## 4. JavaScript Scope\n\nDive into the concept of scope to understand variable accessibility. This includes global, local, block, and function scopes, along with an explanation of `let`, `const`, and `var`.\n\n```js\n//Scope\nfunction myFunction() {\n\n  var pizzaName = \"Margarita\";\n  // Code here can use pizzaName\n\n}\n\n// Code here can't use pizzaName\n\n```\n\n```js\n//Block Scoped Variables\nconst isLoggedIn = true;\n\nif (isLoggedIn == true) {\n  const statusMessage = 'Logged in.';\n}\n\n// Uncaught ReferenceError...\nconsole.log(statusMessage);\n\n\n```\n\n```js\n// Global Variables\n// Variable declared globally\nconst color = 'blue';\n\nfunction printColor() {\n  console.log(color);\n}\n\nprintColor(); // =\u003e blue\n\n```\n\n```js\n// let vs var\nfor (let i = 0; i \u003c 3; i++) {\n  // This is the Max Scope for 'let'\n  // i accessible ✔️\n}\n// i not accessible ❌\n\n//var is scoped to the nearest function block, and let is scoped to the nearest enclosing block.\n\n```\n\n```js\n// Loops with Closures\n// Prints 3 thrice, not what we meant.\nfor (var i = 0; i \u003c 3; i++) {\n  setTimeout(_ =\u003e console.log(i), 10);\n}\n\n// The variable has its own copy using let, and the variable has shared copy using var.\n\n```\n\n---\n\n## 5. JavaScript Arrays\n\nMaster the use of arrays for storing collections of data. Learn about accessing elements, and using array methods like `push()`, `pop()`, `map()`, `filter()`, and more.\n\n```js\n// Arrays\nconst fruits = [\"apple\", \"orange\", \"banana\"];\n\n// Different data types\nconst data = [1, 'chicken', false];\n\n```\n\n```js\n// Property .length\nconst numbers = [1, 2, 3, 4];\n\nnumbers.length // 4\n\n```\n\n```js\n// Index\n// Accessing an array element\nconst myArray = [100, 200, 300];\n\nconsole.log(myArray[0]); // 100\nconsole.log(myArray[1]); // 200\n\n```\n\n```js\n// Methods .push()\n// Adding a single element:\nconst cart = ['apple', 'orange'];\ncart.push('pear');\n\n// Adding multiple elements:\nconst numbers = [1, 2];\nnumbers.push(3, 4, 5);\n\n// Add items to the end and returns the new array length.\n```\n\n```js\n// Method .pop()\nconst fruits = [\"apple\", \"orange\", \"banana\"];\n\nconst fruit = fruits.pop(); // 'banana'\nconsole.log(fruits); // [\"apple\", \"orange\"]\n\n// Remove an item from the end and returns the removed item.\n\n```\n\n```js\n// Method .shift()\nlet cats = ['Bob', 'Willy', 'Mini'];\n\ncats.shift(); // ['Willy', 'Mini']\n\n// Remove an item from the beginning and returns the removed item.\n\n\n```\n\n```js\n// Method .unshift()\nlet cats = ['Bob'];\n\n// =\u003e ['Willy', 'Bob']\ncats.unshift('Willy');\n\n// =\u003e ['Puff', 'George', 'Willy', 'Bob']\ncats.unshift('Puff', 'George');\n\n// Add items to the beginning and returns the new array length.\n```\n\n```js\n// Method .concat()\nconst numbers = [3, 2, 1]\nconst newFirstNumber = 4\n\n// =\u003e [ 4, 3, 2, 1 ]\n[newFirstNumber].concat(numbers)\n\n// =\u003e [ 3, 2, 1, 4 ]\nnumbers.concat(newFirstNumber)\n\n// if you want to avoid mutating your original array, you can use concat.\n```\n\n---\n\n## 6. JavaScript Loops\n\nUnderstand how to repeat actions in your code using loops such as `for`, `while`, `do...while`, and `for...of`. Learn when and how to use each type of loop.\n\n```js\n// For Loop\nfor (let i = 0; i \u003c 4; i += 1) {\n  console.log(i);\n};\n\n// =\u003e 0, 1, 2, 3\n\n\n```\n\n```js\n// While Loop\nwhile (condition) {\n  // code block to be executed\n}\n\nlet i = 0;\nwhile (i \u003c 5) {\n  console.log(i);\n  i++;\n}\n\n```\n\n```js\n// Do...While Statement\nx = 0\ni = 0\n\ndo {\n  x = x + i;\n  console.log(x)\n  i++;\n} while (i \u003c 5);\n// =\u003e 0 1 3 6 10\n\n```\n\n```js\n// for...of loop\nconst fruits = [\"apple\", \"orange\", \"banana\"];\n\nfor (let fruit of fruits) {\n  console.log(fruit);\n}\n// =\u003e apple\n// =\u003e orange\n// =\u003e banana\n\n```\n\n```js\n// for...in loop\nconst fruits = [\"apple\", \"orange\", \"banana\"];\n\nfor (let index in fruits) {\n  console.log(index);\n}\n// =\u003e 0\n// =\u003e 1\n// =\u003e 2\n\n```\n\n```js\n// Reverse Loop\nconst fruits = [\"apple\", \"orange\", \"banana\"];\n\nfor (let i = fruits.length - 1; i \u003e= 0; i--) {\n  console.log(`${i}. ${fruits[i]}`);\n}\n\n// =\u003e 2. banana\n// =\u003e 1. orange\n// =\u003e 0. apple\n\n```\n\n```js\n// Looping Through Arrays\nfor (let i = 0; i \u003c array.length; i++){\n  console.log(array[i]);\n}\n\n// =\u003e Every item in the array\n\n```\n\n```js\n// Break\nfor (let i = 0; i \u003c 99; i += 1) {\n  if (i \u003e 5) {\n     break;\n  }\n  console.log(i)\n}\n// =\u003e 0 1 2 3 4 5\n\n```\n\n```js\n// Continue\nfor (i = 0; i \u003c 10; i++) {\n  if (i === 3) { continue; }\n  text += \"The number is \" + i + \"\u003cbr\u003e\";\n}\n\n```\n\n```js\n// Nested\nfor (let i = 0; i \u003c 2; i += 1) {\n  for (let j = 0; j \u003c 3; j += 1) {\n    console.log(`${i}-${j}`);\n  }\n}\n\n```\n\n---\n\n## 7. JavaScript Iterators\n\nIterators simplify working with collections of data. Learn how to use methods like `forEach()`, `map()`, `filter()`, and `reduce()` for efficient iteration.\n\n```js\n// Functions Assigned to Variables\nlet plusFive = (number) =\u003e {\n  return number + 5;\n};\n// f is assigned the value of plusFive\nlet f = plusFive;\n\nplusFive(3); // 8\n// Since f has a function value, it can be invoked.\nf(9); // 14\n\n\n```\n\n```js\n// Callback Functions\nconst isEven = (n) =\u003e {\n  return n % 2 == 0;\n}\n\nlet printMsg = (evenFunc, num) =\u003e {\n  const isNumEven = evenFunc(num);\n  console.log(`${num} is an even number: ${isNumEven}.`)\n}\n\n// Pass in isEven as the callback function\nprintMsg(isEven, 4);\n// =\u003e The number 4 is an even number: True.\n\n```\n\n```js\n// Array Method .forEach()\nconst numbers = [28, 77, 45, 99, 27];\n\nnumbers.forEach(number =\u003e {\n  console.log(number);\n});\n\n```\n\n```js\n// array Method .map()\nconst members = [\"Taylor\", \"Donald\", \"Don\", \"Natasha\", \"Bobby\"];\n\nconst announcements = members.map((member) =\u003e {\n  return member + \" joined the contest.\";\n});\n\nconsole.log(announcements);\n\n```\n\n```js\n// Array Method .filter()\nconst randomNumbers = [4, 11, 42, 14, 39];\nconst filteredArray = randomNumbers.filter(n =\u003e {\n  return n \u003e 5;\n});\n\n```\n\n```js\n// Array Method .reduce()\nconst numbers = [1, 2, 3, 4];\n\nconst sum = numbers.reduce((accumulator, curVal) =\u003e {\n  return accumulator + curVal;\n});\n\nconsole.log(sum); // 10\n\n```\n\n---\n\n## 8. JavaScript Objects\n\nDiscover how to create, modify, and use objects. Understand object properties, methods, object literals, and the role of `this` in JavaScript.\n\n```js\n// Create an object using an object literal\nconst car = {\n  // Properties\n  make: \"Toyota\",\n  model: \"Camry\",\n  year: 2020,\n  color: \"Blue\",\n\n  // Method\n  start: function() {\n    console.log(`The ${this.color} ${this.make} ${this.model} is starting.`);\n  },\n\n  // Method using 'this'\n  paint: function(newColor) {\n    this.color = newColor;\n    console.log(`The car has been painted ${this.color}.`);\n  }\n};\n\n// Accessing object properties\nconsole.log(car.make); // Output: Toyota\nconsole.log(car[\"model\"]); // Output: Camry\n\n// Using an object method\ncar.start(); // Output: The Blue Toyota Camry is starting.\n\n// Modifying a property\ncar.color = \"Red\";\nconsole.log(car.color); // Output: Red\n\n// Using a method to modify a property\ncar.paint(\"Green\"); // Output: The car has been painted Green.\n\n// Adding a new property dynamically\ncar.mileage = 30000;\nconsole.log(car.mileage); // Output: 30000\n\n```\n\n```js\n// this Keyword\nconst cat = {\n  name: 'Pipey',\n  age: 8,\n  whatName() {\n    return this.name\n  }\n};\nconsole.log(cat.whatName()); // =\u003e Pipey\n\n```\n\n```js\n// Accessing Properties\nconst apple = {\n  color: 'Green',\n  price: { bulk: '$3/kg', smallQty: '$4/kg' }\n};\nconsole.log(apple.color); // =\u003e Green\nconsole.log(apple.price.bulk); // =\u003e $3/kg\n\n```\n\n```js\n// Naming Properties\n// Example of invalid key names\nconst trainSchedule = {\n  // Invalid because of the space between words.\n  platform num: 10,\n  // Expressions cannot be keys.\n  40 - 10 + 2: 30,\n  // A + sign is invalid unless it is enclosed in quotations.\n  +compartment: 'C'\n}\n\n```\n\n```js\n// Non-existent properties\nconst classElection = {\n  date: 'January 12'\n};\n\nconsole.log(classElection.place); // undefined\n\n```\n\n```js\n// Assignment shorthand syntax\nconst person = {\n  name: 'Tom',\n  age: '22',\n};\nconst {name, age} = person;\nconsole.log(name); // 'Tom'\nconsole.log(age);  // '22'\n\n```\n\n```js\n// Mutable\nconst student = {\n  name: 'Sheldon',\n  score: 100,\n  grade: 'A',\n}\n\nconsole.log(student)\n// { name: 'Sheldon', score: 100, grade: 'A' }\n\ndelete student.score\nstudent.grade = 'F'\nconsole.log(student)\n// { name: 'Sheldon', grade: 'F' }\n\nstudent = {}\n// TypeError: Assignment to constant variable.\n\n```\n\n```js\n// Delete operator\nconst person = {\n  firstName: \"Matilda\",\n  age: 27,\n  hobby: \"knitting\",\n  goal: \"learning JavaScript\"\n};\n\ndelete person.hobby; // or delete person[hobby];\n\nconsole.log(person);\n/*\n{\n  firstName: \"Matilda\"\n  age: 27\n  goal: \"learning JavaScript\"\n}\n*/\n\n\n```\n\n```js\n// Objects as arguments\nconst origNum = 8;\nconst origObj = {color: 'blue'};\n\nconst changeItUp = (num, obj) =\u003e {\n  num = 7;\n  obj.color = 'red';\n};\n\nchangeItUp(origNum, origObj);\n\n// Will output 8 since integers are passed by value.\nconsole.log(origNum);\n\n// Will output 'red' since objects are passed\n// by reference and are therefore mutable.\nconsole.log(origObj.color);\n\n```\n\n```js\n// Short object creation\nconst activity = 'Surfing';\nconst beach = { activity };\nconsole.log(beach); // { activity: 'Surfing' }\n\n```\n\n```js\n// Factory functions\n// A factory function that accepts 'name',\n// 'age', and 'breed' parameters to return\n// a customized dog object.\nconst dogFactory = (name, age, breed) =\u003e {\n  return {\n    name: name,\n    age: age,\n    breed: breed,\n    bark() {\n      console.log('Woof!');\n    }\n  };\n};\n\n\n```\n\n```js\n// Methods\nconst engine = {\n  // method shorthand, with one argument\n  start(adverb) {\n    console.log(`The engine starts up ${adverb}...`);\n  },\n  // anonymous arrow function expression with no arguments\n  sputter: () =\u003e {\n    console.log('The engine sputters...');\n  },\n};\n\nengine.start('noisily');\nengine.sputter();\n\n```\n\n```js\n// Getters and setters\nconst myCat = {\n  _name: 'Dottie',\n  get name() {\n    return this._name;\n  },\n  set name(newName) {\n    this._name = newName;\n  }\n};\n\n// Reference invokes the getter\nconsole.log(myCat.name);\n\n// Assignment invokes the setter\nmyCat.name = 'Yankee';\n\n```\n\n---\n\n## 9. JavaScript Classes\n\nLearn about classes, which provide a blueprint for creating objects. Understand constructors, methods, inheritance, and the `super` keyword.\n\n```js\n// Static Methods\nclass Dog {\n  constructor(name) {\n    this._name = name;\n  }\n\n  introduce() {\n    console.log('This is ' + this._name + ' !');\n  }\n\n  // A static method\n  static bark() {\n    console.log('Woof!');\n  }\n}\n\nconst myDog = new Dog('Buster');\nmyDog.introduce();\n\n// Calling the static method\nDog.bark();\n\n```\n\n```js\n// Class\nclass Song {\n  constructor() {\n    this.title;\n    this.author;\n  }\n\n  play() {\n    console.log('Song playing!');\n  }\n}\n\nconst mySong = new Song();\nmySong.play();\n\n```\n\n```js\n// Class Constructor\nclass Song {\n  constructor(title, artist) {\n    this.title = title;\n    this.artist = artist;\n  }\n}\n\nconst mySong = new Song('Bohemian Rhapsody', 'Queen');\nconsole.log(mySong.title);\n\n```\n\n```js\n// CLass Methods\nclass Song {\n  play() {\n    console.log('Playing!');\n  }\n\n  stop() {\n    console.log('Stopping!');\n  }\n}\n\n```\n\n```js\n// extends\n// Parent class\nclass Media {\n  constructor(info) {\n    this.publishDate = info.publishDate;\n    this.name = info.name;\n  }\n}\n\n// Child class\nclass Song extends Media {\n  constructor(songData) {\n    super(songData);\n    this.artist = songData.artist;\n  }\n}\n\nconst mySong = new Song({\n  artist: 'Queen',\n  name: 'Bohemian Rhapsody',\n  publishDate: 1975\n});\n\n```\n\n---\n\n## 10. JavaScript Modules\n\nOrganize your code into reusable chunks with modules. Learn how to create modules and use `import` and `export` statements effectively.\n\n```js\n// Export\n// myMath.js\n\n// Default export\nexport default function add(x,y){\n    return x + y\n}\n\n// Normal export\nexport function subtract(x,y){\n    return x - y\n}\n\n// Multiple exports\nfunction multiply(x,y){\n    return x * y\n}\nfunction duplicate(x){\n    return x * 2\n}\nexport {\n    multiply,\n    duplicate\n}\n\n```\n\n```js\n// Import\n// main.js\nimport add, { subtract, multiply, duplicate } from './myMath.js';\n\nconsole.log(add(6, 2)); // 8\nconsole.log(subtract(6, 2)) // 4\nconsole.log(multiply(6, 2)); // 12\nconsole.log(duplicate(5)) // 10\n\n// index.html\n\u003cscript type=\"module\" src=\"main.js\"\u003e\u003c/script\u003e\n\n```\n\n```js\n// Export Module\n// myMath.js\n\nfunction add(x,y){\n    return x + y\n}\nfunction subtract(x,y){\n    return x - y\n}\nfunction multiply(x,y){\n    return x * y\n}\nfunction duplicate(x){\n    return x * 2\n}\n\n// Multiple exports in node.js\nmodule.exports = {\n    add,\n    subtract,\n    multiply,\n    duplicate\n}\n\n```\n\n```js\n// Reqire Module\n// main.js\nconst myMath = require('./myMath.js')\n\nconsole.log(myMath.add(6, 2)); // 8\nconsole.log(myMath.subtract(6, 2)) // 4\nconsole.log(myMath.multiply(6, 2)); // 12\nconsole.log(myMath.duplicate(5)) // 10\n\n```\n\n---\n\n## 11. JavaScript Promises\n\nPromises allow you to manage asynchronous operations. Learn how to create, resolve, and chain promises, as well as handle errors using `.catch()`.\n\n```js\n// .catch() method\nconst promise = new Promise((resolve, reject) =\u003e {\n  setTimeout(() =\u003e {\n    reject(Error('Promise Rejected Unconditionally.'));\n  }, 1000);\n});\n\npromise.then((res) =\u003e {\n  console.log(value);\n});\n\npromise.catch((err) =\u003e {\n  console.error(err);\n});\n\n```\n\n```js\n// Promise states\nconst promise = new Promise((resolve, reject) =\u003e {\n  const res = true;\n  // An asynchronous operation.\n  if (res) {\n    resolve('Resolved!');\n  }\n  else {\n    reject(Error('Error'));\n  }\n});\n\npromise.then((res) =\u003e console.log(res), (err) =\u003e console.error(err));\n\n```\n\n```js\n// Executor funxtion\nconst executorFn = (resolve, reject) =\u003e {\n  resolve('Resolved!');\n};\n\nconst promise = new Promise(executorFn);\n\n```\n\n```js\n// setTimeout()\nconst loginAlert = () =\u003e{\n  console.log('Login');\n};\n\nsetTimeout(loginAlert, 6000);\n\n```\n\n```js\n// .then() method\nconst promise = new Promise((resolve, reject) =\u003e {\n  setTimeout(() =\u003e {\n    resolve('Result');\n  }, 200);\n});\n\npromise.then((res) =\u003e {\n  console.log(res);\n}, (err) =\u003e {\n  console.error(err);\n});\n\n```\n\n```js\n// Promise.all()\nconst promise1 = new Promise((resolve, reject) =\u003e {\n  setTimeout(() =\u003e {\n    resolve(3);\n  }, 300);\n});\nconst promise2 = new Promise((resolve, reject) =\u003e {\n  setTimeout(() =\u003e {\n    resolve(2);\n  }, 200);\n});\n\nPromise.all([promise1, promise2]).then((res) =\u003e {\n  console.log(res[0]);\n  console.log(res[1]);\n});\n\n```\n\n```js\n// Avoiding nested Promise and .then()\nconst promise = new Promise((resolve, reject) =\u003e {\n  setTimeout(() =\u003e {\n    resolve('*');\n  }, 1000);\n});\n\nconst twoStars = (star) =\u003e {\n  return (star + star);\n};\n\nconst oneDot = (star) =\u003e {\n  return (star + '.');\n};\n\nconst print = (val) =\u003e {\n  console.log(val);\n};\n\n// Chaining them all together\npromise.then(twoStars).then(oneDot).then(print);\n\n```\n\n```js\n// Creating\nconst executorFn = (resolve, reject) =\u003e {\n  console.log('The executor function of the promise!');\n};\n\nconst promise = new Promise(executorFn);\n\n```\n\n```js\n// Claining multiple .then()\nconst promise = new Promise(resolve =\u003e setTimeout(() =\u003e resolve('dAlan'), 100));\n\npromise.then(res =\u003e {\n  return res === 'Alan' ? Promise.resolve('Hey Alan!') : Promise.reject('Who are you?')\n}).then((res) =\u003e {\n  console.log(res)\n}, (err) =\u003e {\n  console.error(err)\n});\n\n```\n\n```js\n// Fake http Request with Promise\nconst mock = (success, timeout = 1000) =\u003e {\n  return new Promise((resolve, reject) =\u003e {\n    setTimeout(() =\u003e {\n      if(success) {\n        resolve({status: 200, data:{}});\n      } else {\n        reject({message: 'Error'});\n      }\n    }, timeout);\n  });\n}\nconst someEvent = async () =\u003e {\n  try {\n    await mock(true, 1000);\n  } catch (e) {\n    console.log(e.message);\n  }\n}\n\n```\n\n---\n\n## 12. JavaScript Async-Await\n\nSimplify working with promises using `async` and `await`. Learn how these keywords make asynchronous code more readable and easier to debug.\n\n```js\n// Asyncronous\nfunction helloWorld() {\n  return new Promise(resolve =\u003e {\n    setTimeout(() =\u003e {\n      resolve('Hello World!');\n    }, 2000);\n  });\n}\n\nconst msg = async function() { //Async Function Expression\n  const msg = await helloWorld();\n  console.log('Message:', msg);\n}\n\nconst msg1 = async () =\u003e { //Async Arrow Function\n  const msg = await helloWorld();\n  console.log('Message:', msg);\n}\n\nmsg(); // Message: Hello World! \u003c-- after 2 seconds\nmsg1(); // Message: Hello World! \u003c-- after 2 seconds\n\n\n```\n\n```js\n// Resolving Promises\nlet pro1 = Promise.resolve(5);\nlet pro2 = 44;\nlet pro3 = new Promise(function(resolve, reject) {\n  setTimeout(resolve, 100, 'foo');\n});\n\nPromise.all([pro1, pro2, pro3]).then(function(values) {\n  console.log(values);\n});\n// expected =\u003e Array [5, 44, \"foo\"]\n\n\n```\n\n```js\n// Async Await Promises\nfunction helloWorld() {\n  return new Promise(resolve =\u003e {\n    setTimeout(() =\u003e {\n      resolve('Hello World!');\n    }, 2000);\n  });\n}\n\nasync function msg() {\n  const msg = await helloWorld();\n  console.log('Message:', msg);\n}\n\nmsg(); // Message: Hello World! \u003c-- after 2 seconds\n\n\n```\n\n```js\n// Error Handling\nlet json = '{ \"age\": 30 }'; // incomplete data\n\ntry {\n  let user = JSON.parse(json); // \u003c-- no errors\n  console.log( user.name ); // no name!\n} catch (e) {\n  console.error( \"Invalid JSON data!\" );\n}\n\n\n```\n\n```js\n// Await Operator\nfunction helloWorld() {\n  return new Promise(resolve =\u003e {\n    setTimeout(() =\u003e {\n      resolve('Hello World!');\n    }, 2000);\n  });\n}\n\nasync function msg() {\n  const msg = await helloWorld();\n  console.log('Message:', msg);\n}\n\nmsg(); // Message: Hello World! \u003c-- after 2 seconds\n\n\n```\n\n---\n\n## 13. JavaScript Requests\n\nHandle HTTP requests using the `fetch()` API or libraries like Axios. Learn to send GET and POST requests and process JSON data efficiently.\n\n```js\n// JSON\nconst jsonObj = {\n  \"name\": \"Rick\",\n  \"id\": \"11A\",\n  \"level\": 4\n};\n\n```\n\n```js\n// XMLHttpRequest\nconst xhr = new XMLHttpRequest();\nxhr.open('GET', 'mysite.com/getjson');\n\n// XMLHttpRequest is a browser-level API that enables the client to script data transfers via JavaScript, NOT part of the JavaScript language.\n\n```\n\n```js\n// GET\nconst req = new XMLHttpRequest();\nreq.responseType = 'json';\nreq.open('GET', '/getdata?id=65');\nreq.onload = () =\u003e {\n  console.log(xhr.response);\n};\n\nreq.send();\n\n```\n\n```js\n// POST\nconst data = {\n  fish: 'Salmon',\n  weight: '1.5 KG',\n  units: 5\n};\nconst xhr = new XMLHttpRequest();\nxhr.open('POST', '/inventory/add');\nxhr.responseType = 'json';\nxhr.send(JSON.stringify(data));\n\nxhr.onload = () =\u003e {\n  console.log(xhr.response);\n};\n\n```\n\n```js\n// fetch api\nfetch(url, {\n    method: 'POST',\n    headers: {\n      'Content-type': 'application/json',\n      'apikey': apiKey\n    },\n    body: data\n  }).then(response =\u003e {\n    if (response.ok) {\n      return response.json();\n    }\n    throw new Error('Request failed!');\n  }, networkError =\u003e {\n    console.log(networkError.message)\n  })\n}\n\n```\n\n```js\n// JSON Formatted\nfetch('url-that-returns-JSON')\n.then(response =\u003e response.json())\n.then(jsonResponse =\u003e {\n  console.log(jsonResponse);\n});\n\n```\n\n```js\n// promise url parameter fetch api\nfetch('url')\n.then(\n  response  =\u003e {\n    console.log(response);\n  },\n rejection =\u003e {\n    console.error(rejection.message);\n);\n\n```\n\n```js\n// Fetch API Function\nfetch('https://api-xxx.com/endpoint', {\n  method: 'POST',\n body: JSON.stringify({id: \"200\"})\n}).then(response =\u003e {\n  if(response.ok){\n   return response.json();\n  }\n throw new Error('Request failed!');\n}, networkError =\u003e {\n  console.log(networkError.message);\n}).then(jsonResponse =\u003e {\n  console.log(jsonResponse);\n})\n\n```\n\n```js\n// async await syntax\nconst getSuggestions = async () =\u003e {\n  const wordQuery = inputField.value;\n  const endpoint = `${url}${queryParams}${wordQuery}`;\n  try{\nconst response = await fetch(endpoint, {cache: 'no-cache'});\n    if(response.ok){\n      const jsonResponse = await response.json()\n    }\n  }\n  catch(error){\n    console.log(error)\n  }\n}\n\n```\n\n---\n\n## 14. Tips and Tricks for Beginners\n\nExplore practical advice for new developers, including debugging techniques, efficient coding practices, and common pitfalls to avoid.\n\n---\n\nHappy coding! 🚀\n\nFeel free to explore each topic and practice using the examples and exercises provided.\n\n## Cloning the Repository\n\nIf you'd like to clone this repository, please check in with me first to confirm it's okay. Once you have my permission, you can follow these steps:\n\n1. Open your terminal.\n2. Run the following command to clone the repository:\n\n   ```bash\n   git clone https://github.com/BanSimplified567/30Days_Javascript_For_Beginners.git\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbansimplified567%2F30days_javascript_for_beginners","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbansimplified567%2F30days_javascript_for_beginners","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbansimplified567%2F30days_javascript_for_beginners/lists"}