{"id":21017512,"url":"https://github.com/rootz491/javascript-basics","last_synced_at":"2026-05-19T08:38:51.069Z","repository":{"id":39966845,"uuid":"285387837","full_name":"rootz491/JavaScript-basics","owner":"rootz491","description":"i'll learn and master Javascript ASAP !!!","archived":false,"fork":false,"pushed_at":"2023-03-05T13:47:18.000Z","size":4088,"stargazers_count":0,"open_issues_count":8,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2026-01-31T12:23:37.850Z","etag":null,"topics":["javascript"],"latest_commit_sha":null,"homepage":"https://first-app-491.web.app/","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/rootz491.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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2020-08-05T19:41:20.000Z","updated_at":"2023-04-11T15:31:11.000Z","dependencies_parsed_at":"2023-02-08T17:00:40.614Z","dependency_job_id":null,"html_url":"https://github.com/rootz491/JavaScript-basics","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/rootz491/JavaScript-basics","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rootz491%2FJavaScript-basics","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rootz491%2FJavaScript-basics/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rootz491%2FJavaScript-basics/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rootz491%2FJavaScript-basics/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rootz491","download_url":"https://codeload.github.com/rootz491/JavaScript-basics/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rootz491%2FJavaScript-basics/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33208150,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-19T07:54:09.561Z","status":"ssl_error","status_checked_at":"2026-05-19T07:54:08.508Z","response_time":58,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["javascript"],"created_at":"2024-11-19T10:19:40.964Z","updated_at":"2026-05-19T08:38:51.039Z","avatar_url":"https://github.com/rootz491.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# JavaScript -\u003e True path\n    \n    closure \n    hoisting \n    scope\n    \n    Array \n    various array method : \n    pop push shift unshift splice slice toString join sort reverse etc...(bohot sare he mdn me jake dekh har ek method and practice those )\n    spread operator\n    \n    Object\n    creating object by literals or by object constructor or different methods\n    functions/methods inside objects \n    optional chaining \n    concatination of objects\n    function.prototype methods\n    accessing objects by key, value and object.entries\n    call(), apply(), bind methods\n    \n    functions \n    functions and objects (class by es5 methods)\n    callback functions \n    default parameters \n    generators\n    \n    try-catch \n    \n    Time Intervals : \n    settimeout setinterval etc...\n    \n    then advance stuffs later .............\n    \n    And Now Dom \n    \n    accessing Dom elements\n    children/parent nodes relation\n    creating / adding  new dom elements \n    various js methods like for removing class from an elemen or adding a class or toggle etc ... search for it MDN is the place ..\n    Event Listeners click drag drop etc ..... \n    \n    Ye sab toh seekkhne ke liye topics hogaye \n    beech beech me padha bhi kar kuch aur like \n    changing object to array kese karte he ya nodlist to arraay ye sab \n    instagram me follow kar devs ko twitter me bhi tidbits vagera milte rahenge and ha \n    \n    fir baad me dom me advance stuff seekhna like \n    promise or fetch or ajax etc ....\n\n## Domains:\n    https://rootz491-users.netlify.app/ \n    https://first-app-491.web.app/\n\n## topics:  \n    \n    * Beginning with:\n    1.  variables\n    2.  functions ( and types )\n    3.  string \u0026 concatenation -\u003e ${magic}\n    4.  if else conditionals\n    5.  Array\n    6.  Object and This\n    7.  loop\n    8.  DOM manipulation (little bit)\n\n\n\n## note: \n    \n    1.  == can be used to check for equality, but we use === to strict typeCheck to ensure that type and value, both are same.\n    2.  'this' refers to window object.\n    3.  cannot compare objects.\n    4.  var str = \"karan\";                   // type : string\n        var str = new string(\"karan\");       // type : object\n    5.  index returning function returns -1 if not found what's looking for.\n    6.  indexOF() and search() are NOT same/equal.\n    7.  substring() is similar to slice(), difference is substring() doesnot take negative parameters.\n    8.  substr() is similar to slice(), The difference is that the second parameter specifies the length of the extracted part.\n    9.  (condition)?(true):(false); is a ternary operator.\n    10. document.getElementsByTagName(\"h1\")[0].innerHTML=\"HELLO\"; is to change the content of first h1 tag.\n    11. document.getElementsById(\"demo\").style.display=\"none\"; is to change the css property called display of element whose ID is \"demo\".\n    12. document.getElementsByClassName(\"test\")[0].innerHTML=\"hello\" is to change content of element with className: \"test\", first element.\n    13. document.getElementById(\"image\").src=\"abc.jpeg\"; is to change img source of img element with Id: \"image\".   {attribute change}\n    14. document.getElementById(\"demo\").addEventListener(\"click\", myFunction); is to add \"onClick\" event listener using given tags.\n    15. Parsing HTML with regular expressions should be avoided, but pattern matching an HTML string with regular expressions is completely fine.\n    16. Using closures in this way provides benefits that are normally associated with object-oriented programming. In particular, data hiding and encapsulation.\n    17. typeof of javascript object's properties is always STRING, even if it's a string.\n\n## methods: BASICS\n    \n    *   text.length;                // returns length of text\n    *   text.indexOf(\"karan\");      // return index of first occurence of text.\n    *   text.lastIndexOf(\"is\", 15); // searches backwards means if the second parameter is 15, the search starts at position 15, and searches to the beginning of the string.\n    *   text.search(\"karan\");       // search in a string for a string\n    *   text.slice(0,-10);          // take slice from string  \n    *   text.substring(0,12);       // almost similar,  no -ive values.\n    *   text.substr(7,10)           // 1st arg is index no. \u0026 2nd arg is size to extract.\n    *   text.replace(\"from\", \"to\"); // to replace some text from string.\n    *   text.toUpperCase();         // to convert string to upper case.\n    *   text.toLowerCase();         // to covert string to lower case.\n    *   text.trim();                // removes whitespace from both sides of a string\n    *   object.hasOwnProperty();    //  takes property name as argument and returns whether that property belongs to object or not using boolean (T/F)\n    *   parseInt(str, radix);       //  takes input as a sting and radix, converts str into number to the base radix.\n    *   Math.random();              //  Returns a random number b/w 0 and 1, but not 1.\n    *   Math.floor(decimal);        //  takes decimal as input and retuns rounded-off interger nearest to it.\n    *   Math.max(a,b);              //  find largest of two numbers.\n    *   Math.sqrt(x);               //  to find square root of number.\n    *   prompt()                    //  method displays a dialog box that prompts the visitor for input.\n    *   parseInt(str);              //  convert str into integer\n    *   parseFloat(str);            //  convert str into float\n\n\n## ES6\n    \n    *   let and const should be used to declare and initialize variables.\n    *   const makes a variable as constant, and it is good practice to give name to 'const' variables in upper case.\n    *   declare array using 'const', we can't reassign whole array \n        i.e.  const l1 = [2,3,4];\n              l1 = [5,6,7];         //  throw an error\n              l1[0] = 5;            //  work just fine\n              l1[1] = 6;            //  work just fine\n              l1[2] = 7;            //  work just fine\n    *   Object.freeze(obj1); is a function used to make the object constant meaning that noone can change the properties or data manipulation.\n    *   functions :\n            old way -\n                var fun = function() {\n                    return \"have fun!\";\n                }\n            ES6 way-\n                const fun = () =\u003e \"have fun!\";  // auto return statement\n            Also {for functions with arguments}\n                const square = a =\u003e a*a;        // single argument function\n                const add = (a, b) =\u003e a+b;      // multiple line argument\n                const inc = (a=1, b=1) =\u003e a+b;  // assigning default value to arguments.\n    *   spread operator (...) is used to spread the array into it's elements.\n            uses: \n                -\u003e  Takes input multiple argument as an array to pass through function.\n                        const sum = (...args) =\u003e args.reduce((a, b) =\u003e a+b ,0);\n                        //  function to return sum of array of any size.   \n                -\u003e  To copy array into another array\n                        arr1 = [...arr2];\n                        //  copy items of arr2 into arr1.\n                -\u003e  To concatinate two arrays together.\n                        arr1 = [...arr1, ...arr2];  // concatinate arr2, arr1 into arr1.    \n                        arr1 = [...arr2, \"coffee\", ...arr1]   // can also add your own items while concatinating.\n    *   Rest operator (...) looks same as spread operator but work quite opposite, used to combine multiple items into single array.\n    *   Destructing assignment is special syntax to extract values from object.\n            use:\n                *   usage with simple objects.\n                const obj = {                           //  common object\n                    name: \"karan\",\n                    age: 18,\n                    lang: \"JavaScript\"\n                };                                      \n                -\u003e  const {name, lang} = obj;           //  extraction of value of item - name, lang from 'obj' object.\n                -\u003e  const {name: myName, lang: myLang}  //  extraction of values into different data types.\n                *   usage with complex (nested) objects.\n                const LOCAL_FORECAST = {                //  nested object\n                  yesterday: { low: 61, high: 75 },\n                  today: { low: 64, high: 77 },\n                  tomorrow: { low: 68, high: 80 }\n                };\n                -\u003e  const { today: {low: todayLow, high: todayHigh} }; //get \n                it? :)\n    \n    \n    *   array = Object.values(object_name); // copy object values (NOT keys) into Object.\n            const arr = Object.values(ob1);\n            -\u003e  arr = [value1, value2, ...valueN]\n        after making it into array, iterate over the values using 'spread' operator [...arr]\n    \n        alternative [OLD]\n            const something = (obj.value1, ... , obj.valueN) =\u003e {//something}\n    \n    *   const karan = {...person}   //  to make copy of object\n        \n    *   using SPREAD operator we can spread the list datatype into unique values to pass it as an argument, \n    *   during DESTRUCTURING, we are extracting the values into unique variables rather than passing them as argument. \n            const person {\n                name: \"karan\",\n                age: 18,\n                job: \"Web developer\"\n            }\n        -\u003e  const { name, age, job } = person;\n    \n    *   Destructing a function is great idea, potentially saving lines of code!\n            const fn = ({ name, age, jobTitle }) =\u003e { //something }\n    *   Destructuring for assigning new name of variable AKA object's property.\n            const { oldVar: newVar } = object\n            const fn = ({name: fullName, age, job}) = {}  // assigning name within parameter.  \n    \n    *   filter() to filter-out item by properties on basis of some of it's values.\n          -\u003e    const filteredCities = countries.filter(country =\u003e country.code === 'IN')\n    \n    *   restructuring distinct data into an object.\n            countries.map(({city, code, longitude, latitude}, index) =\u003e (\n               \u003ctr key={index}\u003e\n                    \u003ctd\u003e{city}\u003c/td\u003e\n                    \u003ctd\u003e{code}\u003c/td\u003e\n                    \u003ctd\u003e{longitude}\u003c/td\u003e\n                    \u003ctd\u003e{latitude}\u003c/td\u003e\n               \u003c/tr\u003e\n            ))\n    \n    *   map \u003cdata-type\u003e :   is a advanced datatype much like objects, but with some fency functions.\n        -\u003e  creating map:   \n            1.  const myMap = new map()    OR   //  empty object\n            2.  const myself = new map({        //  using object(S)\n                    name: \"karan\",\n                    hobby: [\"coding\", \"gaming\", \"cooking\"]\n                    address: {\n                        country: \"India\",\n                        state: \"Uttarakhand\",\n                        city: \"Dehradun\",\n                        District: \"Doiwala\",\n                        village: \"Kaluwala\"\n                    }\n                })                           OR\n            3.  const newMap = new Map([        //  using arrays   \n                    ['a', 'alpha'],\n                    ['b', 'bravo'],\n                    ['c', 'charlie']\n                ]);\n        -\u003e  adding key \u0026 values to map:\n                myself.set(lang) = [\"C\", \"C++\", \"Python\", \"javascript\", \"Bash\"]\n        -\u003e  getting key \u0026 value from map:\n                const myName = myself.get(name)    //  \"karan\"\n        -\u003e  getting all keys ONLY in form of array:\n                myself.keys()       //  [\"name\", \"hobby\", \"address\", \"lang\"]\n        -\u003e  getting all values ONLY in from of array:\n                myself.values()     //  [\"karan\", [\"coding\"...\"gaming\"], {...}]\n        -\u003e  deleting key - value pair from map:\n                myself.delete(key)      \n        -\u003e  completely clear data from map:\n                myself.clear()\n\n\n\n\n\n## RegEx: Regular expressions\n    \n    -\u003e  helps to find patterns, 'stringName.test(regex)' returns true if found!\n            let myString = \"my name is karan\";\n            let reg = /karan/;\n            let result = reg.test(myString);      --\u003e  true\n    -\u003e  regex search is case sensetive meaning that, you cannot search for 'Karan' as 'karan'.      --\u003e     false\n    -\u003e  search for multiple patterns using OR operator '|'\n            let reg = /karan|komal/ --\u003e  returns true if found any one of them.\n    -\u003e  search for pattern and extract it. using .match()\n            let reg = /karan/\n            let result = myString.match(reg); \n    -\u003e  wildcard character or dot '.' lets to search of similar pattens by completing it.\n            let reg = /kar./ -\u003e return 'karan' or 'karma' or anyword thats present and starts with 'kar'\n            let reg = /.an/  -\u003e return 'pan', 'can', 'karan', or any word thats present and ends with 'an'.\n    -\u003e  replace()  is used to find and replace the pattern\n            let str = \"karan is good guy.\"\n            let regex  = /karan/ig;\n            let replaceText = \"komal\"\n            const result = str.replace(regex, replaceText)\n                        --\u003e result = 'komal is good guy'\n    -\u003e  using '$' sign makes replacement poweful, by allowing to capture the groups and then reuse them. like chaging order of string etc.\n            let str = \"karan is good guy\"\n            let regex = \"/(\\w+)\\s(\\w+)\\s(\\w+)\\s(\\w+)/\"\n            console.log(str.replace(regex, \"$3 $4 $2 $1\"))\n                -\u003e  \"good guy is karan\"\n    \n    -\u003e  FLAGS:\n        *   'i' =   ignore the difference b/w uppercase and lowercase.\n                let reg = /karan/i;    --\u003e true for 'KARAN' or 'KaraN'\n        *   'g' =   To search or extract a pattern more than once.\n                let reg = /karan/g;    --\u003e return all karan from string in from of array.\n        *   Can also use more than one flag at once like\n                let reg = /karan|KOMAL/ig   --\u003e search of all 'karan' and 'komal' is irrespective of upper or lower case.\n        *   character classes '[]' =     allow you to define a group of characters you wish to match by placing them inside square brackets.\n                let string = \"karan is a good uno-handler.\"\n                let reg = /[aeiou]/ig   -\u003e find all word with vowel character.\n                let result = string.match[reg]\n        *   character set '[a-f]' =  finds words having any of character within this range.\n                let reg = /[a-z]/ig     -\u003e find all words from string, flag i,g\n        *   character set range includes numbers like [1-9] =\n                let string = \"k491\"\n                let reg = /[a-z0-9]/ig  -\u003e  returns ['k', 's', '4', '9', '1']\n        *   negated character set '^' = using this with character set, and search with exceptoin, like [^aeiou] means non-vowel characters.\n                let reg = /[^0-9]/ig    -\u003e return all character except numbers including white space and ful-stop.\n        *   '+' = matches characters that occur one or more times\n                let string = \"kaaaaraaan\"\n                let reg = /a+/ig\n                let result = string.match(reg)  -\u003e  return ['aaaa', 'aaa']\n        *   '*' = matches characters that occur zero or more times\n                let string = \"kaaAaaaraan\";\n                let regex = /Aa*/g;\n                let result = string.match(regex);   -\u003e  returns ['Aaaa']\n        *   lazy match = finds the smallest possible part of the string that satisfies the regex pattern\n                let text = \"\u003ch1\u003eWinter is coming\u003c/h1\u003e\";\n                let myRegex = /\u003ch.?\u003e/; \n                let result = text.match(myRegex);   -\u003e return [\"\u003ch1\u003e\"]\n        *   caret '^' outside the character set  =  find pattern at beginning.\n                let text = \"Rick and Morty\"\n                let regex = /^Rick/\n                let result = text.match(regex);     -\u003e  return true\n        *   '$' =   search pattern at the end of the screen.\n                let regex = /Morty$/    \n                let result = reget.test(text);       -\u003e  result true\n        *   shorthand =\u003e    '/\\w/ig'    is equivalent to    '/[A-Za-z0-9_]+/'\n        *   shorthand =\u003e    '/\\W/ig'    is equivalent to    '[^A-Za-z0-9_]'\n        *   shorthand =\u003e    '/\\d/'      is equivalent to    '[0-9]'\n        *   shorthand =\u003e    '/\\D/'      is equivalent to    '[^0-9]'\n    \n    ==\u003e    Check for username:\n        1) Usernames can only use alpha-numeric characters.\n        2) The only numbers in the username have to be at the end. There can be zero or more of them at the end. Username cannot start with the number.\n        3) Username letters can be lowercase and uppercase.\n        4) Usernames have to be at least two characters long. A two-character username can only use alphabet letters as characters.\n    \n        regex:      let userCheck = /^[a-z]([0-9]{2,}|[a-z]+\\d*)$/i;\n                    let userCheck = /^[a-z][a-z]+\\d*$|^[a-z]\\d\\d+$/i;\n    \n        *   '\\s'    =\u003e  search for whitespace.\n        *   '\\S'    =\u003e  search for non-whitespace.\n        *   quantity specifier '{}' =\u003e  Specify the lower and upper number of patterns with quantity specifiers.\n                    let A = \"woooooow\";\n                    let regex = /wo{4,6}w/\n                    console.log(A.match(regex))         -\u003e      true\n        *   only want a specific number of matches. \n                    let name = \"karaaaan\"\n                    let regex = /kara{4}n/\n                            -\u003e  only true for 'karaaaan', having 4 a's\n        *   '?'     =\u003e  This checks for zero or one of the preceding element\n                        You can think of this symbol as saying the previous element is optional.\n                    let name = 'karan'\n                    let regex = /karaa?n/i\n                            -\u003e  true for both 'karan' and 'karaan'\n        *   lookahead '?=...'   =\u003e  just lookahead for specific pattern, but won't match it.\n                    let password = \"abc123\";\n                    let checkPass = /(?=\\w{3,6})(?=\\D*\\d)/;\n                    checkPass.test(password); // Returns true\n        *   name = \"karan\"\n            regex = /k(omal|aran)/i\n            regex.test(name)        -\u003e true for komal or karan\n    \n        =\u003e  string that starts and ends with same vowel.    //  'abcda' is TRUE\n                let re =/^([aeiou]).*\\1$/;\n        \n\n\n\n## Javascript DOM:\n    \n    -\u003e  Fetch elements: \n            *   getElementById('_id_')                      //  unique item\n            *   getElementsByClassName('_class_')           //  multiple items\n            *   getElementByTagName('li')                   \n            *   querySelector('#id OR .class OR tagName')   //  all in one - single\n            *   querySelectorAll('same')                    //  all-in-one multiple items\n    \n            -\u003e  By sudo classes or attributes:\n                    *   querySelector('input[type=\"submit\"]')\n                    *   querySelector('.class_name:last-child')     //  or :nth-child(3) or \n                    *   querySelector('.class_name:nth-of-type(odd)')\n    \n            -\u003e  Parent, Children and siblings:\n                let item = document.querySelector('#item')\n                    *   item.parentNode                 //  PARENT\n                    *   item.parentElement              //  similar \n                    *   item.parentNode.parentNode      //  parent of parent\n                    *   item.childNode                  //  CHILD\n                    *   item.children                   //  return all children as an array\n                    *   item.firstElementChild          \n                    *   item.lastElementChild\n                    *   item.nextElementSiblings        //  SIBLING\n                    *   item.previousElementSibling\n            \n    -\u003e  Changes in elements:\n            *   textContent\n            *   innerText\n            *   innerHTML\n            \n    -\u003e  Create element:\n            *   let newDiv = createElement['div']\n            *   newDiv.className = 'anything'\n            *   newDiv.id = 'anything'\n            *   let newText = document.createTextNode('Hello, World!')\n            *   newDiv.appendChild(newText)\n            *   let container = docuemnt.querySelector('.container')\n            *   container.appendChild(newDiv)\n    \n    -\u003e  Event Listener:\n            *   var button = document.getElementById('header')\n            *   button.addEventListener('click', doSomething = (e) =\u003e { //body })\n    \n            -\u003e  Uses:\n                    *   e.target.id             //  name of ID\n                    *   e.target.className      //  className\n                    *   e.target.classList      //  list of classes used in element\n                    *   e.type          //  type of event listener\n                    *   e.clientX       //  mouse position on X axis with respect to window.\n                    *   e.clientY\n                    *   e.offsetX       //  mouse position on X axis with respect to current element.\n                    *   e.offsetY\n                    *   e.altket        //  check if alt key is pressed while trigger eventListener.\n                    *   e.crtlkey\n                    *   e.shiftkey\n    \n            -\u003e  Types of events:\n                    *   addEventListener('click', function)\n                    *   addEventListener('dbclick', function)                                 \n                    *   addEventListener('mousedown', function)    \n                    *   addEventListener('mouseup', function)   //  when button clicked and then released the buttton, then trigger\n                    *   addEventListener('mouseenter', function)    //  whole element included\n                    *   addEventListener('mouseleave', function)\n                    *   addEventListener('mouseover', function)     //  only triggered element, not even it's chidren\n                    *   addEventListener('mouseout', function)      \n                    *   addEventListener('keydown', function)   //  capture key when it's pressed, meaning event trigger\n                    *   addEventListener('keyup', function)     //  capture key when it's pressed and release, meaning event trigger\n                    *   addEventListener('input', function)     //  trigger if anything happened with input.\n                    *   addEventListener('focus', function)     //  trigger, if it's focused\n                    *   addEventListener('submit', function)    //  trigger, when submit button clicked.\n    \n                    =\u003e  to capture submit button click event correctly, use so it will no do it's default functtionality, i.e. 'submitting':    e.preventDefault();\n                \n\n## ES2020\n    \n    -\u003e  nullish coalescing operator (??):  logical operator that returns its right-hand side operand when its left-hand side operand is null or undefined, and otherwise returns its left-hand side operand.\n            \n            var b;\n            let c = 45;\n            let a = b ?? 45;        //  a = 45, because b is null \n\n\n\n## Advance JavaScript\n    \n    --\u003e https://dev.to/ryanameri/mastering-hard-parts-of-javascript-callbacks-i-3aj0  \n    \n    --\u003e high order functions:   funcitons which take another function as input, or return a function.\n    \n    *    Exercise 1:\n            const addTwo = x =\u003e x+2;\n    \n    *   Exercise 2:\n            const addS = str =\u003e str + 's';\n    \n    *   Exercise 3:\n            const maps = (list, callback) =\u003e {\n                let newArr = []\n                for(let num=0; num\u003clist.length; num++) {\n                    newArr.push(callback(list[num]))\n                }\n                return newArr;\n            }\n            \n            console.log(maps([1,2,3], addTwo))\n    \n    *   Exercise 4:\n            const forEach = (str, callback) =\u003e {\n              for (let i=0; i\u003cstr.length; i++) {\n                callback(str[i]);\n              }\n            }\n            \n            let alphabet = \"\";\n            const letters = [\"a\", \"b\", \"c\", \"d\"];\n            forEach(letters, function (char) {\n              alphabet += char;\n            });\n            \n            console.log(alphabet);      //  \"abcd\"\n    \n    *   Exercise 5:\n            const mapWith = (array, callback) =\u003e{\n              let newArr = [];\n              forEach(array, (item) =\u003e {\n                newArr.push(callback(item));\n              });\n              return newArr;\n            }\n            \n            console.log(mapWith([1, 2, 3], addTwo));\n    \n    *   Exercise 6:\n            const reduce = (array, callback, initial) =\u003e {\n              let new_initial = initial ?? array[0];\n              forEach(array, (item) =\u003e {\n                new_initial = callback(new_initial, item);  \n              })\n              return new_initial;\n            };\n            \n            const nums = [4, 1, 3, 10];\n            \n            const add = function (a, b) {\n              return a + b;\n            };\n            \n            console.log(reduce(nums, add, 0))\n    \n\n\n\n\n\n# MORE: From the Way of Nik\n    \n    -\u003e  Closures:\n        \u003e   closures can be used as fucntion factory to create more funcitons.\n        \u003e   closures can be used for data hiding and encapsulation.\n\n   \t-\u003e\tasync programming (ES6):\n   \t\t\u003e\thold promise-deffered function in microTask queue.\n   \t\t\u003e\thold callback functions in task queue (callback queue).\n   \t\t\u003e\tprioritize microtask queue over callback queue.\n   \t\t\u003e\twhen web browser API finishes, add functions to call stack (run the function) when:\n   \t\t\t\u003e\tcall stack is empty\n   \t\t\t\u003e\tall global code run (Have the event loop check this condition)\n   \t\t-\u003e\tfeatures:\n   \t\t\t\u003e\tnon-blocking applications:\twe don't have to wait in a single thread and don't block further code from running.\n   \t\t\t\u003e\tHowever long it take:\twe can't predict when the browser feature's work will finish so we let JS to handle automatically running the function on it's completion.\n   \t\t\t\u003e\tweb applications:\tAsynchronous Javascript is the back-bone of the modern web letting us build fast 'non-blocking' applications.\n   \t\t\t\n   \t-\u003e\tclasses (object oriented programming):\n   \t\t\u003e\t\n\n\n#   JSUnconf - functional programming\n    \n    \u003e   use map, reduce and filter instead of for loop to iterate over the items in the array.\n\n\n\n\n\n\n\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frootz491%2Fjavascript-basics","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frootz491%2Fjavascript-basics","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frootz491%2Fjavascript-basics/lists"}