Object, String and Array
1. JavaScript Objects
Definition:
An object is a collection of key-value pairs used to store multiple values as a
single entity.
Syntax:
const person = {
name: "Ahmad",
age: 30,
isMarried: false
};
Common Object Methods:
Method Description Example
[Link]() Returns an array of keys [Link](person)
[Link]() Returns an array of values [Link](person)
[Link]() Returns array of key-value pairs [Link](person)
hasOwnProperty() Checks if property exists [Link]("age")
delete Removes a property delete [Link]
Accessing Properties:
[Link]([Link]); // dot notation
[Link](person["age"]); // bracket notation
JavaScript Object Methods – Example
const car = {
brand: "Toyota",
model: "Corolla",
year: 2020
};
// [Link]()
[Link]([Link](car));
// Output: ["brand", "model", "year"]
// [Link]()
[Link]([Link](car));
// Output: ["Toyota", "Corolla", 2020]
// [Link]()
[Link]([Link](car));
// Output: [["brand", "Toyota"], ["model", "Corolla"], ["year", 2020]]
// hasOwnProperty()
[Link]([Link]("model"));
// Output: true
// delete
delete [Link];
[Link](car);
// Output: { brand: 'Toyota', model: 'Corolla' }
2. JavaScript Strings
Definition:
A string is a sequence of characters used to represent text.
Syntax:
let greeting = "Hello, World!";
Common String Methods:
Method Description Example
length Returns the string length [Link]
toUpperCase() Converts to uppercase [Link]()
toLowerCase() Converts to lowercase [Link]()
includes() Checks if substring exists [Link]("World")
indexOf() Finds position of substring [Link]("o")
slice(start, end) Extracts part of string [Link](0, 5)
replace() Replaces part of string [Link]("World", "Everyone")
trim() Removes whitespace " text ".trim()
split() Splits string into array [Link](",")
JavaScript String Methods – Example
let sentence = " JavaScript is Fun! ";
// toUpperCase()
[Link]([Link]());
// Output: " JAVASCRIPT IS FUN! "
// toLowerCase()
[Link]([Link]());
// Output: " javascript is fun! "
// includes()
[Link]([Link]("Fun"));
// Output: true
// indexOf()
[Link]([Link]("Script"));
// Output: 6
// slice()
[Link]([Link](2, 12));
// Output: "JavaScript"
// replace()
[Link]([Link]("Fun", "Awesome"));
// Output: " JavaScript is Awesome! "
// trim()
[Link]([Link]());
// Output: "JavaScript is Fun!"
// split()
[Link]([Link]().split(" "));
// Output: ["JavaScript", "is", "Fun!"]
3. Template Literals in JS
A way to have embedded expressions in strings
`this is a template literal`
String Interpolation
To create strings by doing substitution of placeholder
`string text ${expression} string text`
Practice Tasks:
1. Create a function that takes a string as an argument and return the number of
vowels
2. Prompt the user to enter their full name. Generate a username for them based
on the input. Start username with @, followed by their full name and ending
with the fullname length.
UserName = “shahbazali”
Output : UserName = “@shahbazali10”
4. JavaScript Arrays
Definition:
An array is an ordered collection of items that can be of any type (strings,
numbers, objects, etc.).
Syntax:
let fruits = ["Apple", "Banana", "Orange"];
const numbers = [10, 20, 30, 40, 50];
const list = [{name: “Abdullah”, age: 26}, {name: “Farhan”, age: 24}, {name: “Asad”, age: 25}]
Practice Tasks:
1. For a given with marks of class students [85, 96, 72, 64, 93, 60]. Find the
average marks of the class.
2. For a given array with prices of 6 items [250, 175, 300, 670, 900, 60]. All
items have an offer of 10% off on them. Change the array to store final price
after applying offer.
Common Array Methods:
Method Description Example
push() Add item to end [Link]("Mango")
pop() Remove last item [Link]()
shift() Remove first item [Link]()
unshift() Add item to start [Link]("Lemon")
length Array size [Link]
includes() Check if item exists [Link]("Banana")
indexOf() Find index of item [Link]("Orange")
join() Join array to string [Link](", ")
slice(start, end) Extract part of array [Link](0, 2)
splice() Add/remove items [Link](1, 1)
map() Transform array [Link](f => [Link]())
filter() Filter items by condition [Link](f => [Link]("A"))
forEach() Loop through items [Link](f => [Link](f))
JavaScript Array Methods – Example
let colors = ["Red", "Green", "Blue"];
// push()
[Link]("Yellow");
[Link](colors);
// Output: ["Red", "Green", "Blue", "Yellow"]
// pop()
[Link]();
[Link](colors);
// Output: ["Red", "Green", "Blue"]
// shift()
[Link]();
[Link](colors);
// Output: ["Green", "Blue"]
// unshift()
[Link]("Purple");
[Link](colors);
// Output: ["Purple", "Green", "Blue"]
// includes()
[Link]([Link]("Green"));
// Output: true
// indexOf()
[Link]([Link]("Blue"));
// Output: 2
// join()
[Link]([Link](" - "));
// Output: "Purple - Green - Blue"
// slice()
[Link]([Link](0, 2));
// Output: ["Purple", "Green"]
// splice() - remove "Green"
[Link](1, 1);
[Link](colors);
// Output: ["Purple", "Blue"]
// map()
let upperColors = [Link](c => [Link]());
[Link](upperColors);
// Output: ["PURPLE", "BLUE"]
// filter()
let filtered = [Link](c => [Link] > 4);
[Link](filtered);
// Output: ["Purple"]
// forEach()
[Link](c => [Link]("Color:", c));
// Output:
// Color: Purple
// Color: Blue
Practice Tasks:
1. Create an array to store companies name [“Bloomberg”, “Microsoft”,
“Uber”, “Google”, “IBM”, “Netflix”].
a) Remove the first company from the array
b) Remove “Uber” and add “Indrive” in its place
c) Add “Amazon” at the end