Getting started with JavaScript - Chapter 1 🚀
Tags: javascript, beginners, codenewbie, programming
Published: 2021-01-29 20:51:15

Table Of Contents
        * 🤓[INTRODUCTION](#intro)
        * 🤔[WHY LEARN JAVASCRIPT](#why-learn)
        * 👀[COMPILING VS INTERPRETING](#comp-vs-int)
        * 👨🏻‍💻[JAVASCRIPT GRAMMAR](#grammar)
        * ➕[FUNCTIONS](#functions)
        * 😝[FUNCTION EXPRESSION](#func-expression)
        * 🤷🏻‍♂️[IIFE FUNCTIONS](#iife)
        * 🙏[THANK YOU](#thank-you)


## 🤓 INTRODUCTION <a name="intro"></a>
**WELCOME**, my dear coders, to the first chapter of the Getting started with the javascript series. I hope you are all having a great codelicious day! In the series, I will concentrate especially on the beginners. We will start from the very beginning and the very basics of the JavaScript programming language. So let's conquer the dragon and complete this quest that will improve and build your knowledge.

Here is a visual representation of the euphoria.
![euphoria](https://media.giphy.com/media/5ihf4yMV81xK/giphy.gif)

## 🤔 WHY LEARN JAVASCRIPT <a name="why-learn"></a>
JavaScript is an important language because it is the language of the web browser. Its association with the browser makes it one of the most popular programming languages in the world. JavaScript is a scripting language and as with most scripting languages it is being interpreted, rather than compiled, so it is considered as a fast programming language (of course depending on the skills it may also be a slow programming language). The beauty of the javascript programming language si that when you make changes to your code - javascript script - you can test those changes immediately; You don't have to compile the script file first. Skipping the compile step saves a great deal of time during the debugging stage of Web page development. Last but not least, modern technologies provide you to use of javascript on the Front-End as well as on the Back-End, which is kinda neat, but the pros and cons of that approach are a part of a totally different topic.


## ⚙ COMPILING VS INTERPRETING <a name="comp-vs-int"></a>
In the above section, I mentioned the "compiling" and "interpreting". And I feel obligated to explain as simple as I can, what the compiler is and what is compiling vs what an interpreter is, and what is interpreting.

### COMPILING
In computer science, **compiling represents the process of translating computer code written in one programming language into another language.** The name compiler is primarily used for programs that translate source code from a high-level programming language to a lower level language (either assembly language, object code, or even machine code).

#### Different types of compiles:
{% collapsible cross-compiler%}  A compiler can run on a computer whose CPU or operating system is different from the one on which the code it produces will run, this type of compiler is called a cross-compiler. {% endcollapsible %}
{% collapsible bootstrap-compiler%}A bootstrap compiler is written in the language that it intends to compile.{% endcollapsible %}
{% collapsible decompiler%}A program that translates from a low-level language to a higher level one is a decompiler.{% endcollapsible %}
{% collapsible source-to-source-compiler %}A program that translates between high-level languages{% endcollapsible %}

#### Compiler operations:
{% collapsible preprocessing%}A preprocessor is a program that processes its input data to produce output that is used as input to another program.{% endcollapsible %}
{% collapsible lexical-analysis%}lexical analysis, lexing or tokenization is the process of converting a sequence of characters (such as in a computer program or web page) into a sequence of tokens{% endcollapsible %}
{% collapsible parsing%}Parsing, syntax analysis, or syntactic analysis is the process of analyzing a string of symbols, either in natural language, computer languages or data structures, conforming to the rules of a formal grammar.{% endcollapsible %}
{% collapsible semantical-analysis%}Semantic analysis or context sensitive analysis is a process in compiler construction, usually after parsing, to gather necessary semantic information from the source code.[{% endcollapsible %}

### INTERPRETING
In computer science, an interpreter is a computer program that directly executes instructions written in a programming or scripting language, without requiring them previously to have been compiled into a machine language program.

#### INTERPRETER OPERATIONS:
{% collapsible parse%}Parse the source code and perform its behavior directly;{% endcollapsible %}
{% collapsible translate%}Translate source code into some efficient intermediate representation and immediately execute this;{% endcollapsible %}
{% collapsible execute%}Explicitly execute stored precompiled code made by a compiler which is part of the interpreter system.{% endcollapsible %}

## 👨🏻‍💻 JAVASCRIPT GRAMMAR <a name="grammar"></a>

### WHITESPACES
Whitespace can take the form of formatting characters or comments. Whitespace is usually insignificant, but it is occasionally necessary to use whitespace to separate sequences of characters that would otherwise be combined into a single token.

### COMMENTS
Block comments - /* */
Line ending comments //

### NAMES
A name is a letter optionally followed by one or more letters, digits, or underscores. A name cannot be a keyword:

- abstract
- boolean break byte
- case catch const continue
- debugger default delete do double
- else enum export extends
- false final finally for function
- if implements import in instanceof int interface
- long
- native new null
- package private protected public
- return short static super switch synchronized
- this throw throws transient true try typeof
- var volatile let void
- while with

### STRING
A string literal can be wrapped in single quotes or double-quotes. It can contain zero or more characters. The \ (backslash) is the escape character. 

### FUNCTIONS <a name="functions"></a>
Generally speaking, a function is a "subprogram" that can be called by code external (or internal in the case of the recursion) to the function. In JavaScript, functions are first-class objects, because they can have properties and methods just like any other object. What distinguishes them from other objects is that functions can be called. In brief, they are Function objects. Every function in JavaScript is a Function object. See Function for information on properties and methods of Function objects.

To return a value other than the default, a function must have a return statement that specifies the value to return. A function without a return statement will return a default value. In the case of a constructor called with the new keyword, the default value is the value of this parameter. For all other functions, the default return value is undefined.

The parameters of a function call are the function's arguments. Arguments are passed to functions by value. If the function changes the value of an argument, this change is not reflected globally or in the calling function. However, object references are values, too, and they are special: if the function changes the referred object's properties, that change is visible outside the function.

Function declaration:
```javascript
function name([param[, param[, ... param]]]) {
   statements
}
```
**name** - The function name.
**param** - The name of an argument to be passed to the function.
**statements** - The statements comprising the body of the function.

### THE FUNCTION EXPRESSION <a name="func-expression"></a>
A function expression is similar to and has the same syntax as a function declaration. A function expression may be a part of a larger expression. One can define "named" function expressions (where the name of the expression might be used in the call stack for example) or "anonymous" function expressions.

Function expression:
```javascript
function [name]([param[, param[, ... param]]]) {
   statements
}
```

**name** - The function name. Can be omitted, in which case the function becomes known as an anonymous function.
**param** - The name of an argument to be passed to the function.
**statements** - The statements comprising the body of the function.

## THE ARROW FUNCTIONS <a name="arrow-func"></a>
An arrow function expression has a shorter syntax and lexically binds this value

```javascript
([param[, param]]) => {
   statements
}

param => expression
```
**param** - The name of an argument. Zero arguments need to be indicated with (). For only one argument, the parentheses are not required.
**statements** - Multiple statements need to be enclosed in brackets. A single expression requires no brackets. The expression is also the implicit return value of the function.

### IIFE FUNCTIONS <a name="iife"></a>
Immediately Invoked Function Expression is a JavaScript function that runs as soon as it is defined.

```javascript
(function () {
    statements
})();
```

Example of an IIFEE FUNCTION:
```javascript
var result = (function () {
    return Math.PI;
})();
// Immediately creates the output:
console.log(result); // "3.141592653589793"
```

# 🙏 THANK YOU FOR READING!<a name="thank-you"></a>
References:
School notes...
School books...

Please leave the comment, tell me about you, about your work, comment your thoughts, connect with me! 

☕ SUPPORT ME AND KEEP ME FOCUSED!
<a href='https://ko-fi.com/Z8Z33D1HJ' target='_blank'><img height='36' style='border:0px;height:36px;' src='https://cdn.ko-fi.com/cdn/kofi4.png?v=2' border='0' alt='Buy Me a Coffee at ko-fi.com' /></a>

Have a nice time hacking! 😊