Day 0: JavaScript Revision | The last REACT course you need
Tags: react, webdev, javascript, beginners
Published: 2023-06-15 08:10:59

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:
{% embed https://www.youtube.com/watch?v=7Nn6OaMWzio %}

Here is the code we used, go and play around with it to build your concepts stronger:
{% embed https://stackblitz.com/edit/js-knlck4?devToolsHeight=33&embed=1&file=index.js&hideExplorer=1&hideNavigation=1 %}

## 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:

```javascript
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:

```javascript
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:

```javascript
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:

```javascript
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:

```javascript
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:

```javascript
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:

```javascript
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:

```javascript
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:

```javascript
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:

```javascript
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:

```javascript
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:

```javascript
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:

```javascript
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:

```javascript
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:

```javascript
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.

```javascript
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.

```javascript
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:

```javascript
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:

```javascript
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:

```javascript
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