Javascript Basics

We all need to start somewhere, so how about doing it here.

From the MDN web docs

JavaScript is a scripting language that allows you to implement complex features on web pages: displaying timely content updates, interactive maps, animated 2D/3D graphics, scrolling video jukeboxes, etc. You can bet that JavaScript is probably involved. It is a commonly used programming language to create dynamic and interactive elements in web applications and it is easy to learn.

Data Types

JavaScript provides seven different data types:

Data TypesExamples
undefinedA variable that has not been assigned a value is of type undefined.
nullno value.
string'a', 'aa', 'aaa', 'Hello!', '11 cats'
number12, -1, 0.4
booleantrue, false
objectA collection of properties.
symbolRepresents a unique identifier.

Variables

You can declare variables using var, let, and const keywords. Here’s what you need to know about each:

  1. var: This is the oldest way to declare variables. It’s not used as much in modern JavaScript, but it’s still important to understand. Variables declared with var are function-scoped, meaning they are only available within the function they’re declared in.

    var name = "John"
    
  2. let: This is a newer way to declare variables, introduced in ES6 (ES2015). Variables declared with let are block-scoped, meaning they are only available within the block they’re declared in.

    let age = 25;
    
  3. const: Also introduced in ES6, const is used to declare constants, i.e., variables that cannot be reassigned. Like let, const is also block-scoped.

    const pi = 3.14159;
    

Here are some important points to remember:

  • Variables declared with var are hoisted to the top of their scope. This means they can be used before they’re declared. This is not the case with let and const.
  • let and const create variables that are block-scoped, meaning they exist only within the block they’re declared in. This is different from var, which creates function-scoped variables.
  • Variables declared with const cannot be reassigned. However, if the variable is an object or an array, its properties or elements can still be modified.

Arithmetic Operators

Arithmetic operators are used to perform mathematical operation:

OperatorDescriptionExampleResult
+Addition5 + 27
-Subtraction5 - 23
*Multiplication5 * 210
/Division5 / 22.5
%Modulus (Remainder)5 % 21
++Incrementlet x = 5; x++;x is 6
--Decrementlet x = 5; x--;x is 4
**Exponentiation5 ** 225
  1. Addition (+): Adds two numbers.
let result = 5 + 10; // result is 15
  1. Subtraction (-): Subtracts the second number from the first.
let result = 10 - 5; // result is 5
  1. Multiplication (*): Multiplies two numbers.
let result = 5 * 10; // result is 50
  1. Division (/): Divides the first number by the second.
let result = 10 / 5; // result is 2
  1. Modulus (%): Returns the remainder of the division of the first number by the second.
let result = 10 % 3; // result is 1
  1. Increment (++): Increases a number by 1.
let num = 5;
num++; // num is now 6
  1. Decrement (--): Decreases a number by 1.
let num = 5;
num--; // num is now 4
  1. Exponentiation (**): Raises the first number to the power of the second number.
let result = 5 ** 2; // result is 25

These operators can be used with numbers, variables, or expressions.

Assignment Operators

Assignment operators are used to assign values to variables:

OperatorDescriptionExampleResult
=Assignmentlet x = 10;x is 10
+=Addition assignmentlet x = 5; x += 10;x is 15
-=Subtraction assignmentlet x = 10; x -= 5;x is 5
*=Multiplication assignmentlet x = 5; x *= 10;x is 50
/=Division assignmentlet x = 10; x /= 5;x is 2
%=Modulus assignmentlet x = 10; x %= 3;x is 1
**=Exponentiation assignmentlet x = 5; x **= 2;x is 25
  1. Assignment (=): Assigns the value on the right to the variable on the left.
let x = 10; // x is now 10
  1. Addition assignment (+=): Adds the value on the right to the variable on the left and assigns the result to the variable on the left.
let x = 5;
x += 10; // x is now 15
  1. Subtraction assignment (-=): Subtracts the value on the right from the variable on the left and assigns the result to the variable on the left.
let x = 10;
x -= 5; // x is now 5
  1. Multiplication assignment (*=): Multiplies the variable on the left by the value on the right and assigns the result to the variable on the left.
let x = 5;
x *= 10; // x is now 50
  1. Division assignment (/=): Divides the variable on the left by the value on the right and assigns the result to the variable on the left.
let x = 10;
x /= 5; // x is now 2
  1. Modulus assignment (%=): Divides the variable on the left by the value on the right and assigns the remainder to the variable on the left.
let x = 10;
x %= 3; // x is now 1
  1. Exponentiation assignment (**=): Raises the variable on the left to the power of the value on the right and assigns the result to the variable on the left.
let x = 5;
x **= 2; // x is now 25

These operators provide a shorthand way to update the value of a variable in relation to its current value.

Comparison Operators

Comparison operators are used to compare two values:

OperatorDescriptionExampleResult
==Equal to5 == 5true
!=Not equal to5 != 4true
===Strictly equal to5 === 5true
!==Strictly not equal to5 !== '5'true
>Greater than10 > 5true
<Less than5 < 10true
>=Greater than or equal to10 >= 10true
<=Less than or equal to5 <= 5true
  1. Equal to (==): Returns true if the operands are equal.
5 == 5; // true
'5' == 5; // true, because it does type coercion
  1. Not equal to (!=): Returns true if the operands are not equal.
5 != 4; // true
  1. Strictly equal to (===): Returns true if the operands are equal and of the same type.
5 === 5; // true
'5' === 5; // false, because the types are different
  1. Strictly not equal to (!==): Returns true if the operands are not equal or not of the same type.
5 !== '5'; // true
  1. Greater than (>): Returns true if the left operand is greater than the right operand.
10 > 5; // true
  1. Less than (<): Returns true if the left operand is less than the right operand.
5 < 10; // true
  1. Greater than or equal to (>=): Returns true if the left operand is greater than or equal to the right operand.
10 >= 10; // true
  1. Less than or equal to (<=): Returns true if the left operand is less than or equal to the right operand.
5 <= 5; // true

These operators are often used in conditional statements to perform different actions based on different conditions.

Logical Operators

Logical operators are used to determine the logic between variables or values:

OperatorDescriptionExampleResult
&&Logical ANDtrue && truetrue
||Logical ORtrue || falsetrue
!Logical NOT!truefalse
  1. Logical AND (&&): Returns true if both operands are true.
true && true; // true
true && false; // false
  1. Logical OR (||): Returns true if at least one of the operands is true.
true || false; // true
false || false; // false
  1. Logical NOT (!): Returns true if the operand is false, and false if the operand is true. It basically reverses the boolean value of the operand.
!true; // false
!false; // true

These operators are often used in conditional statements to combine or invert boolean conditions. For example, you might use the logical AND operator (&&) to check that two conditions are both true before running a piece of code.

Bitwise Operators

Bitwise operators operate on 32-bit binary representations of numbers:

OperatorDescriptionExampleResult
&Bitwise AND5 & 11
`"Bitwise OR`5
^Bitwise XOR5 ^ 14
~Bitwise NOT~5-6
<<Left shift5 << 110
>>Sign-propagating right shift5 >> 12
>>>Zero-fill right shift5 >>> 12
  1. Bitwise AND (&): Returns a one in each bit position where operands have ones.
5 & 1; // 1 (0101 & 0001 => 0001)
  1. Bitwise OR (|): Returns a one in each bit position where at least one operand has a one.
5 | 1; // 5 (0101 | 0001 => 0101)
  1. Bitwise XOR (^): Returns a one in each bit position where exactly one operand has a one.
5 ^ 1; // 4 (0101 ^ 0001 => 0100)
  1. Bitwise NOT (~): Inverts the bits of its operand.
~5; // -6 (~0101 => 1010)
  1. Left shift (<<): Shifts the bits of the first operand to the left by the number of places specified in the second operand. New bits get filled with zeros.
5 << 1; // 10 (0101 << 1 => 1010)
  1. Sign-propagating right shift (>>): Shifts the bits of the first operand to the right by the number of places specified in the second operand. The sign bit is used to fill the new bits.
5 >> 1; // 2 (0101 >> 1 => 0010)
  1. Zero-fill right shift (>>>): Shifts the bits of the first operand to the right by the number of places specified in the second operand. New bits get filled with zeros.
5 >>> 1; // 2 (0101 >>> 1 => 0010)

These operators are less commonly used than the arithmetic, assignment, comparison, and logical operators, but they can be useful in certain scenarios, particularly in low-level programming tasks.

Comments

To write comments in your code to explain what it does, leave notes for yourself or others, or to prevent execution of code:

Single-line comments

These are created using two forward slashes //. Everything to the right of // on the same line is a comment.

// This is a single-line comment

Multi-line comments

These are created using /* to start the comment, and */ to end the comment. Everything between /* and */, including multiple lines, is a comment.

/*
This is a multi-line comment
It can span multiple lines
*/

Comments and the Interpreter

Comments are ignored by the JavaScript interpreter and do not affect the execution of the code. They are purely for humans to read.

The console.log Function

The console.log() function is used to print output to the console. This can be very useful for debugging, as it allows you to output the values of variables at different points in your code, or to output messages that help you understand the flow of execution in your code.

console.log("Hello, World!"); // prints "Hello, World!" to the console

You can print the value of variables:

let a = 1;
console.log(a); // prints the value of a (1) to the console

You can also print multiple values at once by separating them with commas:

let a = 1;
let b = 2;
console.log(a, b); // prints "1 2" to the console

console.log and the Interpreter

Note that `console.log()` does not affect the execution of your code. It's purely for outputting information to the console.