Tools setup and introduction

Before starting our coding journey with JavaScript, it’s necessary to have the proper tools and configuration setup in the machine.

I have listed down a bare minimum opinionated list of tools which is required to work productively. I have tried to explain why a certain tool is needed and also have added some configuration to ease setup in your machine. It can be found here:

KarthikKadambi/front-end-tooling

As most of the time, the code we write will be run on the browser it will be good to have a fair understanding of how things work under the hood. Below video touch base on the same.

Introduction to JavaScript Engine

JavaScript

Straight from the MDN docs:

JavaScript (JS) is a lightweight, interpreted or JIT compiled programming language with first-class functions. Most well-known as the scripting language for Web pages, many non-browser environments also use it, such as node.js and Apache CouchDB. JS is a prototype-based, multi-paradigm, dynamic scripting language, supporting object-oriented, imperative, and declarative (e.g. functional programming) styles. Read more about JavaScript.

Let’s break it down:

1. Lightweight:

We can think about this in different ways:
1. I think JavaScript can be thought of as lightweight because (at least up to ECMAScript 5) it isn’t a particularly “big” language with many many constructs. It’s actually a fairly simple language for the most part.

2. Is the interpreter/compiler/execution environment for that language simple and fast? Which is really only possible if the language itself is simple. JavaScript engines have become a lot more complex in the past few years, but the tradeoff is that executing JavaScript code has become a LOT faster.

3. Another way to think of this is to consider the language “ecosystem”: how many libraries and frameworks are built for it? While libraries and frameworks are useful, they can make a language feel less lightweight, because if using those libraries and frameworks becomes a necessary part of working with the language, then it’s more stuff. In that sense JavaScript becomes less lightweight by the day as more and more libraries and frameworks are released.

In conclusion, I’d say that I think the core JavaScript language is still fairly lightweight, but the JavaScript ecosystem is becoming a lot heavier by the day.

2. Interpreted:

An interpreted language is one where the instructions are converted from what you have written into machine code as the program is being run. An interpreted language basically gets an instruction from the program source, converts it to machine code, runs that machine code and then grabs the next instruction from the source to repeat the process.

3. JIT Compiled:

JavaScript is not truly interpreted in the sense that it does a Just In Time compilation of source code to produce machine code.

4. Prototype-based:

In the prototypal inheritance form, objects inherit directly from other objects. All of the business about classes goes away. If you want an object, you just write an object. But code reuse is still a valuable thing, so objects are allowed to be linked together in a hierarchy. In javascript, every object has a secret link to the object which created it, forming a chain. When an object is asked for a property that it does not have, its parent object will be asked… continually up the chain until the property is found or until the root object is reached.

Each function in JavaScript (which are objects themselves) actually has a member called “prototype”, which is responsible for providing values when an object is asked for them. Having this member allows the constructor mechanism (by which objects are constructed from functions) to work. Adding a property to the prototype of a function object will make it available to the constructed object, as well as to all of the objects which inherit from it.

5. dynamic scripting:

Dynamically-typed languages are those (like JavaScript) where the interpreter assigns variables a type at runtime based on the variable’s value at the time.

Statically typed langauage like Java has typed variables but JavaScript has typed values.

6. Object-oriented:

JavaScript also supports Object-oriented design.

In classical inheritance, the programmer writes a class, which defines an object. Multiple objects can be instantiated from the same class, so you have code in one place which describes several objects in your program. Classes can then be organized into a hierarchy, furthering code reuse. More general code is stored in a higher-level class, from which lower level classes inherit. This means that an object is sharing code with other objects of the same class, as well as with its parent classes.

7. Imperative and Declarative:

JavaScript also supports imperative and declarative programming styles. Simple explanation can be found in the below site:

Imperative vs Declarative Programming

Next Steps:

From the next post i will start with core concepts of JavaScript starting with statements.

I wont be writing much of text. I will be posting screenshots of code from VSCode and the idea here is to see:

1. Explaination
2. Code
3. Output

all in a single view and i feel seeing things visually of all the above together will help understand the concepts.

If you feel this article helped in some, please re-share and hit 👏 to appreciate.