01. A Brief Introduction to JS

1.1: JavaScript: First Contact

• If you are new to web dev and and you search on internet for tools and tutorials for building a website or application, there is a very good chance that the first thing that you will come across is something built using JS framework like React, Vue, Angular or Svelte etc. We are in a new era of web dev, where JS is primary language for everything be it browser, server or desktop applications.

• Good old days of building websites with HTML, CSS and a dash of JS are gone, new technology stack is built around using JS and its frameworks. Course is structured so that we dive deep into complex things first, pick them apart, see what’s happening, how things work and how to work with Modern JavaScript.

• This approach of taking something complex, breaking it down and then building your own versions of it is best approach to learn new things. If you look at Photo.js this is a react component. You won’t understand anything right now but here’s the thing. It is not JavaScript (JS) but rather it is JSX (a syntax extension of JS) created for the react js framework.

• Should I learn JSX, if I am interested in learning React? No you should learn JS first. JSX is an extension and you have to know basics because once you know the basics and your fundamentals are clear then you will pick up JSX and other JS flavors pretty quickly. Photo.js has a lot of components that we will discuss in course. Objects and methods, functions, templateliterals, arrays and so on. At the end of the cours we will return to this component, and you will see knowing the basics can help you to make sense of this component that we have no idea about right now.

---

1.2 Navigating the JS Landscape

• Looking around it might be daunting to see so many things associated with JS label. There is Vanilla JS, ECMAScript, ES6, ES2015, ES2017, TypeScript, Node.js, JSX, CoffeeScript, React, Angular, Vue, Gulp, Babel, WebPack and somehow all these things are related to or are under the umbrella of JS. And everyone seems to have an opinion what you should learn first.

• JS landscape is evolving rapidly because JS has become such an essential part of the web platform and all these different things and names encapsulate a discrete aspect of the language itself or how it’s implemented.

• The core language; sometimes referred to as vanilla JavaScript or Vanilla JS is a scripting language for the web. This is what you write when you write JS and what we will be covering in this course. Everything else is built on top of vanilla JS itself.

• Browser implementation specification for JS is called ECMAScript named after European Computer Manufacturers Association, ECMA. This group is incharge for defining the specification for JS. Now ECMAScript is not the language but the official description of how language should be interepreted by browsers. This is to make sure when we write JS it behaves the same way no matter what browser is being used.

• When people say they write ECMAScript, ES6, ES2015 or ES2017, ES2020 etc. they usually mean they are writing JS that is cutting edge of development, effectively, the JS of future. When people write some version of ECMAScript they typically use a tool called Babel to convert their code back into JavaScript the current browsers can read.

• JavaScript is an opinionated coding language and some developers either don’t like JavaScript’s opinions or they need specific features not provided by JS. To get around this issue, developers came up with abstracted versions of JS with these additional features added. Most popular of these is TypeScript. TypeScript is heavily used in modern JS Frameworks and one can usually spot typescript by looking at the file name as extension of typescript files are .ts. Think of TypeScript, CoffeeScript and all the variations of JS as the dialects of JS.

• Modern web runs on JS frameworks. There are tools written in jS which allow us to render content on the web in the form of applications. The most popular of these frameworks are React, Vue, Angular. They all add an abstraction layer on top of JS to do things in a more streamlined and efficient way.

• E.g. React uses JSX or JS-XML which simplifies how we mix JS and HTML.

• With JS frameworks comes build tools and helper applications to automate the process of optimizing the human readable JS for the best browser performance. E.g. npm, WebPack, Gulp, Grunt etc.

• In last several years JS has migrated from browser to server. JS server runtime used to run JS everywhere. We can now write JS to run on the backend as well as the frontend of the application. Node.js is the ubiquitous JS server runtime used for this purpose and when you work with modern JavaScript you will be interacing with Node.js on your computer through the npm.

• JavaScript is the core underlying language for anything and everything web. Understanding pure vanilla JS is the key to understanding all of the other stuff. We will learn JS first and then focus on specializing and optimizing our knowledge.

---

1.3 Tools for working with JS

• Modern browser

• Code Editor

• Live Server Environment - extension on VSCode by Ritchwik Dey

• Browser Console

---

1.4 Linting and Formatting

• To help with formatting and indentation we have automatic color coding and other features, we will install Prettier and ESLint. Prettier helps us with formatting and writing clean code.

• ESLint helps automatically detect coding errors and can do basic cleanup automatically. Both of these extensions need Node.js. Node.js is JS server runtime. You can download Node.js from here.

---

1.5 Browser Console

• Browser Console is a JS dev’s best friend, alongside code editor and linting tools and automation tools, well that’s a lot of best friends which does not exist irl. r/absolutelynotmeirl.

• When you write JS you work in a code editor, problem is the JS doesn’t run in code editor it runs in the browser. So you need some way of interacting with the JS directly inside the browser, that’s what console is for.

• Above we see that on calling the toggleLid() function on backpack object the status is changed. It just goes to show we have access to all the stuff on the backend inside the code editor, we also have access to all the stuff that’s happening in the code editor inside the browser itself, through the console. We will use this console to debug our code and figure out what is going on.

1.6 JavaScript Language Basics

• Ref: script.js

• Write your JS from top to bottom, that’s how browser will read it. Define all variables, objects, functions and anything else before you use them, higher up in the file, to make sure that browser has read the function, object or whatever it is you have defined before you have called it, otherwise there could be problems with your javascript code and you wouldn’t know it unless you open the console.

• Comments can either be single line // or multi-line /**/. If you type /** then in VSCode above a function you will get ability to write a detailed comment here you can write the kind of parameter function expects, what is the function name and what it returns.

• In JS spacing is purely for the human user. Browser doesn’t care at all about spacing. You can write all your JS in a single line and browser will still understand it, but humans will not, and is not recommended. Best practice is to use indentation to visualze hierarchy.

• Semi-colons are not required, prettier forces this but JS doesn’t cares about it. Depends on coding standards. ES-Lint and Prettier will figure out if you if you want ; or not. If someone says one or the other is wrong, then they are wrong and that’s not true. This is purely editor/coding standard preference.

• Quotation marks are again developer/coding standards preferred. You can either use "" or '', stick to being consistent and follow one or the other.

---

1.7 Learning JavaScript Backward

• When learning JS for the first time, you typically start with the basics, variables, functions and then more advanced topics. Due to popularity of JS Frameworks, React and Vue today the first introduction people have to JavaScript is often through advanced objects and methods. For this reason, we are going to go head first approach in this course. We will start with objects and methods, then Data types and DOM and finally methods functions and events at the very end.

• This would mean we will see concepts before we fully cover them so we can see them in real context first and then learn the basics about them later on. The reason behind this is learning JS requires not just understanding the basic premises and shapes and formulas of the code. To really learn the language you have to focus on finding ways that makes the JavaScript language make sense to you.

• If you don’t understand something, check out MDN documentation linked for the topic.