Full Stack

9/3/2025 1
JAVASCRIPT
SESSION 2

9/3/2025 2
FUNCTIONS
❑ Function is a block of code designed to perform a particular task.

❑ Function is executed when "something" invokes it (calls it).

❑ Reusable blocks of code.

❑ Accept inputs (parameters) and can return outputs.

❑ Promote code organization and readability.

DEFINING FUNCTIONS
❑ In JavaScript, functions are defined using the function keyword, followed by a chosen name, and a set of
parentheses ().

❑ Function names can incorporate letters, digits, underscores, and dollar signs, adhering to the same rules as
variables.

❑ Inside the parentheses, you can include parameter names separated by commas, like this: (parameter1,
parameter2, ...)

❑ The actual code that the function will execute is placed within curly braces {}

❑ Function declarations are hoisted, meaning they can be called before they are defined in the code.
FUNCTION SYNTAX
FUNCTION EXAMPLE
FUNCTION RETURN
❑ When JavaScript reaches a return statement, the function will stop executing.

❑ If the function was invoked from a statement, JavaScript will "return" to execute the code after the invoking
statement.

❑ Functions often compute a return value. The return value is "returned" back to the "caller“.
FUNCTION RETURN - EXAMPLE
❑ This JavaScript code defines a function named myFunction
that takes two parameters, a and b.

❑ Inside the function, it multiplies these two parameters and

returns the result using the return statement.

❑ When the function is called with the arguments 4 and 3 as in

myFunction(4, 3), it computes the product of these values,
which is 12.

❑ The returned value is then stored in the variable x. Finally, if

you output x, it will display the value 12, which is the
product calculated by the function.
ANONYMOUS FUNCTION
❑ A function without a name.

❑ Usually assigned to a variable or passed as an argument.

❑ Useful for short, one-time functions.

❑ Also called function expressions.

❑ Unlike function declarations, function expressions are not hoisted.

❑ They can only be called after they have been defined.

ANONYMOUS FUNCTION

❑ The function has no name after function.

❑ Stored in the variable greet.

❑ Called with greet("Alice");.

ARROW FUNCTIONS
❑ Arrow functions provide a shorter syntax for writing functions and are always anonymous. They are defined
using the arrow => syntax.

❑ Arrow functions do not have their own this context; they inherit this from the surrounding code.

❑ This can be useful in situations where you want to maintain the context.

❑ Like function expressions, arrow functions are not hoisted.

ARROW FUNCTIONS

❑ Parameters go inside ().

❑ Function body inside {}.

❑ No function keyword.
DEFAULT PARAMETER VALUE

❑ Parameters that aren’t passed get the value

undefined.

❑ Use default parameters (parameter = value) to set

fallback values.
YOUR TURN – PRACTICE
1. Create a function called “calculateArea“ that accept
length and width and returns the area.

2. Test it with difference values.

HIGH ORDER FUNCTION
❑ Functions that take other functions as arguments or return them

❑ Core concept of functional programming in JavaScript

❑ Examples: map, filter, reduce

HIGH ORDER FUNCTION - EXAMPLE
HIGH ORDER FUNCTION - EXPLANATION
1. processUser is a higher-order function because it takes a function (callback) as an argument.

2. This pattern is useful for passing different behaviors (functions) to be executed inside a function.

3. Here, greet is passed as a callback to process the user’s name.

HIGH ORDER FUNCTION - EXAMPLE
HIGH ORDER FUNCTION - EXPLANATION
1. Function multiplier takes a parameter factor. It returns another function that takes number as a parameter.

2. The returned function multiplies number by factor. This inner function “remembers” the value of factor due to
closure.

3. When you call multiplier(2), it returns a new function that multiplies any input by [Link] returned function is
assigned to the variable twice.

4. Calling twice(5) executes the inner function with number = 5, multiplying it by the remembered factor value
[Link] it returns 10.
CLOSURES
❑ Function "remembers" its birthplace (lexical scope).

❑ Inner function keeps access to outer function's variables - even after the outer function is done.

❑ Think: Secret compartment keeping access to past environment.

CLOSURES – EXAMPLE

❑ Each call to createCounter() creates a new closure

with its own private count.

❑ counter1 and counter2 do not interfere with each

other’s counts.

❑ This demonstrates data encapsulation and closure in

JavaScript.
OBJECTS
❑ Objects are collections of key-value pairs.

❑ Keys are called properties and can be strings or symbols.

❑ Values can be any data type, including other objects or functions.

❑ Objects are used to store and organize related data and functionality.

❑ You can access properties using dot notation or bracket notation.

❑ Objects are variables too. But objects can contain many values.
OBJECTS
❑ Objects are fundamental building blocks in programming and represent real-world entities.

❑ Think of them as containers holding information and actions.

❑ A key aspect of objects is that they store data in the form of key-value pairs.

❑ Each key acts as a unique identifier or name for a specific piece of data within the object, like "name" or "age" in a person
object.

❑ The value associated with that key is the actual data itself, such as "Alice" for the "name" key or "30" for the "age" key. These
key-value pairs allow us to organize and access information about an object in a structured and efficient way. Just like a car
object might use the key "color" with the value "red", a person object could use the key "city" with the value "London".

❑ This key-value structure is essential for defining and manipulating the properties of objects.
JAVASCRIPT OBJECTS
CREATE OBJECT
ACCESSING PROPERTIES
ADDING, MODIFYING, DELETING PROPERTIES
METHODS (FUNCTIONS IN OBJECTS)
 THIS KEYWORD
