Day 2: Understanding Variables and Data Types in JavaScript

dipakahirav

Dipak Ahirav

Posted on May 30, 2024

Day 2: Understanding Variables and Data Types in JavaScript

Introduction

Welcome to Day 2 of your JavaScript journey! Yesterday, we set up our development environment and wrote our first lines of JavaScript code. Today, we will dive into variables and data types, which are fundamental concepts in any programming language.

please subscribe to my YouTube channel to support my channel and get more web development tutorials.

Variables

Variables are used to store data values that can be used and manipulated throughout your code. In JavaScript, you can declare variables using var, let, or const.

1. var

var is the traditional way to declare variables in JavaScript. Variables declared with var have function scope and are hoisted to the top of their scope.

Example:

var name = "Alice";
console.log(name); // Output: Alice
Enter fullscreen mode Exit fullscreen mode

2. let

let was introduced in ES6 and provides block scope, which means the variable is only accessible within the block it was declared.

Example:

let age = 25;
if (true) {
  let age = 30;
  console.log(age); // Output: 30 (inside block)
}
console.log(age); // Output: 25 (outside block)
Enter fullscreen mode Exit fullscreen mode

3. const

const is also block-scoped and is used to declare variables that cannot be reassigned. However, the contents of objects and arrays declared with const can be modified.

Example:

const city = "New York";
console.log(city); // Output: New York

const person = {
  name: "Bob",
  age: 30
};
person.age = 31; // Allowed
console.log(person.age); // Output: 31
Enter fullscreen mode Exit fullscreen mode

Data Types

JavaScript has several data types, categorized into two main groups: primitive and non-primitive (objects).

Primitive Data Types:

  1. String: Used to represent textual data.
   let greeting = "Hello, World!";
   console.log(greeting); // Output: Hello, World!
Enter fullscreen mode Exit fullscreen mode
  1. Number: Represents both integer and floating-point numbers.
   let score = 100;
   let price = 99.99;
   console.log(score); // Output: 100
   console.log(price); // Output: 99.99
Enter fullscreen mode Exit fullscreen mode
  1. Boolean: Represents a logical value, either true or false.
   let isLoggedIn = true;
   console.log(isLoggedIn); // Output: true
Enter fullscreen mode Exit fullscreen mode
  1. Null: Represents an intentional absence of any value.
   let emptyValue = null;
   console.log(emptyValue); // Output: null
Enter fullscreen mode Exit fullscreen mode
  1. Undefined: Indicates that a variable has been declared but not assigned a value.
   let notAssigned;
   console.log(notAssigned); // Output: undefined
Enter fullscreen mode Exit fullscreen mode
  1. Symbol: A unique and immutable primitive value.
   let symbol = Symbol("unique");
   console.log(symbol); // Output: Symbol(unique)
Enter fullscreen mode Exit fullscreen mode

Non-Primitive Data Types:

  1. Object: Used to store collections of data and more complex entities.
   let person = {
     name: "Charlie",
     age: 28,
     isStudent: true
   };
   console.log(person.name); // Output: Charlie
Enter fullscreen mode Exit fullscreen mode
  1. Array: A special type of object used to store ordered collections of values.
   let fruits = ["Apple", "Banana", "Cherry"];
   console.log(fruits[1]); // Output: Banana
Enter fullscreen mode Exit fullscreen mode

Type Conversion

JavaScript allows you to convert values from one type to another, either implicitly or explicitly.

Implicit Conversion:
JavaScript automatically converts types in certain operations.

Example:

let str = "123";
let num = 456;
console.log(str + num); // Output: "123456"
Enter fullscreen mode Exit fullscreen mode

Explicit Conversion:
You can manually convert types using functions like String(), Number(), Boolean(), parseInt(), and parseFloat().

Example:

let str = "123";
let num = Number(str);
console.log(num); // Output: 123

let bool = "true";
console.log(Boolean(bool)); // Output: true

let floatStr = "123.45";
let intNum = parseInt(floatStr);
let floatNum = parseFloat(floatStr);
console.log(intNum); // Output: 123
console.log(floatNum); // Output: 123.45
Enter fullscreen mode Exit fullscreen mode

Practice Activities

  1. Declare Variables:

    • Use var, let, and const to declare variables.
    • Experiment with variable scope by declaring variables inside and outside of functions and blocks.
  2. Work with Data Types:

    • Declare variables of different data types (string, number, boolean, null, undefined, object, array).
    • Log their values to the console.
  3. Convert Types:

    • Use implicit and explicit conversion methods to convert between different data types.
    • Practice converting strings to numbers and booleans.

Mini Project:
Create a simple script that takes user input (use prompt), converts it to a number, and logs the result of basic arithmetic operations.

Example:

let userInput = prompt("Enter a number:");
let number = parseInt(userInput);
console.log("Your number:", number);
console.log("Double:", number * 2);
console.log("Half:", number / 2);
console.log("Square:", number * number);
Enter fullscreen mode Exit fullscreen mode

Summary

Today, we explored variables and data types in JavaScript. We learned how to declare variables using var, let, and const, and we discussed various data types including strings, numbers, booleans, null, undefined, objects, and arrays. We also practiced type conversion.

Series Index

Part Title Link
1 Day 1: Getting Started with JavaScript Read Part 1
2 Day 2: Understanding Variables and Data Types in JavaScript Read Part 2
3 Day 3: Mastering Operators and Expressions in JavaScript Read Part 3
4 Day 4: Control Structures in JavaScript Read Part 4
5 Day 5: Understanding Functions in JavaScript Read Part 5
6 Day 6: Mastering Arrays in JavaScript 🚀 Read Part 6
7 Day 7: Understanding Objects in JavaScript 🏆 Read Part 7

Stay tuned for Day 3, where we'll dive into operators and expressions in JavaScript!

Resources

Happy coding! If you have any questions or need further clarification, feel free to leave a comment below. Let's continue learning and growing together!

Follow me for more tutorials and tips on web development. Feel free to leave comments or questions below!

Follow and Subscribe:

💖 💪 🙅 🚩
dipakahirav
Dipak Ahirav

Posted on May 30, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related