DEV Community

Cover image for Essential JavaScript before diving into React
Zamzam Hassan
Zamzam Hassan

Posted on

Essential JavaScript before diving into React


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

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode


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

Enter fullscreen mode Exit fullscreen mode


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.");

Enter fullscreen mode Exit fullscreen mode


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);

Enter fullscreen mode Exit fullscreen mode


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(; // 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

Enter fullscreen mode Exit fullscreen mode

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

Top comments (1)

juanfrank77 profile image
Juan F Gonzalez

Great article for beginners!