JavaScript:
Functions and Objects
Session No. : 17
Course Name : Web Technology
Course Code : R1UC626C
Instructor Name : Ms. Isha Chopra
Galgotias University 1
Review of the key concepts of session no.15
• Common tasks in JavaScript forms
• Accessing Form Elements
• Handling Form Submission
• Event Listeners for Form Input Fields
• JavaScript statements
• Declaration
• expressions,
• conditionals,
• loops,
• Switch
• Break and continue
• Try-catch-finally
Galgotias University 2
Engaging Question:
Imagine you’re building a calculator or a user
profile page on a website—what kind of code
would you want to reuse again and again, and
how would you organize it?
Wooclap
Galgotias University 3
Reflection on the question:
• Reuse the code that adds two numbers.
• A way to keep all the user’s info in one place, like name and age.
• Something like a template for the user or a function for calculations.
• Not sure, but I’d probably copy-paste the same code where needed.
• Use functions to avoid repeating code
• objects to keep related information together.
Galgotias University 4
At the end of this session, you will be able to
Explore and apply JavaScript functions.
Create, manipulate, and utilize
JavaScript objects.
Galgotias University 5
1 Functions in JavaScript
Session
2 Objects in JavaScript
Outline
Galgotias University 6
Functions in JavaScript
A function is a block of reusable code that performs a specific task.
➤ Syntax of a Function
function functionName(parameters) {
// code to be executed
}
➤ Example:
function greet(name) {
[Link]("Hello, " + name + "!"); // print output to
console
}
greet("Alice"); // Output: Hello, Alice!
7
JavaScript Functions: Types of Functions
1. Function Declaration : add(2, 3); // Works even if written before definition
2. Function Expression: subtract(5, 2); // Works only after definition, subtract is the variable.
3. Arrow Functions : (a, b) => replaces function(a, b).
• a * b is returned automatically (no return needed for single line).
4. Anonymous Function : Function without a name. It is used when you don’t need to reuse the function.
Passed as an argument to another function (setTimeout). Common in callbacks, events, and timers.
8
JavaScript Functions: Parameters and Arguments
• Parameters are listed in the function definition. Parameter = variable
(placeholder)
• Arguments are the actual values passed when invoking the function.
Argument = actual value
function sayHi(name = "Guest") {
[Link]("Hi, " + name);
}
sayHi("Bob"); // Output: Hi, Bob
sayHi(); // Output: Hi, Guest
9
JavaScript Functions: Return and
Callback statements
Return ends the function immediately. You can store the returned value in a
variable. Without return, the function gives undefined.
10
Objects in JavaScript
An object is a collection of key-value pairs (properties and methods).
➤ Syntax:
let person = {
name: "Alice",
age: 25,
greet: function() {
[Link]("Hello!");
}
};
11
JavaScript Objects : Accessing
Object Properties
12
JavaScript Objects : Methods
13
JavaScript Objects : Methods
14
Output :
Brand : Toyota
Model : Corolla
15
JSON (JavaScript Object Notation)
• JSON (JavaScript Object Notation) is a format used to exchange data
between systems (like client server).
• JSON = language-independent format to share data
Why JSON is Used?
• Lightweight (easy to send over internet) Where JSON is Used?
• Easy to read and write • APIs (sending/receiving
• Supported by almost all programming languages data)
• Web applications
• Databases
• Configuration files
16
Learning Activity 2 (Problem-based learning)
Build a Simple Student Grading System. Create an object for a student that
includes their details and a method to calculate the average of their grades
using a function.
1. Define a student object with the following properties:
o name (string)
Resource
o grades (array of numbers) Material
2. Add a method called calculateAverage using a function inside the
object.
3. Use the method to return and log the average grade.
Galgotias University 17
Reflection-Learning Activity 2
Galgotias University 18
Summary
• Functions in JavaScript • Objects in JavaScript
• Definition of Object
• Definition of Function
• Accessing Object Properties
• Types of Functions • Dot Notation
• Function Declaration • Bracket Notation
• Function Expression • Adding/Modifying Properties
• Arrow Functions • Deleting Properties
• Anonymous Functions • Methods in Objects
• The this Keyword
• Function Parameters and
• Object Constructors
Arguments
• [Link]() Method
• Return Statement • Looping Through Object Properties
• Callback Functions • JSON (JavaScript Object Notation)
Galgotias University 19
Ensure attainment of LOs in alignment to the
learning activities: outcomes (1-2)
JavaScript functions are explored and applied.
JavaScript objects are created,
manipulated, and utilized.
Galgotias University 20