Primitive Data Types - JavaScript Core Concepts
Tags: codenewbie, javascript, webdev, beginners
Published: 2022-10-26 17:24:43

**"JavaScript Core Concepts"** is a 5-Section Series consisting of:

Section 1 Data Types & Variables 
Part 1 Variables
***Part 2*** **Primitive Data Types**
Part 3 Complex/Composite Data Types 

Section 2 Functions & Methods
Section 3 Control Flow & Conditional Statements 
Section 4 Past, Present & Future 
Section 5 Data Structures & Algorithms

...

## JavaScript Primitive Data Types
### What is the purpose of primitive data types?
Primitive data types are used to define immutable values, ones that cannot be changed. 

### How can you use primitive data types?
Booleans, strings and numbers can be wrapped by their object counterparts

#### `typeof` Operator
This returns a string indicating a value/operand’s data type. In ES6, the variable must be initialized before the usage of this operator. 

This operator can be used with or without parentheses. For example: `typeof(x)` or `typeof x`. And the best use case is when you need to identify the type of the value in order to process them accordingly, 

However, this operator may produce unexpected results in some cases. For example: `NaN` returns `number`, `''` returns `string`, `'12'` returns `string`, `Null` returns `object`, `[1, 2, 4]` returns `object`, `function(){};` returns `function`. 

#### `.length` Method
In action, this method means that a string value is coerced into an object using `.returnMe()` in order to access property length. 

However, the created string object is only used for a fraction of a second, and then disposed of. Even though primitives do not have properties, Javascript coerces between primitives and objects. 

### List of Primitive Data Types 
#### #1 Boolean 
##### What are possible boolean values? 
There are only 2 boolean values: `true` and `false`.

##### How do you use booleans? 
All JavaScript values can be converted into booleans, and all will become `true`, expect these falsy values: `false`, `0`, `NaN`, `''`, `null` and `undefined`. 

To convert a value into a boolean and flip it, you can use the bang operator: `!`. This will make any truthy value false, and any falsy value true. 

###### Here’s an example: 
```
!false // => true 
!20 // => false 
```
To convert a value into a boolean, you can use the double bang: `!!`. The first bang converts the value into a boolean and flips it, and the second bang flips it back.

###### Here’s an example: 
```
!!false // => false
!!20 // => true 
```
#### #2 Null 
The null data type only has one value: `null`.

#### #3 Undefined 
`undefined` is a variable without an assigned value.

#### #4 Number 
A number is the first of 2 JavaScript numeric primitive data types. 

##### What does a number store?
A number stores positive floating-point numbers between 2^-1074 to 2^1024, negative floating-point numbers between 2^1074 to 2^1024, and integers between 2^53 to 1 and 2^53 to 1. Values outside these ranges and are positive above the maximum are represented as +Infinity, positive values below the minimum are represented as +0, negative values below the maximum are represented as -Infinity, and negative values above the minimum as represented as -0.

##### What are the special number values?
###### 1. Infinity 
You can test for infinity using `isFinite`.

Here’s an example:
```
console.log(1 / 0) // => Infinity
console.log(-1 / 0) // => -Infinity
console.log(isFinite(1 / 0)) // => false 
```

###### 2. NaN
NaN means not a number, and this is the result of an arithmetic operation that cannot be expressed as a number. For example, it’ll be the value shown after multiplying a number with a string. This is the only value in JavaScript that is not equal to itself. 

You can test for NaN using `isNan`.

Here’s an example: 
```
console.log(12 * 'b') // => NaN
console.log(isNaN(12 * 'b')) // => true 
```

##### When are numbers used?
Numbers can be used with all standard arithmetic operators. They can also be used with Math object objects, and for advanced functionality including square root, rounding, and the random generator. 

#### #5 BigInt 
`BigInt` is the second of the 2 numeric JavaScript primitive data types. Its purpose is to represent integers with arbitrary precision. 

##### What does a BigInt store? 
A `BigInt` stores large integers that are beyond the safe integer limit for numbers. 

##### How do you create a BigInt?
To create a `BigInt`, you need to append `n` to the end of an integer, or call the constructor. 

##### How does a BigInt behave?
A `BigInt` behaves like a number when converted to a boolean with conditional statements, or operators, and operators, & bang operators. 

#### #6 String 
##### What is a string?
A string is a sequence of characters defined by wrapping text in single or double quotes. 

##### What are string methods? 
Strings have in-built properties and functions which allow us to access information about the string or modify it in some way.

##### Common string methods 
###### .length()
This outputs the number of characters in a string.
Here’s an example: 
```
'Angeline'.length
```

###### .replace()
This replaces a substring with a string. 
Here’s an example: 
```
'good morning'.replace('morning', 'night')
```

###### .charAt()
This finds the character at the given index.
Here’s an example: 
```
'tutorial'.charAt(e)
```

###### .toUpperCase()
This makes all the characters in the string uppercase.
Here’s an example: 
```
'error message'.toUpperCase()
```

###### .toLowerCase()
This makes all the characters in the string lowercase.
Here’s an example:  
```
'WHO\'S HEADLINING THIS CONCERT?'.toLowerCase()
```

##### Concatenation
Concatenation is the process of joining two strings together through an `+` operator, backticks, or `String.concat()`.
Here’s an example: 
```
console.log(a + ' ' + b + '!') // => hello world!
console.log(`${a} ${b}!`) // => hello world!
```

##### Get a substring of the original string
To get the substring of the original string, pick individual letters, and then use `String.substr()`.

##### Convert a string into a number
To convert a string into a number, you can use `parseInt` or `parseFloat`. 

`parseInt` takes a numeric string and converts it to an integer, providing a base as the 2nd argument.

###### Here’s an example: 
```
console.log(parseInt('45', 10)) // => 45 (base 10 is decimal)
console.log(parseInt('1011', 2)) // => 11 (base 2 is binary)
console.log(parseInt('a4', 16)) // => 164 (base 16 is hexadecimal)
```

`parseFloat` converts a string into a float/decimal number and does not need a base.

###### Here’s an example:  
```
console.log(parseFloat('67.4894')) // => 67.4894
console.log(parseFloat('32')) // => 32
```
Another way to convert a string into a number is using a unary operator

###### Here’s an example:
```
+'23' // => 23
```
Finally, you can also convert a string into a number using a `Number` constructor.

###### Here’s an example: 
```
Number('445') // => 445
```

##### Concatenate Strings & Numbers 
This means adding a number to a string, or vice versa, and the result is always a string.

###### Here’s an example: 
```
console.log('32' + 32) // => "3232"
console.log(2 + 12 + '9') // => "149"
```

##### Convert Numbers into Strings
This can represent textual data. For example, a set of elements of 16-bit unsigned integer values where each element in the string occupies a position/index. This can also create another string based on an operation on the original string. 

There are 3 different ways to convert numbers into strings.

###### Here are code examples:
```
(220).toString() // => "220"
'' + 220 // => "220"
String(121) // => "121"
```

#### #7 Symbol
Symbols are unique and can also be used as a key of an object property. 

...

### Resources for Further Exploration:
[MDN Web Docs: JavaScript Data Types and Data Structures](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#determining_types_using_the_typeof_operator)

[ECMAScript Specification: Data Types and Values](https://tc39.es/ecma262/#sec-ecmascript-data-types-and-values)

[The Secret Life of JavaScript Primitives by Angus Croll](https://javascriptweblog.wordpress.com/2010/09/27/the-secret-life-of-javascript-primitives/)