Exclusive for

Tech Training Series

Data Structure
& Algorithm
2023/2024
How data are stored and how data are processed efficiently

by
Sunny NG
In this workshop (3 hours)
■ Introduction to algorithm ■ Hands-on Practicing
■ Introduction to data structure – Variable, array, objects and JSON
– Looping
■ Algorithm Examples – Array iterating
■ Data structure and algorithm – Built-in methods for Array and
visual simulation object
– Searching algorithm
■ Common data operations – Sorting algorithm
■ Computation Complexity – Map/Reduce
■ Time vs. Space (Speed vs.
Storage)

2
Sunny Ng
■ Founder / Master Trainer Image Nation
■ Developer Web, Mobile, WeChat & IoT
■ Content Creator Video producing / Live streaming
■ AWS Solution Architect – Associate
■ Alibaba Cloud Professional
■ AWS Academy Educator
■ Email: sunny.ng@imagenation.com.hk
github.com/ngsanluk
Required Software Installation
1. Node JS
2. Visual Studio Code
3. Google Chrome Browser

4
Node.js Download
■ Node.js is a popular
development tool and
runtime for
Web/JavaScript
■ Download link
– https://nodejs.org/en/download/

5
Visual Studio Code
■ Visual Studio Code is
one of the most popular
modern code editors
■ We will use VS Code for
JavaScript coding/editing
■ Download link
– https://code.visualstudio.com/download

6
Google Chrome Browser
■ We will need to use the
Chrome Developer Tools
■ Google “Chrome installer”
to download and install
or
■ Visit download link
– https://www.google.com/intl/e
n_hk/chrome/

7
What is
Algorithm?
Algorithm is the step-by-
step procedure that
defines a set of
instructions to be executed
in a certain order to get the
desired output.

8
Searching has been a primary
computation problem
■ Algorithms are there to
solve computation
problems while
computation problems
usually roots to life
problems
■ One of classical
computation problems is
searching

9
Search is also real-life problem:
large collection of books

10
Searching is easy? Yes and No.
■ Search is easy.
■ But search efficiently is Linear search does give the
NOT easy at all. answer, but way too slow
■ Consider the data volume
that a nowadays business
application is dealing with
– No. of social media posts
– No. of YouTube video uploads
– No. of transactions on e-
commerce platform

11
Phonebook browsing
■ If there are only dozens
of names in your phone
book, browsing the
name list one-by-one
might be okay.

12
Phonebook searching
■ When phone book
entries grow, searching
(by keyword) is the only
answer

13
In the early days of the Web
■ Each web user
would build their
own bookmarks
to include
websites of
interest

14
Searching the web
■ We search on Google and YouTube many many times
each day
■ Take a guess if I search “iPhone 14”, how many
webpages will match?

15
Let’s give it a try

16
Google Changes Life
■ Do you realize how ridiculous huge is Google’s database?
■ Do you realize how fast Google are performing
searching?

17
What is Data Structure?
■ Data Structures are the special programmatic way of
storing data so that data can be used efficiently.
■ Data Structure and Algorithm form an optimized
combination to solve computation problem efficiently.
■ Google gives their search result in such rapid speed
because of their highly optimized data structure and
algorithm.

18
Common Data Structures
■ Array
■ Linked List
■ Stack
■ Queue
■ Tree
■ Hash-table
■ Graph

19
Computer algorithms are written
to be understood and executed
by CPU.
Therefore, they could be difficult
to understand by people without
programming training

20
Swapping two number is straight
forward to human brain
Say - A human brain would
We have two numbers Just get to the answer
■ x = 100 ■ x = y
■ y = 200 ■ y = x

21
Let’s try to code
swapping
in JavaScript

22
Unfortunately, the codes below
don’t work as we expect
x = 100;
y = 200;
console.log("Before Swapping");
console.log(`x = ${x}`);
console.log(`y = ${y}`);
// swapping x and y
x = y;
y = x;
console.log("\nAfter Swapping");
console.log(`x = ${x}`);
console.log(`y = ${y}`);

23
To Future Data Scientist
■ Bad news is computer algorithms are difficult to understand,
especially low-level programming like C programming

■ Good news is modern high-level programming language like

JavaScript and Python are succinct and much easier to read
and code. And many useful algorithms are already built in.
– Still, it’s better that you understand what basic computation operations
that a computer algorithms are performing

