JavaScript Basics | Data Types & Conversions cover image

JavaScript Basics | Data Types & Conversions

Jonathan Barrios • September 3, 2020

javascript

Introduction

Welcome to the JavaScript Basics series for beginners. In Part 3, we'll focus on data types as well as implicit and explicit type conversion. See you there!

Prerequisites

To get the most out of this course, you should know:

In Part 3 of JavaScript Basics, we'll focus on:

In future JavaScript Basics posts, we will:

Note: It takes years of focused practice to become a great JavaScript engineer. This JavaScript Basics course introduces JavaScript fundamentals and will improve your coding skills, but don't expect to transform into a JavaScript expert overnight instantly. Remember, the JavaScript learning journey is a marathon, not a sprint.

Data Types and Conversions

The two main categories for JavaScript data types are Primitive and Reference. Primitive data types live in memory, directly in the stack. In contrast, the Reference data type is a reference or a pointer to a place in memory. So why is this important? If you want to operate on variables, it will help if you know the data type. For example, you want to add values to calculate total sales, you will need all numeric values to perform math operations––strings won't work.

Primitive data types:

Reference data types:

Additionally, JavaScript is a dynamically typed language, meaning that types are associated with values and not variables. The same variable can hold multiple types, while statically typed languages like C# and Java do not allow types that are not defined. That said, JavaScript's supersets like TypeScript will enable JavaScript to enjoy static typing, among other cool features. Let's write some code and explore JavaScript data types!

Primitive

// String
const name = 'Jonathan';
console.log(typeof name);

// Number
const number = 7; // Try it with quotes '7'
console.log(typeof number);

// Boolean
const magicBall = true;
console.log(typeof magicBall);

// Null: Google 'typeof null is object'
const objectbug = null;
console.log(typeof objectbug);

// Undefined
let name;
console.log(typeof name);

// Symbol
const sym = Symbol();
console.log(typeof sym);

Reference

// Array
const array_one = ['One', 'Two'];
console.log(typeof array_one);

Array can take multiple types:

const four = function() {
  console.log('Hi');
};
const array_two = ['One', 'Two', 3, four()];
console.log(typeof array_two);
// Object Literal
const destinations = {
  city: 'Portland',
  firstClass: false,
};

console.log(typeof destinations);

// Date
const appointment = new Date();
console.log(typeof appointment);
console.log(appointment);

Explicit Conversion

When you want to change the variable data type, for example, when you use an input form. Input forms store numbers as strings by default, so you will need to convert them into numbers to perform operations. Here's how:

let value; // Avoiding typing many variables

value = 'threehundred';
console.log(value);
console.log(typeof value);
console.log(value.length);

value = 300;
console.log(value);
console.log(typeof value);
console.log(value.length);

We get an undefined error because .length only works with strings, and 300 without quotes, is a number, not a string. So let's convert numbers, booleans, arrays, and objects into strings.

value = String(300);
console.log(value);
console.log(typeof value);
console.log(value.length);

value = String(true);
console.log(value);
console.log(typeof value);
console.log(value.length);

value = String([1, 2, 3]);
console.log(value);
console.log(typeof value);
console.log(value.length);

value = String(new Date());
console.log(value);
console.log(typeof value);
console.log(value.length);

We can convert numbers, booleans into strings as well!

value = Number('300');
console.log(value);
console.log(typeof value);

value = Number(true);
console.log(value);
console.log(typeof value);

value = Number(false);
console.log(value);
console.log(typeof value);

value = Number(null);
console.log(value);
console.log(typeof value);

value = Number('Whoa');
console.log(value);
console.log(typeof value);

Implicit Conversion (Coercion)

Last but not least, we have the implicit conversion type, also known as coercion. Similar to type conversion, but JavasScript does it for us, behind the scenes. JavaScript will coerce data types to make them work like console.log('6' * '6'), which returns 36. Here's another example:

const value_a = '6'; // remove quotes
const value_b = 1;
const sum = value_a + value_b;
console.log(sum);
console.log(typeof sum);

The above code will return 61 because JavaScript converted the 1 into a string and concatenated both values, then stored the result in the sum variable. Ideally, you would want to avoid adding 10 + twenty or 10 + "10" since the different data types will coerce the number 10 into a string and return 1010. The takeaway––exploring these JavaScript behaviors will help you predict the outcome of the code you write, making you a better developer.

Now that you finished the data types and conversions portion of JavaSctipt Basics, we'll begin learning all about JavaScript statements and operators in Part 3. Follow me on Twitter @_jonathan_codes for more JavaScript Basics and other web development frameworks, databases, and more. As always, Happy coding! 👋🏼