Introduction to Variables and Data Types: What You Need to Know Beginner to Advance

Introduction to Variables and Data Types: What You Need to Know Beginner to Advance

Variables

A variable is a container used to store data values. In JavaScript, we can declare variables using the keywords var, let, or const.

Declaring Variables:

  • var: The old way of declaring variables. It has function scope or global scope and can be redeclared, that’s why it’s not recommended to use.

  • let: Introduced in ES6. It has block scope and cannot be redeclared.

  • const: Introduced in ES6. It has block scope and must be initialized at the time of declaration. Its value cannot be reassigned after initialization.

Example:

var name = "John";  // var declaration
let age = 25;       // let declaration
const PI = 3.1416;  // const declaration (cannot be changed)

Scope of Variables:

  • Global scope: Variables declared outside any function are in the global scope and accessible throughout the program.

  • Function scope: Variables declared with var inside a function are only accessible within that function.

  • Block scope: Variables declared with let or const inside a block ({}) are accessible only inside that block.

Example of scope:

function example() {
    var x = 10; // function scoped
    if (true) {
        let y = 20; // block scoped
        const z = 30; // block scoped
    }
    console.log(x); // accessible
    console.log(y); // error (y is block-scoped)
}

Data Types

JavaScript has several built-in data types, which can be classified into two categories: Primitive and Non-Primitive (Reference).

1. Primitive Data Types:

Primitive data types are immutable and are stored by value.

  • Number: Represents both integers and floating-point numbers.

    • Example: 42, 3.14
  • String: Represents a sequence of characters (text).

    • Example: "Hello", 'World'
  • Boolean: Represents logical values: true or false.

    • Example: true, false
  • Null: Represents the intentional absence of a value (an object with no value).

    • Example: null
  • Undefined: Represents a variable that has been declared but not yet assigned a value.

    • Example: undefined
  • Symbol: Represents a unique identifier.

    • Example: let symbol = Symbol('id')
  • BigInt: Represents integers with arbitrary precision (for very large numbers (2^53-1).

    • Example: let bigNumber = 9007199254740991n

Example of Primitive Data Types:

let age = 30;       // Number
let name = "Alice"; // String
let isStudent = true; // Boolean
let emptyValue = null; // Null
let notAssigned;   // Undefined
let id = Symbol('id'); // Symbol
let bigNumber = 12345678901234567890n; // BigInt

2. Non-Primitive (Reference) Data Types:

Non-primitive data types store references to values, rather than actual values.

  • Object: A collection of key-value pairs (properties).

    • Example: {name: "John", age: 30}
  • Array: A list-like object that stores multiple values.

    • Example: [1, 2, 3]
  • Function: A block of reusable code.

    • Example: function greet() { return 'Hello'; }

Example of Reference Data Types:

let person = { name: "John", age: 30 }; // Object
let numbers = [1, 2, 3];                // Array
let greet = function() { return "Hello"; }; // Function

Key Differences Between Primitive and Reference Types:

AspectPrimitive TypesReference Types
Stored ByStored by valueStored by reference (points to a location in memory)
ImmutabilityImmutable (value cannot be changed directly)Mutable (can change object properties or array elements)
Examplenumber, string, boolean, null, etc.object, array, function

Example:

// Primitive Example
let a = 10;
let b = a;
a = 20;
console.log(a); // 20
console.log(b); // 10 (since primitives are stored by value)

// Reference Example
let obj1 = { name: 'John' };
let obj2 = obj1;
obj1.name = 'Alice';
console.log(obj1.name); // Alice
console.log(obj2.name); // Alice (since objects are stored by reference)

Summary:

  • Variables in JavaScript can be declared using var, let, or const.

  • JavaScript has two types of data types: Primitive (e.g., number, string, boolean) and Reference (e.g., object, array, function).

  • Primitive types are immutable and stored by value, while reference types are mutable and stored by reference.

The typeof operator in JavaScript is used to determine the type of a given operand. It returns a string that indicates the type of the operand.

Syntax:

typeof operand

Example:

// Primitive
let str = "Hello World";
console.log(typeof str); // "string"

let isTrue = true;
console.log(typeof isTrue); // "boolean"

let **notDefined**;
console.log(typeof notDefined); // "undefined"

let emptyValue = null;
console.log(typeof emptyValue); // "object" (this is a known quirk in JavaScript)

let symbol = Symbol("id");
console.log(typeof symbol); // "symbol"

let bigNumber = 12345678901234567890n;
console.log(typeof bigNumber); // "bigint"

// Non-primitive
let obj = { name: "John" };
console.log(typeof obj); // "object"

let arr = [1, 2, 3];
console.log(typeof arr); // "object"

function greet() { return "Hello"; }
console.log(typeof greet); // "function"

The typeof operator in JavaScript is used to determine the type of a given operand. It returns a string that indicates the type of the operand.

Summary of Return Values of typeof:

ValueResult of typeof
Number"number"
String"string"
Boolean"boolean"
Undefined"undefined"
Null"object" (quirk)
Object"object"
Array"object"
Function"function"
Symbol"symbol"
BigInt"bigint"

Summary

  • Variables in JavaScript can be declared using var, let, or const.

  • JavaScript has two types of data types: Primitive (e.g., number, string, boolean) and Reference (e.g., object, array, function).

  • Primitive types are immutable and stored by value, while reference types are mutable and stored by reference.

These changes should make your article more comprehensive and reader-friendly.