Day 0: JavaScript Revision | The last REACT course you need

Welcome to Day 0 of 'The last React course you need'! In this blog post, we will cover a comprehensive overview of JavaScript concepts, providing you with a solid foundation to kickstart your journey in React. Whether you are a beginner or looking to refresh your JavaScript skills, this article is perfect for you. Let's dive in!

If you feel that you understand the concepts easily using videos then here is the youtube lecture for the same:

Here is the code we used, go and play around with it to build your concepts stronger:

Variables

Variables are used to store and manipulate data in JavaScript. In this section, we will explore different variable declarations and their characteristics.

let

The let keyword is used to declare variables that can be updated. It provides block scope, meaning the variable is only accessible within its block. Here's an example:

let name = 'Vaib';
console.log(name); // Output: Vaib

const

The const keyword is used to declare variables that cannot be updated. It also provides block scope. It is preferred to use const when the variable won't be updated. Here's an example:

const api = '45656sdfsdfsdf55660';
console.log(api); // Output: 45656sdfsdfsdf55660

var

The var keyword is an older way to declare variables. It can be updated and has global scope, which means it is accessible throughout the program. It is recommended to avoid using var whenever possible. Here's an example:

var isDark = true;
console.log(isDark); // Output: true

Operators

Operators are used to perform operations on values or variables. In this section, we will explore different types of operators.

Arithmetic Operators

Arithmetic operators are used to perform mathematical calculations. Here are some examples:

console.log(5 + 2); // Output: 7
console.log(5 - 2); // Output: 3
console.log(5 * 2); // Output: 10
console.log(5 / 2); // Output: 2.5
console.log(5 % 2); // Output: 1
console.log(5 ** 2); // Output: 25

Assignment Operators

Assignment operators are used to assign values to variables and perform calculations simultaneously. Here's an example:

let count = 3;
count += 2; // Equivalent to count = count + 2
console.log(count); // Output: 5

Comparison Operators

Comparison operators are used to compare values and return a Boolean result. Here are some examples:

let count = 5;
console.log(count == '5'); // Output: true
console.log(count === '5'); // Output: false
console.log(count < 10); // Output: true
console.log(count > 10); // Output: false
console.log(count <= 5); // Output: true
console.log(count >= 10); // Output: false
console.log(count != '5'); // Output: false
console.log(count !== '5'); // Output: true

Logical Operators

Logical operators are used to combine or negate conditions. Here's an example:

let count = 5;
let name = 'Vaib';
console.log(count == 5 && name == 'Vaib'); // Output: true
console.log(count == 5 || name == 'Vaib'); // Output: true
console.log(!false); // Output: true

Data Types

Data types determine the type of values in JavaScript. In this section, we will explore different data types.

Primitive Data Types

Primitive data types are basic types that store a

single value. The main primitive data types in JavaScript are:

• String: Represents a sequence of characters. Example: "Hello, World!".
• Number: Represents numeric values. Example: 42.
• Boolean: Represents true or false values. Example: true.
• Null: Represents the absence of any object value. Example: null.
• Undefined: Represents an uninitialized variable. Example: undefined.

Non-Primitive Data Types

Non-primitive data types are more complex and can store multiple values. The main non-primitive data type in JavaScript is:

• Object: Represents a collection of key-value pairs. Example: { name: "Vaib", age: 25 }.

Conditionals

Conditionals allow us to make decisions based on specific conditions. In this section, we will explore different conditional statements.

if...else if...else

The if...else if...else statement is used to execute different blocks of code based on different conditions. Here's an example:

let num = 5;
if (num > 0) {
  console.log("Positive");
} else if (num < 0) {
  console.log("Negative");
} else {
  console.log("Zero");
}

Ternary Operator

The ternary operator provides a concise way to write conditional statements. It takes three operands: a condition, a value if the condition is true, and a value if the condition is false. Here's an example:

let age = 18;
let message = (age >= 18) ? "You are an adult" : "You are not an adult";
console.log(message);

Loops

