{"componentChunkName":"component---node-modules-rocketseat-gatsby-theme-docs-core-src-templates-docs-query-js","path":"/advanced-js/introduction","result":{"data":{"mdx":{"id":"226bcc88-84ac-52da-ab66-bfdb1d2b8c0c","excerpt":"Introduction Welcome back! After having learned the basics of Javascript and how it can interact with the DOM, let's start tackling some advanced features of…","fields":{"slug":"/advanced-js/introduction/"},"frontmatter":{"title":"","description":null,"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 = {};\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(\"h2\", {\n    \"id\": \"introduction\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#introduction\",\n    \"aria-label\": \"introduction 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  }))), \"Introduction\"), mdx(\"p\", null, \"Welcome back! After having learned the basics of Javascript and how it can interact with the DOM, let's start tackling some advanced features of this incredible language. In the following sections, you'll learn a bit more about \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"arrays\"), \", how to interact with them, loop them or mutate them. You'll learn about \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"functions\"), \", what they're for, how to use them in your advantage to make your code more reusable. You'll also have a grasp at \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"objects\"), \", a really powerful way to model the data of your applications. And last but not least, you will learn about \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"API calls\"), \", the easiest and fastest way to send requests to the internet to get remote data into your application. Let's start!\"), mdx(\"h2\", {\n    \"id\": \"goals\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#goals\",\n    \"aria-label\": \"goals 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  }))), \"Goals\"), mdx(\"p\", null, \"By the end of this section, you should:\"), mdx(\"ul\", {\n    \"className\": \"contains-task-list\"\n  }, mdx(\"li\", {\n    parentName: \"ul\",\n    \"className\": \"task-list-item\"\n  }, mdx(\"input\", {\n    parentName: \"li\",\n    \"type\": \"checkbox\",\n    \"checked\": false,\n    \"disabled\": true\n  }), \" \", \"Know how to create a function, either with the basic syntax or the arrow way.\"), mdx(\"li\", {\n    parentName: \"ul\",\n    \"className\": \"task-list-item\"\n  }, mdx(\"input\", {\n    parentName: \"li\",\n    \"type\": \"checkbox\",\n    \"checked\": false,\n    \"disabled\": true\n  }), \" \", \"Be comfortable using map, filter and reduce methods.\"), mdx(\"li\", {\n    parentName: \"ul\",\n    \"className\": \"task-list-item\"\n  }, mdx(\"input\", {\n    parentName: \"li\",\n    \"type\": \"checkbox\",\n    \"checked\": false,\n    \"disabled\": true\n  }), \" \", \"Understand what the scope is and why is important together with closures\"), mdx(\"li\", {\n    parentName: \"ul\",\n    \"className\": \"task-list-item\"\n  }, mdx(\"input\", {\n    parentName: \"li\",\n    \"type\": \"checkbox\",\n    \"checked\": false,\n    \"disabled\": true\n  }), \" \", \"Know how to create objects\"), mdx(\"li\", {\n    parentName: \"ul\",\n    \"className\": \"task-list-item\"\n  }, mdx(\"input\", {\n    parentName: \"li\",\n    \"type\": \"checkbox\",\n    \"checked\": false,\n    \"disabled\": true\n  }), \" \", \"Understand a tiny bit of the \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"this\"), \" keyword, and how they relate to objects\"), mdx(\"li\", {\n    parentName: \"ul\",\n    \"className\": \"task-list-item\"\n  }, mdx(\"input\", {\n    parentName: \"li\",\n    \"type\": \"checkbox\",\n    \"checked\": false,\n    \"disabled\": true\n  }), \" \", \"Understand what the spread operator is and how to destructure objects\")));\n}\n;\nMDXContent.isMDXComponent = true;","headings":[{"depth":2,"value":"Introduction"},{"depth":2,"value":"Goals"}]}},"pageContext":{"slug":"/advanced-js/introduction/","prev":{"label":"Introduction","link":"/pokedex/assignment"},"next":{"label":"Functions in depth","link":"/advanced-js/functions"},"repositoryEditUrl":"https://github.com/rocketseat/gatsby-themes/tree/main/examples/gatsby-theme-docs/src/docs/advanced-js/introduction.mdx","repositoryProvider":"GitHub"}},"staticQueryHashes":["1954253342","2328931024","2501019404","973074209"]}