FrontEndMasters - Professional JavaScript

Take your first steps into the wide world of JavaScript and walk away with the core skills needed to become a professional JavaScript programmer! Through a series of hands-on projects, you’ll learn the building blocks to write dynamic websites. Modify web pages on the fly, write reusable code with functions, react to user events, make decisions with conditionals, and fetch data from APIs! Everything you need to continue your journey to become effective at JavaScript.

Introduction

Introduction
Anjana Vakil introduces the course by providing some personal background and answering a student's questions regarding how Anjana discovered JavaScript and why they like it.

Course Overview
Anjana provides an overview of the material covered in the course, including the DOM, data types, arrays, objects, functions, events, branches, loops, fetching data, and real-world JavaScript. A student's question regarding how much time will be spent writing code is also covered in this segment.

What is JavaScript
Anjana discusses what JavaScript is and what it can do some examples include the language of the web, a programming language, and something that lets people modify and add functionality to a website.

Where to Write JavaScript
Anjana discusses the relationship between HTML, CSS, and JavaScript and the places JavaScript can be written. The browser's JavaScript console, local text files in editors, and online playgrounds are some examples discussed. A brief demonstration of using the console is also provided in this segment.

DOM

Document Object Model
Anjana walks through what an HTML document looks like by drawing out a tree of HTML elements and briefly discussing the elements contained in the provided example.

Finding Elements in a Web Page
Anjana demonstrates how to use the web browser's inspect tool to find specific HTML elements and their contents on a webpage. Discussions regarding using various selector syntaxes, including querySelector, getElementsByTagName, and querySelectorAll to query for particular details, are also covered in this segment.

.length & .textContent
Anjana discusses getting the number of matching elements using the .length selector and the text contained in an element using .textContent Student questions regarding the difference between an HTML collection and a node list and why it is .length and not .count are also covered in this segment.

Finding Elements Exercise
Anjana walks through an exercise using console commands to find all the p elements, the text "X," the number of squares on the board, and the text "A game you know."

Changing a Web Page
Anjana demonstrates using JavaScript commands in the web browser console to edit the HTML and CSS of a web page. The changes made with console commands will revert to the original page view when the page refreshes.

Changing a Web Page Exercise
Anjana walks through an exercise of using the console to edit the webpage HTML. This exercise includes changing the player names, swapping the player symbols, and changing the subtitle to "A game you know and love."

Values & Data Types

Values & Data Types
Anjana demonstrates the different values and data types used in JavaScript, including how to tell the type difference between "24" and 24. Primitive data types include string, number, boolean, undefined, null, bigint, and symbol.

Values & Data Types Exercise
Anjana provides an exercise to practice determining the value type in JavaScript. A demonstration of using typeof to check value types is also covered in this segment.

Strings
Anjana discusses the data type string, what strings are composed of, how to determine the length of a string, and demonstrates how characters are organized in a string.

Index
Anjana demonstrates searching for the first occurrence of a specified string, substring, or character using the indexOf method. Also covered in this segment are includes, startsWith, toLowerCase, and how to combine two strings.

Working with Strings Exercise
Anjana provides an exercise to practice inserting strings, searching for the first occurrence of a character, searching for the existence of a string in a document, and manipulating the case of strings.

Operators

Operators
Anjana discusses the various operators and the different effects they can have on values in JavaScript. In JavaScript, Arithmetic operators respect the order of operations and can be grouped using parentheses.

Operators Exercise
Anjana provides an exercise to practice using arithmetic operators, including, addition, subtraction, multiplication, and division.

Comparison & Equality Operators
Anjana demonstrates JavaScript returning a boolean when running comparison operators and discusses the differences between the triple equals === and double equals == equality operators. A brief exercise using equality operators is also provided in this segment.

Expressions

Expressions
Anjana discusses what expressions are and where they can be used in JavaScript. An expression is a valid set of literals, variables, and operators that resolve to a single value.

Declaring & Assigning Variables
Anjana demonstrates JavaScript's ability to remember values by declaring and assigning them as variables. A student's question regarding why `let bankruptcy` evaluates to undefined and not null is also covered in this segment.

const & Accessing Variables
Anjana briefly discusses the difference between the const and let keywords, how to utilize a variable, and demonstrates various naming conventions for variables.

