Module 01
Full Stack Web Development
Array and Function
Outline
● Array
● Function
Array
An array is a collection of similar data
elements stored at contiguous memory
locations.
It is the simplest data structure where each
data element can be accessed directly by
only using its index number.
Array Declaration
Array built-in methods
● toString ● slice ● findIndex
● join ● indexOf ● reduce
● pop ● lastIndexOf ● reduceRight
● push ● sort ● every
● shift ● reverse ● some
● unshift ● forEach ● from
● length ● map ● keys
● concat ● filter ● entries
● splice ● find ● includes
For … of loop
The for … of doesn’t give access to the
number of the current element, just its
value, but in most cases that’s enough. And
it’s shorter.
For … in loop
Loops through the properties of an object. We will discuss about for … in loop in the next
session.
Function
A function is a block of reusable code written
to perform a specific task.
Generally speaking, a function is a
"subprogram" that can be called in another
code.
Like the program itself, a function is composed
of a sequence of statements called the function
body.
Values can be passed to a function, and the
function will return a value.
Defining Function
To define a function we have two ways:
● Function Declaration
● Function Expression
Function Declaration
parameter types
Function declaration consists of the function s
keyword, followed by:
● The name of the function.
● A list of parameters to the function,
enclosed in parentheses and separated
by commas.
● The JavaScript statements that define
the function, enclosed in curly
brackets → {...}.
Function Expression
While the function declaration is syntactically
a statement, functions can also be created
by a function expression.
Such a function can be anonymous, it does
not have to have a name. Then assign that
anonymous function to a variable.
Calling Function
Defining a function does not execute it. If you
want to call a function, just call the
function’s name and parentheses.
Function Scope
Variables defined inside a function cannot be
accessed from anywhere outside the
function, because the variable is defined
only in the scope of the function.
However, a function can access all variables
and functions defined inside the scope.
Parameter & Argument
An argument is a value passed as input
to a function. While a parameter is a
named variable passed into a function.
Parameter variables are used to import
arguments into functions.
Default Parameter
In JavaScript, function
parameters default to
undefined. However, it's often
useful to set a different default
value. This is where default
parameters can help.
Default function parameters
allow named parameters to
be initialized with default
values if no value or
undefined is passed.
Rest Parameters
The rest parameters syntax allows a
function to accept an indefinite number of
arguments as an array, providing a way to
represent variadic functions in JavaScript.
A function definition's last parameter can be
prefixed with "...", which will cause all
remaining (user supplied) parameters to be
placed within a standard Javascript array.
Only the last parameter in a function
definition can be a rest parameter.
Nested Function
In JavaScript, a function can have one or
more inner functions. These nested
functions are in the scope of outer function.
Inner function can access variables and
parameters of outer function. However, outer
function cannot access variables defined
inside inner functions.
Closure
Closure means that an inner function always
has access to the variables and parameters of
it’s outer function, even after the outer function
has returned.
Currying
● Currying is a transformation of
functions that translates a function from
callable as f(a, b, c) into callable as
f(a)(b)(c).
● Currying doesn’t call a function. It
just transforms it.
Recursive
A recursive function is a function that calls
itself until it doesn’t.
In this example, the count down will stop
when the next number is zero.
Other references
Arrow Function
Arrow function provide you with an
alternative way to write a shorter syntax
compared to the function expression.
Arrow Function vs Function Expression
Arrow Function Limitation
There are differences between arrow functions and traditional
functions, as well as some limitations:
● Arrow functions don't have their own bindings to this,
arguments or super, and should not be used as methods.
● Arrow functions don't have access to the new.target
keyword.
● Arrow functions aren't suitable for call, apply and bind
methods, which generally rely on establishing a scope.
● Arrow functions cannot be used as constructors.
● Arrow functions cannot use yield, within its body.
Predefined Function
JavaScript has several top-level, built-in functions:
● isFinite(), The global isFinite() function determines whether the
passed value is a finite number. If needed, the parameter is first
converted to a number.
● isNaN(), The isNaN() function determines whether a value is Nan or
not.
● parseFloat(), The parseFloat(), function parses a string argument
and returns a floating point number.
● parseInt(), The parseInt() function parses a string argument and
returns an integer of the specified radix (the base in mathematical
numeral systems).
● etc.
Exercise - Example
● Create a function that can create a triangle pattern according to the height we provide
like the following :
1
1 2
1 2 3
1 2 3 4
1 2 3 4 5
● Parameters : height → triangle height
● Example input: 5
Exercise - Example Array Pseudocode
● Create a function that receiving
array as input, and this function
can find maximum value in
array without using built in
method in javascript.
● Parameters : array
● Output: number
● Example input: [10, 55, 79, 32]
● Example output: 79
Exercise 1
● Create a function that can create a triangle pattern according to the height we provide
like the following :
01
02 03
04 05 06
07 08 09 10
● Parameters : height → triangle height
Exercise 2
● Create a function that can loop the number of times according to the input we provide,
and will replace multiples of 3 with "Fizz", multiples of 5 with "Buzz", multiples of
3 and 5 with "FizzBuzz".
● Parameters : n → total looping
○ Example: n = 6 →1, 2, Fizz, 4, Buzz, Fizz
○ Example: n = 15 → 1, 2, Fizz, 4, Buzz, Fizz, 7, 8, Fizz, Buzz, 11, Fizz, 12, 13, 14,
FizzBuzz
Exercise 3
● Create a function to calculate Body Mass Index (BMI)
● Formula : BMI = weight (kg) / (height (meter))²
● Parameters : weight & height
● Return values :
○ < 18.5 return “less weight”
○ 18.5 - 24.9 return “ideal”
○ 25.0 - 29.9 return “overweight”
○ 30.0 - 39.9 return “very overweight”
○ > 39.9 return “obesity”z
Exercise 4
● Write a function to remove all odd numbers in an array and return a new array that
contains even numbers only
○ Example : [1,2,3,4,5,6,7,8,9,10] → [2,4,6,8,10]
Exercise 5
● Write a function to split a string and convert it into an array of words
○ Example : “Hello World” → [“Hello”, “World”]
Thank You!
Thank You!
