JavaScript Tutorial: Complete Guide to Data Types, Syntax, and Examples

JavaScript is one of the most widely used programming languages in the world. It powers websites, servers, mobile apps, and desktop software. Before you build anything meaningful, you need to understand data types — the different kinds of values JavaScript can store and work with.

This tutorial covers every JavaScript data type with clear syntax, copy-paste examples, and links to official documentation. By the end, you will know how to declare variables, identify types, convert between them, and write code that behaves predictably.

What You Need to Get Started

To run the examples in this tutorial, you need a JavaScript environment. Choose one of these options:

Option 1: Browser Console (Easiest for Beginners)

Every modern web browser includes a JavaScript engine. Open your browser, press F12 (or Ctrl+Shift+I on Windows/Linux, Cmd+Option+I on Mac), click the Console tab, and paste any code example directly.

Option 2: Node.js (Recommended for Practice)

Node.js is a JavaScript runtime that lets you run JavaScript outside the browser — perfect for learning and building tools.

Download Node.js: https://nodejs.org/en/download

Choose the LTS (Long Term Support) version. After installing, open your terminal and verify:

node --version

Save your code in a file like app.js and run it:

node app.js

Option 3: Online Playgrounds

If you cannot install anything, use these free online editors:

• MDN Web Docs Playground
• JSFiddle
• CodePen

---

Variables and Basic Syntax

Before diving into data types, learn how to store values in variables.

JavaScript has three ways to declare variables:

Modern best practice: Use const by default. Use let when the value must change. Avoid var in new code.

// const — value cannot be reassigned
const siteName = "QuantoraLabs";
// siteName = "Other"; // Error!

// let — value can change
let score = 0;
score = 10;
score = score + 5;

// var — older syntax, still works but not recommended
var legacyCounter = 1;
legacyCounter = 2;

Statements end with a semicolon (;). JavaScript often works without them, but using semicolons is a good habit.

Official reference: MDN — JavaScript Variables

---

JavaScript Data Types Overview

JavaScript values belong to two broad categories:

1. Primitive types — stored directly, immutable (cannot be changed in place)
2. Reference types (objects) — stored by reference, mutable

There are 7 primitive types and 1 object type (which includes arrays, functions, dates, and more).

Use the typeof operator to check a value's type:

console.log(typeof "hello");     // "string"
console.log(typeof 42);          // "number"
console.log(typeof true);        // "boolean"
console.log(typeof undefined);   // "undefined"
console.log(typeof null);        // "object" (known quirk!)
console.log(typeof Symbol());    // "symbol"
console.log(typeof 10n);         // "bigint"
console.log(typeof {});          // "object"
console.log(typeof []);          // "object"
console.log(typeof function(){});// "function"

Official reference: MDN — JavaScript Data Types

---

1. String

A string is text enclosed in single quotes, double quotes, or backticks.

const single = 'Hello, World!';
const double = "Hello, World!";
const template = `Hello, World!`;

// Template literals support expressions
const name = "Alex";
const greeting = `Welcome, ${name}!`;
console.log(greeting); // "Welcome, Alex!"

// Multiline strings with backticks
const poem = `Roses are red,
Violets are blue,
JavaScript is fun,
And so are you.`;

Common String Methods

const text = "JavaScript";

console.log(text.length);           // 10
console.log(text.toUpperCase());      // "JAVASCRIPT"
console.log(text.toLowerCase());      // "javascript"
console.log(text.charAt(0));          // "J"
console.log(text.indexOf("Script"));  // 4
console.log(text.slice(0, 4));        // "Java"
console.log(text.includes("Script")); // true
console.log(text.replace("Java", "Type")); // "TypeScript"
console.log(text.split(""));          // ["J","a","v","a","S","c","r","i","p","t"]
console.log("  trim me  ".trim());     // "trim me"

String Concatenation

const first = "Hello";
const last = "World";
const combined = first + ", " + last + "!";
console.log(combined); // "Hello, World!"

// Or use template literals (preferred)
const modern = `${first}, ${last}!`;
console.log(modern); // "Hello, World!"

Official reference: MDN — String

---

2. Number

JavaScript uses the Number type for both integers and floating-point decimals. There is no separate integer type.

const integer = 42;
const decimal = 3.14;
const negative = -100;
const scientific = 1.5e6; // 1500000
const infinity = Infinity;
const notANumber = NaN; // "Not a Number" — result of invalid math

console.log(typeof integer); // "number"

