JS 101:Introduction to modern JavaScript.
Published: 2022-02-14 16:49:40

JavaScript is the most used programming language. It is used alongside HTML(Hypertext Markup Language) and CSS(Cascading Stylesheet) on the World Wide Web. It is used on the client side to manipulate webpage behavior.
JavaScript is Multi-paradigm. This means that it is event-driven, functional, imperative and incorporates object-oriented programming.


## Getting Started.
We're going to print a Hello World statement. JavaScript uses the console on the browser to print statements. You don't need to install JavaScript since it is interpreted by the browser. We just have to write code on a file with a dot js extension as such;
`myFile.js`

![Console log image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qcuorwfqgtrilv0othrj.png)

On your browser, navigate to the location of your project. Right-click and select inspect. Click on the console tab to get your console.
We can achieve the same result using an Integrated Development Environment.
 We just have to write code on a file with a dot js extension as such;
`myFile.js`

![Visual Studio Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/war6upuqihf38urrrel1.png)
We get the same print statement when we refresh the browser.

![Hello World on the browser](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mfs098e943g3rfhb9pfr.png)
The hello world statement is a bit distorted to show the difference.
**Comments**

```
// This is a single line comment
/* This
    is
    a multi-line
    comment
*/
```
## Variables
We assign variables using various keywords such as `var`, `let` or `const`
**Var** - var is used to declare variables. It is flexible in that the data can be reassigned later in the code. Var is functional scoped It is able to run in the older browser versions.
**Let** - it's used to declare variables much like var. The difference is let can not be redeclared later on. Let has a block scope. Get more information [here](https://www.educative.io/edpresso/what-is-the-let-keyword-in-javascript).
**Const** - These are constant that are block scoped much like `let` declared variables. Values cannot be reassigned but the can be redeclared through [variable declaration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#declarations). However, if a constant is an object or array its properties or items can be updated or removed.


**

## Data Types
**
**Strings** - Js support string assignment. This is used to print statements and store words or variables that are required to be processed as strings. 

```
let name = "Muriithi Gakuru";
```
The value is enclosed by quotation marks and the end of the statement has to be a semi-colon.

**Integers** - These are assigned decimal numbers 

```
let b = 210;
```
Extra large or extra small numbers can be written with scientific (exponential) notation

```
let a = 123e5;      // 12300000
let d = 123e-5;     // 0.00123
```
**Floating Point numbers** - These are declared much like integers only that these have decimal points.

```
const temperature = 13.4;

```
**Boolean Values** - These are assigned values that show whether a condition or values is `true` or `false`.

```
let isAlive = true;
// reassign to false
isAlive = false;
```

**BigInt** - Used to represent an manipulate primitive bigint values which are too big to be represented by a number.

```
const MaxSafeInteger = 9007199254740991n

const alsoHuge = BigInt(9007199254740991)
```
**Arithmetics** - JavaScript supports all mathematical arithmethic and logical operations.


## Arrays
An array is a special variable, which can hold more than one value. The values are enclosed in square brackets.

```
const cars = ["volvo", "mercedes", "Rolls Royce"]
// They can contain different data types
let details = ["Muriithi Gakuru", 23, "Wisconsin", 72.4 ]
```
**Syntax** for an array is

```
const name1 = value1 [, name2 = value2 [, ... [, nameN = valueN]]];
```

## Objects
JavaScript objects are containers for named values called properties.
These store values that can be accessed using name:value pairs. They are variables enclosed using curly braces.

```
const car = {
   type:"Fiat", 
   model:"500", 
   color:"white"
};
// You can access the value by using the key ie. property name `car.key`
console.log(car.type) // this will print Fiat

```

## Conditional Statements
Conditional statements are used to perform different actions based on different conditions.
Use if to specify a block of code to be executed, if a specified condition is true
Use else to specify a block of code to be executed, if the same condition is false
Use else if to specify a new condition to test, if the first condition is false

```
if (condition) {
  //   executed if the condition is true
}else if(condition){
 //    executed if the first condition failed
}
else{
  // executed if the previous conditions failed
}
```

## Loops

JavaScript supports different kinds of loops:

**for -** loops through a block of code a number of times

```
for (statement 1; statement 2; statement 3) {
  // code block to be executed
}
```
**for/in** - loops through the properties of an object

```
for (key in object) {
  // code block to be executed
}
```
**for/of** - loops through the values of an iterable object

```
for (variable of iterable) {
  // code block to be executed
}
```
**while** - loops through a block of code while a specified condition is true

```
while (condition) {
  // code block to be executed
}
```
**do/while** - also loops through a block of code while a specified condition is true

```
do {
  // code block to be executed
}
while (condition);
```
More information on the loops is shared [here](https://www.w3schools.com/js/js_loop_for.asp)

## Functions
A JavaScript function is a block of code designed to perform a particular task.
A JavaScript function is executed when "something" invokes it (calls it). It is called using the function name, either to print or to return a value.

```
function printName(){
   name = "Muriithi Gakuru";
   console.log("My name is", name);
}
//call the function
printName()
```
A function may take arguments making calling JS functions more dynamic.

```
function printName(name){
   console.log("My name is", name)
}
// call the function using an argument
printName("Muriithi Gakuru")
```

This is just an introduction into the vastness of JavaScript. It is a very robust language hence its uses both in the client side and the server side. Keeplearning and Follow for more content. **Cheers**!!
**credits**
_[w3schools](w3schools.com)_
_[mozilla](developer.mozilla.com)_