JavaScript 101: Introduction to Modern JavaScript.
Tags: javascript, webdev, beginners, programming
Published: 2022-02-11 14:48:55

So, you are new to JavaScript? So am I, Or at least I was a few months ago. 

Before we really get in depth with the complexities of the language and why it's basically the go to language for beginners, we will first begin with a history lesson and then learn it's basics.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lmyoe3zzbjqc9tubkdkc.jpeg)


JavaScript, sometimes known as JS, is a programming language that, together with HTML and CSS, is one of the essential technologies of the World Wide Web.

On the client side, over 97 percent of websites employ JavaScript for web page behavior, with third-party libraries frequently incorporated. 

**Brendan Eich** invented JavaScript in 1995. It was created for Netscape 2, and in 1997, it became the ECMA-262 standard. The Mozilla foundation continued to develop JavaScript for the Firefox browser after Netscape turned it over to ECMA. The most recent version of Mozilla was 1.8.5. (Identical to ES5).

JavaScript was presented to the ECMA international standards organization by Netscape and Brendan Eich in 1996, and a technical committee (TC39) was formed to further develop the language.

The first edition of ECMA-262 was published in June 1997.



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r3xgfltirnlci93supqv.jpg)


`It's all boring, I know but history is super important.`




Continuing on, when the TC39 group met in Oslo in 2008 to discuss ECMAScript 4, they were split into two camps: those who supported ECMAScript 4 and those who opposed it.

- **The ECMAScript 3.1 Camp**: 
Microsoft and Yahoo intended to upgrade from ES3 incrementally.

- Adobe, Mozilla, Opera, and Google formed the **ECMAScript 4 Camp** to push for a major ES4 upgrade.

August 13 2008, **Brendan Eich** wrote an email:

> It's no secret that the JavaScript standards body, Ecma's Technical Committee 39, has been split for over a year, with some members favoring ES4, a major fourth edition to ECMA-262, and others advocating ES3.1 based on the existing ECMA-262 Edition 3 (ES3) specification. Now, I'm happy to report, the split is over
.

The solution was to work together:
1. ECMAScript 4 was renamed to ES5.
2. ES5 should be an incremental upgrade of ECMAScript 3.
3. Features of ECMAScript 4 should be picked up in later  versions.
4. TC39 should develop a new major release, bigger in scope  than ES5.
    
The code name for the upcoming new release (ES6) was "Harmony" (because to the division it caused?).

The ES5 project was a big success.
It was first published in 2009, and by July 2013, all major browsers (including Internet Explorer) were completely compliant.

ES6 was also a huge success. It was released in 2015, and all major browsers were fully compliant by March 2017:

The latest ES Version is the ES 12 which was released in June 2021.


Enough with the history lesson now let's see the syntax. 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fzinnrylnl2dx968n3ox.jpeg)

**console.log()**
To log or print messages to the console, use the console.log() method. 
It can also print objects and other information. 

```
console.log("Hello World");
//Prints Hello World
```

**Declaring Variables**
Any of these three keywords, along with a variable name, can be used to declare a variable in JavaScript:

- In JavaScript versions prior to ES6, the **var** is used.
- When a variable can be transferred, **let** is the preferable method of declaring it.
- When declaring a variable with a constant value, **const** is the preferred method.

```
var age;
let height;
const price = 300;
```

**Undefined**
undefined is a JavaScript value that denotes the absence of a defined value. The value of variables that are declared but not initialized will be undefined.

```
var age;
 console.log(age); 
// Prints: undefined
```

**let Keyword**
In JavaScript, _let_ creates a local variable that can be renamed. Initialization of a _let_ variable during its declaration is optional. If no value is assigned to a _let_ variable, it will be undefined.

```
let age; 
console.log(age); // Prints: undefined
count = 21;
console.log(age); // Prints: 21
```

**const Keyword**
The term const can be used to declare a constant variable. It must be given a task. Any attempt to re-assign a const variable will result in a runtime error in JavaScript.

