Dividing JavaScript definition into pieces
Tags: javascript, beginners, webdev
Published: 2020-08-06 02:04:52

The goal of this post is to divide and understand each part of the Javascript definition. I will explain an overview of each concept instead of explaining each concept deeply. If you want to know more about some concept, let me know in the comments.

## Definition

JavaScript (JS) is a lightweight, prototype-based, multi-paradigm, single-threaded, dynamic language with first-class functions. As a multi-paradigm language, JavaScript supports event-driven, functional, and imperative programming styles. It can be an interpreted or just-in-time compiled programming language, depending on the implementation. 

Also, JavaScript is a programming language that conforms to the ECMAScript specification.

Ok, this is a complete definition of JS. But, what does each part of this definition mean?

### ECMAScript

It is called ECMAScript to the specification named as `ECMA-262`. It contains the specification to create a general-purpose scripting language.

ECMAScript provides the rules, details, and guidelines that a scripting language must observe to be considered as an ECMAScript compliant. This was published by Ecma International, which is an organization that creates standards for technologies.

For more details about the specification: https://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf

### Lightweight

A programming language is lightweight when it is easy to implement, has a minimalist syntax and features, and uses a very small amount of memory while running.

### Interpreted or Just-in-time compiled (JIT)

At the beginning of JS, we could call it as an interpreted language because its engines were mere interpreters but nowadays there is a new generation of ECMAScript engines that implement just-in-time compilation (JIT) to improve its performance.

So, we cannot call JS as an interpreted language because it entirely depends on the implementation.

### Multi-paradigm

A programming paradigm is a style or a way of thinking about software solutions based on some principles of programming. It is a method to solve a problem which uses tools and techniques that are available for us. 

Some languages are easy to write in specific paradigms but they are difficult or imposible in other paradigms. In the case of JavaScript, it makes us easy to follow the event-driven, functional, and imperative programming styles. I will explain each one:

**Event-drive programming**

Event-driven programming is a programming paradigm in which the flow of program execution is determined by events. An event-driven application is designed to detect events when they occur (for example: a click or an event fired by an EventEmitter), and then deal with them using an appropriate event-handling procedure.

```jsx
// WEB
const btnGreeting = document.getElementById('greeting');
btnGreeting.addEventListener("click", function () {
  console.log("I am handling btnGreeting event click");
});

// NODE
const EventEmitter = require("events");

const emitter = new EventEmitter();
emitter.on("greeting", () => console.log("I am handling the event 'greeting'"));
emitter.emit("greeting");
```

**Imperative programming**

Imperative programming is a programming paradigm that focuses on describing how a program operates. In imperative programming, you tell the program the steps it needs to do the task. Values used in variables are changed at the program runtime and control structures such as loops or conditionals are integrated into the code. 

Imperative programming can be divided into: Procedural Programming and Object-oriented Programming.

Procedural Programming: it's based on putting groups of instructions into procedures. Procedures, also known as functions, simply contain a series of steps to be carried out.

Object-Oriented programming: it's based on programming objects that expose behavior (methods) and data (attributes). Then the objects send messages to communicate with each other. Object orientation can be:

Class-based: objects get state and behavior based on the class that they instantiate.

Prototype-based: objects get behavior from a prototype object.

In JS, we can program using either Procedural or Object-Oriented Prototype-based paradigms but we cannot program using the Object-Oriented Class-based paradigm because JS is a prototype-based language. 

Here an example in which we will calculate an array sum with both Procedural and Object-Oriented Prototype-based paradigms.

```jsx
/* Sum arrays elements with Imperative Paradigm */
const array = [10, 4, 3, 5, 3];

/* Procedural Programming */
let sum = 0;
for (let i = 0; i < array.length; i++) {
  sum += array[i];
}
console.log(sum) // 25

/* Object Oriented Programming */
function Calculator() {
  this.result = 0;
}
Calculator.prototype.sumArray = function (array) {
  for (let i = 0; i < array.length; i++) {
    this.result += array[i];
  }
}
Calculator.prototype.getResult = function () {
  return this.result;
}

const calculator = new Calculator();
calculator.sumArray(array);
console.log(calculator.getResult()); // 25
```

**Functional programming**

