=F sl before Reacte ) @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() & findiIndex() e destructuring ¢ rest & spread operator * promisesre ) @pyplane_code o2 map and filter Both are array methods and both return a new array when applying. Filter additionally eliminates items that don't match wae e tid: Pasa cet Perc cer cree ech Date const uppperData = DATA.map(el=> el.title. toUpperCase()) Cnet) CC Cee sae aC Lee ed olen eA De) (index) 1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 Oa lace ae E Brace ae Daa aaa ae Bir ae A a ] const copyArr = [...charactersArr] copyArr.splice(@, 1); er emt co Sta) copyArr.splice(copyArr. length, 1, ‘Wonder Woman'); Corer HCMC 7 Ca const selected = charactersArr.slice(®,2) Corr Cm ecto)e ) @pyplane_code 04 concat 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) console. log(mergedArr)e ) @pyplane_code O5 find and findindex The find method returns the first element that satisfies the condition, while findindex returns the index of that element Corel aa) Vn {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)e ) @pyplane_code 06 destructuring The destructuring assignment is a special syntax which enables unpacking (assigning) values from arrays or object properties directly into variables const name = ['Luke', 'Skywalker'] Cae UC US em COR Cm GRC MC Co) Luke Skywalker const jedi = { sky ay CEU eT Tan Rete ret species: 'Human' p COR Gr UES ec Cm oe LS eae Cm CCR CD) console. group( species) ke Skywalke Co CoCr) r: true}e ) @pyplane_code O7 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 aiterable (i.e. array) into individual elements / SPREAD Corer inseam Oe Le CO COR SA CA Coa 7 ae OPP as cy) Conceal tc SZ.teo) console. log(...copyArr) eH Ura se One Lene return args. length P CCC see PDD) CMCC se 0 Re CRD) 5e ) @pyplane_code os eye Res 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 the async await Ulay ey ae MR -icenl ae ele Renna ed| const fetchData = async() => { inane const response = await fetch('https://swapi.dev/api/people/'); if (!response.ok) throw new Error(response.status); const result = await response. json(); oR on D Coron console. log(e) i) i