Lecture 12: JavaScript Variables & Data Types

BMC201 - Web Technology

Mr. Prashant Kumar Nag

2026-02-12

Lecture 12

JavaScript Variables & Data Types

Week 3 | Unit II: CSS Styling & JavaScript
BMC201 - Web Technology
Mr. Prashant Kumar Nag, Assistant Professor

Learning Objectives

Understand JavaScript and its role in web development
Declare and use variables properly
Work with primitive and complex data types
Use operators in expressions
Understand variable scope
Practice JavaScript fundamentals

JavaScript: The Language of the Web

Programming language that runs in browsers

Adds interactivity to web pages

Currently the only language that runs natively in browsers

Can also run on servers (Node.js)

Remember:

HTML = Structure
CSS  = Styling
JS   = Behavior & Interactivity

Including JavaScript in HTML

Inline (not recommended):

<button onclick="alert('Clicked!')">Click Me</button>

Internal script tag:

<script>
    console.log("Hello from JavaScript!");
</script>

External file (best practice):

<script src="script.js"></script>

Always put <script> at end of <body> tag

Declaring Variables

Variables store data. Declare with let, const, or var:

let name = "Alice";       /* Can be reassigned */
const age = 25;           /* Cannot be reassigned */
var city = "New York";    /* Older way (avoid) */

Best practices: - Use const by default - Use let if value changes - Avoid var (old syntax)

const pi = 3.14159;      /* Never changes */
let count = 0;           /* Will increase */

Variable Naming Rules

Must start with letter, _, or $
Can contain letters, numbers, _, $
Case-sensitive (name vs Name)
Use camelCase: firstName, myVariable
Avoid reserved words: let, const, if, etc.
Choose descriptive names

Good examples:

const firstName = "John";
let userCount = 5;
const MAX_USERS = 100;

Bad examples:

const x = 5;              /* Not descriptive */
const my-name = "John";   /* Hyphen not allowed */
const 123abc = 10;        /* Can't start with number */

Primitive Data Types

Basic types that hold single values:

String - Text

const name = "Alice";
const message = 'Hello world';

Number - Integers and decimals

const age = 25;
const price = 19.99;

Boolean - true or false

const isStudent = true;
const isLoggedIn = false;

More Primitive Types

undefined - Variable declared but not assigned

let x;  /* undefined */

null - Intentional emptiness

let data = null;

Symbol - Unique identifier (advanced)

const id = Symbol('unique');

Arrays (Complex Type)

Ordered collection of values:

const fruits = ["apple", "banana", "orange"];
const numbers = [1, 2, 3, 4, 5];
const mixed = [1, "hello", true, null];

console.log(fruits[0]);  /* "apple" */
console.log(fruits.length); /* 3 */

Array methods:

fruits.push("grape");         /* Add to end */
fruits.pop();                 /* Remove last */
let first = fruits[0];        /* Access by index */

Objects (Complex Type)

Key-value pairs:

const person = {
    name: "Alice",
    age: 25,
    city: "New York",
    isStudent: true
};

console.log(person.name);      /* "Alice" */
console.log(person["age"]);    /* 25 */
person.age = 26;               /* Modify property */

Objects are key in JavaScript programming!

JavaScript Operators

Arithmetic

5 + 3    // 8
5 - 3    // 2
5 * 3    // 15
5 / 3    // 1.666...
5 % 3    // 2 (remainder)
2 ** 3   // 8 (power)

Comparison

5 > 3    // true
5 < 3    // false
5 >= 5   // true
5 == 5   // true
5 === 5  // true (strict)
5 != 3   // true

Logical Operators

Combine boolean values:

true && false   /* AND - both must be true */
true || false   /* OR - at least one true */
!true           /* NOT - reverses boolean */

Practical example:

const age = 25;
const hasLicense = true;

if (age >= 18 && hasLicense) {
    console.log("Can drive");
}

Type Conversion & Coercion

Converting between types:

String(25)           /* "25" - to string */
Number("25")         /* 25 - to number */
Boolean(1)           /* true - to boolean */
parseInt("25")       /* 25 - string to integer */
parseFloat("25.99")  /* 25.99 - string to float */

Automatic coercion (watch out!):

"5" + 3      /* "53" (concatenation) */
"5" - 3      /* 2 (subtraction) */
"5" == 5     /* true (loose equality) */
"5" === 5    /* false (strict equality) */

Working with Strings

const text = "Hello World";

text.length           /* 11 */
text.toUpperCase()    /* "HELLO WORLD" */
text.toLowerCase()    /* "hello world" */
text.substring(0, 5)  /* "Hello" */
text.includes("World") /* true */
text.replace("World", "JS") /* "Hello JS" */

String concatenation:

const first = "John";
const last = "Doe";
const full = first + " " + last;  /* "John Doe" */

/* Template literals (easier) */
const full2 = `${first} ${last}`;

Variable Scope

Where variables are accessible:

const global = "accessible everywhere";

function myFunction() {
    const local = "only inside function";
    console.log(global);  /* Works */
}
console.log(local);       /* Error - not defined outside */

Block scope:

if (true) {
    let x = 5;           /* Only inside block */
}
console.log(x);          /* Error - not accessible */

Console Methods for Debugging

console.log("Regular message");      /* Basic output */
console.error("Error message");      /* Red error text */
console.warn("Warning message");     /* Yellow warning */
console.table([1, 2, 3]);           /* Table format */
console.clear();                     /* Clear console */

Debugging tip:

const person = { name: "Alice", age: 25 };
console.log(person);

Practical JavaScript Example

// Declare variables
const student = {
    name: "Alice",
    grades: [85, 90, 78, 92]
};

// Calculate average
let sum = student.grades[0] + student.grades[1] + 
          student.grades[2] + student.grades[3];
let average = sum / student.grades.length;

// Output result
console.log(`${student.name}'s average: ${average.toFixed(1)}`);
/* Output: Alice's average: 86.3 */

Live Classroom Demo: Variables & Data Types

Use this interactive page during class to demonstrate:

let, const, and value updates
Primitive types and typeof
Type conversion with Number() and String()
Arrays and objects from form input
== vs === comparison behavior

Open Demo: Variables & Data Types

Alternative site path: /html/demos/lecture-12-demo.html

Open app.js Source

Resources & References

Questions?

Next: Week 4 - JavaScript Functions & Events