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
trueorfalsevalues. 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. -
\nrepresents a new line. -
\trepresents 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
Top comments (0)