JavaScript Basics By Chloe

JS Comments:

Similar to CSS and HTML, you can write comments within the code of JS which will not be displayed by the browser. It will just be regarded as whitespace and ignored. It is useful to use to make notes on the code for later use and for other developers who may be looking at the code. 

//This is a single line comment


        /* This is a
        multi
        line
        comment */

JS declarations:

JS is made up of variables which are assigned different meanings/values/data.
There are three ways of declaring a variable. Each using a different JS reserved keywords.

1. var
This is the most common form of declaring a variable, and can be used to define both a local and global scope variable.
var x = 27;

2.let
Declares a block scope, local variable.
let y = 302;

3. const
Creates a variable that cannot be changed or altered within the code
const c = "This variable will always be this"


Variables are declared using the '=' operator with a semi-colon at the end.
If it is not declared it will be 'undefined' until it is declared later on.
var x;
            console.log(x) // undefined.

JS Datatypes

1. Strings
Strings are a series of characters that are surrounded around either single quotations '' or double quotations "".
The type of quotations does not matter, as long as they match at the end.
var string = "This is a string";

            var string2 = "The developer said, 'Try using bootstrap to make your wesbite mobile responsive'";
In string2, if single qotations were used at the beginning and end it would cut of the string after 'the developer said,'
2. Booleans
A value that is either true or false. It's as simple as that.
They have no quotations around them because if they did they would be strings.
var happy = true;
            var unhappy = false;
3. Numbers
A numerical value with up to 15 digits.
Again, it is not surrounded by quotations otherwise it would a string.
It cannot contain fractions but can contain decimals.
            var number = 329210;
4. Undefined and null
Undefined variables have been declared but have not been assigned a value. 
                var undefined;
Null variables have been assigned a value, but that value is intentionally set as null. i.e it is a value that represents nothing. 
                var nullValue = null;
5. Objects
Objects are made up of key/value pairs. They are declared using the '=' operator, and wrapped around {}. 
                var myself = {
                    firstName: 'Chloe',
                    lastName: 'Ridley',
                    age: 27,
                };
In the abover example, the 'myself' is the object. 'firstName' is the key, and 'chloe' is the value.
More information on objects is in the 'objects' tab in the 'Javascript cheatsheet' page.
6. Arrays
Arrays store multiple values in the same variable.
Arrays can store different data types with the same variable.
The contents are wrapped around [] and seperated with a comma ','. 
                var dataTypes = ['strings' , 'Numbers' , 'booleans' , 'undefined' , 'null' , 'objects' , 'arrays'];
More information on arrays is on the 'arrays' tab in the 'Javascript cheatsheet' page.

Arithmetic Operators

Arithmetic operators tell JS to do a mathematical operation and return a value.

OPERATOR DESCRIPTION EXAMPLE WHAT IT DOES
+ Addition 2 + 2 Returns the sum of 2 + 2 i.e. 4.
- subtraction 3 - 1 Subtracts 1 from 3
* multiplication 3 * 5 Multiplies 3 and 5 together
/ Division 10 / 2 Divides 10 by 2. I.e. 5
% Modulo 9 % 2 Divides 9 by 2, returns the remainder. I.e. 1
** Exponentiation 2 ** 3 Returns 2 to the power of 3. i.e. 9.
++ Increments by 1 2++ Returns 2 + 1. I.e 3
-- Decrements by 1 3-- Returns 3 - 1. I.e. 2.
Something that you should be aware of is that in Javascript. When you add a number and a string together, JS will automatically convert the number to a string and concatenate them together.
For example:
let x = 2 + '4' would return 24 instead of the expected 6.

Comparison Operators

Comparison operators are used in statements to determine whether two or more variables or values are equal or different.

OPERATOR DESCRIPTION EXAMPLE WHAT IT DOES
== Equal to. X == Y Checks if X is the same as Y
=== Strictly equal value and type "this"==="this" Checks the value and datatpe.
!= Not equal to. X != Y Checks if X is not the same as Y
!== Strictly not equal value and type "this"!=="this" Checks the value and datatpe.
> Greater than 2 > 1 Checks if 2 is greater than 1.
>= Greater than or equal too 5 >= 3 Checks if 5 is greater than or equal to 3
< Less than 6 < 10 Checks if 6 is less than 10.
<= Less than or equal too 6 < 10 Checks if 6 is less than or equal to 10.

Logical Operators

Compares two or more statements in a loop, and returns a boolean.

OPERATOR DESCRIPTION EXAMPLE WHAT IT DOES
&& ALL statements have to be true 2 == 2 && 7 > 5 Checks both sides of the operator are true. Will return true.
| | Only one side of the statement has to be true 2 > 1 || 8 < 3 Will contines if only one side is true. Will return true.
! Negates the reults !(3 > 1 && 2 > 1) Checks the statement in brackets and then negates the answer. It would return fasle.

Assignment Operators

Assignment operators take the assignment operator (=) and compound it with a mathematical operator to return a value.

OPERATOR EXAMPLE SAME AS
+= X += Y X = X + Y
-= X -= Y X = X - Y
*= X *= Y X = X * Y
/= X /= Y X = X / Y
%= X %= Y X = X % Y
**= X **= Y X = X ** Y