Javascript before Heading to React

We’ll go topic by topic with explanation + examples + small practice task so you can master each concept properly.

Variables and Data Types

Variables

You can declare variables using:


var name = "Bishal"; // old way — avoid using this
let age = 24; // preferred for mutable variables
const country = "India"; // preferred for constants

Difference:

let → can change value
const → cannot change value
var → avoid (function-scoped, not block-scoped)

Data Types

String → "Hello"
Number → 42
Boolean → true / false
Undefined → declared but not assigned
Null → intentionally empty
Object → { key: value }
Array → [1, 2, 3]
Symbol / BigInt (rare, advanced)

🧩 Example:


let person = {
	name: "Bishal",
	age: 24,
	skills: ["C#", "React", "Angular"]
};
  
console.log(person.name); // Bishal
console.log(person.skills[1]); // React

✅ Practice Task:
Create variables for your profile (name, age, skills, country) and log them in a sentence.

Functions

React components are functions — so this is crucial.

Basic Function


function greet(name) {
	return `Hello, ${name}!`;
}
console.log(greet("Bishal"));

Arrow Function (modern)


const greet = (name) => `Hello, ${name}!`;

Arrow functions don’t have their own this, which becomes important in React event handlers.

✅ Practice Task:
Write a function sum(a, b) that returns their sum, and then write it again using an arrow function.

Objects and Arrays

Objects

Used for key-value pairs:


const user = {
	name: "Bishal",
	city: "Kolkata"
};
console.log(user.city);

Arrays

Ordered lists:


const languages = ["C#", "JS", "Python"];
console.log(languages[1]); // JS

Array Methods

You’ll use these a lot in React when rendering lists.


const nums = [1, 2, 3, 4, 5];
const doubled = nums.map(n => n * 2); // [2,4,6,8,10]
const evens = nums.filter(n => n % 2 === 0); // [2,4]
const total = nums.reduce((a, b) => a + b, 0); // 15

✅ Practice Task:
Create an array of objects like:


[{name:"Song1", duration:3}, {name:"Song2", duration:4}]

Then print all song names using .map().

Destructuring & Spread Operator

Destructuring

Extract values easily:


const user = { name: "Bishal", age: 24 };
const { name, age } = user;
console.log(name, age);

For arrays:


const [a, b] = [10, 20];

Spread Operator (`...`)

Used to copy or merge arrays/objects (you’ll use this constantly in React state updates).


const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4]; // [1,2,3,4];
const user = { name: "Bishal" };
const updatedUser = { ...user, age: 24 }; // merge

✅ Practice Task:
Use spread to clone an array, and modify only one element without changing the original.

Conditionals and Loops

if / else


if (age > 18) {
	console.log("Adult");
} else {
	console.log("Minor");
}

Ternary Operator (React uses this a lot)


const message = age > 18 ? "Adult" : "Minor";

Loops


for (let i = 0; i < 5; i++) console.log(i);
const nums = [1, 2, 3];
for (let n of nums) console.log(n);

✅ Practice Task:
Use ternary operator to print “Senior Developer” if yearsOfExperience > 3, otherwise “Junior Developer”.

Functions + Objects (This and Arrow)

Understanding this is useful later in React class components or event binding.


const user = {
	name: "Bishal",
	greet: function() {
		console.log("Hi " + this.name);
	}
};
user.greet();

If you use an arrow function:


const user = {
	name: "Bishal",
	greet: () => console.log("Hi " + this.name)
};

user.greet(); // undefined (because arrow doesn’t have its own this)“

✅ Remember: Avoid this when possible — React functional components handle scope differently.

Asynchronous JavaScript

React uses async operations (like fetching APIs) in useEffect.

Promises


fetch("https://jsonplaceholder.typicode.com/posts")
	.then(res => res.json())
	.then(data => console.log(data))
	.catch(err => console.error(err));

Async/Await

A cleaner version:


async function getData() {
try {
	const res = await fetch("https://jsonplaceholder.typicode.com/posts");
	const data = await res.json();
	console.log(data);
	} catch (err) {
		console.error(err);
	}
}
getData();

✅ Practice Task:
Fetch any public API and log 5 results in console.

ES Modules

React uses imports and exports everywhere.


// utils.js
export function greet(name) {
return `Hi, ${name}`;
}
// app.js
import { greet } from './utils.js';
console.log(greet("Bishal"));

✅ Practice Task:
Create two JS files — one with a function, another that imports and uses it.

DOM Manipulation (Just to Understand)

React replaces manual DOM manipulation, but you must know what it does:


const btn = document.querySelector('button');
btn.addEventListener('click', () => {
	document.body.style.backgroundColor = "lightblue";
});

Summary — Before React You Should Know

Comfortable with:

let, const, data types
Objects & Arrays
Functions & Arrow Functions
map, filter, reduce
Destructuring, Spread operator
Async/Await, Fetch
Conditional rendering with ternary
ES Modules (import, export)