JAVASCRIPT

Function
JavaScript Functions
• A JavaScript function is a block of code designed to perform a particular task.
• A JavaScript function is executed when "something" invokes it (calls it).

• Function parameters are listed inside the parentheses () in the function

definition.
• Function arguments are the values received by the function when it is invoked.
• Inside the function, the arguments (the parameters) behave as local variables.

2
Function Return
• When JavaScript reaches a return statement, the function will stop
executing.
• Functions often compute a return value. The return value is "returned"
back to the "caller":

/L3TU3XKZ[XT3ZNK3L[TIZOUT3MO\KY3HGIQ3TUZNOTM3ɒ3

YU3_U[X3\GXOGHRK3ROQK3^3]UT狭Z3MKZ3ZNK3GTY]KX

'3L[TIZOUT3OY3SGJK3ɒ
L[TIZOUT3S_,[TIZOUTG3H3a3XKZ[XT3G33H!3c
:NOY3SKGTY 3狮:GQK3Z]U3T[SHKXY3G3GTJ3H3S[RZOVR_3
ZNKS3GTJ3MO\K3HGIQ3ZNK3XKY[RZ狯

:NK3L[TIZOUT3OY3[YKJ3IGRRKJ3ɒ
RKZ3^3#3S_,[TIZOUT狦3狥!
.KXK3G3#3狦3GTJ3H3#3狥

:NK3XKY[RZ3OY3YZUXKJ3OT3^3ɒ
3
狦3˜3狥3#3狣狤3YU3TU]3^3#3狣狤
Function Expressions
• A function expression can be stored in a variable:

• The function is actually an anonymous function (a function

without a name).
• Functions stored in variables do not need function names. They
are always invoked (called) using the variable name.

4
The Function() Constructor
• Functions can also be defined with a built-in JavaScript function
constructor called Function().

• You actually don't have to use the function constructor. The example
above is the same as writing:
,[TIZOUT3IUTYZX[IZUX 3VGXGSKZKXY3GXK3YZXOTMY3HKIG[YK3_U[狭XK3H[ORJOTM3
ZNK3L[TIZOUT3LXUS3ZK^Z3GZ3X[TZOSK

,[TIZOUT3ROZKXGR 3VGXGSKZKXY3GXK3OJKTZOLOKXY3HKIG[YK3_U[狭XK3JKLOTOTM3ZNK3
L[TIZOUT3JOXKIZR_3OT3IUJK

5
Invoking a Function as a Function

6
 Invoking a Function as a Method
• In JavaScript you can define functions as object methods.

• The following example creates an object (myObject), with two

properties (firstName and lastName), and a method (fullName):

properties

7
Invoking a Function with a Function Constructor
• If a function invocation is preceded with the new keyword, it is a
constructor invocation.

8
“this” keyword
• In JavaScript, “this” keyword refers to an object.
• Which object depends on how this is being invoked (used or called).
• “this” keyword refers to different objects depending on how it is used.

9
Convert Fahrenheit to Celsius:

Functions Used as Variable Values

10
Arrow Function
• Arrow functions allows a short syntax for writing function expressions.
• The function keyword, the return keyword, and the curly brackets are not
needed.
• Arrow functions are not hoisted (must be defined before they are used).
In JavaScript, function declarations are hoisted, which means you can call them before you actually write them in the code.

• Using const is safer than using var, because a function expression is

always constant value.
• Don’t omit the return keyword and the curly brackets if the function is a
single statement.
Always write the return and { } even if your function has only one line.

sayHi(); // ❌ Error: Cannot access 'sayHi' before initialization const sayHi = () => {

[Link]("Hello!");
Arrow functions are stored in a variable (like const, let, or var).
const sayHi = () => { };

✅
Variables with let or const are not hoisted the same way.
[Link]("Hello!");

}; sayHi(); // Works now That means you can’t use the function before you define it.

11
 Arrow Function
<script>
let myFunction = (a, b) => a * b;
<script> [Link]("demo").innerHTML = myFunction(4, 5);
Function myFunction(a,b){ </script>
return a*b;
}
[Link]("demo").innerHTML = myFunction(4, 5);
</script>

<script> <script>
let hello = ""; let hello = "";
hello = () => {
hello = function() { return "Hello World!";
return "Hello World!"; }
} [Link]("demo").innerHTML = hello();
[Link]("demo").innerHTML = hello(); </script>
</script>
12
Let's Try JS Function.

13