INTRODUCTION TO JAVASCRIPT 1) Single Line

- Will comment out a single line and is

What is Javascript? denoted with // preceding it.
- Primarily known as the language of the
most modern web browsers 2) Multi-line
- Its early quirks gave it a bad reputation - Will comment out multiple lines and is
- A powerful, flexible, and fast programming denoted with /* to begin, and */ to end.
language now being used for increasingly Data Types
complex web development and beyond.
- The first language learned by self-taught - The classifications we give to the different
coders kinds of data that we use in programming.
- Powers the dynamic behavior on most 8 Fundamental Data Types
websites
1) Number
Console - Any number, including those with decimals.
- A panel that displays important messages, 2) BigInt
like errors for developers. - Any number, greater than 253-1 or less than
- Since much of the work the computer does –(253-1) with n appended to the number.
with our code is invisible, we can print or e.g. 1234567890123456n
log to our console directly to see things 3) String
appear. - Any grouping of characters on your
- Refers to an object, a collection of data keyboard (letters, numbers, spaces,
and actions that we can use in our code. symbols, etc.) surrounded by single quotes
‘’ or double quotes “”, though we prefer
Keywords single quotes.
- Words that are built into the Javascript 4) Boolean
language, so the computer recognizes and - Only two possible values, either true or
treats them specially. false (without quotes).
- Think of booleans as on and off switches or
the answers to “yes” or “no” questions.
An action or method that is built into the 5) Null
console object is the .log() method. - This data type represents the intentional
absence of a value, represented by the
When we write console.log(), what we put word null (without quotes).
inside the parentheses will get printed or 6) Undefined
logged to the console. - This data type is denoted by the keyword
undefined (without quotes).
There is no need for semicolon at the end of
- Represents the absence of a value, but
each code, but is recommended.
means that a given value does not exist.
7) Symbol
- A newer feature.
Comments
- Unique identifieds, useful in more complex
- Can explain what the code is doing, leave coding.
instructions for developers using the code, 8) Object
or add any other useful annotations. - Collections of related data.
- Are not part of the code.
Data types 1-7 are considered primitive data
Two Types of Comments types. Object is more complex.
 - All data types have access to specific
properties that are passed down to each
Arithmetic Operators
instance.
- Allows us to perform mathematical
Length – stores the number of characters in
calculations on numbers
that string.
Operator
You can retrieve property information by
- A character that performs a task in our appending the string with a period and the
code. property name.

1) Add: +
2) Subtract: -
3) Multiply: * Methods
4) Divide: / - Actions that we can perform.
5) Remainder (Modulo): % - Data types have access to specific
6) Dot: . methods that allow us to handle instances
of that data type.

We call or use these methods by appending

an instance with:

1) A period (dot operator)

2) Name of the method
3) Opening and closing parentheses

String Concatenation

When a + operator is used on two strings, it

appends the right string to the left string. toUpperCase – returns a string in all capital
letters

startsWith – will return a boolean depending

on your input and what the word starts with

Built-in Objects
Concatenation - Automatically within the language library
- The process of appending one string to Console.log(Math.random()); – Prints a
another random number between 0 and 1.
- Will join the strings exactly, so we need to
make sure to include the space. To generate a random number bethween 0
and 50:
Just like regular math, we can combine, or
chain our operations to get a final result. Math.random() * 50

To ensure the answer is a whole number, use

Math.floor () – takes a decimal number and
Properties rounds DOWN

Math.floor(Math.random() * 50);
 Things you can do with variables:

1) Create a variable with a descriptive

name.
2) Store or update information stored in a
Let's take one more glance at the concepts variable.
we just learned: 3) Reference to ‘get’ information stored in
- Data is printed, or logged, to the console, a a variable.
panel that displays messages, with Variables are NOT values. They contain
console.log() values and represent them with a name.
- We can write single-line comments with //
and multi-line comments between /* and */ In the new ES6 version of Javascript in 2015,
- There are 7 fundamental data types in there were two big new keywords; let and
JavaScript: strings, numbers, booleans, const. Prior to ES6, you could only use var to
null, undefined, symbol, and object declare variables.
- Numbers are any number without quotes:
23.8879
- Strings are characters wrapped in single or
double quotes: “Sample String’’
- The built-in arithmetic operators include +,
-, *, /, and %.
- Objects, including instances of data types,
can have properties, stored information.
The properties are denoted with a . after
Var
the name of the object, for example:
‘Hello’.length - Short for variable
- Objects, including instances of data types, - A Javascript keywrod the creates or
can have methods which perform actions. declares a new variable.
- Methods are called by appending the - Universal if not rearranged
object or instance with a period, the
method name, and parentheses. For myName – the variable’s name
example: ‘Hello’.toUpperCase Types of Casing
- We can access properties and methods by
using the (.) dot operator. 1) Camel Case: the next words after the
- Built-in objects, including Math, are first is capitalized: camelCase
collections of methods and properties that 2) Snake Case: underscore between words
JavaScript provides. that are lowercased: snake_case
3) Pascal Case: all words have a
capitalized first letter: PascalCase
Variables 4) Kebab Case: a dash between the words
that are lowercased: kebab-case.
- A container for a value
- Little containers for information that live in = - the assigment operater, assigning the
a computer’s memory, and can then be value to the variable
found in the memory.
- Provide a way of labelling data with a
descriptive name, so our programs can be Rules for naming Variables:
understood more clearly by the reader and
ourselves.
 1) Variable names cannot start with