Variables Exercise
Anjana provides an exercise to practice declaring and assigning variables and discusses a student's question regarding the difference between the let, const, and var keywords. Students are instructed to declare and assign variables to remember their name, the combined age of their parents, and the #board element on the Tic Tac Toe page.

What are Variables?
Anjana discusses a brief overview of what a variable is and provides a suggestion for a mental picture to associate with a JavaScript variable.

Evaluating Code
Anjana provides a set of code examples and walks through how JavaScript evaluates each of these examples when they are run.

Statements vs Expressions
Anjana discusses the differences between statements and expressions and provides a brief overview of the material covered. An expression asks JavaScript for a value, while a statement tells JavaScript to do something.

Arrays

Arrays
Anjana demonstrates how items are arranged in an array, the array index, finding the .length of an array, and how to check if an array contains a specific value. Replacing, removing, and appending array items are also demonstrated in this segment.

Useful Array Methods
Anjana demonstrates some practical array methods, including sort, join, and concat. A demonstration of the push method is also provided in this segment.

Mutability
Anjana discusses mutable and immutable data and demonstrates actions that mutate and do not mutate data. Some actions "mutate" an array while others do not mutate the original array but instead create a new copy.

Mutable & Immutable Data Exercise
Anjana provides some exercises to practice determining which actions will and will not mutate data.

Immutable Variables & Values
Anjana demonstrates the interactions between an immutable variable with a mutable value. Using immutable data and variables is best to avoid errors caused by unintentional data mutations.

Variables & Arrays
Anjana discusses student questions regarding what happens when declared variables point towards arrays and if arrays should be declared using const or let.
Objects

Objects & Property Access
Anjana introduces JavaScript objects and demonstrates how to access the values of an object's properties. A student's question regarding if there can be multiple properties or values on a single line is also covered in this segment.

Visualizing Object Access
Anjana walks through a whiteboard visualization of what happens when creating and accessing information in a JavaScript object. A student's question regarding if an array that acts like an object can be created is also covered in this segment.

Objects Exercise
Anjana provides an exercise to practice creating objects and adding properties. A student's question regarding creating sub-objects within objects is also covered in this segment.

Object Methods
Anjana discusses properties on objects that point to functions, also known as methods, and briefly discusses the .this method. Nested objects and objects in arrays and objects are also demonstrated in this segment.

Object Methods Exercise
Anjana provides an exercise to practice retrieving data from objects. Students are instructed to retrieve "Girl Power", the object representing Ginger Spice, "Spiceworld", and "Victoria" from the spiceGirls object.

Built-In Objects
Anjana demonstrates predefined objects in JavaScript, including document, console, Math, and String. A brief review of some of the methods that can be performed on these built-in objects is also provided in this segment.

Tic Tac Toe Demo
Anjana walks through playing a tic tac toe game using the material covered thus far. Creating a players array that contains objects for each player with the player's name, symbol (X or O), and score (0 initially), displaying each player's name in the appropriate element on the page, and playing the game by placing symbols on the board are all covered in this segment.

Quiz Project

JavaScript Pop Quiz & Project Setup
Anjana walks through a brief JavaScript pop quiz overviewing the material covered thus far. A discussion regarding the contents of the quiz project, script tags, and code comments are also covered in this segment.

DOM Exercise
Anjana provides a DOM exercise to review JavaScript skills covered so far in the course. Students are instructed to declare statement, optionButtons, and explanation variables, create a facts object, and to use the statement element to display that fact.

Declaring & Assigning a Variable
Anjana walks through the second TODO task of the DOM exercise, declaring and assigning a variable called fact. The fact variable is a constant object containing the properties fact, answer, and explanation.

Setting Statement Element
Anjana live codes the third TODO task of the DOM exercise, setting the text of the statement element to the fact statement.

Quiz Project Functions

Functions, Parameters, & Arguments
Anjana discusses declaring and calling functions, the difference between function parameters and arguments, and what happens when a function receives an incorrect argument. A function's parameters are the expected inputs, while the arguments are the actual values the function is called with.

Function Return Values
Anjana demonstrates specifying the output value of a function in a return statement and what happens when there is no return. A student's question regarding if a return statement functions similarly to console.log is also covered in this segment.

