Arrays in JS
Collections of items
Create Array
let heroes = [ “ironman”, “hulk”, “thor”, “batman” ];
let marks = [ 96, 75, 48, 83, 66 ];
let info = [ “rahul”, 86, “Delhi” ];
Arrays in JS
Array Indices
arr[0], arr[1], arr[2]
....
0 1 2 3 4
Let‘s Practice
Qs. For a given array with marks of students ->[85, 97, 44, 37, 76, 60]
Find the average marks of the entire class.
Let‘s Practice
Qs. For a given array with prices of 5 items ->[250, 645, 300, 900, 50]
All items have an offer of 10% OFF on them. Change the array to store final price after
applying offer.
Arrays in JS
Array Methods
Push( ) : add to end
Pop( ) : delete from end & return
toString( ) : converts array to string
Arrays in JS
Array Methods
Concat( ) : joins multiple arrays & returns result
Unshift( ) : add to start
shift( ) : delete from start & return
Arrays in JS
Array Methods
Slice( ) : returns a piece of the array
slice( startIdx, endIdx )
Splice( ) : change original array (add, remove, replace)
splice( startIdx, delCount, newEl1... )
Function in JS
Function definition Function call
A function is a block of reusable
code that performs a specific task.
Instead of writing the same code again function functionName( ) { function name()
and again, we write it once and call it //do some work
whenever needed.
}
function functionName( param1, param2 ...) {
//do some work
}
Arrow Function in JS
Compact way of writing a function
Normal function Arrow Function
Arrow function = shortcut of normal function.
function add(a, b) { const add = (a, b) => {
Map(), filter , foreach() return a + b;
} return a + b;
};
const functionName = ( param1, param2 ...) => {
// do some work
}
For each loop in JS
for each loop is an array method used to loop through each
element of an array.
let nums = [10, 20, 30];
[Link]( callBackFunction )
[Link](function(n) {
CallbackFunction : Here, it is a function to execute for each [Link](n);
element in the array. });
Syntax:
[Link](function(element, index, array) {
// code for each element
});
map in JS
Creates a new array with the results of some operation.
The value its callback returns are
used to form new array let nums = [1, 2, 3, 4];
let squares = [Link](n => n * n);
runs on each element
[Link](squares); // [1, 4, 9, 16]
returns new array
map() applies a function to every element and returns a new
array
Filter() in JS
filter() is an array method that selects elements based on a
condition and returns a new array.
let nums = [1, 2, 3, 4, 5, 6];
selects elements that satisfy a condition and returns a new let evens = [Link](n => n % 2 === 0);
array
runs on each element [Link](evens); // [2, 4, 6]
returns new array
let newArray = [Link](function(element, index, array) {
return condition; // true or false
});
Let‘s Practice
Qs. Create an array to store companies -> “Bloomberg”, “Microsoft”, “Uber”, “Google”, “IBM”, “Netflix”
a. Remove the first company from the array
b. Remove Uber & Add Ola in its place
c. Add Amazon at the end
Let‘s Practice
Qs. Qs. For a given array of numbers, print the square of each value using the forEach loop.
[2,4,3,4,5];
For a given array of marks of students. Filter our of the marks of students that scored 90+.
[45, 78, 92, 88, 95, 67, 90, 99];
Object in JS
Example:
An object is a collection of key–value pairs.
let student = {
• An object is used to store related data
name: "Aman",
together.
rollNo: 101,
For example, a student has name, roll
course: "BCA"
number, and course.
};
So, we store all these details in one
object.
This is one student object.
Inside object: name is key, and Aman is a
value
Constructor Function (Template) in JS
function Student(name, rollNo, course) { Creating Student 1
[Link] = name; let student1 = new Student("Aman", 101,"BCA");
[Link] = rollNo; Here we are creating student one.
[Link] = course;
new keyword creates a new object in memory.
}
Student one has its own data.
This is a constructor function. Creating Student 2
It works like a template or form. let student2 = new Student("Riya", 102, "BCA");
It does not store data itself. This is student two.
It only defines the structure. Structure is same, but data is different.
Student one and student two are separate objects.
Accessing Student Data
[Link]([Link]);
[Link]([Link]);
Constructor Function (Template) in JS
function Student(name, rollNo, course) { Creating Student 1
[Link] = name; let student1 = new Student("Aman", 101,"BCA");
[Link] = rollNo; Here we are creating student one.
[Link] = course;
new keyword creates a new object in memory.
}
Student one has its own data.
This is a constructor function. Creating Student 2
It works like a template or form. let student2 = new Student("Riya", 102, "BCA");
It does not store data itself. This is student two.
It only defines the structure. Structure is same, but data is different.
Student one and student two are separate objects.
Accessing Student Data
[Link]([Link]);
[Link]([Link]);
Constructor Function (Template) in JS
The top box is the Student template.
Student Template It only defines structure not real data.
Name Using this one template we create many students.
RollNo
course
Student 1
Student one student two and student three are
instances.
All have the same structure but values are different.
If we change student one student two is not
affected.
Student 1 Student 2 Student 3
One constructor can create many object instances.
Aman Riya Rahul
101 102 102
BCA BCA BCA