JavaScript Simple Code Structure
Tags: beginners, html, javascript, codenewbie
Published: 2021-01-17 20:32:26

{% youtube r6GwCU7_HQA %}

---
Values that have data types but are not explicitly indicated with variables are called **untyped languages**. In JavaScript, whether it is a number or string, or any other data type, only the `var` `let` or `const` keyword is used for declaration.

**JavaScript**
```js
var name = "Bello";
```

> Untyped languages do not need a variable to be declared with a data type. They are also called **dynamically typed languages**

Examples of other untyped languages besides JavaScript are **Python**, **Perl**, **Ruby**, etc.

Other languages like **Java**, **C#**, **C++** are **static typed**. 

> A statically typed language needs a variable to declared with a data type

In Java, a declared variable will look like shown below:

**Java**
```java
String name = "Bello"; // "Bello"
```

There are 8 data types in JavaScript:
- Number
- BigInt
- String
- Boolean
- Null
- Undefined
- Symbols
- Objects

### Number
The number type is either an **integer** or a **floating-point** number.

Let's perform a mathematical operation below:

```js
let numb = 23; // integer
let score = numb; 

const length = 12.5; // floating-point
console.log(12.5 / 0.5); // 25 => integer
```

In the example above, there are two obvious observations.

> An Integer number contains no decimal, and floating-point numbers are numbers with a decimal

Other numbers are either in **infinity** or **NaN**.

**Infinity** is a special value that is greater than any number.

```js
console.log(1 / 0); // Infinity
```

Or reference it directly:

```js
console.log(Infinity); // Infinity
```

Note: `Number.POSITIVE_INFINITY` is `Infinity` and `Number.NEGATIVE_INFINITY` is `-Infinity`.

```js
Number.POSITIVE_INFINITY; // Infinity
Number.NEGATIVE_INFINITY; // -Infinity
```

**NaN** (**Not a Number**) is an incorrect or an undefined mathematical operation

```js
console.log(Infinity / Infinity); // NaN
console.log("string" / 2); //NaN
console.log(NaN + NaN); // NaN
```

**Number** type limit is shown below:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/nx76wubn2rzd7hjpup3o.gif)

That is **Number** type maximum number is `9,007,199,254,740,991` and  minimum number is `-9,007,199,254,740,991`

Recall the Number limits with the code below:

Maximum Number
```js
Number.MAX_SAFE_INTEGER; // 9007199254740991
```

Minimum Number
```js
Number.MIN_SAFE_INTEGER; // -9007199254740991
```

---
### BigInt
Numbers greater than the maximum safe number or lesser than the minimum safe number, the *BigInt* data type can be used. It was introduced in JavaScript **ES10** (**ECMAScript 2019**).

```js
const bigInt = 1234567890123456789012345678901234567890n;
```

The `BigInt` data type number can also be treated as a regular number by appending `n` to it.

```js
1n + 2n; // 3n
7n / 2n; // 3n
```

Notice BigInt `7n / 2n` equals `3n` not `3.5` because JavaScript always rounds down such BigInt data division to the nearest figure.

The code snippet above can be rewritten as shown below:

```js
console.log( BigInt(1) + BigInt(2) ); // 3n
console.log( BigInt(7) / BigInt(2) ); // 3n
```

---
### String
A string is a text surrounded by quotation marks. The quotation marks can either be `'single quotes'`, `"double quotes"`, or `‵backticks quotes‵`

```js
console.log('single quotes'); // single quotes
console.log("double quotes"); // double quotes
console.log(`backtick quotes`); //backtick quotes
```

For single or double quotes, we have:
```js
const firstName = 'Osagie';
const lastName = 'Bello';

const fullName = 'My name is' + firstName + ' ' + lastName + '.'
console.log(fullName); // My name is Osagie Bello.
```

There's practically no difference between single quotes and double-quotes. For backtick quotes, it is purposely used for **template literal**. Template literal was introduced in **ES6** (**ECMAScript 2015**). 

The above code snippet can be rewritten as shown below:

