Zamzam Hassan

Posted on May 16, 2023 • Updated on Oct 20, 2023 • Originally published at dev.to

Essential JavaScript before diving into React

#webdev #javascript #react #beginners

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! 💻