JavaScript Closure, Objects, Strings, Date Object, and BOM

Definition

This lecture covers several important JavaScript concepts:

• Closures — functions that retain access to variables from their outer scope.
• Objects — collections of key-value pairs used to represent structured data.
• Strings — sequences of characters with many built-in methods.
• Date Object — used to create, read, and modify dates and times.
• Browser Object Model (BOM) — provides JavaScript access to browser-related features through the window object.

Closure

Definition

A closure occurs when an inner function remembers and can access variables from its outer function’s scope even after the outer function has finished executing.

The important idea is:

A closure allows a function to remember variables from the environment where it was created.

Key Points

• Closures are created when a function is defined inside another function.
• The inner function can access variables from the outer function.
• Those variables remain available even after the outer function finishes.
• Closures are commonly used for:
  • Data privacy
  • Counters
  • Function factories
  • Maintaining state

Example / Code

function createCounter() {
  let count = 0;

  return function () {
    count++;
    return count;
  };
}

const counter = createCounter();

console.log(counter());
console.log(counter());
console.log(counter());

Explanation

When createCounter() executes:

let count = 0;

creates the variable count.

The function then returns another function:

return function () {
  count++;
  return count;
};

The returned function forms a closure over count.

Even though createCounter() has already finished executing, the returned function still has access to count.

Every time counter() is called:

count++;

increases the same count variable.

Output

1
2
3

The important point is that count is not recreated every time counter() is called.

JavaScript Objects

Definition

A JavaScript object is a collection of related data and functionality represented using key-value pairs.

Example:

const student = {
  id: 20,
  name: "Khalid",
  department: "BIT",
};

Here:

• id, name, and department are properties.
• 20, "Khalid", and "BIT" are their corresponding values.

JavaScript is often described as an object-based language, and objects are fundamental to the language. However, saying “almost everything is an object” is an oversimplification because JavaScript also has primitive values such as strings, numbers, booleans, null, undefined, symbol, and bigint.

Key Points

Creating an Object

Objects are commonly created using curly braces {}:

const std = {
  key: "value",
  name: "Khalid",
};

The general syntax is:

const objectName = {
  property: value,
};

A property’s key is normally a string or symbol. When using object literal syntax, JavaScript allows keys to be written without quotation marks.

Accessing Properties

There are two main ways.

1. Dot notation

console.log(std.name);

2. Bracket notation

console.log(std["name"]);

Bracket notation is especially useful when the property name is stored in a variable:

const property = "name";

console.log(std[property]);

Adding Properties

std.age = 20;
std.dept = "BIT";

Updating Properties

std.name = "Khalid Rahman";

Deleting Properties

delete std.age;

Methods

A function stored as an object property is commonly called a method.

std.greeting = function () {
  console.log("Hello!");
};

std.greeting();

Destructuring

Object destructuring extracts properties from an object and stores their values in variables.

const std = {
  name: "Khalid",
  age: 20,
};

const { name, age } = std;

console.log(name);
console.log(age);

This is equivalent to getting:

const name = std.name;
const age = std.age;

Accessing Object Properties Using a Loop

Example / Code

The for...in loop can be used to iterate over an object’s enumerable property keys.

const person = {
  name: "Ali",
  age: 28,
  gender: "Male",
};

for (const key in person) {
  console.log(key + " ------ " + person[key]);
}

Explanation

During each iteration, key contains the property name.

For example:

name
age
gender

To get the corresponding value, use:

person[key];

Bracket notation is important here because key is a variable.

Do not write:

person.key;

because that looks for a property literally named "key".

Output

name ------ Ali
age ------ 28
gender ------ Male

Array of Objects

Definition

An array of objects is an array where each element is an object.

Example / Code

const students = [
  { id: 12, name: "Ali" },
  { id: 45, name: "Samar" },
  { id: 23, name: "Haron" },
];

Each element is an object:

students[0];
students[1];
students[2];

You can access their properties using:

console.log(students[0].name);

Output

Ali

You can also loop through the array:

for (const student of students) {
  console.log(student.id, student.name);
}

Output

12 Ali
45 Samar
23 Haron

Strings in JavaScript

Definition

A string is a primitive value representing a sequence of characters.

Strings can contain:

• Letters
• Numbers
• Spaces
• Symbols
• Special characters

Example / Code

const str = "Hello World";

Strings can be created using:

const str1 = "Hello";
const str2 = "Hello";

JavaScript also supports template literals:

const name = "Ali";
const message = `Hello ${name}`;

Key Points

Strings are immutable in JavaScript.

This means string methods do not modify the original string. Instead, they normally return a new string.

const str = "Hello";

const newStr = str.toUpperCase();

console.log(str);
console.log(newStr);

Output

Hello
HELLO

String Methods

replace()

Replaces a matching part of a string with another value.

const str = "Hello World";

console.log(str.replace("Hello", "Hi"));

Output

Hi World

By default, replace() replaces only the first matching occurrence when using a string as the search value.

slice()

Extracts part of a string and returns a new string.

const str = "Hello World";

console.log(str.slice(0, 5));

Output

Hello

Negative indexes count from the end:

console.log(str.slice(-5));

Output

World

The same basic slicing concept applies to arrays.

toLowerCase()

Converts a string to lowercase.

const str = "HELLO";

console.log(str.toLowerCase());

Output

hello

toUpperCase()

Converts a string to uppercase.

const str = "hello";

console.log(str.toUpperCase());

Output

HELLO

toString()

Returns a string representation of a value or object.

const number = 100;

console.log(number.toString());

Output

"100"

split()

Splits a string into an array based on a specified separator.

const str = "Hello World";

console.log(str.split(" "));

Output

