Web Development from Beginner to Paid Professional, 3: Learn JavaScript Algorithms & Data Structures Step By Step. Examples, Practice Exercises and Projects Included.

By Bolakale Aremu

This book is volume 3 of Web Development from Beginner to Paid Professional. In this volume, you'll learn JavaScript Algorithms and Data Structures. While HTML and CSS control the content and styling of a page, JavaScript is used to make it interactive. In this volume, you'll learn the fundamentals of JavaScript including variables, arrays, obje

• Language: English
• Publisher: Ojula Technology Innovations
• Release date: Dec 14, 2023
• ISBN: 9798869061324

Bolakale Aremu

My educational background is in software development. I work with a few colleagues who are software developers and system engineers. I spent over 17 years as a software developer, and I've done a bunch of other things too. I've been involved in SDLC/process, data science, operating system security and architecture, and many more. My most recent project is serverless computing where I simplify the building and running of distributed systems. I always use a practical approach in my projects and courses. Cheers, Bolakale Aremu (Self-publisher and CEO ); Charles H. Johnson (Co-publisher and Publishing Assistant ).

Book preview

Web Development

from Beginner to

Paid Professional

Volume 3

Learn JavaScript Algorithms & Data Structures Step By Step.

Examples, Practice Exercises and Projects Included.

By

Bolakale Aremu

Ojula Technology Innovations

Web Development

from Beginner to Paid Professional

Volume 3

Learn JavaScript Algorithms & Data Structures Step by Step.

Examples, Practice Exercises and Projects Included.

Copyright © Ojula Technology Innovations

All rights reserved

ISBN: 979-8-8690-6132-4

Published in the United States

Limit of Liability/Disclaimer of Warranty

This book contains information obtained from authentic and highly regarded sources. Reasonable efforts have been made to publish reliable data and information, but the author and publisher cannot assume responsibility for the validity of all materials or the consequences of their use. All information given in this book is based on the author’s own research and does not constitute technical, financial or professional advice. The author and publisher have attempted to trace the copyright holders of all material reproduced in this publication, and apologize to copyright holders if permission to publish in this form has not been obtained. If any copyright material has not been acknowledged please write and let us know so we may rectify in any future reprint. Except as permitted under U.S. Copyright Law, no part of this book may be reprinted, reproduced, transmitted, or utilized in any form by any electronic, mechanical, or other means, now known or hereafter invented, including photocopying, microfilming, and recording, or in any information storage or retrieval system, without written permission from the publisher.

Table of Contents

How to Learn HTML5, CSS & JavaScript Well

1. Basic JavaScript

1.0. Getting Started

1.1. JavaScript Fundamental

1.2. Comment Your JavaScript Code

1.3. Declare JavaScript Variables

1.4. Storing Values with the Assignment Operator

1.5. Assigning the Value of One Variable to Another

1.6. Initializing Variables with the Assignment Operator

1.7. Declare String Variables

1.8. Understanding Uninitialized Variables

1.9. Explore Differences Between the var and let Keywords

1.10. Declare a Read-Only Variable with the const Keyword

1.11. Add Two Numbers with JavaScript

1.12. Subtract One Number from Another with JavaScript

1.13. Multiply Two Numbers with JavaScript

1.14. Divide One Number by Another with JavaScript

1.15. Increment a Number with JavaScript

1.16. Decrement a Number with JavaScript

1.17. Create Decimal Numbers with JavaScript

1.18. Multiply Two Decimals with JavaScript

1.19. Divide One Decimal by Another with JavaScript

1.20. Increment a Number with JavaScript

1.21. Decrement a Number with JavaScript

1.22. Create Decimal Numbers with JavaScript

1.23. Multiply Two Decimals with JavaScript

1.24. Divide One Decimal by Another with JavaScript

1.25. Finding a Remainder in JavaScript

1.26. Compound Assignment With Augmented Addition

1.27. Compound Assignment With Augmented Subtraction

1.28. Compound Assignment With Augmented Multiplication

1.29. Compound Assignment With Augmented Division

1.30. Escaping Literal Quotes in Strings

1.31. Quoting Strings with Single Quotes

1.32. Escape Sequences in Strings

