Primitive Data Types - JavaScript Core Concepts

angelinewang

Angeline Wang

Posted on October 26, 2022

Primitive Data Types - JavaScript Core Concepts

"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 
Enter fullscreen mode Exit fullscreen mode

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 
Enter fullscreen mode Exit fullscreen mode

#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 
Enter fullscreen mode Exit fullscreen mode
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 
Enter fullscreen mode Exit fullscreen mode
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
Enter fullscreen mode Exit fullscreen mode
.replace()

This replaces a substring with a string.
Here’s an example:

'good morning'.replace('morning', 'night')
Enter fullscreen mode Exit fullscreen mode
.charAt()

This finds the character at the given index.
Here’s an example:

'tutorial'.charAt(e)
Enter fullscreen mode Exit fullscreen mode
.toUpperCase()

This makes all the characters in the string uppercase.
Here’s an example:

'error message'.toUpperCase()
Enter fullscreen mode Exit fullscreen mode
.toLowerCase()

This makes all the characters in the string lowercase.
Here’s an example:

'WHO\'S HEADLINING THIS CONCERT?'.toLowerCase()
Enter fullscreen mode Exit fullscreen mode
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!
Enter fullscreen mode Exit fullscreen mode
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)
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Another way to convert a string into a number is using a unary operator

Here’s an example:
+'23' // => 23
Enter fullscreen mode Exit fullscreen mode

Finally, you can also convert a string into a number using a Number constructor.

Here’s an example:
Number('445') // => 445
Enter fullscreen mode Exit fullscreen mode
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"
Enter fullscreen mode Exit fullscreen mode
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"
Enter fullscreen mode Exit fullscreen mode

#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

ECMAScript Specification: Data Types and Values

The Secret Life of JavaScript Primitives by Angus Croll

💖 💪 🙅 🚩
angelinewang
Angeline Wang

Posted on October 26, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

How to get current date in JavaScript
codenewbie How to get current date in JavaScript

November 15, 2022

Methods - JavaScript Core Concepts
codenewbie Methods - JavaScript Core Concepts

October 26, 2022

5 tips for beginners to web development
codenewbie 5 tips for beginners to web development

November 24, 2021