```js
const firstName = 'Osagie';
const lastName = 'Bello';

const fullName = `My name is ${firstName} ${lastName}.`
console.log(fullName); // My name is Osagie Bello.
```

The variable in between the curly braces above and below are expressions.

```js
const calc = 2 + 5 * (22 / 3);
console.log(`The answer is ${calc}!`); 
// The answer is 38.666666666666664!
```

---
[![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1613668162316/G1zfmhxQd.png)](https://www.cssigniter.com/members/aff/go/belloosagienoah)

---
### Boolean
Boolean is a logical type that is either `true` or `false`.

```js
const nameFieldChecked = true;
const ageFieldChecked = false;
```
A Boolean value is returned during comparison:

```js
const isGreater = 5 > 3;
console.log(isGreater); // true
```

> The `Boolean` function can be used to check if a data is true or false

```js
Boolean(""); // false
Boolean("string"); // true
Boolean(1); // true
Boolean(0); // false
Boolean(undefined); // false
Boolean(NaN); // false
Boolean(null); // false
Boolean(502); // true
```

More of **Boolean** later.

---
### Null
**Null** means nothing or empty value. It makes a type on its own and doesn't point or refer to a non-existing variable or object.

```js
const age = null;
```
The code above means that age is unknown.

---
### Undefined
A variable declared without assigning it to a value is created as an **undefined** value.

```js
const myAge; 
const yourAge = undefined;

console.log(myAge); // undefined
console.log(yourAge); // undefined
```

---
### Object
All the data types mentioned above are all **primitive data types**. Objects are **non-primitive data** because they can hold as much primitive data type to a variable.

#### List
An object can be an **array**. An array is also called a *list*. The list uses zero-based indexing. 

```js
const randomStuff = [ 'brush', 23, null, undefined, false ];
console.log( randomStuff[2] );
```

![DIAGRAM (1).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1619495543709/EHPbAA--E.png)

More on **array** later.

#### Object
Just like a list, an object can contain as many primitive data types as possible.

```js
const obj = { name: 'Bello', age: 27, hobby: 'coding' };
console.log( obj[name] ); // Bello
```

![DIAGRAM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1619495414135/z-bHQLgR6.png)

The `name`, `age`, `hobby` are called the **object property names** or **object keys** while `Bello`, `27`, `coding` are called the **object property values** or simply **object values**.

More on **objects** later. 

---
### Symbol
The *symbol* is also a primitive data type used to create unique identifiers for objects.

```js
const obj = {};
const sym = Symbol();
obj[sym] = 'foo';
obj.bar = 'bar';
console.log(obj); // { bar: 'bar', [Symbol()]: 'foo' }
console.log(sym in obj); // true
console.log( obj[sym] ); // foo
console.log( Object.keys(obj) ); // ['bar']
```

The example above may not make sense, but more of the **symbol** later.

---
### The *typeof* Operator
It is not part of the data types but returns a data type as a result. 

It supports two syntaxes:

```
typeof value

typeof(value)
```

```js
typeof undefined; // "undefined"

typeof 34; // number

typeof 3n; // bigint

typeof true; // boolean

typeof "egg"; // string

typeof Symbol("id"); // symbol

typeof Math; // object 

typeof null; // object

typeof alert; // function
```

`typeof null` as an `object` is a flaw in JavaScript. It shouldn't be an object.

`typeof alert` as a `function` is convenient in practice.

They are common mistakes in JavaScript.

---
[![Buy me a Coffee](https://res.cloudinary.com/bizstak/image/upload/v1610317510/ko-fi-trans_fr3su4.png)](https://www.buymeacoffee.com/techstackmedia)

---
### TechStack Media | Bluehost
- Get a website with a free domain name for 1st year and a free **SSL** certificate.
- 1-click WordPress install and 24/7 support.
- Starting at $3.95/month.
-  30-Day Money-Back Guarantee.

<a href="https://www.bluehost.com/track/belloosagienoah/" target="_blank"> <img border="0" src="https://bluehost-cdn.com/media/partner/images/belloosagienoah/430x288/430x288PW.png"> </a>