1.33. Concatenating Strings with Plus Operator

1.34. Concatenating Strings with the Plus Equals Operator

1.35. Constructing Strings with Variables

1.36. Appending Variables to Strings

1.37. Find the Length of a String

1.38. Use Bracket Notation to Find the First Character in a String

1.39. Understand String Immutability

1.40. Use Bracket Notation to Find the Nth Character in a String

1.41. Use Bracket Notation to Find the Last Character in a String

1.42. Use Bracket Notation to Find the Nth-to-Last Character in a String

1.43. Word Blanks

1.44. Store Multiple Values in one Variable using JavaScript Arrays

1.45. Nest one Array within Another Array

1.46. Access Array Data with Indexes

1.47. Modify Array Data With Indexes

1.48. Access Multi-Dimensional Arrays With Indexes

1.49. Manipulate Arrays With push Method

1.50. Manipulate Arrays With pop Method

1.51. Manipulate Arrays With shift Method

1.52. Manipulate Arrays With unshift Method

1.53. Shopping List

1.54. Write Reusable JavaScript with Functions

1.55. Passing Values to Functions with Arguments

1.56. Return a Value from a Function with Return

1.57. Global Scope and Functions

1.58. Local Scope and Functions

1.59. Global vs. Local Scope in Functions

1.60. Understanding Undefined Value returned from a Function

1.61. Assignment with a Returned Value

1.62. Stand in Line

1.63. Understanding Boolean Values

1.64. Use Conditional Logic with If Statements

1.65. Comparison with the Equality Operator

1.66. Comparison with the Strict Equality Operator

1.67. Practice comparing different values

1.68. Comparison with the Inequality Operator

1.69. Comparison with the Strict Inequality Operator

1.70. Comparison with the Greater Than Operator

1.71. Comparison with the Greater Than Or Equal To Operator

1.72. Comparison with the Less Than Operator

1.73. Comparison with the Less Than Or Equal To Operator

1.74. Comparisons with the Logical And Operator

1.75. Comparisons with the Logical Or Operator

1.76. Introducing Else Statements

1.77. Introducing Else If Statements

1.78. Logical Order in If Else Statements

1.79. Chaining If Else Statements

1.80. Golf Code

1.81. Selecting from Many Options with Switch Statements

1.82. Adding a Default Option in Switch Statements

1.83. Multiple Identical Options in Switch Statements

1.84. Replacing If Else Chains with Switch

1.85. Returning Boolean Values from Functions

1.86. Return Early Pattern for Functions

1.87. Counting Cards

1.88. Build JavaScript Objects

1.89. Accessing Object Properties with Dot Notation

1.90. Accessing Object Properties with Bracket Notation

1.91. Accessing Object Properties with Variables

1.92. Updating Object Properties

1.93. Add New Properties to a JavaScript Object

1.94. Delete Properties from a JavaScript Object

1.95. Using Objects for Lookups

1.96. Testing Objects for Properties

1.97. Manipulating Complex Objects

1.98. Accessing Nested Objects

1.99. Accessing Nested Arrays

1.100. Record Collection

1.101. Iterate with JavaScript While Loops

1.102. Iterate with JavaScript For Loops

1.103. Iterate Odd Numbers With a For Loop

1.104. Count Backwards With a For Loop

1.105. Iterate Through an Array with a For Loop

1.106. Nesting For Loops

1.107. Iterate with JavaScript Do...While Loops

1.108. Replace Loops using Recursion

1.109. Profile Lookup

1.110. Generate Random Fractions with JavaScript

1.111. Generate Random Whole Numbers with JavaScript

1.112. Generate Random Whole Numbers within a Range

1.113. Use the parseInt Function

1.114. Use the parseInt Function with a Radix

1.115. Use the Conditional (Ternary) Operator

1.116. Use Multiple Conditional (Ternary) Operators

1.117. Use Recursion to Create a Countdown

1.118. Use Recursion to Create a Range of Numbers

2. ECMAScript 6

2.1. Compare Scopes of the var and let Keywords

2.2. Mutate an Array Declared with const

2.3. Prevent Object Mutation

2.4. Use Arrow Functions to Write Concise Anonymous Functions