Basic Arithmetic

console.log(10 + 3);   // 13  (addition)
console.log(10 - 3);   // 7   (subtraction)
console.log(10 * 3);   // 30  (multiplication)
console.log(10 / 3);   // 3.333... (division)
console.log(10 % 3);   // 1   (remainder/modulo)
console.log(10 ** 3);  // 1000 (exponentiation)

Useful Number Methods and Properties

const num = 3.14159;

console.log(num.toFixed(2));        // "3.14"
console.log(num.toPrecision(3));      // "3.14"
console.log(Number.isInteger(42));    // true
console.log(Number.isInteger(3.14)); // false
console.log(Number.isNaN(NaN));       // true
console.log(Number.isFinite(100));    // true
console.log(Number.parseInt("42px")); // 42
console.log(Number.parseFloat("3.14em")); // 3.14
console.log(Number.MAX_VALUE);      // largest possible number
console.log(Number.MIN_VALUE);      // smallest positive number

Special Number Values

console.log(0.1 + 0.2);        // 0.30000000000000004 (floating-point precision)
console.log(0.1 + 0.2 === 0.3); // false

// Fix precision for comparisons
console.log((0.1 + 0.2).toFixed(1) === (0.3).toFixed(1)); // true

Official reference: MDN — Number

---

3. BigInt

BigInt handles integers larger than Number.MAX_SAFE_INTEGER (9,007,199,254,740,991).

Append n to a number literal or use BigInt():

const bigNumber = 9007199254740991n;
const anotherBig = BigInt("9007199254740992");

console.log(typeof bigNumber); // "bigint"

// BigInt arithmetic
console.log(10n + 20n);  // 30n
console.log(10n * 20n);  // 200n
console.log(10n / 3n);   // 3n (truncates toward zero)

// Cannot mix BigInt and Number directly
// console.log(10n + 10); // TypeError!
console.log(10n + BigInt(10)); // 20n

Official reference: MDN — BigInt

---

4. Boolean

A boolean represents logical true or false. Booleans are essential for conditions and loops.

const isActive = true;
const isDeleted = false;

console.log(typeof isActive); // "boolean"

// Comparison operators return booleans
console.log(5 > 3);   // true
console.log(5 < 3);   // false
console.log(5 === 5); // true (strict equality)
console.log(5 !== 3); // true (strict inequality)
console.log(5 == "5"); // true (loose equality — avoid!)
console.log(5 === "5"); // false (strict — preferred!)

Logical Operators

const a = true;
const b = false;

console.log(a && b); // false (AND)
console.log(a || b); // true  (OR)
console.log(!a);     // false (NOT)

Truthy and Falsy Values

In JavaScript, non-boolean values convert to booleans in conditionals:

Falsy values (treated as false):

• false
• 0
• -0
• 0n
• "" (empty string)
• null
• undefined
• NaN

Everything else is truthy.

if ("hello") {
  console.log("Non-empty strings are truthy");
}

if (0) {
  console.log("This will not run");
} else {
  console.log("Zero is falsy");
}

Official reference: MDN — Boolean

---

5. Undefined

Undefined means a variable has been declared but not assigned a value.

let notAssigned;
console.log(notAssigned);      // undefined
console.log(typeof notAssigned); // "undefined"

// Function with no return gives undefined
function doNothing() {}
console.log(doNothing()); // undefined

// Accessing missing object property
const user = { name: "Sam" };
console.log(user.age); // undefined

Official reference: MDN — undefined

---

6. Null

Null represents an intentional absence of value. It is an object type according to typeof — a long-standing JavaScript quirk.

const emptyValue = null;
console.log(emptyValue);       // null
console.log(typeof emptyValue); // "object" (quirk!)

// Use null when you want to explicitly say "no value"
let selectedItem = null;

// undefined vs null
// undefined = not set yet
// null = intentionally empty

Official reference: MDN — null

---

7. Symbol

Symbol creates unique, immutable identifiers — often used as object property keys to avoid naming collisions.

const id1 = Symbol("id");
const id2 = Symbol("id");

console.log(id1 === id2); // false — every Symbol is unique
console.log(typeof id1);  // "symbol"

const userId = Symbol("userId");
const user = {
  name: "Jordan",
  [userId]: 12345
};

console.log(user[userId]); // 12345
console.log(Object.keys(user)); // ["name"] — symbol keys are hidden

Official reference: MDN — Symbol

---

8. Object

