DevClub - JavaScript Module : Variables

Table of contents

• Featured Program
• Lesson 00 - Script Declaration
• Lesson 01 - Variables
• Lesson 02 - Strings
• Lesson 03 - Numbers
• Lesson 04 - Booleans
• Lesson Extra - Binary Operations & Bitshift
• Lesson 05 - Objects
• Lesson 06 - Null and Undefined
• Lesson 07 - Arrays
• Lesson 08 - If and Else
• Lesson 09 - Functions

Featured Program

HTML/JavaScript program that uses the contents of this module.

Encoder/Decoder:

It uses bitwise operations to encode and decode a string, based on a password.

Lesson 00 - Script Declaration

The defer attribute makes the script load after the HTML is parsed, preventing render-blocking and improving page load performance.

Lesson 01 - Variables

Variables are containers for storing values, JS does NOT enforce typing.

• var: Function-scoped variable, can be re-declared and updated.
  

  var was deprecated; use let and const instead.

• let: Block-scoped variable, can be updated but not re-declared.
• const: Block-scoped variable, cannot be updated or re-declared.

Lesson 02 - Strings

Strings a sequence(Vector) of characters(char) values.
They can be declared by:

• 'Hello' - Single quotes
• "World" - Double quotes
• `Hello, ${name}!` - Template literals (backticks), this allow calling JS inside a multi-line string.

Lessonh23 - Numbers

Numbers in JavaScript are all 64-bit floating-point values, independently of their type.

Some examples that can be a problem:
• 1+1=2
• '1'+'1'='11'
• 1+1-1=1
• '1'+'1'-'1'=10

Lesson 04 - Booleans

Booleans can be two values: true or false.

They can be representing not only by using true/false, but also by using 1/0, null, or undefined.

Lesson Extra - Binary Operations & Bitshift

Bitwise operators work on 32-bit integers, performing operations at the binary level.

Binary Operations

• & (AND): Returns 1 if both bits are 1, otherwise returns 0.
• ^ (XOR): Returns 1 if the bits are different, otherwise returns 0.
• | (OR): Returns 1 if at least one of the bits is 1, otherwise returns 0.
• ~ (NOT): Inverts the bits, turning 1s into 0s and vice versa.

Bitshift

• << (Left Shift): Shifts bits to the left, filling with zeros on the right.

  Example: 15 << 1 results in 30.
  in binary: 00001111 << 1 = 00011110

• >> (Right Shift): Shifts bits to the right, filling with: (0 for positive, 1 for negative).

  Example1: 5 >> 1 results in 2.
  in binary: 00000101 >> 1 = 00000010

  Example2:-5 >> 1 results in -3.
  in binary: 11111011 >> 1 = 11111101

• >>> (Unsigned Right Shift): Shifts bits to the right, filling with zeros regardless of the sign.

  Example: -5 >>> 1 results in a large positive number due to zero-filling.

OBS:
the difference between >> and >>> is how they handle the sign bit for negative numbers.
>> preserves the sign bit, while >>> does not, filling with zeros regardless of the sign.
Example: -5 >> 1 = -3, -5 >>> 1 = 2147483645
in binary: -5 >> 1 = 11111101, -5 >>> 1 = 01111101

Lesson 05 - Objects

Objects are collections of key-value pairs, where the keys are strings and the values can be of any type.

Example of an object:

const person = {
    name: "Harry Potter",
    age: 12,
    canDrive: false,
    hobbies: ["owls", "defense against the dark arts", "quidditch"],
    address: {
        street: "4 Privet Drive",
        city: "Little Whinging",
        country: "England",
        obs: "The door under the stairs"
    }
};

Lesson 06 - Null h2d Undefined

null represents the intentional absence of any object value.

undefined represents the absence of a value or an uninitialized variable.

OBS: Both null and undefined return false in a boolean context.

Lesson 07 - Arrays

Arrays are ordered collections of values, which can be of any type. And the first element starts at 0.

Example:

const fruits = ["apple", "banana", "cherry"];

fruits[0] → "apple"

Lesson 08 - If and Else

Conditional statements allowing you to execute different blocks of code based on certain conditions.

Lesson 09 - Functions

Functions are reusable blocks of code that perform a specific task. They can be defined using function declarations or function expressions.

Example of a function declaration:

function greet(name) {
    return `Hello, ${name}!`;
}

Example of a function expression:

const greet = function(name) {
    return `Hello, ${name}!`;
};

Example of an arrow function:

const greet = (name) => {
    return `Hello, ${name}!`;
};

Or even more concise:

const greet = name => `Hello, ${name}!`;

Wrong!

const person = {
    name: "Harry",
    greet: () => `Hello, ${this.name}`
};

Right!

const person = {
    name: "Harry",
    greet() {
        return `Hello, ${this.name}`;
    }
};