2.5. Write Arrow Functions with Parameters

2.6. Set Default Parameters for Your Functions

2.7. Use the Rest Parameter with Function Parameters

2.8. Use the Spread Operator to Evaluate Arrays In-Place

2.9. Use Destructuring Assignment to Extract Values from Objects

2.10. Use Destructuring Assignment to Assign Variables from Objects

2.11. Use Destructuring Assignment to Assign Variables from Nested Objects

2.12. Use Destructuring Assignment to Assign Variables from Arrays

2.13. Destructuring via rest elements

2.14. Use Destructuring Assignment to Pass an Object as a Function's Parameters

2.15. Create Strings using Template Literals

2.16. Write Concise Object Literal Declarations Using Object Property Shorthand

2.17. Write Concise Declarative Functions with ES6

2.18. Use class Syntax to Define a Constructor Function

2.19. Use getters and setters to Control Access to an Object

2.20. Create a Module Script

2.21. Use export to Share a Code Block

2.22. Reuse JavaScript Code Using import

2.23. Use * to Import Everything from a File

2.24. Create an Export Fallback with export default

2.25. Import a Default Export

2.26. Create a JavaScript Promise

2.27. Complete a Promise with resolve and reject

2.28. Handle a Fulfilled Promise with then

2.29. Handle a Rejected Promise with catch

3. Regular Expressions

3.1. Using the Test Method

3.2. Match Literal Strings

3.3. Match a Literal String with Different Possibilities

3.4. Ignore Case While Matching

3.5. Extract Matches

3.6. Find More Than the First Match

3.7. Match Anything with Wildcard Period

3.8. Match Single Character with Multiple Possibilities

3.9. Match Letters of the Alphabet

3.10. Match Numbers and Letters of the Alphabet

3.11. Match Single Characters Not Specified

3.12. Match Characters that Occur One or More Times

3.13. Match Characters that Occur Zero or More Times

3.14. Find Characters with Lazy Matching

3.15. Find One or More Criminals in a Hunt

3.16. Match Beginning String Patterns

3.17. Match Ending String Patterns

3.18. Match All Letters and Numbers

3.19. Match Everything But Letters and Numbers

3.20. Match All Numbers

3.21. Match All Non-Numbers

3.22. Restrict Possible Usernames

3.23. Match Whitespace

3.24. Match Non-Whitespace Characters

3.25. Specify Upper and Lower Number of Matches

3.26. Specify Only the Lower Number of Matches

3.27. Specify Exact Number of Matches

3.28. Check for All or None

3.29. Positive and Negative Lookahead

3.30. Check For Mixed Grouping of Characters

3.31. Reuse Patterns Using Capture Groups

3.32. Use Capture Groups to Search and Replace

3.33. Remove Whitespace from Start and End

4. Debugging

4.1. Use the JavaScript Console to Check the Value of a Variable

4.2. Use typeof to Check the Type of a Variable

4.3. Use typeof to Check the Type of a Variable

4.4. Catch Misspelled Variable and Function Names

4.5. Catch Unclosed Parentheses, Brackets, Braces and Quotes

4.6. Catch Mixed Usage of Single and Double Quotes

4.7. Catch Use of Assignment Operator Instead of Equality Operator

4.8. Catch Missing Open and Closing Parenthesis After a Function Call

4.9. Catch Arguments Passed in the Wrong Order When Calling a Function

4.10. Catch Off By One Errors When Using Indexing

4.11. Use Caution When Reinitializing Variables Inside a Loop

4.12. Prevent Infinite Loops with a Valid Terminal Condition

5. Basic Data Structures

5.1. Use an Array to Store a Collection of Data

5.2. Access an Array's Contents Using Bracket Notation

5.3. Add Items to an Array with push() and unshift()

5.4. Remove Items from an Array with pop() and shift()

5.5. Remove Items Using splice()

5.6. Add Items Using splice()

5.7. Copy Array Items Using slice()

5.8. Copy an Array with the Spread Operator

5.9. Combine Arrays with the Spread Operator

5.10. Check For The Presence of an Element With indexOf()

5.11. Iterate Through All an Array's Items Using For Loops

