Learn JavaScript Step by Step Part 3 Basic Concepts

 

Part 3: Basic Concepts of JavaScript

Welcome back to your journey of learning JavaScript step by step! In this part we'll dive into the fundamental concepts that serve as the foundation of any programming language. We'll explain these concepts in a way that even a school-going student can understand.

Variables: Containers for Information

Variables in JavaScript are like labelled containers or Storage boxes where you can store different types of information. Imagin them as name tags on boxes, making it easy for you to find what you need. In JavaScript, you can create a variable like this:

let myNumber;

In this example, we've created a variable named myNumber, but it's empty right now. Let's put something inside it:

myNumber = 32;

Now, myNumber contains the number 32. But befor you start declaring variables, it's essential to understand some rules.

Rules for Declaring Variables in JavaScript

1. Variable Names: Variable names (identifiers) must begin with a letter (a-z, A-Z), an underscore (_) or a dollar sign ($). They can't start with a number. valid variable names are myVar, _privateVar, $specialVar. Invalid variable names are 123var, @invalidVar etc.
2. Subsequent Characters: After the initial character, variable names can also include numbers (0-9) and additional letters, underscores, or dollar signs. Valid variable names are myVar2, count_3, price$ etc.
3. Reserved words: You cannot use JavaScript reserved words (keywords) as variable names. These are words that have special meaning in JavaScript, like if, else, while, and function etc.
4. Case Sensitivity: JavaScript is case sensitive, so myVar and myvar are considered different variables.
5. Camel Case: It's a common convention to use camel case for variable names in JavaScript. Camel case means starting with a lowercase letter and capitilizing the first letter of subsequent word in the name, without spaces. Examples are myVariable, totalAmount, userName etc.

Now that you know the rules of declaring variables, you can confidently create and use variables in your JavaScript programs.

Example Using Variables

// Declare and initialize variables

let firstName = "John";

let age = 30;

let isStudent = true;

// Display information using variables

console.log("Name: " + firstName);

console.log("Age: " + age);

console.log("Is a student: " + isStudent);

In this example, we've declared three variables: firstName, age, and isStudent. We have given them values and used them to display information in the console. If you run this example code in VS Code it will give the following output:

Name: John

Age: 30

Is a student: true

Variables are the fundamental part of a programming language, allowing you to store, manipulate, and retrieve data in your JavaScript code. Understanding the rules for declaring variables is essential for writing clean and error-free code.

Data Types In JavaScript

In JavaScript, data types can be broadly categorized into two main groups: primitive and non-primitive (reference) data types.

Primitive Data Types:

Primitive data types are the most basic data types in JavaScript. They are immutable, meaning there values cannot be changed once they are assigned. JavaScript has seven primitive data types:

1. Number: Represents numeric values, such as integers and floating point numbers. For example:

let age = 25;

let pi = 3.14;

2. String: Represents textual data enclosed in single ('') or double ("") quotes. For example:

let name = "Alice";

let message = 'Hello, JavaScript!';

3. Boolean: Represents true or false values. For example:

let isStudent = true;

let isOpen = false;

4. Undefined: Represents a variable that has been declared but hasn't been assigned a value. For example:

let uninitializedVar;

5. Null: Represents the intentional absence of the any object or value. For example:

let emptyValue = null;

6. Symbol (Introduced in ECMAScript 6): Represents a unique and immutable value, often used as object property keys. For eample:

let uniqueSymbol = Symbol("description");

7. BigInt (introduced in ECMAScript 2020): This data type allows you to represent and perform operations on integers that exceed the limitations of the Number data type. Here's how you can declare and use BigInt:

let bigIntValue = 1234567890123456789012345678901234567890n;

The n at the end of the number indicates that it's a BigInt literal.

BigInt are particularly useful when dealing with very large numbers, such as when working with cryptographic operations, large numerical calculations, or situations where precision matters.

Non-Primitive (Referenced) Data Type:

Non-primitive data types are more complex and can hold multiple values and objects. Unlike primitive data types, they are mutable, meaning their values can be modified. The primary non-primitive data type is:

Object: Represents a collection of key-value pairs where the keys are strings (or Symbols) and the values can be of any data types. Objects are versatile and used to represent more complex data structures. For example:

let person = {

    name: "Bob",

    age: 30,

    isStudent: false

};

These are the core data types in JavaScript. Understanding the distinction between primitive and non-primitive data types is crucial:

Operators and Expressions (Doing Math with Code)

Operators are like tools that help you do math with code. Just like adding, subtracting, multiplying, and dividing numbers in math class, you can do the same in JavaScript. Here's an example:

let sum = 5 + 3;  // Adds 5 and 3 and stores the result in 'sum'.

In this case, the + symbol is  an operator that adds 5 and 3 and result is stored in sum variable.

