{"data":{"site":{"siteMetadata":{"title":"Design & Pizza","author":"Christopher Andersson"}},"markdownRemark":{"id":"8183aea8-d8c9-53ae-bc92-cb97a34e5cc3","htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"intro-paragraph","properties":{},"children":[{"type":"element","tagName":"drop-cap","properties":{},"children":[{"type":"text","value":"I"}]},{"type":"text","value":"n Mozilla’s documentation on JavaScript they have a section on "},{"type":"element","tagName":"a","properties":{"href":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar"},"children":[{"type":"text","value":"lexical grammar"}]},{"type":"text","value":", and this is how they summarize it:"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"citation","properties":{},"children":[{"type":"text","value":"The source text of ECMAScript scripts gets scanned from left to right and is converted into a sequence of input elements which are tokens, control characters, line terminators, comments or white space. ECMAScript also defines certain keywords and literals and has rules for automatic insertion of semicolons to end statements."}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Let’s unpack the various parts of this."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"checklist-item","properties":{"checked":true},"children":[{"type":"text","value":"The source text of ECMAScript scripts"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"checklist-item","properties":{"checked":true},"children":[{"type":"text","value":"gets scanned from left to right"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"checklist-item","properties":{},"children":[{"type":"text","value":"and is converted into a sequence of input elements"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"checklist-item","properties":{},"children":[{"type":"text","value":"which are tokens, control characters, line terminators, comments or white space."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"checklist-item","properties":{},"children":[{"type":"text","value":"ECMAScript also defines certain keywords and literals"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"checklist-item","properties":{},"children":[{"type":"text","value":"and has rules for automatic insertion of semicolons to end statements."}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This just means a document (text file) that contains "},{"type":"element","tagName":"a","properties":{"href":"/wtfjs/starting-from-the-top/"},"children":[{"type":"text","value":"ECMAScript"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"blockquote","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"[the document] gets scanned from left to right"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Just like you are reading the words on this page, and interpreting their meaning."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"blockquote","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"[the document] is converted into a sequence of input elements"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"An "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"input element"}]},{"type":"text","value":" is basically a single instruction written in the form of code, that you are giving to a compiler."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"javascript"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-javascript"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-javascript"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// this is an input stream"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"let"}]},{"type":"text","value":" result "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"1"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"1"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// spaces separate the input elements"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"blockquote","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"…which are tokens, control characters, line terminators, comments or white space."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Let’s define each of the above:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Tokens"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Control characters"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Line terminators"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Comments or white space"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{},"children":[{"type":"text","value":"WTF is a token?"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-wrapper"],"style":"position: relative; display: block; ; max-width: 590px; margin-left: auto; margin-right: auto;"},"children":[{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-background-image"],"style":"padding-bottom: 66.69921875%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAQF/8QAFAEBAAAAAAAAAAAAAAAAAAAAAv/aAAwDAQACEAMQAAAB0YNiYK4M/wD/xAAYEAEBAAMAAAAAAAAAAAAAAAADAgABBP/aAAgBAQABBQLrTZwa3CYh6ST5Zis//8QAFhEAAwAAAAAAAAAAAAAAAAAAARAR/9oACAEDAQE/ARF//8QAFhEBAQEAAAAAAAAAAAAAAAAAARAR/9oACAECAQE/AUdn/8QAGxAAAgIDAQAAAAAAAAAAAAAAAQIAEhARMSL/2gAIAQEABj8CFemL7LBsVaWJLa5j/8QAGhABAAIDAQAAAAAAAAAAAAAAARFBABBRMf/aAAgBAQABPyHxqsTzA9gkjx1VzpWBUlla/9oADAMBAAIAAwAAABCrz//EABYRAQEBAAAAAAAAAAAAAAAAAAEQIf/aAAgBAwEBPxBA2f/EABYRAQEBAAAAAAAAAAAAAAAAAAEQEf/aAAgBAgEBPxBGif/EABwQAQACAgMBAAAAAAAAAAAAAAERIQAxEEFRYf/aAAgBAQABPxAeXU+kSx9xyaWLCU3p4XA2kSFema3lIh41x//Z'); background-size: cover; display: block;"},"children":[{"type":"text","value":"\n      "},{"type":"element","tagName":"img","properties":{"className":["gatsby-resp-image-image"],"style":"width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;","alt":"Image of an NYC subway token","title":"","src":"/static/token-e01049e09452bb97bea257172c4ca15e-f8fb9.jpg","srcSet":["/static/token-e01049e09452bb97bea257172c4ca15e-e8976.jpg 148w","/static/token-e01049e09452bb97bea257172c4ca15e-63df2.jpg 295w","/static/token-e01049e09452bb97bea257172c4ca15e-f8fb9.jpg 590w","/static/token-e01049e09452bb97bea257172c4ca15e-85e3d.jpg 885w","/static/token-e01049e09452bb97bea257172c4ca15e-8c50e.jpg 1024w"],"sizes":["(max-width:","590px)","100vw,","590px"]},"children":[]},{"type":"text","value":"\n    "}]},{"type":"text","value":"\n  "}]},{"type":"text","value":"\n  \n"},{"type":"element","tagName":"image-caption","properties":{},"children":[{"type":"text","value":"Photo courtesy of "},{"type":"element","tagName":"a","properties":{"href":"https://www.flickr.com/photos/a_pitch/2870697605/in/photolist-5nF5oi-6XVEBM-97csvb-wEgXH-99FkGw-5BXVQT-5C3fyw-ppFmyh-dMhqre-dMnPLd-8HSfxH-8HSb1e-9vXMjs-4coiiZ-8m8VhH-wEhWm-mYMug-8C2CgU-5CQr9A-9ELiic-wFfqR-5nKjG6-7LypJo-t4gJc-a8FnTm-bFJgsP-iMiEK8-3qrcb-5J2aqg-7PCeVC-5kWyZE-3TLho-7kZ7Mz-aFuKHK-8HSb9B-dWf14i-8d2ZFh-dZghc2-61rWGu-8VNcy9-e3Ajak-dZn8gL-8VKacc-b5o3SB-9dnq1u"},"children":[{"type":"text","value":"a.pitch"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When you are writing code for the most part you aren’t using some special character set that you are completely unfamiliar with (unless your native speaking language uses some other alphabet). You are using the characters from the "},{"type":"element","tagName":"a","properties":{"href":"https://simple.wikipedia.org/wiki/Alphabet"},"children":[{"type":"text","value":"Latin Alphabet"}]},{"type":"text","value":". When you write text that’s meant for another human to read you are using the following things:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Letters A-Z"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Numbers"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Punctuation marks"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"White space"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"By putting combinations of letters, white space, numbers and punctuation marks together…you form sentances, and paragraphs that other humans can read."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"\n  "},{"type":"element","tagName":"a","properties":{"className":["gatsby-resp-image-link"],"href":"/static/todo-45d8aa0b201931c71ff936943c49349e-01800.jpg","style":"display: block","target":"_blank","rel":["noopener"]},"children":[{"type":"text","value":"\n  \n  "},{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-wrapper"],"style":"position: relative; display: block; ; max-width: 590px; margin-left: auto; margin-right: auto;"},"children":[{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-background-image"],"style":"padding-bottom: 75%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAPABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAQBAgP/xAAVAQEBAAAAAAAAAAAAAAAAAAABAv/aAAwDAQACEAMQAAABalbaVguJ/8QAGRABAAMBAQAAAAAAAAAAAAAAAAECERIx/9oACAEBAAEFAps6a9VpqIf/xAAVEQEBAAAAAAAAAAAAAAAAAAABEP/aAAgBAwEBPwFn/8QAFREBAQAAAAAAAAAAAAAAAAAAARD/2gAIAQIBAT8BJ//EABYQAAMAAAAAAAAAAAAAAAAAAAAgQf/aAAgBAQAGPwIi/wD/xAAcEAACAQUBAAAAAAAAAAAAAAAAAREQITFRYfH/2gAIAQEAAT8hanzcif0KSpkZLJ//2gAMAwEAAgADAAAAECQf/8QAFhEBAQEAAAAAAAAAAAAAAAAAABEh/9oACAEDAQE/EKa//8QAFhEBAQEAAAAAAAAAAAAAAAAAAAEh/9oACAECAQE/EIjH/8QAGxAAAwACAwAAAAAAAAAAAAAAAAERIVFB0eH/2gAIAQEAAT8Qg8bNBNtxl0RGnUx2VWpkdS5qeiUh/9k='); background-size: cover; display: block;"},"children":[{"type":"text","value":"\n      "},{"type":"element","tagName":"img","properties":{"className":["gatsby-resp-image-image"],"style":"width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;","alt":"Image of a to do list","title":"","src":"/static/todo-45d8aa0b201931c71ff936943c49349e-f8fb9.jpg","srcSet":["/static/todo-45d8aa0b201931c71ff936943c49349e-e8976.jpg 148w","/static/todo-45d8aa0b201931c71ff936943c49349e-63df2.jpg 295w","/static/todo-45d8aa0b201931c71ff936943c49349e-f8fb9.jpg 590w","/static/todo-45d8aa0b201931c71ff936943c49349e-85e3d.jpg 885w","/static/todo-45d8aa0b201931c71ff936943c49349e-d1924.jpg 1180w","/static/todo-45d8aa0b201931c71ff936943c49349e-9452e.jpg 1770w","/static/todo-45d8aa0b201931c71ff936943c49349e-01800.jpg 4032w"],"sizes":["(max-width:","590px)","100vw,","590px"]},"children":[]},{"type":"text","value":"\n    "}]},{"type":"text","value":"\n  "}]},{"type":"text","value":"\n  \n  "}]},{"type":"text","value":"\n    \n"},{"type":"element","tagName":"image-caption","properties":{},"children":[{"type":"text","value":"Readable by another human"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In the to-do list image above, you can think of each word…as "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"tokens"}]},{"type":"text","value":". White space is used to separate tokens, just like we do with words."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{},"children":[{"type":"text","value":"Control characters"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"An average person writing code will probably never have to know that "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"control characters"}]},{"type":"text","value":" even exist, so I will just touch on them briefly here for completeness sake."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"There are three control characters used by the JavaScript interpreter to read your code. When you are writing code you won’t ever see these control characters, they are hidden from you:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Zero width non-joiners"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Zero width joiner"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Byte order mark"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Zero width non-joiners"}]},{"type":"text","value":" are a bit of white space placed between two characters on your screen to ensure that you (a human) can read the text."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"\n  "},{"type":"element","tagName":"a","properties":{"className":["gatsby-resp-image-link"],"href":"/static/zwnj-db452717eaae442c4017f3b58fd4a5b4-9160a.png","style":"display: block","target":"_blank","rel":["noopener"]},"children":[{"type":"text","value":"\n  \n  "},{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-wrapper"],"style":"position: relative; display: block; ; max-width: 590px; margin-left: auto; margin-right: auto;"},"children":[{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-background-image"],"style":"padding-bottom: 46.67968750000001%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAYAAAAywQxIAAAACXBIWXMAABYlAAAWJQFJUiTwAAABhUlEQVQoz21S207CUBDs/3+EL5pAIsoloJCo0aAiBIIalRiglFtLuRVKL7TQjmeXlDTEh83Z05ndMztdyfM8bLfbWLhwXRf03ff9E+wQhFNQHudQjUTJbrdjYL/fIwgCBGHIBNu2xLeAMSJHvFDgQRByvjFNrosaS57nwzTXKD/e47f1DaXXRV+R8fz0gGIhi4mmwjCWXFSvVdBs1NCTuxj0FdSrFWSukpA7baxWxkEhKWr9fKGQu2bwrlRAKnmB0k0OtbcXpC8T0CcalosFivkM0qkEbsWZFdx8NoXqaxmJ8zMMxQPUSyKpppDd63YwEYWaOmaVuj6BJtR9NBuIfO73ZIGPWDVNoWljTHUdn+8NntIXlkiRseQLGe04Dt+N5ZIfIt8iw2lsyolDd9u2ueFW1B09jP89UjcaDliB3G3DXK+PRGpgWRuoQuFwoEAdj5hLKi3LOk4hRWQK8mk+n3GQb6QgItLpug5m0ykW8znjC8GLNuC4NvFLPE6J/3FoQ+I7SOcfKh6kqdkzpk8AAAAASUVORK5CYII='); background-size: cover; display: block;"},"children":[{"type":"text","value":"\n      "},{"type":"element","tagName":"img","properties":{"className":["gatsby-resp-image-image"],"style":"width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;","alt":"Image of text with and without zero width non-joiners","title":"","src":"/static/zwnj-db452717eaae442c4017f3b58fd4a5b4-fb8a0.png","srcSet":["/static/zwnj-db452717eaae442c4017f3b58fd4a5b4-1a291.png 148w","/static/zwnj-db452717eaae442c4017f3b58fd4a5b4-2bc4a.png 295w","/static/zwnj-db452717eaae442c4017f3b58fd4a5b4-fb8a0.png 590w","/static/zwnj-db452717eaae442c4017f3b58fd4a5b4-526de.png 885w","/static/zwnj-db452717eaae442c4017f3b58fd4a5b4-9160a.png 1024w"],"sizes":["(max-width:","590px)","100vw,","590px"]},"children":[]},{"type":"text","value":"\n    "}]},{"type":"text","value":"\n  "}]},{"type":"text","value":"\n  \n  "}]},{"type":"text","value":"\n    "}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Zero width joiner"}]},{"type":"text","value":" do the opposite of non-joiners, they bring two characters together to form a new character. This mostly applies in Arabic and "},{"type":"element","tagName":"a","properties":{"href":"https://en.wikipedia.org/wiki/Brahmic_scripts"},"children":[{"type":"text","value":"Brahmic scripts"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Byte order mark"}]},{"type":"text","value":" is a mark at the beginning of your code telling the compiler that the code is using "},{"type":"element","tagName":"a","properties":{"href":"https://en.wikipedia.org/wiki/Unicode"},"children":[{"type":"text","value":"Unicode"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{},"children":[{"type":"text","value":"Line terminators"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Line terminators are used to help with readability of the JavaScript code you write.\nAn example of a line terminator is a new line."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Reading"},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nlike"},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nthis"},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nis"},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\ntotally"},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nfine.  "}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"…but, it is awkard to read."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"javascript"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-javascript"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-javascript"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// this line of code"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"let"}]},{"type":"text","value":" result "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"42"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// is the same as this one"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"let"}]},{"type":"text","value":"\nresult\n"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"42"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"There is also another line terminator, the semicolon."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"JavaScript does this weird thing called "},{"type":"element","tagName":"a","properties":{"href":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Automatic_semicolon_insertion"},"children":[{"type":"text","value":"automatic semicolon insertion"}]},{"type":"text","value":". I say its weird because you don’t have to put semicolons in your code, but most code you see will use semicolons despite the fact that the JavaScript compiler will put them in for you."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"I don’t particularly like this feature, but who the fuck am I. For what it is worth I use semicolons in my code."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{},"children":[{"type":"text","value":"Writing notes"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Writing code can be really difficult, and reading your own or others code can be even more difficult. That’s where comments come in. The compiler ignores comments completely, they are only there for the readers benefit."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can write comments as single lines in your code by using two slashes "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"//"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"javascript"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-javascript"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-javascript"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// Here is a single line comment"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"let"}]},{"type":"text","value":" result "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"42"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can also write comments as several lines using a slash and star to start it "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"/*"}]},{"type":"text","value":", and a star and slash to end it "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"*/"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"javascript"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-javascript"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-javascript"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"/* \nHere is a\nmultiline \ncomment \n*/"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"let"}]},{"type":"text","value":" result "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"42"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]}],"data":{"quirksMode":false}},"frontmatter":{"title":"Mind your grammar","date":"September 13, 2018","summary":"The grammar that makes up the JavaScript programming language.","posttype":"article","topicname":"WTF JavaScript","seriesname":"Starting from the top","topicurl":"/wtfjs/","seriesurl":"/wtfjs/starting-from-the-top/"}},"allMarkdownRemark":{"edges":[{"node":{"id":"8183aea8-d8c9-53ae-bc92-cb97a34e5cc3","fields":{"slug":"/wtfjs/starting-from-the-top/mind-your-grammar/"},"frontmatter":{"title":"Mind your grammar","date":"September 13, 2018","posttype":"article","topicname":"WTF JavaScript","seriesname":"Starting from the top"}}}]}},"pageContext":{"slug":"/wtfjs/starting-from-the-top/mind-your-grammar/","previous":{"fields":{"slug":"/wtfjs/starting-from-the-top/"},"frontmatter":{"title":"Starting from the top","date":"2018-09-12","posttype":"series","topicname":"WTF JavaScript","seriesname":"Starting from the top"}},"next":null,"seriesname":"Starting from the top","topicname":"WTF JavaScript"}}