5.12. Create complex multi-dimensional arrays

5.13. Add Key-Value Pairs to JavaScript Objects

5.14. Modify an Object Nested Within an Object

5.15. Access Property Names with Bracket Notation

5.16. Use the delete Keyword to Remove Object Properties

5.17. Check if an Object has a Property

5.18. Iterate Through the Keys of an Object with a for...in Statement

5.19. Generate an Array of All Object Keys with Object.keys()

5.20. Modify an Array Stored in an Object

6. Basic Algorithm Scripting

6.1. Convert Celsius to Fahrenheit

6.2. Reverse a String

6.3. Factorialize a Number

6.4. Find the Longest Word in a String

6.5. Return Largest Numbers in Arrays

6.6. Confirm the Ending

6.7. Repeat a String Repeat a String

6.8. Truncate a String

6.9. Finders Keepers

6.10. Boo who

6.11. Title Case a Sentence

6.12. Slice and Splice

6.13. Falsy Bouncer

6.14. Where do I Belong

6.15. Mutations

6.16. Chunky Monkey

7. Object Oriented Programming

7.1. Create a Basic JavaScript Object

7.2. Use Dot Notation to Access the Properties of an Object

7.3. Create a Method on an Object

7.4. Make Code More Reusable with the this Keyword

7.5. Define a Constructor Function

7.6. Use a Constructor to Create Objects

7.7. Extend Constructors to Receive Arguments

7.8. Verify an Object's Constructor with instanceof

7.9. Understand Own Properties

7.10. Use Prototype Properties to Reduce Duplicate Code

7.11. Iterate Over All Properties

7.12. Understand the Constructor Property

7.13. Change the Prototype to a New Object

7.14. Remember to Set the Constructor Property when Changing the Prototype

7.15. Understand Where an Object’s Prototype Comes From

7.16. Understand the Prototype Chain

7.17. Use Inheritance So You Don't Repeat Yourself

7.18. Inherit Behaviors from a Supertype

7.19. Set the Child's Prototype to an Instance of the Parent

7.20. Reset an Inherited Constructor Property

7.21. Add Methods After Inheritance

7.22. Override Inherited Methods

7.23. Use a Mixin to Add Common Behavior Between Unrelated Objects

7.24. Use Closure to Protect Properties Within an Object from Being Modified Externally

7.25. Understand the Immediately Invoked Function Expression (IIFE)

7.26. Use an IIFE to Create a Module

8. Functional Programming

8.1. Learn About Functional Programming

8.2. Understand Functional Programming Terminology

8.3. Understand the Hazards of Using Imperative Code

8.4. Avoid Mutations and Side Effects Using Functional Programming

8.5. Pass Arguments to Avoid External Dependence in a Function

8.6. Refactor Global Variables Out of Functions

8.7. Use the map Method to Extract Data from an Array

8.8. Implement map on a Prototype

8.9. Use the filter Method to Extract Data from an Array

8.10. Implement the filter Method on a Prototype

8.11. Return Part of an Array Using the slice Method

8.12. Remove Elements from an Array Using slice Instead of splice

8.13. Combine Two Arrays Using the concat Method

8.14. Add Elements to the End of an Array Using concat Instead of push

8.15. Use the reduce Method to Analyze Data

8.16. Use Higher-Order Functions map, filter, or reduce to Solve a Complex Problem

8.17. Sort an Array Alphabetically using the sort Method

8.18. Return a Sorted Array Without Changing the Original Array

8.19. Split a String into an Array Using the split Method

8.20. Combine an Array into a String Using the join Method

8.21. Apply Functional Programming to Convert Strings to URL Slugs

8.22. Use the every Method to Check that Every Element in an Array Meets a Criteria

8.23. Use the some Method to Check that Any Elements in an Array Meet a Criteria

8.24. Introduction to Currying and Partial Application

9. Intermediate Algorithm Scripting

9.1. Sum All Numbers in a Range

9.2. Diff Two Arrays

9.3. Seek and Destroy

9.4. Wherefore art thou

9.5 Spinal Tap Case

9.6. Pig Latin

9.7. Search and Replace

9.8. DNA Pairing

9.9. Missing letters

