DEV Community

Cover image for Day 2: Variables and Data Types in JavaScript
arjun
arjun

Posted on

Day 2: Variables and Data Types in JavaScript

Day 2: Variables and Data Types in JavaScript

Welcome to Day 2 of learning JavaScript! Today, we’ll explore the building blocks of any program: variables and data types. These concepts are crucial as they form the foundation for everything you do in JavaScript.


What Are Variables?

A variable is like a container that holds data values. Think of it as a labeled box where you can store information, retrieve it later, or even change its contents.

Declaring Variables in JavaScript

JavaScript provides three ways to declare variables:

  1. var - The old way (avoid using this unless necessary).
  2. let - Recommended for variables that can change.
  3. const - For variables that shouldn’t change (constants).

Example:

var oldWay = "Avoid this if possible";
let currentWay = "Use let for variables that can change";
const fixedValue = "Use const for constants";
Enter fullscreen mode Exit fullscreen mode

Difference Between var, let, and const

Feature var let const
Scope Function-scoped Block-scoped Block-scoped
Reassignable Yes Yes No
Redeclarable Yes No No

Example:

function scopeTest() {
    if (true) {
        var x = "Function scope";
        let y = "Block scope";
        const z = "Constant";
    }
    console.log(x); // Accessible
    // console.log(y); // Error: y is not defined
    // console.log(z); // Error: z is not defined
}
scopeTest();
Enter fullscreen mode Exit fullscreen mode

JavaScript Data Types

JavaScript has two types of data: Primitive and Non-Primitive.

Primitive Data Types

  1. String: Textual data. Example:
   let name = "Arjun";
   console.log(name); // "Arjun"
Enter fullscreen mode Exit fullscreen mode
  1. Number: Numeric data. Example:
   let age = 22;
   console.log(age); // 22
Enter fullscreen mode Exit fullscreen mode
  1. Boolean: True or false values. Example:
   let isStart_up_guy = true;
   console.log(isStart_up_guy); // true
Enter fullscreen mode Exit fullscreen mode
  1. Null: Represents an intentional absence of value. Example:
   let emptyValue = null;
   console.log(emptyValue); // null
Enter fullscreen mode Exit fullscreen mode
  1. Undefined: A variable that has been declared but not assigned a value. Example:
   let uninitialized;
   console.log(uninitialized); // undefined
Enter fullscreen mode Exit fullscreen mode
  1. Symbol: A unique and immutable value. Example:
   let uniqueKey = Symbol("key");
   console.log(uniqueKey); // Symbol(key)
Enter fullscreen mode Exit fullscreen mode

Type Conversion

JavaScript allows you to convert values between types.

Implicit Conversion (Coercion)

JavaScript sometimes converts types automatically.

Example:

let result = "5" + 5; // String + Number
console.log(result); // "55" (string)
Enter fullscreen mode Exit fullscreen mode

Explicit Conversion

You can manually convert types using built-in functions like Number(), String(), or Boolean().

Example:

let num = "42";
let convertedNum = Number(num);
console.log(convertedNum); // 42 (number)

let boolValue = Boolean(0);
console.log(boolValue); // false
Enter fullscreen mode Exit fullscreen mode

Practice for Today

  1. Declare variables using let and const to store:

    • Your favorite book name.
    • The number of books you own.
    • Whether you like reading.
  2. Try type conversion:

    • Convert a number to a string.
    • Convert a string to a number.

Summary of Day 2

Today, we covered:

  1. Variables: var, let, and const.
  2. Primitive Data Types: String, Number, Boolean, Null, Undefined, and Symbol.
  3. Type Conversion: Implicit and explicit ways to convert types in JavaScript.

Next Steps

Tomorrow, we’ll dive into operators and expressions in JavaScript to start manipulating data and writing more complex programs. Stay tuned for Day 3: Operators and Expressions!

Billboard image

Use Playwright to test. Use Playwright to monitor.

Join Vercel, CrowdStrike, and thousands of other teams that run end-to-end monitors on Checkly's programmable monitoring platform.

Get started now!

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay