Introduction
In this blog, we will see the important JavaScript concepts before jumping into ReactJS.
1. Variable declaration
The variables can be declared using var, let and const keywords.
var: Once a variable is declared using the ‘var’ keyword, it can be updated and reassigned in the scope many times.
let: Once a variable is created using the ‘let’ keyword, it can be updated but cannot be redeclared.
const: Once a variable is created with the ‘const’ keyword, it can neither be updated, nor redeclared.
// var example
var x = 10;
console.log(x); // 10
x = 20;
console.log(x); // 20
// let example
let a = 10;
console.log(a); // 10
a = 20; // error
// const example
const PI = 3.14;
console.log(PI);
const z; // error
PI = 3.144; // error
2. Objects
Imagine an object as a box. You can label the box (the key) and put things inside (the value). You can have different labeled compartments (multiple key-value pairs) within the box to organize the contents.
// Simple Object Example
const Person = {
name: "Rd",
age: 20,
city: "Delhi"
};
// Accessing the properties
console.log(Person.name); // Output: Rd
console.log(Person["age"]); // Output: 20
// Object with method
const Person = {
name: "Rd",
age: 20,
city: "Delhi",
greeting: function(){
console.log("Hello!");
}
};
Person.greeting();
3. Arrow Functions
Arrow functions are a concise and a convenient way to write JavaScript functions.
Syntax:
const <function_name> = (arguements) =>{
function_statements;
return <return_statement>;
};
There are two ways to write arrow functions:
a. Implicit Return
const greet = (name) => 'Hello, ${name}!';
b. Explicit Return
const multiply = (x, y) => {
const result = x * y;
return result;
};
4. Array methods
Map: Creates a new array with the results of calling a provided function on every element in the original array.
const users = [
{ name: "Rd", age: 20 },
{ name: "Rupa", age: 25 },
];
const greetings = users.map((user) => `Hello, ${user.name}!`);
console.log(greetings);
// ["Hello, Rd!", "Hello, Rupa!"]
Filter: Creates a new array with elements that pass a test implemented by the provided function.
const products = [
{ name: "Rupa", price: 20 },
{ name: "R", price: 15 },
{ name: "Rd", price: 50 },
];
const expensiveProducts = products.filter((product) => product.price > 25);
console.log(expensiveProducts); // Output: [{ name: "Rd", price: 50 }]
Reduce: Applies a function against an accumulator and each element in the array to reduce it to a single value.
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((a, b) => a + b, 0);
console.log(sum); // Output: 15
5. Promises
In JavaScript, a promise represents the eventual outcome of an asynchronous operation like fetching data from an API or reading a file.
// Syntax
let myPromise = new Promise((myResolve, myReject) => {
myResolve(); // when successfull
myReject(); // when error
});
myPromise.then(
function(value) {
// when successfull
},
function(error){
// when error
}
);
// Example
function getUser(userId) {
return new Promise((resolve, reject) => {
setTimeout(() => {
const user = {
id: userId,
name: "Alice",
};
resolve(user);
}, 1000);
});
}
getUser(123)
.then(user => console.log(user.name)) // Output: "Alice" after 1 second delay
.catch(error => console.error(error));
6. Async / wait
Async/await allows you to write asynchronous code in a way that resembles synchronous code. It uses the async and await keywords to achieve this.
async - Keyword to declare the function as asynchronous
await - Keyword to pauses the execution until the promise resolves
// Example
async function fetchData(){
const response = await fetch('https://api');
const data = await response.json();
return data;
}
// Function call
fetchData()
.then(data => console.log(data));
.catch(error => console.log(error));
Async functions can be used with try...catch to handle potential errors from asynchronous operations like fetching data or performing file operations.
// Example
async function fetchData() {
try {
const response = await fetch('https://api.example.com/data');
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
return data;
} catch (error) {
console.error("Error fetching data:", error);
}
}
fetchData()
.then(data => console.log(data))
.catch(error => console.error(error));
7. Spread operator
The spread operator can be used to create copies of arrays, concatenate arrays, or merge elements into new arrays.
// Example: Copying arrays
const numbers = [1,2,3];
const copy_numbers = [...numbers];
console.log(copy_numbers); // 1, 2, 3
// Example: Concatenating Arrays
const fruits = ["apple", "banana"];
const veggies = ["carrot", "broccoli"];
const produce = [...fruits, ...veggies];
console.log(produce);
// ["apple", "banana", "carrot", "broccoli"]
// Example: Merging into a new array
const colors = ["red", "green"];
const moreColors = ["blue", "yellow"];
const allColors = [...colors, "purple", ...moreColors];
// ["red", "green", "purple", "blue", "yellow"]
The spread operator can also be used for objects and strings.
Conclusion
These are the seven main important JavaScript concepts to know before learning ReactJS.