9.10. Sorted Union

9.11. Convert HTML Entities

9.12. Sum All Odd Fibonacci Numbers

9.13. Sum All Primes

9.14. Smallest Common Multiple

9.15. Drop it

9.16. Steamroller

9.17. Binary Agents

9.18. Everything Be True

9.19. Arguments Optional

9.20. Make a Person

9.21. Map the Debris

10. JavaScript Projects

10.1 Palindrome Checker

10.2. Roman Numeral Converter

10.3. Caesars Cipher

10.4. Telephone Number Validator

10.5. Cash Register

10.6. Coding Interview Preparation

10.7. How to Get Further Help

How to Learn HTML5, CSS & JavaScript Well

I know there are more than sufficient resources online to teach absolute beginners everything they need to learn web development from scratch. But this book is different because it addresses a few web development problems. The credibility of a web developer is much more than their credentials. It’s actually about the strength of their portfolio.

Employment opportunities often come from work samples and concrete skills, rather than a college degree. So, you need to learn well enough. This book will not only help you learn well and build a stunning portfolio, it will also provide you continuous help and support.

With this book and my dedicated 24/7 help and support team, there’s nothing for you to fear. I have helped many web developers update their development skills, launch successful careers and get hired for remote jobs. I notice that even the most ambitious beginners can run into problems, such as unable to decide where to begin. Sometimes they get completely lost on the way and therefore need further help.

The truth is everyone needs help at one point or the other to learn html5, CSS or JavaScript correctly in their web development journey. I put sufficient coding challenges, hints and solutions in volumes 1, 2 and 3 of the series. In this volume, you will get practice projects in this book to test your skills. You will also get further help if you use the free support link at the bottom of this book. I will help you learn well.

Finally, if you buy this book, I will add you to my web development community so you can continue to learn and get more help until you become a well-paid professional.

Bolakale Aremu

CEO, Ojula Technology Innovations

Web developer and Software Engineer

Ojulaweb.com

1. Basic JavaScript

1.0. Getting Started

This book is volume 3 of Web Development from Beginner to Paid Professional. In this volume, you'll learn JavaScript Algorithms and Data Structures. While HTML and CSS control the content and styling of a page, JavaScript is used to make it interactive. In this volume, you'll learn the fundamentals of JavaScript including variables, arrays, objects, loops, and functions.

Once you have the fundamentals down, you'll apply that knowledge by creating algorithms to manipulate strings, factorialize numbers, and even calculate the orbit of the International Space Station.

Along the way, you'll also learn two important programming styles or paradigms: Object Oriented Programming (OOP) and Functional Programming (FP).

The great thing about web development is it's very suitable for people coming from many different backgrounds. So, it doesn't matter if you have little or no technical experience, or if you do have a technical background and you're looking to transition your skill sets into web development.

For the lessons in the subsequent sections, you will need to create a few files and open them in Visual Studio. How to install and use Visual Studio was explained in Book 1 of the series. If you don’t already have them, I highly recommend you download and install Visual Studio editor (https://code.visualstudio.com/download) and Google Chrome browser (https://www.google.com/chrome/) right now to get started. They are very easy to install, and they have a bunch of developer tools pre-installed.

There are tons of videos on Youtube on how to install the latest versions of Visual Studio (www.youtube.com/watch?v=m9mIwKeTJhk) and Chrome browser (www.youtube.com/watch?v=ThQAkabE0J8).

Alternatively, with W3schools’ online JavaScript editor (www.w3schools.com/js/tryit.asp?filename=tryjs_editor), you can edit HTML, CSS and JavaScript code, and view the result in your browser.

Below are the six simple steps you should follow to create a new folder in your portfolio and open it in Visual Studio:

1. Create a new folder and name it JS_Course, similar to the folder you created in volume 2 of the series.

2. In visual Studio, click the File menu at the top and select Open Folder… .

3. Navigate to the location where you saved your folder and select it.

4. Select this folder to load/open it on your Visual Studio explorer.

5. Close the Get Started tab.

6. Get ready to start coding.

Practice exercises (shown in color) are provided near the end of every section of this book. Each exercise is immediately followed by one or more hints that point to the correct results on your browser when