JavaScript supports various types of operators that allow you to perform different operatins on values and variables. Here's a list and explaination of the different types of operators in JavaScript:

1. Arithmetic Operators:

Arithmetic operators are used for basic mathematical operations:

Addition (+): Adds two values together.

let result = 5 + 3; // result is 8

Subtraction (-): Subtracts the right operand from the left operand.

let result = 10 - 3; // result is 7

Multiplication (*): Multiplies two values.

let result = 4 * 6; // result is 24

Division (/): Divides the left operand by the right operand.

let result = 12 / 4; // result is 3

Modulus (%): Returns the remainder of the division of the left operand by the right operand.

let result = 10 % 3; // result is 1 (10 divided by 3 leaves a remainder of 1)

Increment (++): Increases the value of a variable by 1.

let count = 5;

count++; // count is now 6

Decrement (--): Decreases the value of a variable by 1.

let count = 5;

count--; // count is now 4

2. Assignment Operators:

Assignment operators are used to assign values to variables:
Assignment (=): Assigns a value to a variable.

let x = 10; // x is assigned the value 10

Addition Assignment (+=): Adds the right operand to the variable and assigns the result to the variable.

let x = 5;

x += 3; // x is now 8 (5 + 3)

Subtraction Assignment (-=): Subtracts the right operand from the variable and assigns the result to the variable.

let x = 10;

x -= 4; // x is now 6 (10 - 4)

Multiplication Assignment (*=): Multiplies the variable by the right operand and assigns the result to the variable.

let x = 3;

x *= 2; // x is now 6 (3 * 2)

Division Assignment (/=): Divides the variable by the right operand and assigns the result to the variable.

let x = 12;

x /= 4; // x is now 3 (12 / 4)

Modulus Assignment (%=): Calculates the modulus of the variable and the right operand, then assigns the result to the variable.

let x = 10;

x %= 3; // x is now 1 (10 % 3)

Exponentiation Operator (**): The exponentiation operator calculates the result of raising the left operand to the power of the right operand:

let result = 2 ** 3; // result is 8 (2 raised to the power of 3)

3. Comparison Operators: 

Comparison operators are used to compare values and return true or false:

Equal (==): Checks if two values are equal in value, but not necessarily in data type (type coercion).

let isEqual = 5 == "5";// isEqual is true (5 is converted to a string and compared)

Not Equal (!=): Checks if two values are not equal in value, but not necessarily in data type (type conversion).

let isNotEqual = 5 != "3"; // isNotEqual is true (5 is not equal to "3")

Strict Equal (===): Checks if two values are equal in both value and data type.

let isStrictEqual = 5 === 5; // isStrictEqual is true

Strict Not Equal (!==): Checks if two values are not equal in either value or data type.

let isStrictNotEqual = 5 !== "5"; // isStrictNotEqual is true (5 is not equal to

"5" in data type)

Greater Than (>): Checks if the left operand is greater than the right operand.

let isGreaterThan = 10 > 5; // isGreaterThan is true

Less Than (<): Checks if the left operand is less than the right operand.

let isLessThan = 3 < 7; // isLessThan is true

Greater Than or Equal To (>=): Checks if the left operand is greater than or equal to the right operand.

let isGreaterOrEqual = 5 >= 5; // isGreaterOrEqual is true

Less Than or Equal To (<=): Checks if the left operand is less than or equal to the right operand.

let isLessOrEqual = 2 <= 3; // isLessOrEqual is true

4. Logical Operators:

Logical operators are used to combine or manipulate boolean values:
Logical AND (&&): Returns true if both operands are true.

let result = true && false; // result is false

Logical OR (||): Returns true if at least one operand is true.

let result = true || false; // result is true

Logical NOT (!): Negates a boolean value (changes true to false and vice versa).

let result = !true; // result is false

These operators are essential for performing various operations in JavaScript, including arithmetic calculations, variable assignments, and logical comparisons. Understanding how to use them is key to writing effective JavaScript code.

Comments: Explaining Your Code

Comments in JavaScript are like notes you write in your textbook to remember important stuff. They don't affect your code but help you and others understand it better. You can write comments like this:

// This is a single-line comment

/*

   This is a

   multi-line comment

*/

Now, let's bring everything together in a simple example:

// Declare a number variable and assign a value

var myNumber = 10;

// Declare a string variable

var greeting = "Hello, JavaScript!";

// Perform a calculation

var result = myNumber * 2;

// Display messages in the console

console.log(greeting);  // Print the greeting

console.log("The result is: " + result);  // Print the calculation

result

If you run the above code, you will get the following output in VS Code:

Hello, JavaScript!

The result is: 20

Fantastic job! You've learned the basics of variables, data types (including newer ones in the latest ECMAScript), operators, and comments in JavaScript. In the next part, we'll explore how to make decisions in your code using conditional statements. Keep exploring and coding!

Watch YouTube Video