Inside an object method, this refers to the object itself.
LOOPING THROUGH OBJECT PROPERTIES
YOUR TURN – PRACTICE
1. Create an object named user that contains email
password

2. Add two new properties : firstName - lastName

3. Update the password value to a new one.

4. Delete the email property from the object.

5. Loop through the object and log each key and value
to the console.
CLASSES
❑ A class is a blueprint for creating objects.

❑ Introduced in ES6 (ECMAScript 2015).

❑ Simplifies creating multiple similar objects.

❑ Syntactic sugar over JavaScript’s prototype-based inheritance.

BASIC SYNTAX
CLASS KEYWORD: YOU
DEFINE A CLASS USING THE
CLASS KEYWORD.
CLASSES - CONSTRUCTOR METHOD
❑ This is a special method inside a class that gets called automatically when a new instance (object) of the class is
created using the new keyword.

❑ Its primary purpose is to initialize the object's properties.

❑ You can pass arguments to the constructor to set initial values for the object's properties.

❑ A class can only have one constructor method.

CLASSES - CONSTRUCTOR METHOD
CLASSES - INSTANCE METHODS

❑ These are functions defined inside the class that

describe the behavior or actions an object of that
class can perform.

❑ They operate on the instance's data (this).

CLASSES - CREATING INSTANCES

❑ To create an object from a class, you use the new

keyword followed by the class name.
ARRAYS
❑ Think of an array like a neatly organized list or a container. Imagine a numbered shelf in a warehouse. Each shelf
(or position) can hold an item, and the order in which you place items is crucial.

❑ Ordered Collection: The defining characteristic of an array is that it stores a sequence of items in a specific order.
This order is guaranteed and maintained. The position of each item matters. If you change the order, it becomes
a different array.

❑ Items (Elements): These "items" within an array can be virtually anything! Numbers, text (strings), other arrays
(nested arrays), objects, and more. You can mix and match data types within a single array in many
programming languages, making them very flexible.
ARRAYS
❑ Zero-Based Indexing (Accessing Items by Position)

❑ How do we find a specific item in our ordered list? Arrays use a system called zero-based indexing.

❑ Start Counting from Zero: Instead of starting to count positions from 1 (like we usually do in everyday life),
arrays start from 0.

❑ The very first item in the array is at index 0.

❑ The second item is at index 1.

❑ The third item is at index 2, and so on.

ARRAYS
❑ Example: Let's say we have an array of fruits: ["Apple", "Banana", "Cherry"]

❑ "Apple" is at index 0

❑ "Banana" is at index 1

❑ "Cherry" is at index 2
ARRAYS
CREATING AN ARRAY
CREATING AN ARRAY
ACCESSING ARRAY ELEMENTS

❑ Each element in the array is identified by its index.

❑ Accessing the first element at index 0.

❑ Accessing the third element at index 2.

MODIFYING ELEMENTS

❑ You can change the value of an element by

specifying its index.

❑ Changing the second element from "banana" to

"blueberry".
ARRAY LENGTH

❑ Every array has a length property that tells you how

many elements it contains.

❑ The array has 3 elements.

ADDING ELEMENTS TO AN ARRAY

❑ Add at the end using push

❑ Adds "orange" at the end of the array.

ADDING ELEMENTS TO AN ARRAY

❑ Add at the beginning using unshift.

❑ Adds "mango" to the start of the array.

REMOVING ELEMENTS FROM AN ARRAY

❑ Remove from the end with pop.

❑ Removes the last element ("orange").

REMOVING ELEMENTS FROM AN ARRAY

❑ Remove from the beginning with shift.

❑ Removes the first element ("mango").

REMOVING ELEMENTS FROM AN ARRAY

❑ Remove specific elements using splice.

❑ Removes 1 element at index 1 ("blueberry").

LOOPING THROUGH ARRAYS

❑ You can loop over arrays to process each element

❑ Using a classic for loop.

❑ Prints each fruit one by one.

LOOPING THROUGH ARRAYS

❑ You can loop over arrays to process each element

❑ Using for...of loop.

❑ Prints each fruit one by one.

LOOPING THROUGH ARRAYS

❑ You can loop over arrays to process each element

❑ Using forEach method.

❑ Prints each fruit one by one.

COMMON ARRAY METHODS

❑ Map – Create a new array by transforming each

element

❑ Creates a new array with lengths of each fruit name.

COMMON ARRAY METHODS

❑ Filter – Create a new array with elements that satisfy

a condition

❑ Filters fruits with name longer than 5 characters.

COMMON ARRAY METHODS

❑ Find – Find the first element matching a condition.

❑ Finds "cherry" in the array.

COMMON ARRAY METHODS

❑ Includes – Check if an element exists in the array.

❑ Returns true if "apple" is found.

COMMON ARRAY METHODS

❑ IndexOf() – Get the index of an element.

❑ Returns the index of "cherry".

COMMON ARRAY METHODS

❑ The reduce() method reduces an array to a single

value by executing a reducer function on each
element.

❑ It accumulates values from left to right.

ARRAY DE-STRUCTURING

❑ You can assign elements from an array to variables

easily.
SPREAD OPERATOR

❑ The spread operator (...) lets you copy or merge

arrays.

❑ Creates a new array combining fruits and "pear".

YOUR TURN – PRACTICE
1. Create an array called colors with at least 3 color
names.

2. Add a new color to the end of the array.

3. Add a new color to the beginning of the array.

4. Remove the last element from the array.

5. Remove the first element from the array.

6. Update the value at a specific index.

7. Loop through the array and print each color.

Thank You…

9/3/2025 64