JavaScript Basics

Variables and data types are foundational concepts in programming, serving as the building blocks for storing and manipulating information within a program.

Variables are like containers that store information. You can think of them as labeled boxes where you keep different types of data.

Data types define what kind of information a variable can hold, like numbers, text, or true/false values.

Real life analogy-

Eg-1.School Bag as a Variable

Variable Name: schoolBag

Value: Books, notebooks, pencil , etc.

If tomorrow you decide to take different books, the value of the variable changes, but the variable (schoolBag) remains the same.

Eg-2. Your Daily Mood as a Variable

Variable Name: mood

Value: Happy, Sad, Excited, Bored

Your mood changes based on events, just like a variable's value can change in a program.

1. Declaring Variables

JavaScript provides three keywords to declare variables:

var (function-scoped, outdated)
- The var keyword is used to declare a variable. It has a function-scoped or globally-scoped behaviour.
let (block-scoped, recommended)
- The let keyword is introduced in ES6, has block scope and cannot be re-declared in the same scope.
const (block-scoped, cannot be reassigned)
- The const keyword declares variables that cannot be reassigned. It’s block-scoped as well.

    var x = 10; // Function-scoped
    let y = 20; // Block-scoped
    const z = 30; // Cannot be reassigned

2. JavaScript Data Types

Think of data types like different types of containers used for storing specific things. Just like you wouldn’t store water in a paper bag, in programming, each variable has a specific data type that defines what kind of data it can hold.

JavaScript has two categories of data types:

A. Primitive Data Types (Stored by value)

Primitive datatypes represent single values and are immutable.

1 . Number :

Counting the number of items in a Bag
Represents both integers and floating points

let num = 100;
let price = 99.99;

2.String :

Storing a pencil name
Text values enclosed in quotes
Strings store sequences of characters inside double ("") or single ('') or (` `) quotes.

let pencil = "Apsara";

3.Boolean :

Checking if a pencil present or not

Booleans can only be true or false.

let isPencil = true;

4.Undefined :

Declaring a variable for future use

A variable that has been declared but not assigned a value

let noteBook;
console.log(noteBook); // undefined

5.Null :

null means an intentional absence of value (different from undefined).

Represents an empty or unknown value

let bottle = null;

6.Symbol :

Creating unique property keys

Even if two symbols have the same description, they are always unique.

let noteBook1 = Symbol("copy");
let noteBook2 = Symbol("copy");
console.log(noteBook1 === noteBook2); // Output: false

7.BigInt :

For large integer values (introduced in ES11)

let bigNum = 9007199254740991n;

B. Non-Primitive Data Types (Stored by reference)

Non-primitive types are objects and can store collections of data or more complex entities.

Object :
- A collection of key-value pairs

    let bag = { 
         pencil: "Apsara",
         items: 5 ,
        isPencil:true,
    };

Array :
- A list of values
- Storing a list of favorite items

    let items = ["bottle", "noteBook", "pencil", "Book"];

Function :
- A block of reusable code
- Functions allow us to reuse code instead of writing it repeatedly.

    function bag() {
        return "this bag contain 5 items";
    }

3. Type Checking

To check a variable's type, use typeof

  console.log(typeof 10);        // "number"
  console.log(typeof "Hello");   // "string"
  console.log(typeof true);      // "boolean"
  console.log(typeof {});        // "object"
  console.log(typeof []);        // "object" (Arrays are objects)
  console.log(typeof null);      // "object" (a known JavaScript bug)
  console.log(typeof undefined); // "undefined"
  console.log(typeof function(){}); // "function"

4. Type Conversion

Type conversion (also called type casting*) is like transforming one thing into another so it can be used in a specific situation.*

JavaScript allows implicit and explicit type conversion.

Implicit Conversion

JavaScript automatically converts different types

console.log("5" + 3);  // "53" (String concatenation)
console.log("5" - 3);  // 2   (Number conversion)

Explicit Conversion

Manually converting types using JavaScript functions.

let strNumber = "100";
let num = Number(strNumber); // Converts string to number
console.log(num + 50); // Output: 150

let numToStr = String(25);
console.log(numToStr + " years"); // Output: "25 years"

Conclusion

Understanding JavaScript variables and data types is fundamental to writing efficient code. Using let and const is recommended for better scoping and maintainability.

JavaScript Basics - The Language of Web

Understanding Variables and Data Type in JavaScript

Table of contents