Learn this before React
source link: https://dev.to/jps27cse/learn-this-before-react-4hpl
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
In this article we will explore top fundamental Javascript concepts necessary to know in order to have an effective first learning cycle of React / React Native
Table of Contents
map() & filter()
slice() & splice()
concat()
find() & findIndex()
destructuring
rest & spread operator
promises
map and filter
Both are array methods and both return a new array when applying Filter additionally eliminates items that don't match
map:
const Data =[
{id: '1',title: "car"},
{id: '2',title: "bus"},
{id: '3',title: "plane"},
{id: '4',title: "train"},
{id: '5',title: "ship"},
]
const upperData = Data.map(element => element.title.toUpperCase());
console.log(upperData)
Output:
['CAR', 'BUS', 'PLANE', 'TRAIN', 'SHIP']
filter:
const Data =[
{id: '1',title: "car"},
{id: '2',title: "bus"},
{id: '3',title: "plane"},
{id: '4',title: "train"},
{id: '5',title: "ship"},
]
const filterData = Data.filter(element => element.id %2 === 0);
console.log(filterData)
Output:
[ { id: '2', title: 'bus' }, { id: '4', title: 'train' } ]
slice and splice
Method returns a new array with selected elements, while splice method changes the contents of an existing array
splice:
const Data =[
'Car',
'Bus',
'Helicopter',
'Train'
]
const CopyArray = [...Data]
CopyArray.splice(0,1)
console.log(CopyArray)
Output:
['Bus', 'Helicopter', 'Train']
const Data =[
'Car',
'Bus',
'Helicopter',
'Train'
]
const CopyArray = [...Data]
CopyArray.splice(CopyArray.length,1,"Plane")
console.log(CopyArray)
Output:
['Car', 'Bus', 'Helicopter', 'Train', 'Plane']
slice:
const Data =[
'Car',
'Bus',
'Helicopter',
'Train'
]
const CopyArray = [...Data]
const newArray = CopyArray.slice(0,2)
console.log(newArray)
console.log(Data)
Output:
['Car', 'Bus']
['Car', 'Bus', 'Helicopter', 'Train']
concat
This method returns a new array of merging two or more arrays
concat:
const array1 = [1, 2, 3, 4, 5];
const array2 = [6, 7, 8, 9, 10];
const array3 = [11, 12, 13, 14, 15];
const mergeArray = array1.concat(array2, array3);
console.log(mergeArray);
Output:
[
1, 2, 3, 4, 5, 6,
7, 8, 9, 10, 11, 12,
13, 14, 15
]
find and findIndex
The find method returns the first element that satisfies the condition, while findIndex returns the index of that element
findIndex:
const data = [
{ id: 1, title: "first" },
{ id: 2, title: "second" },
{ id: 3, title: "third" },
{ id: 4, title: "fourth" },
];
const itemIndex = data.findIndex((element) => element.id === 3);
console.log(itemIndex);
Ouput:
2
find:
const data = [
{ id: 1, title: "first" },
{ id: 2, title: "second" },
{ id: 3, title: "third" },
{ id: 4, title: "fourth" },
];
const item = data.find((element) => element.id === 3);
console.log(item);
Output:
{ id: 3, title: 'third' }
destructuring
The destructuring assignment is a special syntax which enables unpacking (assign) value from arrays or object properties directly into variables
const name = ["jack", "pritom"];
const [firstName, lastName] = name;
console.log(firstName, lastName);
Output:
jack pritom
const data = {
id: 1,
name: "jack pritom",
loveMusic: true,
species: "human",
};
const { name: dataName, species, ...rest } = data;
console.log(dataName);
console.group(species);
console.group(rest);
Output:
jack pritom
human
{ id: 1, loveMusic: true }
rest & spread operator
Rest parameter enables us to pass unspecified number of parameters to a function which will be placed into array, while the spread operator enables us to spread the content of a iterable(i.e. array) into individual elements
Spread:
const introduction = ["my", "name", "is", "jack"];
const copyArr = [...introduction];
console.log(copyArr);
console.log(...copyArr);
Output:
[ 'my', 'name', 'is', 'jack' ]
my name is jack
Rest:
const getSize = (...args) => {
return args.length;
};
console.log(getSize(1, 2, 3));
console.log(getSize(10, 20, 30, 100));
Output:
3
4
promises
In simple terms promises are used to handle asynchronous operations. Each promise can end as a success or failure having 3 possible statuses: pending, fulfilled or rejected. In the example below we handle promises with async await syntax while fetching data from API
const fetchData = async () => {
try {
const response = await fetch("https://jsonplaceholder.typicode.com/todos/");
if (!response.ok) throw new Error(response.status);
const result = await response.json();
return result;
} catch (e) {
console.log(e);
}
};
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK