{"id":58027,"date":"2021-11-22T18:01:35","date_gmt":"2021-11-22T10:01:35","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=58027"},"modified":"2021-12-06T22:44:58","modified_gmt":"2021-12-06T14:44:58","slug":"study-javascript-what-to-know","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/study-javascript-what-to-know\/","title":{"rendered":"Learning JavaScript: Things to Know Before You Start"},"content":{"rendered":"<p>There is no doubt that <a href=\"https:\/\/www.hongkiat.com\/blog\/tag\/javascript-libraries\/\">JavaScript<\/a> is an extensive <a href=\"https:\/\/www.hongkiat.com\/blog\/bizarre-insane-programming-languages\/\">programming language<\/a> with plenty of helper libraries, frameworks, databases, and other extra functionalities. The piling up of new information can be intimidating for the novice programmer. As <strong>Kyle Simpson<\/strong> says in \u201c<a href=\"https:\/\/www.amazon.com\/You-Dont-Know-JS-Yet-ebook\/dp\/B084BNMN7T\">You Don\u2019t Know JavaScript\u201d<\/a>: <em>\u201cYou write the code in JS first, and then you find out how it works.<\/em>\u201c<\/p>\n<p>I\u2019ve worked on projects built in both pure JS and have also worked with C# for several years. In my spare time, I also coach and teach new developers and give presentations at IT conferences. And based on my experience, I am going to help you figure out how to learn it.<\/p>\n<p>In this article, I\u2019d like to highlight the things that the <strong>novice JS learners need to know<\/strong> at the very begining of the learning process. These tips could ease the leaning curve and may even make it interesting for you to start into JS<\/p>\n<p>So, let\u2019s move forward.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/javascript-jargon\/\" class=\"ref-block__link\" title=\"Read More: JavaScript Jargon: 10 Terms You Should Know\" rel=\"bookmark\"><span class=\"screen-reader-text\">JavaScript Jargon: 10 Terms You Should Know<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/javascript-jargon.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-24420 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/javascript-jargon.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">JavaScript Jargon: 10 Terms You Should Know<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tFrom currying to closures there are quite a number of JavaScript jargons (special words used within the field)...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>Gradually educate yourself<\/h2>\n<p>At first sight, a developer\u2019s roadmap will show you how extensive the JS ecosystem is and how much you have to understand. Seeing such an array of information, many novice developers trap themselves and mistakenly think they need to know it all at once.<\/p>\n<p>They try to make sense of the entire JS ecosystem without delving into JS itself. They end up understanding a lot of stuff on the surface as they hop between topics. These developers will not become specialists in any field if they take this strategy.<\/p>\n<p>Despite the fact that JavaScript is a fast-evolving and expanding programming language, it is based on a number of fundamental ideas and underlying themes. Any project of any complexity can be facilitated using these methods.<\/p>\n<p>From my perspective, a roadmap for a new JS developer should look like this:<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/study-javascript-what-to-know\/js-roadmap.jpg\" alt=\"javascript roadmap\" width=\"1300\" height=\"598\"><\/figure>\n<h3>This is the method we use to understand the fundamentals: <\/h3>\n<ul>\n<li><em>How the Internet works<\/em> \u2013 I don\u2019t think I need to explain why you need to know this<\/li>\n<li><em>Layout<\/em> \u2013 yes, the JS-developer must deal with this on a frequent basis as well<\/li>\n<li><em>Basic JS<\/em> \u2013 you should understand not just how to declare a variable, but also all of the language\u2019s nuances<\/li>\n<li><em>Git<\/em> \u2013 working on projects without a proper understanding of Git can lead to significant time wasted<\/li>\n<li><em>S framework<\/em> \u2013 I would start with <a href=\"https:\/\/www.hongkiat.com\/blog\/getting-started-react-js\/\">React<\/a>, but I recommend looking through all of the options and selecting the most appealing one. Of course, there are more on the way.<\/li>\n<\/ul>\n<p>Every stage in this process is supported by a massive amount of data. Determine the distinctions between client and server, delve into HTML and CSS, and decide which JS framework (<a href=\"https:\/\/www.hongkiat.com\/blog\/tag\/angularjs\/\">Angular<\/a>, <a href=\"https:\/\/www.hongkiat.com\/blog\/getting-started-react-js\/\">React<\/a>, or <a href=\"https:\/\/vuejs.org\/\">Vue<\/a>) best suits your professional goals, and begin learning wisely.<\/p>\n<p>This expertise will boost your chances of landing a job. Also, a solid mastery of the fundamentals of JavaScript will stick with you for the rest of your life. As a result, the first rule is <strong>to approach JavaScript methodically, rather than scattering your attention with the aim of learning everything at once.<\/strong><\/p>\n<h2>Delve deep into the basic topics <\/h2>\n<p>You can find bottlenecks even in the basic themes that are not immediately noticeable, but which become apparent in the code of your actual project. And at this point, you need to grasp what\u2019s going on and how to deal with it. Here\u2019s a great example of an interview question for a newbie:<\/p>\n<pre>\r\nconst resultA = 40 && 2 || 33;\r\nconst resultB = (4 * 2) && (3 * 6);\r\nconst resultC = 0 && 2\r\n<\/pre>\n<p>Often half of the novice developers make mistakes when answering the question of what will happen with variables <code>a<\/code>, <code>b<\/code>, <code>c<\/code>. Many believe that boolean values should be returned here \u2013 <code>true<\/code> or <code>false<\/code>.<\/p>\n<p>But in this code, if all values are <code>true<\/code>, the last true value will be returned, or the first <code>false<\/code> value, if at least one of them is false. In our case, <code>2<\/code>, <code>18<\/code>, <code>0<\/code>, respectively. Here is another example of the most mainstream task from the JS world:<\/p>\n<pre>\r\nfor (var i = 0; i &lt; 10; i++) {\r\n\tsetTimeout ( function ()  {\r\n\tconsole.log(i);\r\n} ,  1000) ; \r\n<\/pre>\n<p>If you fully grasp just the concepts in this example, you will also understand:<\/p>\n<ul>\n<li>Areas of visibility<\/li>\n<li>Closures<\/li>\n<li>The difference in how variables work<\/li>\n<li>Popping up variables<\/li>\n<li>How setTimeout and asynchronous JS work.<\/li>\n<\/ul>\n<p>This leads to the second rule: <strong>while interpreting such cases, investigate deeper into the answers provided.<\/strong><\/p>\n<h2>Beware of \u201cstandards\u201d <\/h2>\n<p>On various resources, there is frequently a distinction between \u201cold JS standard\u201d and \u201cnew JS standard.\u201d Features from ES6, ES7, and the following versions of JavaScript are allegedly new tools that may be learned by becoming part of a team.<\/p>\n<p>Beginning programmers have the incorrect belief that they can be learned separately, however, this is not the case. Destructuring, arrow functions, Spread-operators, promises, and classes are all features that have long been used as a modern language standard. It is critical to understand how to work with them.<\/p>\n<h2>Without practice, JS is like a leaf in the wind <\/h2>\n<p>Assume you aced your first interview for a Junior JavaScript Developer position and showed exceptional theoretical comprehension. You are employed for an internship in the team and given your first task.<\/p>\n<p>Then you find you can\u2019t write a single line of code by yourself! Now is a good moment to mention a third crucial rule: <strong>put your theoretical knowledge into practice at all times.<\/strong> You will not only learn how to perform application tasks rapidly but also how to navigate into the fundamental JavaScript principles, through rigorous practice. This is a useful skill for potential customers.<\/p>\n<p>Try to tackle the challenge, which you may meet in any test task. There is a list of objects, each with its unique price. Output to the user the final total of the goods in the shopping cart that has been selected.<\/p>\n<pre>\r\nconst  goodsAddedToCart - [ {\r\n\tname:  'JavaScript' ,\r\n\tprice:  20\r\n} ,  {\r\n\r\nname:  'React' ,\r\n\tprice:  30\r\n} ,  {\r\n\r\nname: 'HTML\/CSS' ,\r\n\tprice:  202\r\n} ] ;\r\n<\/pre>\n<p>I\u2019m sure many newbies will easily describe the solution by creating the <code>for<\/code> loop and the <code>result<\/code> variable with a null value assigned to it. It doesn\u2019t look very elegant, but it works, right?<\/p>\n<pre>\r\nvar result = 0;\r\nfor  (i = 0;  i  &lt;  goodsAddedToCart.length;  i++)  {\r\n\tresult = result +  goodsAddedToCart[i].price;\r\n} ;\r\n<\/pre>\n<p>But how can we reuse this method for a different sequence of selected goods \u2013 apparently it all has to be wrapped into a function, but why would we do that when JS has been providing tools for such tasks for a long time, here\u2019s an example with reducing:<\/p>\n<pre>goodsAddedToCart.reduce ( (accumulator, ( price } ) =&gt; accumulator + price,  0);<\/pre>\n<p>One more example:<\/p>\n<pre>\r\nconst getAllPeople = async  () =&gt; {\r\n  const response = await fetch('https:\/\/swapi.dev\/api\/people\/'};\r\n  const result = await  response.json( );\r\n  return result.results;\r\n} ;\r\n\r\nconst displayPersonData = ( person, elementToDisplay) =&gt; {\r\nconst personWrapper = document.createElement ( 'div') ; \r\nelementToDisplay. appendChild (personWrapper) ;\r\npersonWrapper. style. margin = '10 px' ;\r\n\r\nfor (let [key, value] of Object. entries (person)) {\r\n  const personInfoField = personWrapper. appendChild (document createElement( 'div')) ;\r\n  personInfoField.innerHTML = 'S { key} : $ {value} : ' ; \r\n}\r\n\r\nconst displayPeople  =  async  ( ) =&gt; {\r\n  const  people  =  await  getAllPeople( ) ;\r\n  const  documentBody  =  document.querySelector( 'body' ) ;\r\n\r\ndocument.Body.innerHTML  =  ' ' ;\r\n\r\npeople. forEach ( (person)  =&gt;  {\r\n   displayPersonData(person,  documentBody) ;\r\n} ) ;\r\n} ;\r\n<\/pre>\n<p>Of course, this code can be enhanced further. Even so, it is sufficient to practice working with searches, arrays, and objects. There are numerous free APIs available on the Internet that will allow you to practice dealing with this type of functionality. For instance, consider the following resources:<\/p>\n<ul>\n<li>The Star Wars API: SWAPI<\/li>\n<li>alexwohlbruck\/cat-facts<\/li>\n<li>jikan.docs.apiary.io<\/li>\n<li>Google. <\/li>\n<\/ul>\n<h2>The importance of concise and clear code <\/h2>\n<p>Another blunder made by Juniors is failing to name variables in their code. The main requirement for being understood by other programmers on your team or after a few months of pause, including yourself, is readability. As an example, consider an array of users, each with a name and an age:<\/p>\n<pre>\r\nconst  users  = [ {\r\n\tname: 'John' , \r\n\tage: 20\r\n\t} , { \r\n\tname: 'Alex' , \r\n\tage: 30\r\n\t} , { \r\n\tname: 'Thanos' , \r\n\tage: 32432\r\n} ] ;\r\n<\/pre>\n<p>Imagine you used the Map processing method when working with this array, which would make sense, but for some reason, you named the parameter of the anonymous function as itm:<\/p>\n<pre>\r\nusers.map ( (itm)  =&gt;  {\r\n\/\/ There are 100 lines of code \r\n} ) ;\r\n<\/pre>\n<p>Why should this be considered as an error in this context, when everything will work with this or another variable name? Of course, the error here is logical rather than programmatic. Why not call each element of an array \u201cuser\u201d if you\u2019re working with an array of data users?<\/p>\n<p>This way, you won\u2019t get angry feedback from other engineers who just don\u2019t comprehend what this or that variable in your code performs.<\/p>\n<p>Here\u2019s another example of code bloat:<\/p>\n<pre>\r\nconst getPersonAppearance  =  (object) =&gt; { \r\n\tconst personShortDescription  =  object. name + \" \" +  object. surname +             \r\n\t\" in his \" + object. age + \"looks awesome\";\r\n\r\n\t\/\/ There are 100 lines of code \r\n\treturn { \r\n\t\tpersonShortDescription, \r\n\t\t...\r\n\t} \r\n};<\/pre>\n<p>By simply destructuring the array objects (name, surname, age) you can get a concise and understandable to every programmer text:<\/p>\n<pre>\r\nconst getPersonAppearance  = ( person ) =&gt; { \r\n\tconst { name, surname, age} = person;\r\n\tconst personShortDescription  =  ' S {name} S {surname} in his {age} looks awesome ' ;\r\n\r\n\t\/\/ There are 100 lines of code  \r\n\treturn {   \r\n\t\tpersonShortDescription, \r\n\t\t...\r\n\t} \r\n}; \r\n<\/pre>\n<p>So here is the fourth rule: <strong>by developing good habits during training, you will not have to adjust them in the workplace.<\/strong><\/p>\n<h2>Be a learner <\/h2>\n<p>It is critical in programming to never end there. The IT industry is rapidly evolving, with the appearance of new frameworks and measures for working with data.<\/p>\n<p>If you don\u2019t gradually master them, you risk becoming mired down in repetitive and monotonous chores for an extended period of time. That\u2019s not why you got into the profession, is it?<\/p>\n<p>Once you have fundamental JS programming skills, give yourself a pat on the back, take a deep breath, and return to studying a full-fledged JavaScript roadmap.<\/p>","protected":false},"excerpt":{"rendered":"<p>There is no doubt that JavaScript is an extensive programming language with plenty of helper libraries, frameworks, databases, and other extra functionalities. The piling up of new information can be intimidating for the novice programmer. As Kyle Simpson says in \u201cYou Don\u2019t Know JavaScript\u201d: \u201cYou write the code in JS first, and then you find&hellip;<\/p>\n","protected":false},"author":437,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392],"tags":[],"topic":[],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Learning JavaScript: Things to Know Before You Start - Hongkiat<\/title>\n<meta name=\"description\" content=\"There is no doubt that JavaScript is an extensive programming language with plenty of helper libraries, frameworks, databases, and other extra\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/study-javascript-what-to-know\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Learning JavaScript: Things to Know Before You Start\" \/>\n<meta property=\"og:description\" content=\"There is no doubt that JavaScript is an extensive programming language with plenty of helper libraries, frameworks, databases, and other extra\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/study-javascript-what-to-know\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2021-11-22T10:01:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-12-06T14:44:58+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/study-javascript-what-to-know\/js-roadmap.jpg\" \/>\n<meta name=\"author\" content=\"Alexey Potyukaev\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alexey Potyukaev\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/study-javascript-what-to-know\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/study-javascript-what-to-know\\\/\"},\"author\":{\"name\":\"Alexey Potyukaev\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e6ca0a08d08235224f23d04bb7f80fcd\"},\"headline\":\"Learning JavaScript: Things to Know Before You Start\",\"datePublished\":\"2021-11-22T10:01:35+00:00\",\"dateModified\":\"2021-12-06T14:44:58+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/study-javascript-what-to-know\\\/\"},\"wordCount\":1399,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/study-javascript-what-to-know\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/study-javascript-what-to-know\\\/js-roadmap.jpg\",\"articleSection\":[\"Coding\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/study-javascript-what-to-know\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/study-javascript-what-to-know\\\/\",\"name\":\"Learning JavaScript: Things to Know Before You Start - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/study-javascript-what-to-know\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/study-javascript-what-to-know\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/study-javascript-what-to-know\\\/js-roadmap.jpg\",\"datePublished\":\"2021-11-22T10:01:35+00:00\",\"dateModified\":\"2021-12-06T14:44:58+00:00\",\"description\":\"There is no doubt that JavaScript is an extensive programming language with plenty of helper libraries, frameworks, databases, and other extra\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/study-javascript-what-to-know\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/study-javascript-what-to-know\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/study-javascript-what-to-know\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/study-javascript-what-to-know\\\/js-roadmap.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/study-javascript-what-to-know\\\/js-roadmap.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/study-javascript-what-to-know\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Learning JavaScript: Things to Know Before You Start\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e6ca0a08d08235224f23d04bb7f80fcd\",\"name\":\"Alexey Potyukaev\",\"description\":\"Alexey is a Software Developer at NIX United.\",\"sameAs\":[\"https:\\\/\\\/nix-united.com\\\/\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/alexeypotyukaev\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Learning JavaScript: Things to Know Before You Start - Hongkiat","description":"There is no doubt that JavaScript is an extensive programming language with plenty of helper libraries, frameworks, databases, and other extra","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/study-javascript-what-to-know\/","og_locale":"en_US","og_type":"article","og_title":"Learning JavaScript: Things to Know Before You Start","og_description":"There is no doubt that JavaScript is an extensive programming language with plenty of helper libraries, frameworks, databases, and other extra","og_url":"https:\/\/www.hongkiat.com\/blog\/study-javascript-what-to-know\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2021-11-22T10:01:35+00:00","article_modified_time":"2021-12-06T14:44:58+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/study-javascript-what-to-know\/js-roadmap.jpg","type":"","width":"","height":""}],"author":"Alexey Potyukaev","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Alexey Potyukaev","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/study-javascript-what-to-know\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/study-javascript-what-to-know\/"},"author":{"name":"Alexey Potyukaev","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e6ca0a08d08235224f23d04bb7f80fcd"},"headline":"Learning JavaScript: Things to Know Before You Start","datePublished":"2021-11-22T10:01:35+00:00","dateModified":"2021-12-06T14:44:58+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/study-javascript-what-to-know\/"},"wordCount":1399,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/study-javascript-what-to-know\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/study-javascript-what-to-know\/js-roadmap.jpg","articleSection":["Coding"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/study-javascript-what-to-know\/","url":"https:\/\/www.hongkiat.com\/blog\/study-javascript-what-to-know\/","name":"Learning JavaScript: Things to Know Before You Start - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/study-javascript-what-to-know\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/study-javascript-what-to-know\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/study-javascript-what-to-know\/js-roadmap.jpg","datePublished":"2021-11-22T10:01:35+00:00","dateModified":"2021-12-06T14:44:58+00:00","description":"There is no doubt that JavaScript is an extensive programming language with plenty of helper libraries, frameworks, databases, and other extra","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/study-javascript-what-to-know\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/study-javascript-what-to-know\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/study-javascript-what-to-know\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/study-javascript-what-to-know\/js-roadmap.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/study-javascript-what-to-know\/js-roadmap.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/study-javascript-what-to-know\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Learning JavaScript: Things to Know Before You Start"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e6ca0a08d08235224f23d04bb7f80fcd","name":"Alexey Potyukaev","description":"Alexey is a Software Developer at NIX United.","sameAs":["https:\/\/nix-united.com\/"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/alexeypotyukaev\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-f5V","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/58027","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/437"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=58027"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/58027\/revisions"}],"predecessor-version":[{"id":58289,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/58027\/revisions\/58289"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=58027"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=58027"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=58027"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=58027"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}