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!