Functional programming is a programming paradigm that focuses on what a program must accomplish. It works with the composition of pure functions and the avoidance of shared state, mutable data and side effects. For example, a functional programming approach is using functions like map, reduce and filter instead of using loops and conditionals because your programs are more abstract and less focused on each step of the processing. 

When you stop reasoning in a low level of abstraction and start thinking more at a higher level, you start thinking on functional programming.

Now, we will calculate an array sum with Functional Programming:

```jsx
/* Sum arrays elements with Functional Paradigm */
const array = [10, 4, 3, 5, 3];

const sum = array.reduce((accum, currentValue) => accum + currentValue);

console.log(sum); // 25
```

### Prototype-based

In the Imperative programming section, we defined Object-Oriented programming. 

Object-Oriented programming can be Class-Based or Prototype-Based. 

On the one hand, in a Class-based language, the inheritance occurs through the definition of classes. Classes describe a family of objects that have the same set of methods and properties. When you need to create an object, you have to instantiate a Class. Java or Python are languages that support Object-Oriented Class-Based programming.

On the other hand, we have languages that are prototype-based like Javascript and other ECMAScript implementations. A Prototype-based language has the notion of a Prototypical Object. A Prototypical object is an object used as a template from which you can get the initial properties for a new object. Any object can be associated as the prototype of another object, so that the second object can share the properties of the first one.

### Single Threaded

JavaScript code is executed in a single thread which means that only one statement is executed at the time.

To explain it, I will explain JS Runtime.

The JS Web Runtime is composed by a JS Engine, Web API's, Callback Stack and Event Loop. In JS Runtime, we run our Javascript code.

Each web browser has a JS Runtime implementation. For this reason, we can run JS code inside it. Each web browser has its own Engine JS implementation, too. For example: Chrome has V8, Mozilla has Spidermonkey, IE has Chakra and Safari has Nitro.

JavaScript code is executed in a single thread but JavaScript runtime is not executed in a single thread. For this reason, we can execute tasks asynchronically. Thread pool exists in JS runtime but we don’t have to worry about it because Runtime takes care of it.

Then, V8 JavaScript engine has two main elements: Memory Heap and Call Stack. Memory Heap is where the memory allocation takes place and Call Stack is where the runtime keeps track of function calls. So, in the single thread, the functions loaded in Call Stack are executed. We have to be careful about blocking the Call Stack with functions which take a lot of time because any other function won't be executed in that moment. When we execute asynchronous tasks, Web API's, Callback Stack and Event Loop come into action. But this is outside the scope of this section.

### Dynamic

A dynamic programming language is a programming language in which you can do many tasks at runtime. In a static programming language, you have to do the same tasks at compile time.

For example, in JavaScript it is possible to change the type of a variable or add new properties or methods to an object while the program is running. This is opposed to static programming languages, in which such changes are not possible.

### First-class functions

A First-class function programming language is a programming language where the functions are treated like any other variable.

For example, in JavaScript, a function can be passed as an argument to other functions, returned by another function and assigned as a value to a variable.

Examples:

```jsx
/* They can be assigned to variables */
const hello = function () {
  console.log('Hello!');
}
hello(); // Hello!

/* They can be assigned to attributes of objects */
const person = {
  name: 'Julián',
  lastname: 'Scialabba',
  sayHello: function () {
    return `Hi! I am ${this.name} ${this.lastname}`;
  }
}

console.log(person.sayHello()); // Hi! I am Julián Scialabba

/* They can be sent as an argument to others functions */
const reducerSum = function(accum, value){
  return accum + value;
}
const getSumArray = function(array) {
  return array.reduce(reducerSum);
}
console.log(getSumArray([5,4])); // 9

/* They can be returned by others functions */
const generateCalculatorMultiples = function(baseNumber) {
  return function(numberToMultiply){
    return baseNumber * numberToMultiply;
  }
}

const calculatorMultiplesOf6 = generateCalculatorMultiples(6);
console.log(calculatorMultiplesOf6(5)) // 30
console.log(calculatorMultiplesOf6(8)) // 48
```

## Final Words

In this post, we have seen each part of JS definition. 

Did I forget any other concept? Do you want to share anything else? Do you want that I explain more deeply one of the concepts before explained?

Let me know your thoughts in the comments! Thanks for reading!