We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
re | @pyplane. code
=F Tal
before React a @pyplane_code O1
Introduction
In this tutorial we will explore top fundamental
Javascript concepts necessary to know in order
to have an effective first learning cycle of
Reactjs / React Native
Table of contents
¢ map() & filter()
e slice() & splice()
¢ concat()
e find() & findindex()
e destructuring
e rest & spread operator
¢ promises G @pyplane_code (oy
map and filter
Both are array methods and bothreturn anew array when
applying. Filter additionally eliminates items that don't match
Coe Ur eam
{id: 1, title: 'first'},
{id: 2, title: ‘second'},
{id: 3, title: ‘third'},
{id: 4, title: 'fourth'},
const uppperData = DATA.map(el=> el. title. toUpperCase(
Ree Ct See)
eee Ce Rem Onan a1 me Lee Ci a2
lean ete D) re | @pyplane_code (o}c}
slice and splice
method returns anew array with selected elements, while
splice method changes the contents of an existing array
leases eae
oat Tae
olan a hse
et clas
be aT aa
i
const copyArr = [...charactersArr]
copyArr.splice(0, 1);
OLAS [Cae 07a
copyArr.splice(copyArr. length, 1, ‘Wonder Woman');
OT Re Mae) Ua)
CC ee aol Le ad ta) ed 2)
console. log(selected)
UCC Cente Ta ie ta)
“i Potter", re | @pyplane_code 04
foo) ater: 14
This method returns anew array of merging
two or more arrays.
const arrl = [1, 2, 3, 4]
const arr2 = [10, 20, 30, 40]
const arr3 = [100, 200, 300, 400]
const mergedArr = arri.concat(arr2, arr3)
Cote ten Kem el Ota tea)
2, 3, 4, 10, 20, 30, 40, re eer O05
find and findindex
The find method returns the first element that satisfies the
condition, while findindex returns the index of that element
const DATA = [
{id: 1, title: ‘first'},
{id: 2, title: 'second'},
{id: 3, title: 'third'},
{id: 4, title: ‘fourth'},
const itemIdx = DATA. findIndex(el=> el.id === 2)
console. log(itemIdx)
const item = DATA.find(el=> el.id === 2)
console. log( item) ro eye)
eC ogaTe)
The destructuring assignment is a special syntax which
enables unpacking (assigning) values from arrays or object
properties directly into variables
const name = [‘Luke', 'Skywalker']
a RRC Leek CLS cd
console. log(firstName, LastName)
Luke Skywalker
Oras!
FC He
TP eam Co ST
eer gt
Bete ae
1:
const {name:jediName, species, ...rest} = jedi
console. log(jediName)
console. group( species)
Lt
Skywalker
console. log( rest) (W eorpiane code ev
rest & spread operator
Rest parameter enables us to pass unspecified
number of parameters toa function which will be
placed into array, while the spread operator enables
us to spread the content of aiterable (i.e. array) into
individual elements
ata}
const introduction = ['my', ‘name’, 'is', ‘Luke’, 'Skywalker']
const copyArr = [...introduction]
Coren LC S.C
Co aoa tere] nS Na
Corer ct ener La) ean
eeaaieela peace
a
console. log(getSize(1, 5, 10))
CeCe dC asst 16 ae ar CECT) a @pyplane_code (e}s}
promises
In simple terms promises are used to handle asynchronous
operations. Each promise can endasa success or failure
having 3 possible statuses: pending, fulfilled or rejected. In
the example below we handle promises with the async await
syntaxt while fetching data from API
Tec Ree LAO eae
ita'an
if (!response.ok) throw new Error(response.status);
const result = await response.json();
aaa ey
Mi
catch (e) {
console. log(e)
a
i
