Essential JavaScript before diving into React
Tags: webdev, javascript, react, beginners
Published: 2023-05-16 22:45:15



### Variables:
Understand how to declare and assign values to variables. They allow you to store and manipulate data in JavaScript. 


```
// Declaration and assignment
let age = 25;

// Number variables
let num1 = 10;
let num2 = 5;

// String variables
let name = "John Doe";
let message = "Hello, world!";

// Boolean variables
let isLogged = true;
let hasPermission = false;

// Array variables
let numbers = [1, 2, 3, 4, 5];
let fruits = ["apple", "banana", "orange"];

// Object variables
let person = {
  name: "John Doe",
  age: 25,
  city: "New York"
};

// Null and undefined variables
let x = null;
let y = undefined;

// Reassigning variables
let count = 0;
count = count + 1;

// Outputting variables
console.log(age);
console.log(name);
console.log(isLogged);
console.log(numbers);
console.log(person);

``` 

### Data Types: 
Learn about different data types such as strings, numbers, booleans, arrays, and objects. They help you work with different kinds of information in your code. 

```
// String
let message = "Hello, world!";

// Number
let age = 25;

// Boolean
let isLogged = true;

// Array
let fruits = ["apple", "banana", "orange"];

// Object
let person = {
  name: "John Doe",
  age: 25,
  city: "New York"
};

// Outputting data types
console.log(typeof message); // Output: string
console.log(typeof age); // Output: number
console.log(typeof isLogged); // Output: boolean
console.log(typeof fruits); // Output: object
console.log(typeof person); // Output: object

```

### Functions:
Explore the concept of functions, which are reusable blocks of code that perform specific tasks. Learn how to define and call functions to organize and reuse your code effectively. 

```
// Function declaration
function greet(name) {
  console.log(`Hello, ${name}!`);
}

// Function call
greet("John"); // Output: Hello, John!

// Function with return value
function multiply(a, b) {
  return a * b;
}

let result = multiply(5, 3);
console.log(result); // Output: 15

```

### Conditionals: 
Get familiar with conditional statements like if/else and switch. They enable your code to make decisions and execute different blocks of code based on certain conditions. 

```
let temperature = 25;

if (temperature >= 30) {
  console.log("It's hot outside!");
} else if (temperature >= 20) {
  console.log("It's warm outside.");
} else {
  console.log("It's cool outside.");
}

```
 

### Loops: 
Dive into loops like for and while. They allow you to repeat a block of code multiple times, which is useful for tasks that require iterating over arrays or performing repetitive operations. 

```
// For Loop
for (let i = 1; i <= 5; i++) {
  console.log("Iteration", i);
}

// While Loop
let count = 0;
while (count < 5) {
  console.log("Count:", count);
  count++;
}

```

### Objects: 

Understand how to work with objects, which are collections of key-value pairs. Objects are widely used in JavaScript and are essential for organizing and manipulating complex data structures. 

```
// Object
const person = {
  name: "John Doe",
  age: 25,
  profession: "Developer"
};

// Accessing object properties
console.log(person.name); // Output: John Doe
console.log(person.age); // Output: 25
console.log(person.profession); // Output: Developer

// Modifying object properties
person.age = 26;
console.log(person.age); // Output: 26

// Adding new property
person.location = "New York";
console.log(person.location); // Output: New York

// Deleting property
delete person.profession;
console.log(person.profession); // Output: undefined

```

By grasping these essential JavaScript concepts, you'll build a strong foundation before delving into React. Remember, practice is key! Keep coding, experimenting, and exploring to enhance your skills. Happy coding! 💻