Tutorial 2: Variables, Data Types, and Basic Operators

admin

                                            Variables, Data Types, and Basic Operators

 

Understanding Variables in JavaScript

What is a Variable?
In JavaScript, a variable is a container for storing data values. Variables allow you to store, retrieve, and manipulate data throughout your code, making it possible to reuse and organize information efficiently.

How to Declare Variables
JavaScript provides three ways to declare variables:

  1. var: Used in older JavaScript code. var is globally scoped or function-scoped, which can lead to unexpected behavior.
  2. let: Preferred for variables that may change. let is block-scoped, which means it is only accessible within the block { } where it is declared.
  3. const: Used for variables that won’t change. Once a const variable is assigned a value, it cannot be reassigned.

Syntax for Declaring Variables

var name = "Alice"; // Using 

var let age = 25; // Using let 

const country = "USA"; // Using const

Example

let greeting = "Hello, world!"; 

console.log(greeting); // Output: Hello, world!

Questions & Answers:

  1. Q: What is a variable in JavaScript?
    • A: A variable is a container for storing data values that can be used and manipulated throughout a program.
  2. Q: What is the difference between let and const ?

    • A:  let allows for reassignment, while const cannot be reassigned once initialized.

       

Data Types in JavaScript

JavaScript has several basic data types to represent different kinds of data. Here are the most common types:

  1. String: Used to represent text. Strings are enclosed in quotes ( ', ", or ` ).

    let name = "Alice";

  2. Number: Represents both integer and floating-point numbers.

    let age = 30; 

    let price = 19.99;

  3. Boolean: Represents true or false values, useful in decision-making.

    let isStudent = true;

  4. Undefined: A variable that has been declared but not assigned a value.

    let city; 

    console.log(city); // Output: undefined

  5. Null: Represents an empty or unknown value, intentionally set by the programmer.

    let car = null;

  6. Object: Used to store collections of data or more complex entities (we'll cover objects in later tutorials).

Example of Data Types

let productName = "Laptop"; // String 

let quantity = 5; // Number 

let inStock = true; // Boolean 

let discount = null; // Null 

let color; // Undefined

Questions & Answers:

  1. Q: What data type would you use for storing someone’s name?
    • A: A string data type, for example: let name = "John";.
  2. Q: What is the difference between null and undefined? 

    • A: null is an intentionally empty value, while undefined means a variable has been declared but has not been assigned a value.

       

Basic Operators in JavaScript

JavaScript includes various operators that perform calculations, comparisons, and logical operations.

1. Arithmetic Operators
These are used for performing mathematical calculations.

  • + (Addition)
  • - (Subtraction)
  • * (Multiplication)
  • / (Division)
  • % (Modulus or remainder)

Example:

let x = 10; 

let y = 5; 

console.log(x + y); // Output: 15 

console.log(x - y); // Output: 5

2. Assignment Operators
These are used to assign values to variables.

  • = (Assigns value to variable)
  • += (Adds and then assigns)
  • -= (Subtracts and then assigns)
  • *= (Multiplies and then assigns)

Example:

let a = 10; 

a += 5; // Equivalent to a = a + 5 

console.log(a); // Output: 15

Comparison Operators
These are used to compare values and return a Boolean (true or false).

  • == (Equal to)
  • != (Not equal to)
  • ===(Strict equal to)
  • <, >, <=, >=

Example:

console.log(5 == '5'); // Output: true (loose equality) 

console.log(5 === '5'); // Output: false (strict equality)

Questions & Answers:

  1. Q: What does the += operator do?
    • A: It adds a value to a variable and then assigns the result back to that variable.
  2. Q: What is the difference between == and === ? 

    • A: == checks for loose equality (ignores type), while === checks for strict equality (takes type into account).

       

Working with Strings

Strings in JavaScript represent text and offer a variety of methods for manipulation. Here’s how you can work with strings:

1. String Concatenation
Concatenate (combine) two or more strings using +.

let firstName = "Alice"; 

let lastName = "Smith"; 

let fullName = firstName + " " + lastName; 

console.log(fullName); // Output: Alice Smith

2. Template Literals
You can also embed variables directly within strings using template literals with backticks ( ` ).

let age = 25;

let message = `I am ${age} years old.`; 

console.log(message); // Output: I am 25 years old.

3. String Methods

  • length: Finds the length of a string.
  • toUpperCase ( ): Converts the string to uppercase.
  • toLowerCase ( ): Converts the string to lowercase.

Example:

let greeting = "Hello, World!"; 

console.log(greeting.length); // Output: 13 

console.log(greeting.toUpperCase()); // Output: HELLO, WORLD!

Questions & Answers:

  1. Q: How do you find the length of a string in JavaScript?
    • A: Use the length property, like string.length.
  2. Q: How can you embed a variable inside a string in JavaScript?

    • A: Use template literals with backticks, like ` Hello, ${name} `.

       

Practice Exercise: Simple Calculator

Let’s put it all together with a small project: building a simple calculator that performs addition, subtraction, multiplication, and division.

Exercise: Write code that:

  1. Declares two variables, num1 and num2, and assigns them numbers.
  2. Performs and logs addition, subtraction, multiplication, and division operations on num1 and num2.

Solution:

let num1 = 20; 

let num2 = 5; 

console.log("Addition:", num1 + num2); // Output: 25 

console.log("Subtraction:", num1 - num2); // Output: 15 

console.log("Multiplication:", num1 * num2); // Output: 100 

console.log("Division:", num1 / num2); // Output: 4

Questions & Answers:

  1. Q: How do you perform multiplication in JavaScript?
    • A: Use the  operator, like num1  * num2.
  2. Q: How do you divide two numbers in JavaScript?
    • A: Use the / operator, like num1 / num2.

 

Conclusion

Recap:

  • We covered variables and how to declare them using var, let and const.
  • We discussed common data types in JavaScript, including strings, numbers, booleans, null, and undefined.
  • We reviewed basic operators for arithmetic, assignment, and comparison.
  • We practiced working with strings and string methods.

Next Steps:

  • In the next tutorial, we’ll dive into functions and control flow (if statements and loops), so you can start building more complex logic in your programs.

Questions & Answers for Recap:

  1. Q: What are the three main ways to declare variables in JavaScript?
    • A: var, let and const.
  2. Q: What operator would you use to check if two values are strictly equal?
    • A: The === operator.