numbers.
2) Variable names are case sensitive, so
myName and myname will be different
variables. It is bad practice to create
two variables that have the same name
using different cases.
3) Variable names cannot be the same as
keywords.

Let

- Introduced in ES6
- Signals that the variable can be reassigned
a different value
- Block style
Increment Operator
When declaring a variable without assigned
the variable a value, it will be undefined. - Denoted by ++
- Will increase the value of the variable by 1.
Const
Decrement Operator
- Introduced in ES6
- Short for constant - Denoted by –
- You can store any value within const - Will decrease the value of the variable by 1.
- Cannot be reassigned because it is
constant.
- If you try to declare a const variable
without a value, you’ll get a SyntaxError
- Universal scale

Mathematical Assignment Operators

String Interpolation with Variables

- Use the + operator to combine two string

values.
String Interpolation 5) Ternary operators
6) Switch statement
- In the ES6 version, we can insert or
interpolate variables intro strings using If Statement
template literals.
- Perform a task based on a condition using
this statement

A template literal is wrapped by backticks (`) .

Inside the template literal, you’ll see a
placeholder $(myPet). The value of myPet is
Composed of:
inserted into the template literal.
- The if keyword followed by a set of
- One of the biggest benefits is the
parentheses () which is followed by a code
readability of the code.
block, or block statement indicated by a
- You can more easily tell what the new
set of curly braces {}
string will be.
- Inside the parentheses (), a condition is
- You also don’t have to worry about
provided that evaluates to true or false
escaping double or single quotes.
- If the conditions evaluates to true, the
typeof Operator code inside the curly braces is executed
- If the condition is false, the block will not
- Checks the data type of a variable’s value
execute.
- Checks the value to its right and returns or
passes back, a string of the data type If…Else Statement

- We can add an else statement to run

another code if the condition is false

Comparison Operators
Conditional Statements
- When writing conditional statements, we
- Checks a specific condition(s) and performs
need to use different types of operators to
a task based on the condition(s)
compare values
- If-else decisions
Less than <
Concepts
Greater than >
1) If, else if, and else statements
2) Comparison operators Less than or equal to <=
3) Logical operators
Greater than or equal to >=
4) Truthy vs falsy values
Is equal to === The not operator will take a true value and
return a false value.
Is not equal to !==
Logical operators are often used in
- Compares the value on the left with the
conditional statements to add another layer
value on the right
of logic to our code.

Logical Operators
Truthy and Falsy
- Operators that work with boolean values
- Checks if a variable exists, not necessarily
known as logical operators.
equating to a specific value, only if it has a
- Used to add more sophisticated logic to our
value.
conditionals.

1) And operator (&&)

2) Or operator (||)
3) Not operator (Bang operator) (!)

When using the and operator, we are

checking that two things are true. If even one
is false, the entirety is false and the else will
execute. Falsy Values

1) 0
2) Empty strings ‘’ or “”
3) Null which represents that there is no
value at all
4) Undefined which represents when a
declared variable lacks a variable
The or operator only cares if one condition is 5) NaN or Not a Number
true, then it will execute the if. If both are
If it is not in the list of falsy values, it is
false, then the else will execute.
automatically truthy.

The not operator reverses, or negates the

value of a boolean.
Truthy and Falsy Assignment 1) The condition is provided before the ?
2) Two expressions follow the ? and are
- Open a world of short-hand possibilities
separated by a colon :
3) If the condition is true, the first
expression executes
4) If the condition if false, the second
expression executes

Else If Statements

- Used to add more conditions to our if…else

statement with an else if statement.
- Allows for more than two possible
outcomes.
- The last statement of this code is only else
Short hand with logical operators:

Because || or statements check the left-hand

condition first, the variable defaultName will
be assigned the actual value of username if it
is truthy, and it will be assigned the value of
'Stranger' if username is falsy. This concept is
also referred to as short-circuit evaluation.

Ternary Operator
- Read from top to bottom, so the first
- Used to simplify an if…else statement
condition that evaluates to true from top to
- Short-hand syntax
bottom is the block that gets executed

Switch Keyword

- Provides an alternative syntax that is

easier to read and write.
Without break , the program continues to the
next labeled statement, executing the
statements until a break or the end of the
statement is reached.