An object stores collections of key-value pairs. Objects are reference types — assigning an object to a new variable copies the reference, not the data.

const person = {
  firstName: "Taylor",
  lastName: "Smith",
  age: 28,
  isStudent: false,
  address: {
    city: "Austin",
    country: "USA"
  },
  greet: function() {
    return `Hi, I'm ${this.firstName}!`;
  }
};

// Access properties
console.log(person.firstName);      // "Taylor"
console.log(person["lastName"]);    // "Smith"
console.log(person.address.city);   // "Austin"
console.log(person.greet());        // "Hi, I'm Taylor!"

// Add, update, delete properties
person.email = "[email protected]";
person.age = 29;
delete person.isStudent;

// Object methods
console.log(Object.keys(person));
console.log(Object.values(person));
console.log(Object.entries(person));

Object Destructuring

const product = { title: "Laptop", price: 999, inStock: true };

const { title, price } = product;
console.log(title); // "Laptop"
console.log(price); // 999

// Rename while destructuring
const { title: productName } = product;
console.log(productName); // "Laptop"

Official reference: MDN — Object

---

Arrays (Special Object Type)

Arrays store ordered lists of values. Although arrays are objects, Array.isArray() is the reliable way to identify them.

const fruits = ["apple", "banana", "cherry"];
const mixed = [1, "two", true, null, { key: "value" }];
const empty = [];

console.log(fruits[0]);        // "apple"
console.log(fruits.length);    // 3
console.log(Array.isArray(fruits)); // true

Common Array Methods

const numbers = [3, 1, 4, 1, 5, 9];

// Add/remove
numbers.push(2);       // add to end → [3,1,4,1,5,9,2]
numbers.pop();           // remove from end → [3,1,4,1,5,9]
numbers.unshift(0);      // add to start → [0,3,1,4,1,5,9]
numbers.shift();         // remove from start → [3,1,4,1,5,9]

// Transform
console.log(numbers.map(n => n * 2));       // [6,2,8,2,10,18]
console.log(numbers.filter(n => n > 3));    // [4,5,9]
console.log(numbers.find(n => n > 3));      // 4
console.log(numbers.includes(5));           // true
console.log(numbers.indexOf(1));            // 1
console.log(numbers.reduce((sum, n) => sum + n, 0)); // 23
console.log([...numbers].sort((a, b) => a - b)); // [1,1,3,4,5,9]

// Loop through arrays
for (const num of numbers) {
  console.log(num);
}

numbers.forEach((num, index) => {
  console.log(`Index ${index}: ${num}`);
});

Official reference: MDN — Array

---

Functions (Callable Objects)

Functions are reusable blocks of code. In JavaScript, functions are first-class objects — you can store them in variables, pass them as arguments, and return them from other functions.

// Function declaration
function add(a, b) {
  return a + b;
}

// Function expression
const subtract = function(a, b) {
  return a - b;
};

// Arrow function (modern syntax)
const multiply = (a, b) => a * b;

// Arrow function with block body
const divide = (a, b) => {
  if (b === 0) {
    return "Cannot divide by zero";
  }
  return a / b;
};

console.log(add(5, 3));       // 8
console.log(subtract(5, 3));  // 2
console.log(multiply(5, 3));    // 15
console.log(divide(10, 2));     // 5
console.log(divide(10, 0));     // "Cannot divide by zero"

// Default parameters
function greet(name = "Guest") {
  return `Hello, ${name}!`;
}
console.log(greet());        // "Hello, Guest!"
console.log(greet("Maria")); // "Hello, Maria!"

Official reference: MDN — Functions

---

Type Conversion (Coercion)

JavaScript can convert values between types automatically (implicit) or deliberately (explicit).

Explicit Conversion

// To String
console.log(String(123));       // "123"
console.log((456).toString());    // "456"
console.log(String(true));        // "true"

// To Number
console.log(Number("42"));      // 42
console.log(Number("3.14"));    // 3.14
console.log(Number("hello"));   // NaN
console.log(Number(true));      // 1
console.log(Number(false));     // 0
console.log(parseInt("42px"));  // 42
console.log(parseFloat("3.14em")); // 3.14

// To Boolean
console.log(Boolean(1));        // true
console.log(Boolean(0));        // false
console.log(Boolean(""));       // false
console.log(Boolean("hi"));     // true

Implicit Conversion (Be Careful!)

