Internet Based Programming: Frontend Web Development
Uploaded by
Sümeyye ÖztürkInternet Based Programming: Frontend Web Development
Uploaded by
Sümeyye Öztürk05/10/2025
Internet Based Programming
Frontend web development: JS (loop statements(for loop, for/in, for/of, while loop, do/while
loop), break & continue statements, functions (definition, anonymous functions, callbacks and
anonymous functions, asynchronous functions, parameters & arguments), objects (creating a
JavaScript object, properties & methods, nested objects, nested arrays and objects, JSON),
pass by value and pass by reference)
Asst. Prof. Dr. İnan KAZANCI
ikazanci@bandirma.edu.tr
Frontend web development- JS: Loop Statements
• Loop statements: are used to repeat a statement or a block of statements for a number
of times or while a certain condition remains true/false.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Loops</h2>
<p id="demo"></p>
<script>
const cars = ["BMW", "Volvo", "Saab", "Ford", "Fiat", "Audi"];
let text = "";
text += cars[0] + "<br>";
text += cars[1] + "<br>";
text += cars[2] + "<br>";
text += cars[3] + "<br>";
text += cars[4] + "<br>";
text += cars[5] + "<br>";
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
05/10/2025 2
1
05/10/2025
Frontend web development- JS: Loop Statements
• Loop statements: are used to repeat a statement or a block of statements for a number
of times or while a certain condition remains true/false.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Loops</h2>
<p id="demo"></p>
<script>
const cars = ["BMW", "Volvo", "Saab", "Ford", "Fiat", "Audi"];
let text = "";
for (let i = 0; i < cars.length; i++) {
text += cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
05/10/2025 3
Frontend web development- JS: Loop Statements
• JavaScript supports different kinds of loops:
for - loops through a block of code a number of times.
for/in - loops through the properties of an object.
for/of - loops through the values of an iterable object.
while - loops through a block of code while a specified condition is true.
do/while - also loops through a block of code while a specified condition is
true.
05/10/2025 4
2
05/10/2025
Frontend web development- JS: Loop Statements
• The For Loop: executes statement or block of statements for number of times.
• Syntax:
for (expression 1; expression 2; expression 3) {
// code block to be executed
}
Expression 1 (initial expression) is executed <body>
(one time) before the execution of the code <h2>JavaScript For Loop</h2>
block. <p id="demo"></p>
<script>
Expression 2 (condition expression) defines let text = "";
the condition for executing the code block. for (let i = 0; i < 5; i++) {
text += "The number is " + i + "<br>";
Expression 3 (increment expression) is }
executed (every time) after the code block document.getElementById("demo").innerHTML = text;
has been executed. </script>
</body>
05/10/2025 5
Frontend web development- JS: Loop Statements
• The For Loop: Expression 1 (initialization expression):
Normally expression 1 is used to initialize the variable used in the loop (let i = 0).
This is not always the case. JavaScript doesn't care. Expression 1 is optional.
You can initiate many values in expression 1 (separated by comma).
<body>
<h2>JavaScript For Loop</h2>
<p id="demo"></p>
<script>
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let i, len, text;
for (i = 0, len = cars.length, text = ""; i < len; i++) {
text += cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
05/10/2025 6
3
05/10/2025
Frontend web development- JS: Loop Statements
• The For Loop: Expression 1 (initialization expression): this expression can also be omitted (like
when your values are set before the loop starts).
<body>
<h2>JavaScript For Loop</h2>
<p id="demo"></p>
<script>
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let i = 0;
let len = cars.length;
let text = "";
for (; i < len; i++) {
text += cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
05/10/2025 7
Frontend web development- JS: Loop Statements
• The For Loop: Expression 2 (condition expression):
Normally expression 2 is used to evaluate the condition of the initial variable.
This is not always the case. JavaScript doesn't care. Expression 2 is also optional.
If expression 2 returns true, the loop will start over again. If it returns false, the loop will end.
expression 2 is can be omitted, you must provide a break inside the loop. Otherwise the loop
will never end. This will crash your browser.
• The For Loop: Expression 3 (increment expression):
Often expression 3 increments the value of the initial variable.
This is not always the case. JavaScript doesn't care. Expression 3 is optional.
Expression 3 can do anything like negative increment (i--), positive increment (i = i + 15), or
anything else.
Expression 3 can also be omitted (like when you increment your values inside the loop).
05/10/2025 8
4
05/10/2025
Frontend web development- JS: Loop Statements
• The For Loop:
<body>
<h2>JavaScript For Loop</h2>
<p id="demo"></p>
<script>
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let i = 0;
let len = cars.length;
let text = "";
for (; i < len;) {
text += cars[i] + "<br>";
i++;
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
05/10/2025 9
Frontend web development- JS: Loop Statements
• The For Loop: Loop Scope:
<body> <body>
<script> <script>
var i = 5; let i = 5;
for (var i = 0; i < 10; i++) {} for (let i = 0; i < 10; i++) {}
document.write(i); document.write(i);
</script> </script>
</body> </body>
05/10/2025 10
5
05/10/2025
Frontend web development- JS: Loop Statements
• The For/in Loop: Loops through the properties of an Object.
• Syntax: for (key in object) {
// code block to be executed
}
<body>
<p id="demo"></p>
<script>
const data = { fname: "BANU", lname: "University", est: 2015 };
let txt = "";
for (let x in data) {
txt += data[x] + " ";
}
document.getElementById("demo").innerHTML = txt;
</script>
</body>
05/10/2025 11
Frontend web development- JS: Loop Statements
• The For/in Loop: Loops through the properties of an Object.
• Syntax: for (key in object) {
// code block to be executed
}
<!DOCTYPE html>
<html>
<body>
<script>
const person = {name: "Alice", age: 30, city: "Paris"};
for (let key in person) {
document.write(key + ": " + person[key] + "<br>");
}
</script>
</body>
</body>
</html>
05/10/2025 12
6
05/10/2025
Frontend web development- JS: Loop Statements
• The For/in Loop: Also loop over the values of an Array.
• Syntax:
for (variable in array) {
code
}
<body> For/in is not recommended for arrays
<p id="demo"></p> • Index order is not guaranteed
<script>
const numbers = [45, 4, 9, 16, 25];
especially with sparse arrays (like
let txt = ""; ones with missing elements).
for (let x in numbers) {
txt += numbers[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;
</script>
</body>
05/10/2025 13
Frontend web development- JS: Loop Statements
• Array.forEach(): calls a function once for each array element.
• Note that: the function takes 3 arguments:
The item value.
The item index.
The array itself.
<body>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);
document.getElementById("demo").innerHTML = txt;
function myFunction(value, index, array) {
txt += value + "<br>";}
</script>
</body>
05/10/2025 14
7
05/10/2025
Frontend web development- JS: Loop Statements
• Array.forEach(): calls a function once for each array element.
• Note that: the function takes 3 arguments:
The item value.
The item index. • The example uses only the value parameter.
The array itself. It can be rewritten to:
<body>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);
document.getElementById("demo").innerHTML = txt;
function myFunction(value) {
txt += value + "<br>";}
</script>
</body>
05/10/2025 15
Frontend web development- JS: Loop Statements
• The For/of Loop: loops through the values of an iterable object. It lets you loop
over iterable data structures such as Arrays, Strings, etc.
• Syntax:
for (variable of iterable_data) {
// code block to be executed }
variable: for every iteration the value of the next property is assigned to the
variable.
Iterable_data: an object that has iterable properties.
05/10/2025 16
8
05/10/2025
Frontend web development- JS: Loop Statements
• The For/of Loop: Looping over an Array
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
const cars = ["BMW", "Volvo", "Mini"];
let text = "";
for (let x of cars) {
text += x + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
05/10/2025 17
Frontend web development- JS: Loop Statements
• The For/of Loop: Looping over a String
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
let language = "JavaScript";
let text = "";
for (let x of language) {
text += x + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
05/10/2025 18
9
05/10/2025
Frontend web development- JS: Loop Statements
• The For/of Loop: Looping over a String
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
let language = "JavaScript";
let text = "";
for (let x in language) {
text += x + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
05/10/2025 19
Frontend web development- JS: Loop Statements
• The For/of Loop: Looping over a String
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
let language = "JavaScript";
let text = "";
for (let x in language) {
text += language[x] + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
05/10/2025 20
10
05/10/2025
Frontend web development- JS: Loop Statements
• The While Loop: Executes a statement or block of statements as long as a specified condition
is true. If the condition is false, then the control will pass to the statement following the loop
construct.
• Syntax:
while (condition) { <body>
<p id="demo"></p>
// code block to be executed <script>
} let text = "";
let i = 0;
while (i < 10) {
text += "<br>The number is " + i;
i++;
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
05/10/2025 21
Frontend web development- JS: Loop Statements
• The do/While Loop: Similar to while loop except that the condition is checked at the end of
the loop.
• The do/while loop will execute the code block once, before checking if the condition is true.
• Syntax:
do { <body>
<p id="demo"></p>
// code block to be executed <script>
} let text = ""
let i = 0;
while (condition); do {
text += "<br>The number is " + i;
i++;
}
while (i < 10);
document.getElementById("demo").innerHTML = text;
</script>
</body>
05/10/2025 22
11
05/10/2025
Frontend web development- JS: Loop Statements
• For and While loops: A while loop is much the same as a for loop, with statement 1 and
statement 3 omitted.
<body> <body>
<p id="demo"></p> <p id="demo"></p>
<script> <script>
const cars = ["BMW", "Volvo", "Saab", const cars = ["BMW", "Volvo", "Saab",
"Ford"]; "Ford"];
let i = 0; let i = 0;
let text = ""; let text = "";
for (; cars[i];) { while (cars[i]) {
text += cars[i] + "<br>"; text += cars[i] + "<br>";
i++; i++;
} }
document.getElementById("demo").innerHTML document.getElementById("demo").innerHTML
= text; = text;
</script> </script>
</body> </body>
05/10/2025 23
Frontend web development- JS: break & continue Statements
• The Break Statement:
You have already seen the break statement used in to "jump out" of a switch() statement.
The break statement can also be used to jump out of a loop.
<body>
<p id="demo"></p>
<script>
let text = "";
for (let i = 0; i < 10; i++) {
if (i === 3) { break; }
text += "The number is " + i + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
05/10/2025 24
12
05/10/2025
Frontend web development- JS: break & continue Statements
• The continue Statement:
Skips one iteration (in the loop) by passing the remaining statements in the body of the loop
and continuing with the next iteration in the loop.
<body>
<p id="demo"></p>
<script>
let text = "";
for (let i = 0; i < 10; i++) {
if (i === 3) { continue; }
text += "The number is " + i + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
05/10/2025 25
Frontend web development- JS: Functions
• Function: A block of code designed to perform a particular task when "something" invokes it
(calls it).
function name(parameter1, parameter2, …) {
• Syntax: // code to be executed
}
Function names can contain letters, digits, underscores, and dollar signs (same rules as
variables).
<body>
<p id="demo"></p>
<script>
function myFunction(p1, p2) {
return p1 * p2;}
let result = myFunction(4, 3);
document.getElementById("demo").innerHTML = result;
</script>
</body>
05/10/2025 26
13
05/10/2025
Frontend web development- JS: Functions
• Function expressions: A JavaScript function can also be defined using an expression.
A function expression defines a function and assigns it to a variable.
After a function expression has been stored in a variable, the variable can be used as a function.
<body>
<p id="demo"></p>
<script>
const x = function (a, b) { return a * b }; Theses functions are
document.getElementById("demo").innerHTML = x(4, 3); actually anonymous
</script> functions
</body>
<body>
<p id="demo"></p>
<script> This function known as arrow
const x = (a, b) => { return a * b };
document.getElementById("demo").innerHTML = x(4, 3); function
</script>
</body>
05/10/2025 27
Frontend web development- JS: Functions: Anonymous
Functions
• Anonymous functions: A function without a name.
• Anonymous functions are usually used as arguments to another functions.
<body>
<p id="demo"></p>
<script>
let x = function() {document.getElementById("demo").innerHTML += "BA";}
function callanotherfun(fun) { document.getElementById("demo").innerHTML += "University ";
fun();
};
callanotherfun(x);
</script>
</body>
05/10/2025 28
14
05/10/2025
Frontend web development- JS: Functions: Anonymous
Functions
• Anonymous functions: A function without a name.
• Anonymous functions are usually used as arguments to another functions.
<body>
<p id="demo"></p>
<script>
let x = function() {document.getElementById("demo").innerHTML += "BA";}
function callanotherfun(fun) { document.getElementById("demo").innerHTML += "University ";
fun();
};
callanotherfun(function () {
document.getElementById("demo").innerHTML += "BA";
});
</script>
</body>
05/10/2025 29
Frontend web development- JS: Functions: Callbacks & Anonymous
Functions
• Callbacks: A callback is a function passed as an argument to another function.
<body>
<p id="demo"></p>
<script>
function myDisplayer(something) {
document.getElementById("demo").innerHTML = something;
}
function myCalculator(num1, num2, myCallback) {
let sum = num1 + num2;
myCallback(sum);
}
myCalculator(5, 5, myDisplayer);
</script>
</body>
• NOTE: In the example above, myDisplayer is a called a callback function.
It is passed to myCalculator() as an argument.
05/10/2025 30
15
05/10/2025
Frontend web development- JS: Functions: Callbacks & Anonymous
Functions
<!DOCTYPE html>
<html>
<body style="text-align: right">
<p id="demo"></p>
<script>
const myNumbers = [4, 1, -20, -7, 5, 9, -6];
const posNumbers = removeNeg(myNumbers, (x) => x >= 0);
document.getElementById("demo").innerHTML = posNumbers; In this example, (x) => x >= 0 is
function removeNeg(numbers, callback) {
const myArray = []; a callback function.
for (const x of numbers) { It is passed to removeNeg() as
if (callback(x)) {
myArray.push(x); an argument.
}
}
return myArray;
}
</script>
</body>
</html>
05/10/2025 31
Frontend web development- JS: Functions: Callbacks & Anonymous
Functions
Q: When to Use a Callback?
A: Callbacks can be coupled with asynchronous functions, where one function has to wait
for another function.
• When using the JavaScript function setTimeout(), you can specify a callback function to
be executed on time-out in milliseconds.
<body>
<h1>JavaScript</h1>
<h2 id="demo"></h2>
<script>
setTimeout(myFunction, 3000);
function myFunction() {
document.getElementById("demo").innerHTML = "Programming!!";
}
</script>
</body>
05/10/2025 32
16
05/10/2025
Frontend web development- JS: Functions: Callbacks & Anonymous
Functions
• When using the JavaScript function setInterval(), you can specify a callback function to
be executed for each interval in milliseconds.
<body>
<p>Using setInterval() to display the time every second (1000 milliseconds).</p>
<h1 id="demo"></h1>
<script>
setInterval(myFunction, 1000);
function myFunction() {
let d = new Date();
document.getElementById("demo").innerHTML =
d.getHours() + ":" +
d.getMinutes() + ":" +
d.getSeconds();
}
</script>
</body>
05/10/2025 33
Frontend web development- JS: Functions: Parameters & Arguments
• A JavaScript function does not perform any checking on parameter values (arguments):
JavaScript function definitions do not specify data types for parameters.
JavaScript functions do not perform type checking on the passed arguments.
JavaScript functions do not check the number of arguments received.
If a function is called with missing arguments (less than declared), the missing values are set
to undefined. <body>
<p id="demo"></p>
<script>
function myFunction(x, y) {
if (y === undefined) {
y = 2;
}
return x * y;
}
document.getElementById("demo").innerHTML = myFunction(4);
</script>
</body>
05/10/2025 34
17
05/10/2025
Frontend web development- JS: Functions: Parameters & Arguments
• Default Parameters: Allow parameters to be initialized with default values if no value
or undefined is passed.
<!DOCTYPE html>
<html>
<body>
<p>If y is not passed or undefined, then y = 10:</p>
<p id="demo"></p>
<script>
function myFunction(x, y = 10) {
return x + y;
}
document.getElementById("demo").innerHTML = myFunction(5);
</script>
</body>
</html>
05/10/2025 35
Frontend web development- JS: Objects
• Objects are variables that can contain many values and methods.
• Objects in JavaScript fall into four groups:
User-defined objects: Are those which are created by the programmer.
Native objects: Are objects that are specified as a part of JavaScript language (e.g.; Array,
Boolean, Date, String etc.).
Host objects: Are those objects that are not specified as part of JavaScript language but that
are supported by the host environment, typically by browser (e.g.; Window, Navigator).
Document objects: Are those objects that are specified only for Document Object Model
(DOM) (e.g.; Image, HTMLInputElement).
05/10/2025 36
18
05/10/2025
Frontend web development- JS: Objects: Creating a
JavaScript Object
• Creating an object using an object literal: Using an object literal, you both define
and create an object in one statement. An object literal is a list of name: value
pairs inside curly braces {}.
<!DOCTYPE html>
<html>
<body>
<h2>Creating a JavaScript Object:</h2>
<p id="demo"></p>
<script>
const person = { firstName: "John", lastName: "Doe", age: 50, eyeColor: "blue" };
document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>
</body>
</html>
05/10/2025 37
Frontend web development- JS: Objects: Creating a
JavaScript Object
• Creating an object using an object literal: This example creates an empty
JavaScript object, and then adds 4 properties:
<body>
<h2>Creating a JavaScript Object:</h2>
<p id="demo"></p>
<script>
const person = {};
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue";
document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>
</body>
05/10/2025 38
19
05/10/2025
Frontend web development- JS: Objects: Creating a
JavaScript Object
• Creating an object Using the JavaScript Keyword new: The following example
creates a new JavaScript object using new Object(), and then adds 4 properties:
<body>
<h2>Creating a JavaScript Object:</h2>
<p id="demo"></p>
<script>
const person = new Object();
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue";
document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>
</body>
05/10/2025 39
Frontend web development- JS: Objects: Properties &
Methods
• JavaScript Properties: The values associated with a JavaScript object.
• The syntax for accessing the property of an object is:
objectName.property // person.age or objectName["property"] // person["age"]
<body>
<h2>JavaScript Object Properties</h2>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
const person = {
firstname: "John",
lastname: "Doe",
age: 50,
eyecolor: "blue"
};
document.getElementById("demo1").innerHTML = person.firstname + " is " + person.age + " years old.";
document.getElementById("demo2").innerHTML = person["firstname"] + " is " + person["age"] + " years old.";
</script>
</body>
05/10/2025 40
20
05/10/2025
Frontend web development- JS: Objects: Properties &
Methods
• JavaScript Properties: for...in Loop
The JavaScript for...in statement loops through the properties of an object.
The block of code inside of the for...in loop will be executed once for each property.
<body>
<h2>JavaScript Object Properties</h2>
<p id="demo"></p>
<script>
const person = { fname: "John", lname: "Doe", age: 25 };
let txt = "";
for (let x in person) {
txt += person[x] + " ";
}
document.getElementById("demo").innerHTML = txt;
</script>
</body>
05/10/2025 41
Frontend web development- JS: Objects: Properties &
Methods
• JavaScript Properties: Adding, editing, deleting of Properties
<body>
<p id="demo"></p>
<script>
const person = { fname: "John", lname: "Doe", age: 25};
document.getElementById("demo").innerHTML = person.fname;
</script>
</body>
<body>
<p id="demo"></p>
<script>
const person = { fname: "John", lname: "Doe", age: 25};
person.fname = "Mike";
document.getElementById("demo").innerHTML = person.fname;
</script>
</body>
05/10/2025 42
21
05/10/2025
Frontend web development- JS: Objects: Properties &
Methods
• JavaScript Properties: Adding, editing, deleting of Properties
<body>
<p id="demo"></p>
<script>
const person = { fname: "John", lname: "Doe", age: 25};
delete person.fname;
document.getElementById("demo").innerHTML = person.fname;
</script>
</body>
<body>
<p id="demo"></p>
<script>
const person = { lname: "Doe", age: 25};
person.fname = "John";
document.getElementById("demo").innerHTML = person.fname;
</script>
</body>
05/10/2025 43
Frontend web development- JS: Objects: Properties &
Methods
• JavaScript Object Methods: Objects can also contain methods (functions)
<body>
<h2>JavaScript Object Methods</h2>
<p id="demo"></p>
<script>
const person = {
firstName: "John",
lastName: "Doe", In JavaScript,
id: 5566, the this keyword refers
fullName: function () {
return this.firstName + " " + this.lastName;
to an object. If it is
} used in an object
}; method, this refers to
document.getElementById("demo").innerHTML = person.fullName(); the object.
</script>
</body>
05/10/2025 44
22
05/10/2025
Frontend web development- JS: Objects: Nested Objects
• Values in an object can be another object:
<body>
<h2>JavaScript Objects</h2>
<p id="demo"></p>
<script>
const myObj = {
name: "John",
age: 30,
cars: {
car1: "Ford",
car2: "BMW",
car3: "Fiat"
}
}
document.getElementById("demo").innerHTML = myObj.cars.car2;
</script>
</body>
document.getElementById("demo").innerHTML = myObj.cars["car2"]; or
document.getElementById("demo").innerHTML = myObj["cars"]["car2"];
05/10/2025 45
Frontend web development- JS: Objects: Nested Arrays
and Objects
• Values in objects can be arrays, and values in arrays can be objects:
for (let i in myObj.cars) {
x += "<h2>" + myObj.cars[i].name + "</h2>";
for (let j in myObj.cars[i].models) {
<body> x += myObj.cars[i].models[j] + "<br>";
<h2>Nested JavaScript Objects and Arrays.</h2> }
<p id="demo"></p> }
<script> document.getElementById("demo").innerHTML = x;
let x = ""; </script>
const myObj = { </body>
name: "John",
age: 30,
cars: [
{ name: "Ford", models: ["Fiesta", "Focus", "Mustang"] },
{ name: "BMW", models: ["320", "X3", "X5"] },
{ name: "Fiat", models: ["500", "Panda"] }
]
}
05/10/2025 46
23
05/10/2025
Frontend web development- JS: Objects: JSON
• JSON stands for JavaScript Object Notation
It is a lightweight data-interchange format.
JSON is plain text written in JavaScript object notation.
JSON is used to send data between computers.
JSON is language independent: The JSON syntax is
derived from JavaScript object notation, but the JSON
format is text only. Code for reading and generating
JSON exists in many programming languages.
05/10/2025 47
Frontend web development- JS: Pass by Value and Pass
by Reference
• The parameters, in a function call, are the function's arguments.
JavaScript non object arguments are passed by value: The function only gets to know
the values, not the argument's locations. Thus, If a function changes an argument's
value, it does not change the parameter's original value.
Objects are Passed by Reference: In JavaScript, objects behave like they are passed
by reference. Thus, If a function changes an object property, it changes the original
value.
05/10/2025 48
24
05/10/2025
Frontend web development- JS: Pass by Value and Pass
by Reference
<body>
<h2>Pass by Value and Pass by Reference</h2>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
let name = "Java";
let strObject = {name: "Script"};
function test1(str) {
str = "JavaScript";
}
function test2(str) {
str.name = "JavaScript";
}
test1(name);
test2(strObject);
document.getElementById("demo1").innerHTML = name;
document.getElementById("demo2").innerHTML = strObject.name;
</script>
</body>
05/10/2025 49
05/10/2025 50
25
You might also like
- 1 How Will You Declare Variables in JavaScriptNo ratings yet1 How Will You Declare Variables in JavaScript10 pages
- Web Designing - Publishing-Unit 6-Javascript 4 LoopsNo ratings yetWeb Designing - Publishing-Unit 6-Javascript 4 Loops12 pages
- Internet Based Programming: Frontend Web DevelopmentNo ratings yetInternet Based Programming: Frontend Web Development25 pages
- Internet Based Programming: Frontend Web DevelopmentNo ratings yetInternet Based Programming: Frontend Web Development20 pages
- Internet Based Programming: Frontend Web DevelopmentNo ratings yetInternet Based Programming: Frontend Web Development27 pages
- Internet Based Programming: Frontend Web DevelopmentNo ratings yetInternet Based Programming: Frontend Web Development24 pages
- Learn JavaScript - Loops Cheatsheet - CodecademyNo ratings yetLearn JavaScript - Loops Cheatsheet - Codecademy4 pages
- Learn JavaScript - Loops Cheatsheet - CodecademyNo ratings yetLearn JavaScript - Loops Cheatsheet - Codecademy4 pages
- Cap214: Fundamentals of Web ProgrammingNo ratings yetCap214: Fundamentals of Web Programming20 pages
- Learn JavaScript - Loops Cheatsheet - CodecademyNo ratings yetLearn JavaScript - Loops Cheatsheet - Codecademy4 pages
- Javascript Functions Events and ObjectsNo ratings yetJavascript Functions Events and Objects26 pages
- StreamServe Persuasion SP5 StreamStudioNo ratings yetStreamServe Persuasion SP5 StreamStudio30 pages
- JavaScript For Loop - PDF - 20250521 - 231246 - 0000No ratings yetJavaScript For Loop - PDF - 20250521 - 231246 - 00007 pages
- Learn JavaScript - Loops Cheatsheet - CodecademyNo ratings yetLearn JavaScript - Loops Cheatsheet - Codecademy4 pages
- Java Program Interview Questions - Google SearchNo ratings yetJava Program Interview Questions - Google Search1 page
- Learn JavaScript - Loops Cheatsheet - CodecademyNo ratings yetLearn JavaScript - Loops Cheatsheet - Codecademy3 pages
- Xcode Cheat Sheet: Search Navigation Editing0% (1)Xcode Cheat Sheet: Search Navigation Editing2 pages
- Quick JavaScript Learning In Just 3 Days: Fast-Track Learning CourseFrom EverandQuick JavaScript Learning In Just 3 Days: Fast-Track Learning CourseNo ratings yet