["Hello", "World"];

To split every character:

console.log(str.split(""));

trim()

Removes whitespace from the beginning and end of a string.

const str = "   Hello World   ";

console.log(str.trim());

Output

Hello World

trim() does not remove spaces between words.

JavaScript Date Object

Definition

The Date object is a built-in JavaScript object used to work with dates and times.

Example / Code

const date = new Date();

This creates a Date object representing the current date and time.

You can also create a date using individual components:

const date = new Date(2026, 8, 9);

Important

The month parameter is zero-indexed:

0  → January
1  → February
2  → March
...
8  → September

Therefore:

new Date(2026, 8, 9);

represents September 9, 2026.

Other Forms

new Date();

Current date and time.

new Date(milliseconds);

Creates a date based on milliseconds since the Unix epoch.

new Date(dateString);

Creates a date from a date string.

new Date(year, month, day, hours, minutes, seconds, milliseconds);

Creates a date using individual components.

Date Get Methods

Key Points

Important Difference

Do not confuse:

getDate();

with:

getDay();

getDate() gives the day of the month.

1 – 31

getDay() gives the day of the week.

0 – Sunday
1 – Monday
2 – Tuesday
...
6 – Saturday

Date Set Methods

Definition

Set methods are used to modify parts of an existing Date object.

Key Points

date.setDate(15);
date.setFullYear(2027);
date.setHours(10);
date.setMilliseconds(500);
date.setMinutes(30);
date.setMonth(5);
date.setSeconds(45);
date.setTime(0);

For example:

const date = new Date();

date.setFullYear(2030);

console.log(date);

The year of the existing date object is changed to 2030.

Browser Object Model (BOM)

Definition

The Browser Object Model (BOM) provides JavaScript with objects and methods for interacting with the web browser environment.

The main BOM object is:

window;

In a browser, many global functions and properties are available through window.

For example:

window.alert("Hello");

can usually be written simply as:

alert("Hello");

Key Points

Important objects and properties associated with the browser environment include:

window
├── document
├── location
├── history
├── navigator
├── screen
├── innerWidth
└── innerHeight

Important Distinction

The BOM is about interacting with the browser environment.

The DOM (Document Object Model) specifically represents and allows JavaScript to manipulate the HTML document.

For example:

document.querySelector("h1");

is primarily a DOM operation.

Window Object Properties

window.innerWidth

Returns the width of the browser’s viewport in pixels.

console.log(window.innerWidth);

window.innerHeight

Returns the height of the browser’s viewport in pixels.

console.log(window.innerHeight);

Window Object Methods

alert()

Displays a message dialog.

alert("Hello!");

The user normally sees the message with an OK button.

confirm()

Displays a confirmation dialog.

const result = confirm("Are you sure?");

It returns:

true;

if the user selects OK, and:

false;

if the user selects Cancel.

prompt()

Displays a dialog asking the user to enter a value.

const name = prompt("Enter your name:");

console.log(name);

The returned value is generally a string, or null if the user cancels.

open()

Can request that the browser open a URL or window.

window.open("https://example.com");

Modern browsers may restrict or block this depending on popup-blocking rules and whether it was triggered by a user action.

close()

Requests that the current browser window be closed:

window.close();

However, browsers generally prevent scripts from closing windows or tabs that the script did not open.

setTimeout()

Executes a function once after a specified delay.

setTimeout(function () {
  console.log("Hello");
}, 2000);

The delay is specified in milliseconds.

1000 ms = 1 second
2000 ms = 2 seconds

Output

After approximately 2 seconds:

Hello

Common Mistakes

1. Thinking a closure copies the variable

A closure does not simply make a copy of the value. The inner function retains access to the variable through its lexical environment.

2. Confusing person.key and person[key]

person.key;

looks for a property literally named "key".

person[key];

uses the value stored in the key variable.

3. Forgetting that getMonth() starts at 0

getMonth();

returns:

0 = January
11 = December

4. Confusing getDate() and getDay()

getDate() → day of month
getDay()  → day of week

5. Assuming string methods modify the original string

Strings are immutable.

const str = "hello";

str.toUpperCase();

console.log(str);

Output:

hello

You need to store the returned value:

const newStr = str.toUpperCase();

6. Confusing for...in and for...of

For objects:

for (const key in person) {
  console.log(key);
}

For iterable values such as arrays:

for (const value of students) {
  console.log(value);
}

7. Thinking BOM and DOM are the same

• BOM → browser environment
• DOM → HTML document structure

Short Exam Notes

• Closure: An inner function that retains access to variables from its outer lexical scope after the outer function has finished.
• Object: Collection of key-value pairs.
• Property: A named value belonging to an object.
• Method: A function stored as an object property.
• Dot notation: object.property
• Bracket notation: object["property"] or object[property]
• Add property: object.age = 20
• Update property: object.age = 25
• Delete property: delete object.age
• Destructuring: const { name } = object
• for...in: Iterates over enumerable property keys.
• Array of objects: An array whose elements are objects.
• String: Immutable sequence of characters.
• replace(): Replaces matching text.
• slice(): Extracts part of a string.
• split(): Converts a string into an array based on a separator.
• trim(): Removes whitespace from both ends.
• toUpperCase(): Converts to uppercase.
• toLowerCase(): Converts to lowercase.
• new Date(): Creates a Date object.
• getMonth(): Returns 0–11.
• getDate(): Returns day of month 1–31.
• getDay(): Returns weekday 0–6.
• BOM: Browser Object Model.
• Main BOM object: window
• alert(): Displays a message.
• confirm(): Returns true or false.
• prompt(): Gets user input as a string or null.
• setTimeout(): Executes a function once after a delay.