```
const numberOfColumns = 4;
numberOfColumns = 8;
// TypeError: Assignment to constant variable.
```

**Methods**
Methods return information about an object and are called by putting an instance, a period, the method name, and parentheses to the end of the method name.

```
`Math.random();
// Returns a number between 0 and 1`
```

**String .length**
A string's .length property returns the total number of characters in the string.

```
let message = 'Hello lux academy';
console.log(message.length);
// Prints: 17
```

**Numbers**
Numbers are the most basic data type.
They encompass all integers as well as floating point numbers. 

```
let number = 2000; 
 let cash = 500;
```

**Libraries**
Methods can be accessed by inserting the library name, a period, the method name, and a set of parentheses to the library name. 

```
Math.random();
// Math is the library
```

**Boolean**
A primitive data type is a boolean.
It is possible for them to be true or false. 

```
let football = true;
```

**Single Line Comments**
Single-line comments are formed in JavaScript by using two consecutive forward slashes //.

```
//This is a comment
```
 

**Multi-line Comments**
Multi-line comments are formed in JavaScript by encircling the lines with /* at the start and */ at the conclusion. Comments are useful for a variety of purposes, such as explaining a code block or offering hints.

```
/*  
This is a really long comment
which is referred to as a multi-line
comment. 
*/
```

**Strings**
Strings are the most basic data type.
They're any collection of characters (letters, spaces, numbers, or symbols) encircled by single or double quotations. 


```

`let string = "This article is really good.";
 let string = "JavaScript is the best.";`
```


**Arithmetic Operators**
JavaScript supports arithmetic operators for:
-   + addition
-   - subtraction
-   * multiplication
-   / division
-   % modulo

```
// Addition
2 + 1
// Subtraction
19 - 2
// Multiplication
2 * 25
// Division
49 / 7
// Modulo
100 % 20
```

**Assignment Operators**
Based on the value of its right operand, an assignment operator assigns a value to its left operand.
Here are a few examples:
- *= multiplication assignment 
- /= division assignment 
- += addition assignment 
- -= subtraction assignment


```
`let number = 100;
// Both statements will add 10
number = number + 10;
number += 10;
console.log(number); 
// Prints: 120` 
```

**String Concatenation**
The + operator in JavaScript can be used to concatenate multiple strings. Multiple strings and variables containing string values have been concatenated in this example. The concatenated string will be stored in the displayText variable when the code block has been executed.

```
let team = 'chelsea';
let opponent = 'arsenal'; 
let displayText = 'Yesterday ' + opponent  + ' was beaten by ' +  team + '.';
console.log(displayText);
// Prints: Yesterday arsenal was beaten by chelsea.
```

**String Interpolation**
The technique of evaluating string literals containing one or more placeholders is known as string interpolation (expressions, variables, etc).
It's possible to do it with template literals: text $expression text. 

```
let price = 700;
// String concatenation
'The car cost ' + price + ' dollars.';
// String interpolation
`The car cost ${price} dollars.`;
```

**Variables**
Variables are utilized whenever a piece of data needs to be stored. A variable is a collection of data that can be used elsewhere in the program. Because variables can be used to replace the same value in several locations, they ensure code re-usability.

```
const name = 'Mwovi';
let age = 21; 
console.log(name + ' is ' + age + ' years old.');
// Prints: Mwovi is 21 years old.
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4o3ijzx4ntp6g7zvtjpc.jpeg)

These basic JavaScript syntax are enough to get you started on the most popular language on the internet.


**Side-Note**
It is common for people, especially beginners to confuse between java and JavaScript. However as Professor Snape would say, 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/coz9pnn5qwiucssbn1qh.jpg)

This would be akin to confusing car and carpet.
Key differences in the two are, Java is an object-oriented programming language, whereas JavaScript is an object-oriented scripting language. Java builds apps that operate in a virtual machine or in a browser, whereas JavaScript is exclusively used in a browser. While Java code must be compiled, JavaScript code is pure text.

In JavaScript circles such a mistake would cost you your life as you know it.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ubekouja2mvephbj02tv.jpg)