Sources Contact Advanced Search Tutorials

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

October 5, 2022 04:47 am GMT

Learn this before React

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

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' }

destructing

The destructing 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 pritomhuman{ 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:34

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

Follow me on : Github Linkedin

Original Link: https://dev.to/jps27cse/learn-this-before-react-4hpl

Share this article:

View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To