Sling Academy
Home/JavaScript/The Modern JavaScript Variables and Data Types Cheat Sheet

The Modern JavaScript Variables and Data Types Cheat Sheet

Last updated: March 02, 2023

This article provides a succinct and comprehensive cheat sheet about variables and data types in modern JavaScript. You can bookmark this page for a quick and convenient lookup later.

Variables

Variables in modern JavaScript can be declared using the var, let, or const keywords. The var keyword has some scoping issues and is not recommended, whereas let and const are block-scoped.

KeywordDescription
varDeclares a variable with function or global scope. Not recommended.
letDeclares a block-scoped variable that can be reassigned.
constDeclares a block-scoped variable that cannot be reassigned.

Example:

var myVar = 42;
let myLet = "Sling Academy";
const myConst = [1, 2, 3];

Data Types

JavaScript has several built-in data types, including primitive types and complex types.

Primitive Types

Primitive types are immutable and are passed by value.

TypeDescriptionExamples
stringA sequence of characters“Hello, world!”, ‘JavaScript’
numberA numerical value, including integers and floats42, 3.14, NaN, Infinity
booleanA value that is either true or falsetrue, false
nullA value that represents the absence of a valuenull
undefinedA value that represents a variable that has not been assigned a valueundefined
symbolA primitive data type that represents a unique identifierSymbol(“mySymbol”)

Complex Types

Complex types are mutable and are passed by reference.

TypeDescriptionExamples
objectA collection of key-value pairs also called properties{name: “Foo”, age: 88}
arrayAn ordered list of values is enclosed in square brackets[1, 2, 3], [‘a’, ‘b’, ‘c’]
functionA reusable block of code that performs a specific taskfunction add(a, b) { return a + b; }
RegExpAn object that describes a pattern of characters/[a-z]/, /hello/g
DateAn object that represents a date and timenew Date(), new Date(2021, 9, 10)
MapAn object that stores key-value pairsnew Map([[“key1”, “value1”], [“key2”, “value2”]])
SetAn object that stores unique valuesnew Set([1, 2, 3])
ErrorAn object that represents an errornew Error(“Something went wrong”)
PromiseAn object that represents the eventual completion of an asynchronous operationnew Promise((resolve, reject) => { /* code */ })

Type Coercion

JavaScript also performs type coercion, which is the process of converting a value from one type to another type. This can be implicit or explicit.

Implicit Coercion

Implicit coercion occurs when JavaScript automatically converts a value from one type to another type. This can happen in certain situations, such as when using the + operator with strings and numbers.

console.log("Hello " + 42); // "Hello 42"
console.log(42 + "");      // "42"
console.log("42" - 0);     // 42

Explicit Coercion

Explicit coercion occurs when the developer intentionally converts a value from one type to another type using a built-in method or operator. Some common examples include parseInt(), parseFloat(), toString(), and Number().

console.log(parseInt("42"));       // 42
console.log(parseFloat("3.14"));   // 3.14
console.log((42).toString());      // "42"
console.log(Number("42"));         // 42

Variables Scope

JavaScript has function scope and block scope. A variable declared inside a function is only accessible within that function, whereas a variable declared inside a block is only accessible within that block.

Function Scope

Variables declared inside a function have function scope and are only accessible within that function.

function myFunction() {
  var x = 42;
  console.log(x); // 42
}

console.log(x);   // ReferenceError: x is not defined

Block Scope

Variables declared inside a block have block scope and are only accessible within that block.

if (true) {
  let y = "Hello";
  console.log(y); // "Hello"
}

console.log(y);   // ReferenceError: y is not defined

Final Words

Hope this cheat sheet is helpful to you. If you see anything that needs to be added or corrected, let me know by leaving comments.

If you need more detailed instructions and more concrete examples about JavaScript variables and data types, continue reading the articles in this series. Happy coding, and have a nice day!

Next Article: Enums in Javascript: Tutorial & Examples

Series: JavaScript Basics

JavaScript

You May Also Like

  • Handle Zoom and Scroll with the Visual Viewport API in JavaScript
  • Improve Security Posture Using JavaScript Trusted Types
  • Allow Seamless Device Switching Using JavaScript Remote Playback
  • Update Content Proactively with the JavaScript Push API
  • Simplify Tooltip and Dropdown Creation via JavaScript Popover API
  • Improve User Experience Through Performance Metrics in JavaScript
  • Coordinate Workers Using Channel Messaging in JavaScript
  • Exchange Data Between Iframes Using Channel Messaging in JavaScript
  • Manipulating Time Zones in JavaScript Without Libraries
  • Solving Simple Algebraic Equations Using JavaScript Math Functions
  • Emulating Traditional OOP Constructs with JavaScript Classes
  • Smoothing Out User Flows: Focus Management Techniques in JavaScript
  • Creating Dynamic Timers and Counters with JavaScript
  • Implement Old-School Data Fetching Using JavaScript XMLHttpRequest
  • Load Dynamic Content Without Reloading via XMLHttpRequest in JavaScript
  • Manage Error Handling and Timeouts Using XMLHttpRequest in JavaScript
  • Handle XML and JSON Responses via JavaScript XMLHttpRequest
  • Make AJAX Requests with XMLHttpRequest in JavaScript
  • Customize Subtitle Styling Using JavaScript WebVTT Integration