Loops are used to repeat a block of code multiple times. In this section, we will explore different types of loops.

for Loop

The for loop is used to iterate over a block of code for a specific number of times. Here's an example:

for (let i = 0; i < 5; i++) {
  console.log(i);
}

while Loop

The while loop is used to execute a block of code as long as a specific condition is true. Here's an example:

let i = 0;
while (i < 5) {
  console.log(i);
  i++;
}

do...while Loop

The do...while loop is similar to the while loop, but it always executes the block of code at least once. Here's an example:

let i = 0;
do {
  console.log(i);
  i++;
} while (i < 5);

for-in Loop

The for-in loop is used to iterate over the properties of an object. Here's an example:

let person = { name: "Vaib", age: 25 };
for (let key in person) {
  console.log(key + ": " + person[key]);
}

for-of Loop

The for-of loop is used to iterate over the elements of an array or other iterable objects. Here's an example:

let fruits = ["apple", "banana", "cherry"];
for (let fruit of fruits) {
  console.log(fruit);
}

Strings

Strings are used to represent text in JavaScript. In this section, we will explore various string operations.

String Literals

String literals are sequences of characters enclosed in single or double quotes. Here's an example:

let message = "Hello, World!";
console.log(message);

Escape Sequence Characters

Escape sequence

characters are used to represent special characters within strings. Here are some examples:

• \" represents a double quote character.
• \' represents a single quote character.
• \\ represents a backslash character.
• \n represents a new line.
• \t represents a tab space.

String Properties/Methods

Strings have several built-in properties and methods for manipulation. Here are a few examples:

• length: Returns the length of a string.
• toUpperCase(): Converts a string to uppercase.
• toLowerCase(): Converts a string to lowercase.
• trim(): Removes whitespace from both ends of a string.

let message = "   Hello, World!   ";
console.log(message.length); // Output: 18
console.log(message.toUpperCase()); // Output: HELLO, WORLD!
console.log(message.toLowerCase()); // Output: hello, world!
console.log(message.trim()); // Output: Hello, World!

Arrays

Arrays are used to store multiple values in a single variable. In this section, we will explore array operations.

Array Properties/Methods

Arrays have several built-in properties and methods for manipulation. Here are a few examples:

• length: Returns the number of elements in an array.
• push(): Adds an element to the end of an array.
• pop(): Removes the last element from an array.

let fruits = ["apple", "banana", "cherry"];
console.log(fruits.length); // Output: 3
fruits.push("orange");
console.log(fruits); // Output: ["apple", "banana", "cherry", "orange"]
fruits.pop();
console.log(fruits); // Output: ["apple", "banana", "cherry"]

Looping through Arrays

Looping through arrays allows us to access and manipulate each element individually. Here's an example using a for loop:

let fruits = ["apple", "banana", "cherry"];
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

Functions

Functions are reusable blocks of code that perform a specific task. In this section, we will explore different ways to define functions.

The function Keyword

The function keyword is used to define a function with a name and parameters. Here's an example:

function greet(name) {
  console.log("Hello, " + name + "!");
}

greet("Vaib"); // Output: Hello, Vaib!

Arrow Functions

Arrow functions provide a concise way to define functions. They are anonymous functions and can be assigned to variables. Here's an example:

const greet = (name) => {
  console.log("Hello, " + name + "!");
}

greet("Vaib"); // Output: Hello, Vaib!

Congratulations on completing Day 0 of 'The last React course you need'! We covered a wide range of fundamental concepts that will empower you in your journey of learning React. Stay tuned for the upcoming days, where we will explore the amazing concepts of React.

If you're ready to take your frontend skills to the next level and learn React, Appwrite, Tailwind, DaisyUI, React Router, Zustand (state management tool), and even create projects including AI, stay tuned. Our comprehensive curriculum will provide you with all the knowledge you need to become a frontend expert.

Stay tuned for the next blog posts in this series, and happy coding!

#JavaScript #JSRevision #ReactCourse #RecurseCodeSchool