console.log("5" + 3);   // "53" (number converted to string)
console.log("5" - 3);   // 2   (string converted to number)
console.log(true + 1);  // 2
console.log(false + 1); // 1
console.log([] + []);   // "" (empty string)
console.log([] + {});   // "[object Object]"

Best practice: Use explicit conversion and strict equality (===) to avoid surprises.

Official reference: MDN — Type Conversion

---

Checking and Comparing Types

// typeof — works for primitives and functions
console.log(typeof "text");     // "string"
console.log(typeof 42);         // "number"
console.log(typeof function(){}); // "function"

// instanceof — check object types
console.log([] instanceof Array);       // true
console.log({} instanceof Object);      // true
console.log(new Date() instanceof Date); // true

// Array.isArray — best for arrays
console.log(Array.isArray([]));  // true
console.log(Array.isArray({}));  // false

// Strict vs loose equality
console.log(0 == false);   // true  (avoid)
console.log(0 === false);  // false (use this)
console.log(null == undefined);  // true  (avoid)
console.log(null === undefined); // false (use this)

---

Complete Copy-Paste Example

Save this file as data-types-demo.js and run it with node data-types-demo.js:

// ============================================
// JavaScript Data Types — Complete Demo
// Run: node data-types-demo.js
// ============================================

console.log("=== PRIMITIVE TYPES ===\n");

// String
const language = "JavaScript";
console.log("String:", language, "| Type:", typeof language);

// Number
const version = 2024;
const pi = 3.14159;
console.log("Number:", version, pi, "| Type:", typeof version);

// BigInt
const huge = 9007199254740991n;
console.log("BigInt:", huge, "| Type:", typeof huge);

// Boolean
const isLearning = true;
console.log("Boolean:", isLearning, "| Type:", typeof isLearning);

// Undefined
let notSet;
console.log("Undefined:", notSet, "| Type:", typeof notSet);

// Null
const empty = null;
console.log("Null:", empty, "| Type:", typeof empty, "(known quirk)");

// Symbol
const uniqueKey = Symbol("key");
console.log("Symbol:", uniqueKey.toString(), "| Type:", typeof uniqueKey);

console.log("\n=== REFERENCE TYPES ===\n");

// Object
const developer = {
  name: "Alex",
  skills: ["HTML", "CSS", "JavaScript"],
  years: 2,
  profile() {
    return `${this.name} — ${this.years} years experience`;
  }
};
console.log("Object:", developer.profile());
console.log("Object type:", typeof developer);

// Array
const skills = developer.skills;
console.log("Array:", skills.join(", "));
console.log("Is Array?", Array.isArray(skills));

// Function
function summarize(obj) {
  return `${obj.name} knows: ${obj.skills.join(", ")}`;
}
console.log("Function result:", summarize(developer));
console.log("Function type:", typeof summarize);

console.log("\n=== TYPE CONVERSION ===\n");

console.log("String(42):", String(42));
console.log("Number('99'):", Number("99"));
console.log("Boolean(0):", Boolean(0));
console.log("Boolean('hello'):", Boolean("hello"));

console.log("\n=== COMPARISONS ===\n");

console.log("5 === 5:", 5 === 5);
console.log("5 === '5':", 5 === "5");
console.log("0 == false:", 0 == false, "(loose — avoid)");
console.log("0 === false:", 0 === false, "(strict — correct)");

console.log("\n=== DONE ===");
console.log("You have explored all JavaScript data types!");

Expected output (abbreviated):

=== PRIMITIVE TYPES ===
String: JavaScript | Type: string
Number: 2024 3.14159 | Type: number
...
=== DONE ===
You have explored all JavaScript data types!

---

Quick Reference Cheat Sheet

---

Key Takeaways

1. JavaScript has 7 primitive types and objects (including arrays and functions).
2. Use const and let for variables — avoid var in new code.
3. Always prefer === (strict equality) over == (loose equality).
4. Use typeof for primitives, Array.isArray() for arrays, and instanceof for custom objects.
5. Be aware of truthy/falsy values when writing conditions.
6. null returns "object" from typeof — this is a known language quirk, not a bug in your code.

---

Learn More — Official Resources

• MDN JavaScript Guide — Comprehensive free documentation
• MDN Data Structures and Types — Deep dive into every type
• Node.js Download — Install JavaScript on your computer
• ECMAScript Specification — The official language standard
• JavaScript.info — Excellent tutorial on types and basics

Start by copying the examples above into your browser console or a Node.js file. Change values, break things, and experiment — that is the fastest way to learn JavaScript data types.