JavaScript Notes

July 6 2023

1 - JavaScript Introduction

Why learn JavaScript

JavaScript vs Java

2 - How to Set Up Your Computer

How to Install VSCode

How to Install [Link]

3 - Quick Console Introduction

4 - Time to Say Hello World!

5 - JavaScript Code Structure

Statements

Comments

Execution Flow

Exercise #1

6 - JavaScript Variables

Variable naming

Constant variable

The var keyword

Exercise #2

Summary

7 - JavaScript Basic Data Types

Strings in JavaScript

Numbers (integers and floats) in JavaScript

Booleans in JavaScript

Undefined in JavaScript

Null in JavaScript

8 - Type conversion and coercion

Type coercion

Type coercion rules

Why you should avoid type coercion

9 - Operators in JavaScript

Arithmetic operators

The assignment operator

The comparison operators

Logical operators

The typeof operator

Exercise #3

10 - JavaScript Arrays

Array index position

Special methods for array manipulation

Exercise #4

11 - Control Flows (Conditionals) in JavaScript

The if...else statement

The switch...case statement

The switch statement body

Switch statement use cases

Exercise #5

12 - Control Flows (Loops) in JavaScript

The for statement

When to use the for loop?

The while statement

When to use the while loop?

Exercise #6

13 - Functions in JavaScript

How to create your own function

Function parameters and arguments

Default parameters

Default parameters and null

The return statement

Variable scope

The rest parameter

Arrow function

Single and multiline arrow functions

Arrow function without round brackets

Arrow function doesn't have arguments binding

How to convert a normal function to an arrow function easily

Exercise #7

14 - Objects in JavaScript

How to access object values

How to add a new property to the object

How to modify object properties

How to delete object properties

How to check if a property exists in an object

Exercise #8

Final Exercise: Build a Cash Register Machine

Conclusion

Solutions

1 - JavaScript Introduction
JavaScript was created around April 1995 by Brendan Eich. At the time, he was working
to develop a browser for a company called Netscape. He was told that he only had 10
days to design and code a working prototype of a programming language that could
run on the browser.

He needed to create a language that appealed to non-professional programmers like

Microsoft Visual Basic.

The reason he was given only 10 days was that Netscape needed to release its
browser, which at the time was in competition with Microsoft.

In the beginning, JavaScript was not as powerful as it is today, since it was originally
designed to add interaction and animation for web pages. It wasn't until 2005 when
jQuery and AJAX were released that JavaScript began to be used in every website.

People simply didn't have an easy alternative to jQuery and AJAX for DOM manipulation
and sending asynchronous requests. Plus, an active community of JavaScript
developers kept adding new features to the library.

Then Google launched its modern Chrome browser, and Facebook started getting more
people online. JavaScript began to grow to accomodate the ambitions of these giant
internet companies.

Browsers began developing APIs that you could use in JavaScript. JS could retrieve
information such as IP addresses and geographic locations from the browser, adding
more power to internet companies to localize the features of their websites.

Then another innovation happened to make JavaScript even more powerful.

A server-side environment named [Link] was released in 2009, allowing JavaScript to

run on the server side like PHP, Java, Python, Ruby, and many more. It also enabled
devs to develop full-stack web applications using only JavaScript.

Today, JavaScript is a language that can power the web, desktop, and mobile
applications.

Here's a quote from Tim O'Reilly, the founder of O'Reilly Media:

Learning JavaScript used to mean you weren't a serious developer. Today, not learning
JavaScript means the same thing.

Learning JavaScript is now critical for people who want to be web developers.

Why learn JavaScript?

There are 4 good reasons why you need to learn and deeply understand JavaScript:

JavaScript is the only language that works in the browser

It's fairly easy to learn (but hard to master)

It's an essential language for making web applications

There are many career opportunities for JavaScript devs

Learning JavaScript opens tremendous opportunities where you can be a frontend,

backend, or mobile developer.

Basically, learning JavaScript is a gateway to career improvements in tech.