24
After all, an algorithm is a long
set of very simple operations
Operation/Instruction It’s processing Code Examples
Conditional flow control Do processing conditionally if () {} else {}
Comparison Operators Compare two value. It if (a==b) {}
evaluates to TRUE or FALSE if (a!=b) {}
Logical Operators Combine multiple logical if (x>=y && x>=z) {}
operations
Assignment Operator Temporary save the value to x = 100
memory for further processing i = i + 1
Looping Respectively executing the for (i=0;i<n;i++) {}
processing
Arithmetic Operators Mathematic operations i = j * 2 - 3

25
Simple Search Algorithm
Linear Search

26
Visualizing Linear Search
Searching for 33
■ Match number by number. Easy to understand.
■ Easy to implemented by computer programming.
■ Not very effective. Imagine the dataset size nowadays.

27
Linear Search in
JavaScript Implementation
function search(arr, x) {
for (i = 0; i < arr.length; i++) {
if (arr[i] == x) return i; // found
}
return -1; // not found
}

28
Linear Search is useful only
when the data size is small
Remember the data size of Google search is huge?

29
We need quicker search
algorithm …
■ Turns out if we use certain programming data structures
(e.g. array) together with special algorithm (e.g. binary
sort), the searching can be a lot faster.
■ But there is a prerequisite
– The array of data have to be pre-processed - sorted
– This is the computation cost to faster sorting

30
We are halving the data size
in each round of binary search

31
The required pre-processing
Sorting the Array

32
Algorithm Visualization
Help you understand algorithm better

33
https://visualgo.net/en
Help you understand algorithm better

34
Computation Complexity
Measuring how efficient an algorithm is

35
Ultimate Goals of
Computation Complexity
■ Time Complexity
– Running time or the execution time of operations of data structure
must be as small as possible.

■ Space Complexity
– Memory usage of a data structure operation should be as little as
possible.

36
Big-O
Common Time Complexity
Measurement
Big-O judges an algorithm
by its worst-case
performance
E.g. In linear search, it
must visit each element at
least once and therefore
the time complexity is O(n)

37
Time Complexity Examples
Linear Search Binary Search is a better
■ O(n) algorithm for searching
■ n is the size of data to
search

Binary Search
■ O(log n)
■ n is the size of data to
search
38
Linear Search vs. Binary Search

39
When the data size is huge …
If you are searching a number towards ONE MILLION numbers
■ for linear search, it has to perform 1 million comparison
before you get the answer
■ for binary search, it takes at most 20 rounds to find the target
value.
– log(1,000,000) ~= 20
– In calculator, you get the result by doing ln(1,000,000) / ln(2)

40
Common data processing
algorithm
■ Search - Algorithm to search an item in a data structure.
■ Sort - Algorithm to sort items in a certain order.
■ Insert - Algorithm to insert an item in a data structure.
■ Update - Algorithm to update an existing item in a data
structure.
■ Delete - Algorithm to delete an existing item from a data
structure.

41
There is NO such thing as
the Best Algorithm
■ Some data-structure/algorithms are outstanding in time
complexity, but NOT GOOD in space complexity
■ Some data-structure/algorithms are the other way around
■ Some data-structure/algorithms are good in search, but
perform poorly in insert, delete and update while some
data-structure/algorithms the other way around
■ That’s why you need to pick one that suits your use-case

42
JavaScript Object

43
JavaScript Object
■ JavaScript is a compound data
structure
■ It uses a pair of braces {} to denote
object
■ In an object, there are multiple pairs
of Key-Value.
■ Keys and values are separated by a
colon : (NOT equals sign =)
– The key is the attribute name (like a
column name to a table)
– The value could be type of number, string
or other
■ Each pair of key-value are separated
by comas ,

44
JavaScript Object can be nested
■ JavaScript object is
multiple level
■ Meaning object can be
inside object (and this is
quite common)

45
Multiple objects with same
structure form an array/list
■ It use a pair of brackets
[] to denote an array
■ Inside the array, there
are multiple objects
■ Each object is wrapped
inside a pair of braces {}
■ Objects are separated
by a comas ,

46
Hands-on High-Level
Language Practicing

2 hours
47
Source Codes
Download
bit.ly/dsa-with-js

48