Creating Functions Exercise
Anjana provides an exercise to practice declaring functions and walks through the solution to each function. Students are instructed to declare three functions: multiply, given two numbers, return their product; yell, given a lowercase string, log it in all caps to the console; and longerThan, given two arrays, return whether the first is longer than the second.

Arrow Functions
Anjana discusses creating unnamed functions using the arrow syntax to declare the function. More complicated arrow functions can be made by utilizing curly braces to define a function body, but a return statement is still required.

Arrow Functions Exercise
Anjana provides an exercise to practice writing arrow functions by refactoring the previously written functions in the creating functions exercise as arrow functions.

Quiz Project Functions Exercise
Anjana provides an exercise to practice declaring functions in the JavaScript quiz project. Students are instructed to declare functions that disable or enable a button and declare an isCorrect(guess) function that compares the given string to the previously created fact's answer string.

Quiz Project Disable & Enable Solution
Anjana walks through the solution to TODO number four of declaring functions that disable or enable a button.

Quiz Project isCorrect Solution
Anjana walks through the solution to TODO number five of declaring an isCorrect(guess) function that compares the given argument string to the previously defined fact's answer string.

Boolean Q&A
Anjana answers a student's question regarding how fact.answer works since it compares a string to a boolean and demonstrates how to convert a non-string value into a string using toString.

Scope
Anjana discusses the meaning of scope in JavaScript, when the scope of a function is determined, and how to determine which variables can be accessed in a given scope. Within each scope, variables declared on the broader scope can be accessed, but variables declared in a narrower scope cannot be accessed.

let & Scope
Anjana demonstrates the ability to allow variables from a narrower scope to be accessed in a broader scope using the let keyword. A student's question regarding how the scope changed when strings are immutable is also covered in this segment.

var vs let
Anjana discusses the differences between the var and let keywords. The var statement declares a function-scoped or globally-scoped variable while the let declaration declares a block-scoped local variable.

Events & Handlers

Event Listeners
Anjana provides a brief overview of the quiz project and discusses detecting events on the DOM with the method .addEventListener. The event listener method takes in two parameters, the name of the event being listened for and a handler function to run when that event is detected.

Event Object
Anjana demonstrates the properties contained within the event object and how they are used to describe the event that occurred. Events are fired to notify code of "interesting changes" that may affect code execution.

Events Exercise
Anjana provides an exercise to practice adding event listeners in the console and walks through the solutions. The events click, mouseover, and mouseout are demonstrated in this segment.

Conditionals

Conditionals
Anjana demonstrates using if and else statements to execute code only under the specified conditions. The if statement executes a statement if a specified condition is truthy; if it evaluates to falsy, the else clause will instead be executed.

Conditionals Exercise
Anjana provides an exercise to practice writing conditional statements and walks through the solutions. Students are instructed to write a conditional that logs whether first name or last name is longer, a function isEmpty(array) that returns whether a given array is empty or not, and a conditional that returns whether an empty array is truthy or falsy.

Logical & Ternary Operators
Anjana demonstrates using the logical operators and, or, and not to expand the flexibility of boolean conditional statements. A demonstration of using ternary operators to quickly write boolean conditionals is also provided in this segment.

Loops
Anjana demonstrates how to iterate over a function multiple times while only running a single statement using loops. The += and ++ increment operators and the for and for of loops are covered in this segment.

Explanation Loop Project Exercise
Anjana walks through TODO six of the quiz project. Students are instructed to create a for loop to attach an event handler and add the statement text to the appropriate div on the page.

Disable Loop Project Exercise
Anjana walks through TODO seven of the quiz project, where students are instructed to create another for loop that disables all of the buttons when one is clicked.

isCorrect Project Exercise
Anjana walks through TODO eight of the quiz project, where students are instructed to retrieve the guessed value from the clicked button, compare the guess to the answer, and apply the correct or incorrect class accordingly.

Map & Filter

map & filter
Anjana demonstrates using the filter method to process an array for specified data and the map method to call a function on each item and create a new array.

map & filter Exercise
Anjana live codes an exercise to practice mapping and filtering through an array. This example creates new arrays, including a new "name" array and an array for just nicknames that end in y.

Spread
Anjana demonstrates inserting all of the items from one array into another using the spread operator. Instead of looping over an array for each item, the spread operator can also be used.
Doggos Quiz Game

Doggos Quiz Game Setup
Anjana discusses the next project for this course, a guess the dog breed quiz. Setup instructions are also provided in this segment.

while Loops
Anjana demonstrates using while loops to run a section of code repeatedly until a defined condition is true. The while loop can be dangerous; if the given condition is always true, a never-ending loop is created that will break the browser.

Doggo Quiz while Exercise
Anjana provides an exercise to practice creating while loops by completing TODO number one for the doggo quiz. Students are instructed to use a while loop and the getRandomElement function to create an array with several choices, including the correct answer.

Doggo Quiz while Solution
Anjana walks through the solution to the doggo quiz while exercise. Implementing both the random item and shuffle utility functions are covered in this segment.

Doggo Quiz while Review
Anjana inserts the correct function argument and demonstrates the resulting code from the doggo quiz while exercise.

setTimeout
Anjana discusses creating an asynchronous function by setting a task to a to-do list by running it in a setTimeout function. Asynchronous refers to code that allows a program to have a task be performed alongside the original task (or tasks) without stopping to wait for the task to complete.
Data Fetching & Promises

APIs & fetch
Anjana discusses using the fetch function to load data from an API endpoint on the internet. If the request is successful, the API will respond with data contained in a JSON object.

Working with Promises
Anjana discusses the states of a promise, including pending, fulfilled, and rejected. A student's question regarding if promises are only seen with API called is also covered in this segment.

Using Await with Promises
Anjana demonstrates using the await operator to wait for a Promise and obtain its resulting value. If the await operator is not used, JavaScript will return the promise object without the value of the promise.

Destructuring Data

Destructuring Objects & Arrays
Anjana discusses destructuring as a method to declare multiple variables at once by retrieving the values from the parent object. Altering the destructuring syntax to use square brackets allows the destructuring of arrays.

Destructuring Exercise
Students are instructed to follow TODO number two of the doggo quiz project and complete the getBreedFromURL function with destructuring and the .string() method.

Destructuring Solution: Return Breed
Anjana walks through the solution to returning the unformatted breed name from the given URL.

Destructuring Solution: Format String
Anjana walks through the solution to appropriately formatting the returned breed name using the .split() method. Brief demonstrations of the .reverse() and .trim() methods are also provided in this segment.

Async

Async Functions
Anjana demonstrates combining async fetching and parsing the resulting code into a single function to create an async function. The async function also needs to be awaited to retrieve the contents of the returned promise.

Async Function Exercise
Anjana walks through the solution to the doggo fetch project TODO number three of filling in the async function body. Students' questions regarding the use of await before the async function and if it would be better for JavaScript to be multi-threaded are also covered in this segment.

Adding Choice Buttons Exercise
Students are instructed to complete TODO number four of the doggo fetch project. Create a button element for each choice in the choicesArray, attach a click event listener with the buttonHandler function, and append the button as a child of the options element.

Adding Choice Buttons Solution
Anjana walks through the solution to the adding choice buttons exercise.

Render Quiz Exercise
Anjana provides an exercise to practice asynchronously calling functions and using the returned imageUrl, correctAnswer, and choices data to render the completed quiz page. This exercise completes the TODO number 5 for the doggo fetch project.

Modules

Modules
Anjana discusses a concept commonly used in real-life JavaScript code of splitting large codebases into multiple smaller files using modules. The differences between JavaScript and module JavaScript, including await, scope, import, and export, are also covered in this segment.

Modules Q&A
Anjana answers student questions regarding if only utility functions are imported, importing modules on the internet compared to locally, and recommendations for where to start breaking a webpage into modules. Resources to look into after this course are also provided in this segment.

Debugging
Anjana discusses methods to go about debugging and how to provide more information on bugs and errors using console.log, .warn(), .error(), and the console's debugger.

Browser Debugger
Anjana demonstrates using the browser's built-in debugger, including showing multiple ways of setting breakpoints to assist in finding errors.

try catch Error Handling
Anjana demonstrates error handling using try catch blocks to be aware of potential errors and then manage them if they occur.

Frameworks vs. Vanilla JavaScript
Anjana provides a brief overview of the material covered in this course and recommendations for next steps.

Wrapping Up

Wrapping Up
Anjana wraps up the course by answering student questions regarding how to think about programming paradigms in JavaScript and if companies are more often using pure JavaScript or JavaScript with a framework such as React.