JavaScript vs Java
In the beginning, JavaScript was actually named LiveScript. It was renamed to
JavaScript because Java was a very popular programming language.

Since most software developers were already familiar with Java, the name JavaScript
was thought to help in marketing JavaScript as a great programming language and
draw the interest of developers at the time.

Just to be clear, JavaScript and Java are two completely different programming
languages. You don't need to know Java to learn JavaScript (or the other way around).
:)

2 - How to Set Up Your Computer

To write a program using JavaScript, you need to install 2 free tools that are available
for all operating systems.

The first tool to install is Visual Studio Code.

How to Install VSCode

Visual Studio Code or VSCode for short is a text editor program created for the purpose
of writing code. Aside from being free, VSCode is open source and available on all
major operating systems.

You can use VSCode on Windows, macOS, and Linux, so if you don't have a text editor
on your computer, I recommend that you install VSCode here.

Now that you have a text editor to write JavaScript code, you need a software to run
JavaScript code. Let's install [Link] next.

How to Install [Link]

To run JavaScript outside of the browser, you need to install [Link], which is
essentially a JavaScript runner.

Simply go to the [Link] website at [Link] and download the latest LTS version for
your computer. Once the download is complete, install it on your system.

You need to run [Link] using the console, so open your command line or terminal
application and run the following command:

node -v
This command will output the version of your freshly installed [Link] into the console.

3 - Quick Console Introduction

The console is a text-based interface that you can use to type and run commands on
your computer. On Windows, it's called the Command Line. On macOS and Linux it's
known as the Terminal.

You're not going to use all the commands available within the console. In fact, you only
need to know 7 basic commands to help you run JavaScript code.

First, open the console program on your computer and type the pwd command:

pwd
This is the command you use to find out which directory your terminal is currently on.
pwd is short for print working directory.

To change the working directory, you need to run the cd command.

Here's an example to move into a child directory:

cd directory_name/directory_name
To move up to a parent directory, you specify .. next to the command:
cd ..
To go up more than one directory, use ../..

To clear your console from previous commands and output, use the clear command:

clear
To print out the list of files and directories in the current directory, run the ls command:

ls
To create a new file, use the touch command followed by the file name and extension:

touch [Link]
The command above will create a new JavaScript file named [Link] on the current
working directory.

To create a new directory, use the mkdir command followed by the directory name:

mkdir my_project
To run JavaScript using [Link], specify node followed by the file name as follows:

node [Link]
You'll see any output from the code in the same console.

There are lots of things you can do with the console, but these 7 commands would be
enough because we only need it to run JavaScript code.

Next, let's run your first JavaScript program!

4 - Time to Say Hello World!

It's time to run your first JavaScript program using Node.

From the console, create a new JavaScript file named [Link] using the touch
command.

touch [Link]
Next, open the file using VSCode and write the following line of code into the file:

[Link]("Hello World!");
Back on the console, run this script with Node:

node [Link]
The console should execute the [Link] file and print "Hello World!".

You've just run your very first JavaScript program using [Link]. Excellent!

When you run the node [Link] command, the [Link] program starts reading the
script line by line from top to bottom.

The node program sees that you wrote the word [Link] followed by parentheses
(), so it knows that you're instructing it to print something. The program then reads
what you put in the parentheses and prints it out on the console.
In your VSCode or other text editor program, you should see different parts of your
code highlighted with different colors. This is a feature of the text editor called syntax
highlighting, and it's really useful to help you distinguish different parts of the code.

The log keyword is a function, so it gets highlighted in one color, while the words in the
parentheses have another color.

A function is simply a piece of code that's used to perform a certain task. The log()
function is used to "print" whatever you put inside the parentheses.

On the other hand, the console keyword is an object, which is a standalone property
that gives access to certain functionalities.

We'll learn more about functions and objects later. For now, just remember that the
[Link]() keyword is used to print things to the console.

Next, let's start with learning JavaScript code structure.