Scribd
Upload
3 views

04. Array and Function

The document provides an overview of arrays and functions in JavaScript, detailing their definitions, methods, and various types of functions including declarations, expressions, and arrow functions. It also covers concepts such as function scope, parameters, closures, and recursion, along with practical exercises for applying these concepts. Additionally, it highlights built-in JavaScript functions and their usage.

Uploaded by

wahyu prabowo
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
3 views

04. Array and Function

The document provides an overview of arrays and functions in JavaScript, detailing their definitions, methods, and various types of functions including declarations, expressions, and arrow functions. It also covers concepts such as function scope, parameters, closures, and recursion, along with practical exercises for applying these concepts. Additionally, it highlights built-in JavaScript functions and their usage.

Uploaded by

wahyu prabowo
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 32

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!

You might also like