{"componentChunkName":"component---node-modules-rocketseat-gatsby-theme-docs-core-src-templates-docs-query-js","path":"/basic-js/contents","result":{"data":{"mdx":{"id":"328c8031-5c83-5ed1-b16d-40661c942ec5","excerpt":"Building blocks Before extending the functionality of our website with JavaScript and manipulate the content of our website, we have to go through the basics of…","fields":{"slug":"/basic-js/contents/"},"frontmatter":{"title":"JavaScript fundamentals","description":"JavaScript fundamentals","image":null,"disableTableOfContents":null},"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"JavaScript fundamentals\",\n  \"description\": \"JavaScript fundamentals\"\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h1\", {\n    \"id\": \"building-blocks\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h1\",\n    \"href\": \"#building-blocks\",\n    \"aria-label\": \"building blocks permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Building blocks\"), mdx(\"p\", null, \"Before extending the functionality of our website with JavaScript and manipulate the content of our website, we have to go through the basics of programming. The most fundamental building blocks are:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Variables\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Conditionals\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Loops\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Functions\")), mdx(\"h2\", {\n    \"id\": \"variables\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#variables\",\n    \"aria-label\": \"variables permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Variables\"), mdx(\"p\", null, \"JavaScript \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"variables\"), \" are containers for storing data values. The 3 containers that you need to keep in mind are: \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"var\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"const\"), \" & \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"let\"), \" ; and naming also plays an important role. This \\uD83D\\uDCD6 article \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Variables#what_is_a_variable\"\n  }, \"What is a variable?\"), \", will give you a wide understanding of these concepts, and you will also find an introducction to \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Arrays []\"), \" that we will cover further in more detail\", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \".\")), mdx(\"p\", null, \"In programming, we're always working with data. Data is information. It can be a username, the number of likes a post has, the text in an email, a video file, etc. Anything you can see on a web page is data. For now we're going to work with data we create ourselves, but later on we will be working with data across the web!\"), mdx(\"p\", null, \"Our first tool to handle data will be \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"variables\"), \". But what are they?\"), mdx(\"p\", null, \"Imagine you're cooking and you want to use pepper. If you have all your spices mixed together it would be very hard to find the ones you want.\"), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"300px\"\n    }\n  }, \"\\n      \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"92.5%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/webp;base64,UklGRtQAAABXRUJQVlA4IMgAAADwBQCdASoUABMAPtFep0+oJKMiKAgBABoJYgCdG1HOLPYBjPhrgvx1YIsuG3Wt+w7LU/faGlOwAAD+uln/Wj9TO9a3iAJJwbNRjuquPxQa4UPbdIRwpOiWdfcp+uIC4D6ho8OTTFA8vL+bjL/369aWzeqOtfSpHmCtoDb58CqPAR3EpO0ppeWF1h2i1oyHJXI8CZ3K+5BG73uCDZN0pWsUhE1k89tP7JG1CjgAFp0FoxaFQGrbEbaj6cdwTqPwecGQMyFJIoAAAA==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"picture\", {\n    parentName: \"span\"\n  }, \"\\n          \", mdx(\"source\", {\n    parentName: \"picture\",\n    \"srcSet\": [\"/static/c576dfd673057b45adc6e034cf0ba019/8ac56/mixed-spices.webp 240w\", \"/static/c576dfd673057b45adc6e034cf0ba019/c85cb/mixed-spices.webp 300w\"],\n    \"sizes\": \"(max-width: 300px) 100vw, 300px\",\n    \"type\": \"image/webp\"\n  }), \"\\n          \", mdx(\"source\", {\n    parentName: \"picture\",\n    \"srcSet\": [\"/static/c576dfd673057b45adc6e034cf0ba019/8ac56/mixed-spices.webp 240w\", \"/static/c576dfd673057b45adc6e034cf0ba019/c85cb/mixed-spices.webp 300w\"],\n    \"sizes\": \"(max-width: 300px) 100vw, 300px\",\n    \"type\": \"image/webp\"\n  }), \"\\n          \", mdx(\"img\", {\n    parentName: \"picture\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"src\": \"/static/c576dfd673057b45adc6e034cf0ba019/c85cb/mixed-spices.webp\",\n    \"alt\": \"Mixed spices\",\n    \"title\": \"Mixed spices\",\n    \"loading\": \"lazy\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    }\n  }), \"\\n        \"), \"\\n    \")), mdx(\"p\", null, \"But if we have containers for each one we can write names on each one and we can know what's inside of it by just looking at the name.\"), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"300px\"\n    }\n  }, \"\\n      \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"92.5%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/webp;base64,UklGRr4AAABXRUJQVlA4ILIAAADwBACdASoUABMAPtFYpE0oJSOiKA1RABoJZgDCoJPBXURIig2qen01xih3OfV5WLgA/vYT4EY/quqd2HxY+4lukX0vhr+bi2WyxPbDK5HQwtf/9a5dig75c0ZLKNlpHd9re3xN52oQ4qpg1SkuClkyT6O2xD/8bxpNvFlWC9+NZv4OXzSRgn1CiSN8LjBZoIo6JA9Z2v2/MNtscWKJtj6V0URZKnSxoFF4+t8B0pm+AAAA')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"picture\", {\n    parentName: \"span\"\n  }, \"\\n          \", mdx(\"source\", {\n    parentName: \"picture\",\n    \"srcSet\": [\"/static/cb7a33a38cc7a0cac5c3dbaa6e904234/8ac56/spice-jars.webp 240w\", \"/static/cb7a33a38cc7a0cac5c3dbaa6e904234/c85cb/spice-jars.webp 300w\"],\n    \"sizes\": \"(max-width: 300px) 100vw, 300px\",\n    \"type\": \"image/webp\"\n  }), \"\\n          \", mdx(\"source\", {\n    parentName: \"picture\",\n    \"srcSet\": [\"/static/cb7a33a38cc7a0cac5c3dbaa6e904234/8ac56/spice-jars.webp 240w\", \"/static/cb7a33a38cc7a0cac5c3dbaa6e904234/c85cb/spice-jars.webp 300w\"],\n    \"sizes\": \"(max-width: 300px) 100vw, 300px\",\n    \"type\": \"image/webp\"\n  }), \"\\n          \", mdx(\"img\", {\n    parentName: \"picture\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"src\": \"/static/cb7a33a38cc7a0cac5c3dbaa6e904234/c85cb/spice-jars.webp\",\n    \"alt\": \"Spice jars\",\n    \"title\": \"Spice jars\",\n    \"loading\": \"lazy\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    }\n  }), \"\\n        \"), \"\\n    \")), mdx(\"p\", null, \"Variables are like containers. They help us work keep everything organized and make sure that we have access to our data in a clean and easy way.\\nIn a variable we can store pretty much anything that the computer can understand, like text or number, as well as other more mysterious data that we will take a look at later.\"), mdx(\"p\", null, \"To understand how to use them, first let's take a look at a some code:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"console.log(\\\"Hello world!\\\");\\n\")), mdx(\"p\", null, \"If we run this code we will see something like this in our browser.\"), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"285px\"\n    }\n  }, \"\\n      \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"10.416666666666668%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAACCAIAAADXZGvcAAAACXBIWXMAAAsTAAALEwEAmpwYAAAATUlEQVQI12NQVdVQVla3s3Oyt3c2M7PS1ze2tra3sLABcjU0dIBSKioauBCDioq6kpKajY29ra0jULOJiYWTkxuQBBqnpqYFlALqx4UANokU//dGXpwAAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"picture\", {\n    parentName: \"span\"\n  }, \"\\n          \", mdx(\"source\", {\n    parentName: \"picture\",\n    \"srcSet\": [\"/static/5b43ef11df6868a16525680239026c11/8ac56/hello-world.webp 240w\", \"/static/5b43ef11df6868a16525680239026c11/6d56d/hello-world.webp 285w\"],\n    \"sizes\": \"(max-width: 285px) 100vw, 285px\",\n    \"type\": \"image/webp\"\n  }), \"\\n          \", mdx(\"source\", {\n    parentName: \"picture\",\n    \"srcSet\": [\"/static/5b43ef11df6868a16525680239026c11/8ff5a/hello-world.png 240w\", \"/static/5b43ef11df6868a16525680239026c11/0e2fe/hello-world.png 285w\"],\n    \"sizes\": \"(max-width: 285px) 100vw, 285px\",\n    \"type\": \"image/png\"\n  }), \"\\n          \", mdx(\"img\", {\n    parentName: \"picture\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"src\": \"/static/5b43ef11df6868a16525680239026c11/0e2fe/hello-world.png\",\n    \"alt\": \"Hello world js\",\n    \"title\": \"Hello world js\",\n    \"loading\": \"lazy\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    }\n  }), \"\\n        \"), \"\\n    \")), mdx(\"p\", null, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"console.log\"), \" will print whatever is in between the parenthesis - ( ) - to the console in our browser's developer tools.\\nWhat do you think this next code might do?\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"let movie = \\\"Avengers 2\\\";\\n\\nconsole.log(movie);\\n\")), mdx(\"p\", null, \"Going back to the spices analogy, imagine we have a container that we name \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"movie\"), \" and we put the text inside of it.\"), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"385px\"\n    }\n  }, \"\\n      \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"64.99999999999999%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAIAAAAmMtkJAAAACXBIWXMAAAsTAAALEwEAmpwYAAABEElEQVQoz6VSy26DMBDM//8Yx6a5VKWgSBXBIMD4gd826YKLU6RWQeocVothdsY7nO7/wOnIR857pbVUasCYC2GsfZDnDbFPNTWMc8IooTQvy7c8vyEUXz1RjmQhZYXQMI5t190ahMfxocwY67qu7/thGKByzimlyRE0PcaUcWjCHKBaa30I3+S6rl8vl5fzOcuyj6JACDVt+9M8eLbOJTvGGufdbmHOOTj91fwkhV8RVsEdOSosbhmDTSqlpmniG6AHI4QxuIsxy3RtdDSyW5jRehICIgEXYQOMhkO7xjPf51UZuP5ozjAOPKfHeIXn5JQzJmQJA2OpNeXsEDn9Yahp3suiuF4/q4qsQR4l/4Uv2v76VjjAU4QAAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"picture\", {\n    parentName: \"span\"\n  }, \"\\n          \", mdx(\"source\", {\n    parentName: \"picture\",\n    \"srcSet\": [\"/static/8bbfe48f27dac41185033e4461fe0386/8ac56/jar-in.webp 240w\", \"/static/8bbfe48f27dac41185033e4461fe0386/63fcf/jar-in.webp 385w\"],\n    \"sizes\": \"(max-width: 385px) 100vw, 385px\",\n    \"type\": \"image/webp\"\n  }), \"\\n          \", mdx(\"source\", {\n    parentName: \"picture\",\n    \"srcSet\": [\"/static/8bbfe48f27dac41185033e4461fe0386/8ff5a/jar-in.png 240w\", \"/static/8bbfe48f27dac41185033e4461fe0386/409e6/jar-in.png 385w\"],\n    \"sizes\": \"(max-width: 385px) 100vw, 385px\",\n    \"type\": \"image/png\"\n  }), \"\\n          \", mdx(\"img\", {\n    parentName: \"picture\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"src\": \"/static/8bbfe48f27dac41185033e4461fe0386/409e6/jar-in.png\",\n    \"alt\": \"Declare variable\",\n    \"title\": \"Declare variable\",\n    \"loading\": \"lazy\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    }\n  }), \"\\n        \"), \"\\n    \")), mdx(\"p\", null, \"And imagine in the next line we take that container, grab the content and we put it on the screen.\"), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"398px\"\n    }\n  }, \"\\n      \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"62.916666666666664%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAIAAAAmMtkJAAAACXBIWXMAAAsTAAALEwEAmpwYAAABUElEQVQoz41S7XLCIBDM+79bxz8da8axiSJVE0ggQAiJwW7A2qjTj50MYY5bbve4ZPR+OE8YhgF7f7lcwvIfJEJK3ZqP4+FlsXhLU3o4xAMfgE3btkoprXVcjTE64EouOd8Sssny1+VyuVo1TdP3/e36Rinn3I6QNE0Z5/Fe5IzjmJyKAiFeVdrozjmo6LpOSimEwAapqIc8/4V4IwRgn5SM4QfD1lpEHYoOU1lE4hVlyUB+cGsiGSYppXtKt7sdY+x4Os01o5E4qqoKKq7dnJORDT9Znr9nGQ9kF8g3kagPFTBZ13WMf8tWoW83TLJnlQFwouy5+GtldMh7NGSMZ13vUOeOLMSPnpUx82iYl/M8In4hc8iS8lgUaLvtbC1Ff18Zbv3TzMHs9M54W0Lpar1ON5ucEFbxhzw0DPOEOWutnb4ABKfKfw4wXPRPiNY+ATM386Z/i50kAAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"picture\", {\n    parentName: \"span\"\n  }, \"\\n          \", mdx(\"source\", {\n    parentName: \"picture\",\n    \"srcSet\": [\"/static/92e16e87791488b5d7350cd3bb5d28a2/8ac56/jar-out.webp 240w\", \"/static/92e16e87791488b5d7350cd3bb5d28a2/579c2/jar-out.webp 398w\"],\n    \"sizes\": \"(max-width: 398px) 100vw, 398px\",\n    \"type\": \"image/webp\"\n  }), \"\\n          \", mdx(\"source\", {\n    parentName: \"picture\",\n    \"srcSet\": [\"/static/92e16e87791488b5d7350cd3bb5d28a2/8ff5a/jar-out.png 240w\", \"/static/92e16e87791488b5d7350cd3bb5d28a2/692d4/jar-out.png 398w\"],\n    \"sizes\": \"(max-width: 398px) 100vw, 398px\",\n    \"type\": \"image/png\"\n  }), \"\\n          \", mdx(\"img\", {\n    parentName: \"picture\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"src\": \"/static/92e16e87791488b5d7350cd3bb5d28a2/692d4/jar-out.png\",\n    \"alt\": \"Log variable\",\n    \"title\": \"Log variable\",\n    \"loading\": \"lazy\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    }\n  }), \"\\n        \"), \"\\n    \")), mdx(\"p\", null, \"In technical terms we would say: in the first line we \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"declare\"), \" a variable called \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"movie\"), \" and then \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"assign\"), \" the \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"value\"), \" \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"Avengers 2\"), \" to it. Then in the next line, we log the content of our variable to the console.\"), mdx(\"p\", null, \"To \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"declare\"), \" a variable means to \\\"create\\\" a variable, to \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"assign\"), \" means to \\\"store\\\" some data inside it, and the \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"value\"), \" is the data that the variable will hold. Let's break down how we do it:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"let movie = \\\"Avengers 2\\\";\\n\")), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"First we use the special word \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"let\"), \" to tell the computer that we want to create a variable.\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Then we give our variable a name. This name can be (almost) anything, but there are a few rules. You can check out the bullet points in this \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.dummies.com/article/technology/programming-web-design/javascript/naming-javascript-variables-142522\"\n  }, \"article\"), \".\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"We use the \\\"=\\\" symbol. This will instruct the computer to store inside our variable whatever is on the right side of it.\")), mdx(\"p\", null, \"\\uD83D\\uDCD6 Try to create some variables with different texts and print all of them to the console.\"), mdx(\"p\", null, \"We can also \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"re-assign\"), \" variables, like so:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"let movie = \\\"Avengers 2\\\";\\n\\nmovie = \\\"Titanic\\\";\\n\\nconsole.log(movie);\\n\")), mdx(\"p\", null, \"\\uD83D\\uDCD6 What do you think will happen? Try to run the code above.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"let movie = \\\"Avengers 2\\\";\\n\\nconsole.log(movie);\\n\\nmovie = \\\"Titanic\\\";\\n\\nconsole.log(movie);\\n\")), mdx(\"p\", null, \"\\uD83D\\uDCD6 What about this one?\"), mdx(\"h3\", {\n    \"id\": \"variable-types\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#variable-types\",\n    \"aria-label\": \"variable types permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Variable types\"), mdx(\"p\", null, \"There's two main type types of variables: \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"let\"), \" & \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"const\"), \". The difference is that while with \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"let\"), \" we can reassign the variable to a new value, with \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"const\"), \" we can't. Once we declare the variable, we won't be able to change the value inside it. Maybe now it doesn't make much sense but sometimes we want to make sure that some values don't change.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"const gravity = 9.8;\\n\")), mdx(\"p\", null, \"\\uD83D\\uDCD6 Try to declare a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"const\"), \" and reassign it. What does the console say?\"), mdx(\"p\", null, \"There is a third variable type: \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"var\"), \", but it's an old way of writing JavaScript and we don't need to worry about it. If you come across some code using it, just know that it's almost the same as \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"let\"), \".\"), mdx(\"h2\", {\n    \"id\": \"keywords-operators\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#keywords-operators\",\n    \"aria-label\": \"keywords operators permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Keywords, operators\"), mdx(\"p\", null, \"In every programming language there's special words and symbols that the computer will understand as instructions.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"const myVar = \\\"Hello world!\\\";\\n\")), mdx(\"p\", null, \"We've seen that the words \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"let\"), \" & \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"const\"), \" will tell the computer that we want to create a variable.\"), mdx(\"p\", null, \"These special words are called \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"keywords\"), \" and they're reserved for the language to use. If we try to use them for other purposes, like naming variables, we will get an error.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"const let = 2; // SyntaxError\\n\")), mdx(\"p\", null, \"When these words and symbols are instructions, they are called \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"operators\"), \". For example, the symbol \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"=\"), \" will express that we want to assign the value on the right ('Hello world!') to the variable we're creating (myVar).\"), mdx(\"h2\", {\n    \"id\": \"data-types\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#data-types\",\n    \"aria-label\": \"data types permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Data types\"), mdx(\"p\", null, \"There is a set of different types of values JavaScript will understand:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Number\"), mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"It can be an integer (a number without decimals. Ex: 34) or a float (a number which can have decimals. Ex: 34.245). It must be between -9007199254740991 and 9007199254740991.\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"String\"), mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Text. A sequence of characters. A character can be a letter ('a'), a sign ('?'), an emoji ('\\uD83D\\uDE03'), ...\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Boolean\"), mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"true\"), \" or \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"false\"), \". A simple \", mdx(\"em\", {\n    parentName: \"li\"\n  }, \"yes\"), \" or \", mdx(\"em\", {\n    parentName: \"li\"\n  }, \"no\"), \".\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Undefined\"), mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"It represents a missing value. If you try to log a variable with no value assigned, it will log \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"undefined\"), \".\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Null\"), mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Very similar to \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"undefined\"), \". It also represents a missing value but it has some very minor differences.\")))), mdx(\"p\", null, \"There are two more advanced types. It's not necessary to get into them:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"BigInt\"), mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"If you need values bigger than 9007199254740991 or smaller than -9007199254740991, this is the data type for those.\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Symbol\"), mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"A unique value. Useful if it's necessary to give something a unique 'brand'.\")))), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"JavaScript is a \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"dynamic\"), \" language, which means that we can assign different data types to the same variable.\\nIn a \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"static\"), \" language (like Java or C++ among others), this code would throw an error. But luckily for us, not in JavaScript.\"), mdx(\"pre\", {\n    parentName: \"blockquote\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"let numberOfPets = 2;\\n\\nnumberOfPets = \\\"Hello world!\\\";\\n\"))), mdx(\"h3\", {\n    \"id\": \"number\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#number\",\n    \"aria-label\": \"number permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Number\"), mdx(\"p\", null, \"Any number between -9007199254740991 and 9007199254740991.\"), mdx(\"h4\", {\n    \"id\": \"arithmetic-operators\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h4\",\n    \"href\": \"#arithmetic-operators\",\n    \"aria-label\": \"arithmetic operators permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Arithmetic operators\"), mdx(\"p\", null, \"We can make mathematical operations like sum and division.\\nHere's a \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#arithmetic_operators\"\n  }, \"list\"), \" of the available arithmetic operators.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"console.log(2 + 2);\\nconsole.log(4 / 2);\\n\")), mdx(\"p\", null, \"One operator that might be unfamiliar is the modulo (%) operator. In programming it's not related to percentages. Instead it will give you the \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://www.mathsisfun.com/numbers/division-remainder.html\"\n  }, \"remainder\"), \" of a division. A use case is to know if a number is even or odd. If you divide an even number by 2, the remainder will be 0, but the remainder of an odd number divided by 2 will be 1.\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"Note that a artihmetic operation is an \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"expression\"), \", and it will be resolved before other operations. First, the computer evaluates 2 + 2, then stores the result in the variable.\"), mdx(\"pre\", {\n    parentName: \"blockquote\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"const sum = 2 + 2;\\n\\nconsole.log(sum); // 4\\n\"))), mdx(\"p\", null, \"We can also assign different values to variables and use the variable names instead of the values themselves\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"const firstValue = 2 + 2;\\nconst secondValue = 3;\\n\\nconsole.log(firstValue - secondValue); // 1\\n\\n// two different ways to do the same thing\\n\\nconst partial = 2 + 2;\\nconst total = partial - 3;\\n\\nconsole.log(total); // 1\\n\")), mdx(\"h4\", {\n    \"id\": \"mathematical-assignment-operators\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h4\",\n    \"href\": \"#mathematical-assignment-operators\",\n    \"aria-label\": \"mathematical assignment operators permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Mathematical assignment operators\"), mdx(\"p\", null, \"Imagine we're in a restaurant's kitchen and we have a variable named \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"orders\"), \", which keeps track of the amount of orders the costumers have been placing.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"let orders = 247;\\n\\nconsole.log(orders);\\n\")), mdx(\"p\", null, \"Now 39 new costumers have walked in the restaurant and placed orders. We need to update our variable. Let's try:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"let orders = 247;\\nlet ordersUpdated = orders + 39;\\n\\nconsole.log(ordersUpdated);\\n\")), mdx(\"p\", null, \"This works, but we have to create a new variable for each update, and change the console.log to print the new variable. This is very messy and inefficient. Let's try again.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"let orders = 247;\\n\\norders = orders + 3;\\n\\nconsole.log(orders);\\n\")), mdx(\"p\", null, \"This is looking better! It might seem counterintuitive how the second line works. The right side of an assignment operator (=) will resolve \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"before\"), \" assigning the new value to the variable. So in this case:\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"In the first line we have our previous value.\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"In the second line, the computer resolves the right hand side first \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"orders + 3\"), \" (247 + 3).\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"When the right hand side is resolved, the total is re-assigned to our variable \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"orders\"), \".\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"The value is printed to the console.\")), mdx(\"p\", null, \"While this works fine, there's an even easier way of doing it:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"let orders = 247;\\n\\norders += 3;\\n\\nconsole.log(orders);\\n\")), mdx(\"p\", null, \"Here we're using a new \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"assignment operator\"), \" (+=). The result is exactly the same as the previous example but it's a slightly easier way of writing it.\\nThere's more assignment operators that you can check out \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_operators#assignment_operators\"\n  }, \"here\"), \". Take a look at the mathematical ones and don't worry about the rest. You will probably never ever use them.\"), mdx(\"h4\", {\n    \"id\": \"incrementdecrement-operators\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h4\",\n    \"href\": \"#incrementdecrement-operators\",\n    \"aria-label\": \"incrementdecrement operators permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Increment/decrement operators\"), mdx(\"p\", null, \"And sometimes you just want to count up (1, 2, 3, ...) or down (10, 9, 8, ...) a number. There's operators for that too.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"let count = 0;\\n\\ncount++;\\n\\nconsole.log(count); // 1\\n\\ncount--;\\n\\nconsole.log(count); // 0\\n\")), mdx(\"p\", null, \"The increment operator (++) will simply add 1 to the value in the varible. The decrement operator (--) will subtract 1.\"), mdx(\"h4\", {\n    \"id\": \"math-operations\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h4\",\n    \"href\": \"#math-operations\",\n    \"aria-label\": \"math operations permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), mdx(\"inlineCode\", {\n    parentName: \"h4\"\n  }, \"Math\"), \" operations\"), mdx(\"p\", null, \"There's more complex operations we can perform with the object \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Math\"), \". It might seem a little bit like magic now, but when we get to \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"functions\"), \" it will make more sense.\\nThere's operations like rounding decimals in a value,\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"const rounded = Math.round(12.67);\\n\\nconsole.log(rounded); // 13\\n\")), mdx(\"p\", null, \"Or getting a random number.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"const random = Math.random();\\n\\nconsole.log(random); // 0.3\\n\")), mdx(\"h3\", {\n    \"id\": \"string\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#string\",\n    \"aria-label\": \"string permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"String\"), mdx(\"p\", null, \"In order for the computer to understand that what we are writing is some plain text value and not part of our code instructions, we need to surround it using one of these three symbols:\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Apostrophes: \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"'Hello world!'\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Quotation marks: \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"\\\"Hello world!\\\"\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Backticks: \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"`Hello world!`\"))), mdx(\"h4\", {\n    \"id\": \"concatenation\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h4\",\n    \"href\": \"#concatenation\",\n    \"aria-label\": \"concatenation permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Concatenation\"), mdx(\"p\", null, \"There's many cases in which we want to join to pieces of text. For example, here we have the general greeting, and the username and we need to combine them.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"const username = \\\"Zainab\\\";\\nconst greeting = \\\"Hello, \\\";\\n\\nconsole.log(greeting + username); // Hello, Zainab\\n\")), mdx(\"p\", null, \"When working with strings the \\\"+\\\" symbol is called \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"concatenation operator\"), \", and will tell the computer to join two strings together, instead of summing to values like it did working with numbers. We can also use the assignment operator \\\"+=\\\" like so:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"const greeting = \\\"Hello, \\\";\\n\\ngretting += \\\"Zainab\\\";\\n\\nconsole.log(greeting); // Hello, Zainab\\n\")), mdx(\"h4\", {\n    \"id\": \"interpolation\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h4\",\n    \"href\": \"#interpolation\",\n    \"aria-label\": \"interpolation permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Interpolation\"), mdx(\"p\", null, \"There's another way of joining strings together using variables. The syntax looks a little funny but it's shorter when you want to use multiple variables. It looks like this:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"const sentTo = \\\"zainab.rf@outlook.com\\\";\\nconst date = \\\"February 6th, 2025\\\";\\nconst time = \\\"10:45 pm\\\";\\n\\nconst fullString = `Email sent to ${sentTo} on ${date} at ${time}.`;\\n\\nconsole.log(fullString); // Email sent to zainab.rf@outlook.com on February 6th, 2025 at 10:45 pm.\\n\")), mdx(\"h4\", {\n    \"id\": \"string-methods\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h4\",\n    \"href\": \"#string-methods\",\n    \"aria-label\": \"string methods permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"String methods\"), mdx(\"p\", null, \"Strings have tools called methods (which we will get to explain more in depth in the \\\"Objects\\\" chapter) to make our life a little easier when dealing with them. Let's start with a basic one:\"), mdx(\"h5\", {\n    \"id\": \"length\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h5\",\n    \"href\": \"#length\",\n    \"aria-label\": \"length permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Length\"), mdx(\"p\", null, \"With this method we can automatically get the number of characters in the given string. All we need to do is write a dot after our string (.) and type \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"length\"), \". Notice that it will count every character in the string, including blank spaces and symbols.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"const paragraph = \\\"I really don't want to count the characters one by one!\\\";\\n\\nconst numberOfCharacters = paragraph.length;\\n\\nconsole.log(numberOfCharacters); // 55\\n\")), mdx(\"h5\", {\n    \"id\": \"includes\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h5\",\n    \"href\": \"#includes\",\n    \"aria-label\": \"includes permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Includes\"), mdx(\"p\", null, \"This method will check if a string contains a certain \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"substring\"), \", that is a smaller string inside of it. Notice how it lowercase and uppercase letters count as different characters. This method gives us one of two values: true or false. These values are called \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"boolean\"), \" and will be very useful for the \\\"Conditionals\\\" section comming up.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"const paragraph = \\\"I wonder if it contains the word PANDA!\\\";\\n\\nconst uppercase = paragraph.includes(\\\"PANDA\\\");\\nconst lowercase = paragraph.includes(\\\"panda\\\");\\n\\nconsole.log(lowercase); // true\\nconsole.log(uppercase); // false\\n\")), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"There's a lot more methods. Some will look very scary until we take a look at \\\"Arrays\\\". Here's a \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Useful_string_methods\"\n  }, \"list\"), \" of some common ones and a little explanation for each. And \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/includes\"\n  }, \"here\"), \" we have all of the available ones.\")), mdx(\"h2\", {\n    \"id\": \"typeof-operator\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#typeof-operator\",\n    \"aria-label\": \"typeof operator permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), mdx(\"inlineCode\", {\n    parentName: \"h2\"\n  }, \"typeof\"), \" operator\"), mdx(\"p\", null, \"What if we have a value and we want to check what type it is? We have a handy tool for that. We will place the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"typeof\"), \" operator before our variable and it will give us a string with the name of the type\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"const pet = \\\"cat\\\";\\nconst amount = 2;\\nconst otherAmount = \\\"2\\\";\\n\\nconsole.log(typeof pet); // string\\nconsole.log(typeof amount); // number\\nconsole.log(typeof otherAmount); // string\\n\")), mdx(\"p\", null, \"See what happened with our variable \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"otherAmount\"), \"? When we place one character or more (like letters, numbers, symbols, ...) inside apostrophes (''), quotes (\\\"\\\") or backticks (``), we are telling the computer that we want it to take it as text.\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Exercises on FreeCodeCamp\")), mdx(\"p\", null, \"\\uD83D\\uDCA1 Well done! now we will make a good use of all this learning and have fun achieving the following exercises at FreeCodeCamp. They might seem a lot, but we think it's important that you start familiarizing with all these new concepts. All of them are really important and will be of use on a daily basis.\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Basic JS Exercises\"))), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/declare-javascript-variables\"\n  }, \"Declare Javascript variables\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/initializing-variables-with-the-assignment-operator\"\n  }, \"Initializing variables with the assignment operator\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/understanding-case-sensitivity-in-variables\"\n  }, \"Understanding case sensitivity in variables\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/finding-a-remainder-in-javascript\"\n  }, \"Finding a remainder in Javascript\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/compound-assignment-with-augmented-addition\"\n  }, \"Compound assignment with augmented addition\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/concatenating-strings-with-plus-operator\"\n  }, \"Concatenating strings with Plus Operator\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/constructing-strings-with-variables\"\n  }, \"Constructing strings with variables\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/use-bracket-notation-to-find-the-first-character-in-a-string\"\n  }, \"Use bracket notation to find the first character in a string\"))), mdx(\"h2\", {\n    \"id\": \"comments-in-javascript\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#comments-in-javascript\",\n    \"aria-label\": \"comments in javascript permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Comments in JavaScript\"), mdx(\"p\", null, \"Follow the instructions in this \\uD83D\\uDDA5 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://www.bitdegree.org/learn/javascript-comment\"\n  }, \"tutorial\"), \", and you'll learn how to write JavaScript comments and be able to leave notes in your JavaScript code.\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"Even though it's not strictly required, it's very useful to start learning \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"shortcuts\"), \" for VSCode. A shortcut is a combination of keys that perform a specific action.\\nFor example, to make a single line comment, place the cursor in a line with text and then press \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"command\"), \" + \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"/\"), \" if you're on a Mac computer, or \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"control\"), \" + \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"/\"), \" if you're on a PC computer.\\nAnd for a multiline comment, select a piece of text by clicking and dragging your mouse, then press \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"alt\"), \" + \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"shift\"), \" + \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"a\"), \".\\n\\uD83D\\uDCD6 Try these two types of comments by writing them and by using shortcuts.\")), mdx(\"h2\", {\n    \"id\": \"conditionals\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#conditionals\",\n    \"aria-label\": \"conditionals permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Conditionals\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Conditional statements\"), \" allow us to represent decision making in JavaScript, from the choice that must be made (e.g. \\\"one cookie or two\\\"), to the resulting outcome of those choices. The most common type of conditional statement is the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"if...else\"), \" and the operators to keep in mind are:\"), mdx(\"p\", null, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"===\"), \" means equal\"), mdx(\"p\", null, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"!==\"), \" means not equal\"), mdx(\"p\", null, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<\"), \" or \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \">\"), \" test if one value is less than or greater than another.\"), mdx(\"p\", null, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<=\"), \" or \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \">=\"), \" test if one value is less than or or equal to, greater than or equal to.\"), mdx(\"p\", null, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"&&\"), \" means AND\"), mdx(\"p\", null, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"||\"), \" means OR\"), mdx(\"p\", null, mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://docs.google.com/presentation/d/e/2PACX-1vQczsEd-RYUGUZu9oHbLjRUwbIWdu_Wj0piGMbPMtDSEkzE3ixljeQTiye1r5gLNg/pub?start=false&loop=false&delayms=3000\"\n  }, \"Here\"), \" you have a step by step explanation of the different type of conditionals in slides. You can also check out \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/conditionals\"\n  }, \"this tutorial\"), \" in the JavaScript's official documentation page.\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Conditional statements exercises\"))), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-equality-operator\"\n  }, \"Comparison with the Equality Operator\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-strict-equality-operator\"\n  }, \"Comparison with the Strict Equality Operator\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/practice-comparing-different-values\"\n  }, \"Practice comparing different values\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/use-conditional-logic-with-if-statements\"\n  }, \"Use Conditional Logic with If Statements\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/logical-order-in-if-else-statements\"\n  }, \"Logical Order in If Else Statements\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/chaining-if-else-statements\"\n  }, \"Chaining If Else Statements\"))), mdx(\"h2\", {\n    \"id\": \"arrays\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#arrays\",\n    \"aria-label\": \"arrays permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Arrays\"), mdx(\"p\", null, \"Until now we've only dealt with single values, like a number or a string. But often we want to have collections of information. Imagine our restaurant kitchen. We need a list of orders that customers make for the kitchen to make them. Or a list of items in our menu. That's where arrays come in handy.\"), mdx(\"p\", null, \"An \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"array\"), \" is a list of values (strings, numbers, booleans, etc.) that we can have in order, one after the other. We can also save the list itself to a variable in order to do more advanced things, like do an operation on every item of the list, reverse it, split it, and many more.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"const menuItems = [\\\"beef_kebab\\\", \\\"roast_chicken\\\", \\\"rice\\\", \\\"salad\\\"];\\n\")), mdx(\"p\", null, mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://docs.google.com/presentation/d/e/2PACX-1vT980rtiuFbM2NM9YBGombr7gAbgMjlQZVFWynaAbxfWMTGUXjn6D6cwLmaT3KAyA/pub?start=false&loop=false&delayms=3000\"\n  }, \"Here\"), \" is an introduction to the concept of \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"arrays\"), \". You can use the arrow keys to navigate through the slides.\"), mdx(\"p\", null, \"And \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://docs.google.com/presentation/d/e/2PACX-1vT25rGP1KF6hL07MiL0wvIkzeuWWxgKrpEC0WFeOSLSTJb0BBcAmhRe0Zd0rn8SYg/pub?start=false&loop=false&delayms=3000\"\n  }, \"here\"), \" we have info on arrays properties and methods. This is how we work with arrays.\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Exercises on FreeCodeCamp\")), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Array Exercises\"))), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/store-multiple-values-in-one-variable-using-javascript-arrays\"\n  }, \"Store multiple values in one variable using javascript arrays\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/nest-one-array-within-another-array\"\n  }, \"Nest one array within another array\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/access-multi-dimensional-arrays-with-indexes\"\n  }, \"Access Multi-Dimensional Arrays With Indexes\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/manipulate-arrays-with-push\"\n  }, \"Manipulate Arrays With push()\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/manipulate-arrays-with-pop\"\n  }, \"Manipulate Arrays With pop()\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/manipulate-arrays-with-shift\"\n  }, \"Manipulate Arrays With shift()\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/manipulate-arrays-with-unshift\"\n  }, \"Manipulate Arrays With unshift()\"))), mdx(\"h2\", {\n    \"id\": \"loops-and-iteration\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#loops-and-iteration\",\n    \"aria-label\": \"loops and iteration permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Loops and iteration\"), mdx(\"p\", null, \"In programming, \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Loops\"), \" are used to repeat a block of code many times. For example, if you want to run some code 5 times, loops allow us to write it once, but make the computer run it 5 times. Or if you have an array and want to perform an action for every item in the array.\"), mdx(\"p\", null, mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://docs.google.com/presentation/d/e/2PACX-1vSXvwLF1aZB7AHtbwbQG0Cf0O6TADkPQYEn5_hLWCtnLghDRC6L_gipSfX-6Szbvw/pub?start=false&loop=false&delayms=3000\"\n  }, \"Here\"), \" we have an explanation of how loops work.\"), mdx(\"p\", null, \"There's various types of loops. The one you'll be using most (and the easier to understand) is \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"for ... of\"), \". It's also useful to understand and be able to write the basic \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"for\"), \" (the scary looking one in the slides) and the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"while\"), \" loops, as well as the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"break\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"continue\"), \" keywords. You can read about them in this \\uD83D\\uDCD6 article \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration\"\n  }, \"Loops and iteration\")), mdx(\"p\", null, \"There's a couple more loops that we can throw in, even though will make more sense further on in the course.\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"The \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"for ... in\"), \" loop when we get to the \\\"Objects\\\" section of the course.\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"The \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach\"\n  }, \"forEach\"), \" array method. It will loop through the array's items, similarly to a \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"for ... of\"), \", running an \", mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"anonymous function\"), \" for each item, which will see in the \\\"Functions\\\" section.\")), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Exercises on FreeCodeCamp\")), mdx(\"p\", null, \"\\uD83D\\uDCA1 \\uD83C\\uDF1F Until here, we have covered the most important tools in order to start with loops \\uD83E\\uDD18 Let's keep rocking this learning path with some exercises from FreeCodeCamp.\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Loops Exercises\"))), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/iterate-with-javascript-while-loops\"\n  }, \"Iterate with JavaScript While Loops\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/iterate-with-javascript-for-loops\"\n  }, \"Iterate with JavaScript For Loops\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/iterate-odd-numbers-with-a-for-loop\"\n  }, \"Iterate Odd Numbers With a For Loop\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/count-backwards-with-a-for-loop\"\n  }, \"Count Backwards With a For Loop\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/nesting-for-loops\"\n  }, \"Nesting For Loops\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/iterate-with-javascript-do---while-loops\"\n  }, \"Iterate with JavaScript Do...While Loops\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/iterate-through-an-array-with-a-for-loop\"\n  }, \"Iterate Through an Array with a For Loop\"))), mdx(\"h2\", {\n    \"id\": \"functions\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#functions\",\n    \"aria-label\": \"functions permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Functions\"), mdx(\"p\", null, \"A \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"function\"), \" is a code snippet that can be called by other code or by itself, or a variable that refers to the function. In other words, function definition include the orders and function calls state when to execute those orders. In this \\uD83D\\uDCD6 article \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Functions#where_do_i_find_functions\"\n  }, \"Where do I find functions?\"), \", you'll explore fundamental concepts behind functions such as basic syntax, how to invoke and define them, scope, and parameters.\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Exercises on FreeCodeCamp\")), mdx(\"p\", null, \"\\uD83D\\uDCA1 So far we have learnt about variables, conditionals, arrays and functions. It seems we are ready to start writing our own functions with these exercises from FreeCodeCamp\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Function Exercises\"))), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/write-reusable-javascript-with-functions\"\n  }, \"Write Reusable JavaScript with Functions\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/passing-values-to-functions-with-arguments\"\n  }, \"Passing Values to Functions with Arguments\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/return-a-value-from-a-function-with-return\"\n  }, \"Return a Value from a Function with Return\"))), mdx(\"h2\", {\n    \"id\": \"exercises-for-further-practice\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#exercises-for-further-practice\",\n    \"aria-label\": \"exercises for further practice permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Exercises for further practice\"), mdx(\"p\", null, \"\\uD83D\\uDCA1 Next, you will find a series of exercises that summarize what you've learnt throughout this lesson and exercises at FreeCodeCamp. Try to do them on your own, we haven't introduced anything new and all of them just go through what you've seen until this section. Remember you can always ask any staff member on Slack. Give it a try!\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Exercise 1 - The Lifetime Supply Calculator\"))), mdx(\"p\", null, \"How many potatoes will a person eat until the end of his life? Discover yourself!\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Store the persons current age into a variable.\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Store an estimated maximum age into a variable.\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Store an estimated amount per week (as a number).\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Calculate how many weeks will happen until the end of this person life.\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Calculate how many potatoes would eat total for the rest of his life.\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Output the result to the screen by console like so: \\\"NAME has NN years and will eat NN potatoes until age of X\\\".\")), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Exercise 2 - True or false\"))), mdx(\"p\", null, \"Using prompt, variables and \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"conditionals\"), \", ask questions to the users and display the result on the console.\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Ask: \\\"Tomatoes are fruits, not vegetables: true or false\\\". If that answer is \\\"true\\\" you show \\\"correct\\\", otherwise show \\\"incorrect\\\".\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Ask: \\\"You should drink 8 glasses of water: true or false\\\". If that answer is \\\"false\\\" you show \\\"correct\\\", otherwise show \\\"incorrect\\\".\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Ask: \\\"Fishes have only three seconds of memory: true or false\\\". If that answer is \\\"false\\\" you show \\\"correct\\\", otherwise show \\\"incorrect\\\".\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Ask: \\\"The Great Wall of China is the only man made structure visible from space The Great Wall of China: true or false\\\". If that answer is \\\"true\\\" you show \\\"correct\\\", otherwise show \\\"incorrect\\\".\")), mdx(\"p\", null, \"Have fun! Create more true or false questions.\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Bonus points\")), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Create a variable \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"points\"), \" and initialize it to zero.\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"If the answer is correct, add 10 points to the \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"points\"), \" variable.\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"If the answer is incorrect, remove 5 points to the \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"points\"), \" variable.\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Display how many points the user has on the console.\")), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Exercise 3 - A dinner\"))), mdx(\"p\", null, \"Imagine you are a famous singer in a band and you want to invite other musicians to a dinner.\"), mdx(\"p\", null, \"Write an array of every musician and its band in a format \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"musician:band\"), \" and using only one console log, display the list of assistants in the console.\"), mdx(\"h1\", {\n    \"id\": \"events-and-the-dom\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h1\",\n    \"href\": \"#events-and-the-dom\",\n    \"aria-label\": \"events and the dom permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Events and the DOM\"), mdx(\"h2\", {\n    \"id\": \"dom-api\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#dom-api\",\n    \"aria-label\": \"dom api permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"DOM API\"), mdx(\"p\", null, \"DOM is the shortcut for: \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"The Document Object Model\"), \". And what does this means? Well in short \\\"is the data representation of the objects that comprise the structure and content of a document on the web\\\".\"), mdx(\"p\", null, \"Ok, and what does this has to do with JavaScript? Let's read this \\uD83D\\uDCD6 article \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction#what_is_the_dom\"\n  }, \"What is the DOM?\"), \" to have a better understanding and how this two connect and what can be achieved.\"), mdx(\"h2\", {\n    \"id\": \"events-listeners\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#events-listeners\",\n    \"aria-label\": \"events listeners permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Events listeners\"), mdx(\"p\", null, \"Now we will have a look at the DOM event Model. First have a look at this \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://www.w3.org/TR/DOM-Level-3-Events/#dom-event-architecture\"\n  }, \"diagram\"), \" that explains the three phases of event flow through the DOM in the DOM Level 3 Events draft.\"), mdx(\"p\", null, \"There are 3 ways to register event handlers for a DOM element, but we will only learn about the the method used in modern web pages:\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\uD83E\\uDD47 EventTarget.addEventListener(): Read in detail \\uD83D\\uDCD6 \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener\"\n  }, \"here\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"HTML attribute: \", mdx(\"em\", {\n    parentName: \"li\"\n  }, \"This method should be avoided! It inflates the markup, and makes it less readable. Concerns of content/structure and behavior are not well-separated, making a bug harder to find.\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"DOM element properties: \", mdx(\"em\", {\n    parentName: \"li\"\n  }, \"The problem with this method is that only one handler can be set per element and per event.\"))), mdx(\"p\", null, \"Still curious about the difference between the 3 methods? \\uD83D\\uDCD6 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Events#dom_event_handler_list\"\n  }, \"Read this examples\")), mdx(\"h2\", {\n    \"id\": \"event-api\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#event-api\",\n    \"aria-label\": \"event api permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Event API\"), mdx(\"p\", null, \"The Event interface represents an event which takes place in the DOM. Event handlers may be attached to DOM elements: click on a button, the document, the Window...etc.\"), mdx(\"p\", null, \"When an event occurs as we have seen before, a new \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"event\"), \" object is created through the event listeners.\"), mdx(\"p\", null, \"Let's have a better look at this concept \\uD83D\\uDCD6 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Web/API/Event\"\n  }, \"here\"), \" and learn about the \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Web/API/Event\"\n  }, \"Interfaces based on Event\")), mdx(\"h2\", {\n    \"id\": \"add-event-listener\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#add-event-listener\",\n    \"aria-label\": \"add event listener permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Add Event Listener\"), mdx(\"p\", null, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"addEventListener()\"), \" sets up a function that will be called whenever the specified event is delivered to the target. Ok, let's learn about the Syntax behind this, read the \\uD83D\\uDCD6 article about \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener\"\n  }, \"EventTarget.addEventListener()\")), mdx(\"h2\", {\n    \"id\": \"exercises-on-freecodecamp\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#exercises-on-freecodecamp\",\n    \"aria-label\": \"exercises on freecodecamp permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Exercises on FreeCodeCamp\"), mdx(\"p\", null, \"\\uD83D\\uDCA1Ok, now let's practice these new tools with these exercises at FreeCodeCamp.\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/debugging/use-the-javascript-console-to-check-the-value-of-a-variable\"\n  }, \"Use the JavaScript Console to Check the Value of a Variable\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/debugging/catch-misspelled-variable-and-function-names\"\n  }, \"Catch Misspelled Variable and Function Names\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/debugging/catch-unclosed-parentheses-brackets-braces-and-quotes\"\n  }, \"Catch Unclosed Parentheses, Brackets, Braces and Quotes\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/debugging/catch-arguments-passed-in-the-wrong-order-when-calling-a-function\"\n  }, \"Catch Arguments Passed in the Wrong Order When Calling a Functio\", mdx(\"strong\", {\n    parentName: \"a\"\n  }, \"n\"))), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/debugging/catch-off-by-one-errors-when-using-indexing\"\n  }, \"Catch Off By One Errors When Using Indexing\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/debugging/prevent-infinite-loops-with-a-valid-terminal-condition\"\n  }, \"Prevent Infinite Loops with a Valid Terminal Condition\"))));\n}\n;\nMDXContent.isMDXComponent = true;","headings":[{"depth":1,"value":"Building blocks"},{"depth":2,"value":"Variables"},{"depth":3,"value":"Variable types"},{"depth":2,"value":"Keywords, operators"},{"depth":2,"value":"Data types"},{"depth":3,"value":"Number"},{"depth":4,"value":"Arithmetic operators"},{"depth":4,"value":"Mathematical assignment operators"},{"depth":4,"value":"Increment/decrement operators"},{"depth":4,"value":"Math operations"},{"depth":3,"value":"String"},{"depth":4,"value":"Concatenation"},{"depth":4,"value":"Interpolation"},{"depth":4,"value":"String methods"},{"depth":5,"value":"Length"},{"depth":5,"value":"Includes"},{"depth":2,"value":"typeof operator"},{"depth":2,"value":"Comments in JavaScript"},{"depth":2,"value":"Conditionals"},{"depth":2,"value":"Arrays"},{"depth":2,"value":"Loops and iteration"},{"depth":2,"value":"Functions"},{"depth":2,"value":"Exercises for further practice"},{"depth":1,"value":"Events and the DOM"},{"depth":2,"value":"DOM API"},{"depth":2,"value":"Events listeners"},{"depth":2,"value":"Event API"},{"depth":2,"value":"Add Event Listener"},{"depth":2,"value":"Exercises on FreeCodeCamp"}]}},"pageContext":{"slug":"/basic-js/contents/","prev":{"label":"Introduction","link":"/basic-js/introduction"},"next":{"label":"Basic JS Section project","link":"/basic-js/basic-js-section-project"},"repositoryEditUrl":"https://github.com/rocketseat/gatsby-themes/tree/main/examples/gatsby-theme-docs/src/docs/basic-js/contents.mdx","repositoryProvider":"GitHub"}},"staticQueryHashes":["1954253342","2328931024","2501019404","973074209"]}