JavaScript Tutorial : Array and Array Methods

JavaScript Array

Array is like a drawer containing different things. You can open the drawer and pick things, count what is inside the drawer and even add to the contents there. That is basically what an array is all about.

It is a data structure composed of collection of elements which can be strings, numbers, or variables. These elements are assigned a key or what is known as array index. The elements are those items or data stored in the array. Array is useful in storing large data. Suppose you want to store details of hive users. Instead of assigning a variable for all the users which will enter hundreds of thousands variables, you can just store them in a single array. The names can then be accessed using the indexnumber.

Creating an array

You can create an array in JavaScript as seen below

var blockchains = ['Hive', 'Ethereum', 'Eos', 'Steem'];
console.log(blockchains);

jiqc4j0ui6qg8oikvofd
pejsxecd2bdqwejm6loh
You can see how it looks like in the console. That is an array with values Hive, Ethereum, Eos, and Steem

Accessing Array elements

You can access the Array elements by using the indexnumber and the index of the first element of an array is 0.

var blockchains = ['Hive', 'Ethereum', 'Eos', 'Steem'];
console.log(blockchains);
console.log(blockchains[1]);

This will return Ethereum in the search console. Hive will have the index 0, Ethereum index 1, Eos index 2, and Steem index 3.
You can also add to the elements of the array by using
array is 0.
t3nquzkvkyv7hh63fp5s
ltaekvi7vgovhjlyqi5m

Adding Array elements


var blockchains = ['Hive', 'Ethereum', 'Eos', 'Steem']; blockchain[4] = 2; blockchain[5] =’Bitcoin’ console.log(blockchains); console.log(blockchains[5]);

iyqhaeszi87yjbwfvhyu
gzm30dgwaryji96vn5nc
The above code simply shows we are adding the number 2 to represent the array index 4 and bitcoin to represent array index 5. That is a simple way of adding elements to arrays.

Array Length

You can know the number of elements in an array by using the Array.length code.

var blockchains = ['Hive', 'Ethereum', 'Eos', 'Steem'];
blockchain[4] = 2;
blockchain[5] =’Bitcoin’
console.log(blockchains);
console.log(‘The number of elements in the array is ’ + blockchains.length);

oooh4oepn5ezuoium3on
zfgrufkcvugakdicvyhd
This will tell us the number of elements and it starts counting from 1 not zero like the Array index. This mean the number of elements will be 6.

Array Methods

We will look at some of the Array methods that can be applied to Arrays

Concat

This joins two or more arrays together and then return a copy of the combined arrays

var blockchains = ['Hive', 'Ethereum', 'Eos', 'Steem'];
var coins = ['HBD', 'BNB', 'BTC'];
var founders = ['CZ', 'Dan', 'Lee', 'Larsen'];
var aggregation = blockchains.concat(coins, founders);

console.log(aggregation)

z4fl4ruubrs5qto4klbu
tylw4unbgtsur1vdjsq8
You can see the result above. The arrays elements have been joined together.

copyWithin

This copies array elements within an array into a specified position.

var blockchains = ['Hive', 'Ethereum', 'Eos', 'Steem'];
var coins = ['HBD', 'BNB', 'BTC'];
blockchains.copyWithin(0,1,2)

console.log(blockchains)

p0j0ocn44klst7ft5c3z
il62uefbdapis684wpbz
The copyWithin(0,1,2) simply represents the parameters
* target the index position you want to copy to
* the index position to start copying from
* the index position to stop the copying
This mean I want the target position to be index 0 and I will start copying from index position 1 and stop at 2. That is why you see that Ethereum has overwritten Hive.

Fill

The fill method will fill the Array elements with a static value specified as shown below

var blockchains = ['Hive', 'Ethereum', 'Eos', 'Steem'];
var coins = ['HBD', 'BNB', 'BTC'];

blockchains.fill('Graphene');
coins.fill('ETH', 0, 2);
console.log(blockchains);
console.log(coins);

sm2y5ps2ttfrzmsduvnd
r3mbrktfwo4wdjndy8qi
fill() takes in 3 parameters
* The static value that will fill the array
* The start index to start filling the array
* The end index to stop filling the Array

Filter

ei0vrr7kgbd0ddcxk02w
This returns an array of all the elements that matches the Hive.

var blockchains = ['Hive', 'Ethereum', 'Eos', 'Steem'];
var coins = ['HBD', 'BNB', 'BTC'];

function checkSimilarity(same){
return same =='Hive';
}
var check = blockchains.filter(checkSimilarity)
console.log(check);

h5ma03zr89qi6zrvonya

Find

Find returns the value of the Array element that matches the value Hive as specified in the checkSimilarity function.
pv0gnamkvkospgyglc9f
ucokyslhkrhzliz3gk0t

var blockchains = ['Hive', 'Ethereum', 'Eos', 'Steem'];
var coins = ['HBD', 'BNB', 'BTC'];

function checkSimilarity(same){
return same =='Hive';
}
var check = blockchains.find(checkSimilarity)
console.log(check);

findIndex

um3wcptvcwqbvypkgrnn
h8yqogfopotlijl5er7m
This returns the index of the element in an array that matches ‘’Hive’’. This is important when you need to find the index of a particular element in an array. You can use this method for it.

var blockchains = ['Hive', 'Ethereum', 'Eos', 'Steem'];
var coins = ['HBD', 'BNB', 'BTC'];

function checkSimilarity(same){
return same =='Hive';
}
var check = blockchains.findIndex(checkSimilarity)
console.log(check);

forEach

The forEach assigns a function for each array elements. It runs through the array elements and run the function for each of them.
Below is a code that finds the sum of all the numbers in an array. You initialize the sum variable and assign value of 0. The add() function is simply saying add 0 to the element, then assign the result to the variable sum.
When we now say price.forEach(add);, this means 0+20 will run and assign 20 to the sum variable, then 20+30 will run and assign 50 to the sum variable, then 50+50 will run and assign 100 to the sum variable, then 100_60 will run and assign 160 to the sum variable then finally 160+110 will run and assign 270 to the sum variable which is displayed in our console.
njesadcquotnff7krpuh
wpo695l6qfvdalnxiw2b
You can modify the function to whatever to the array elements via the forEach method.

var blockchains = ['Hive', 'Ethereum', 'Eos', 'Steem'];
var coins = ['HBD', 'BNB', 'BTC'];
var sum = 0;
var price = [20, 30, 50, 60, 110];

price.forEach(add);
function add(element){

sum += element;

}

console.log(sum);

From

The from() method creates an array from a string as shown below. The string I am a programmer will be turned into an array of length 17 elements.
m6zrl8leeq6s95bo8vvj
q1xohgzfbuv61bfgn3sp

var blockchains = ['Hive', 'Ethereum', 'Eos', 'Steem'];
var coins = ['HBD', 'BNB', 'BTC'];

var myString = Array.from("I am a programmer");

console.log(myString);

Join

n82ewoddqjdiahdkpciq

This converts elements of an array into a string. It is like the opposite of from().
boagtbhequuxhooda4du

var blockchains = ['Hive', 'Ethereum', 'Eos', 'Steem'];
var coins = ['HBD', 'BNB', 'BTC'];

var toString = coins.join()

console.log(toString);

Includes

The includes() method check if an array contains a specified element. It will return true if the element is present and false if it is absent.
iqhmvw052egbtcdlot0q
rbkmdmgcy07rru5cynhv

var blockchains = ['Hive', 'Ethereum', 'Eos', 'Steem'];
var coins = ['HBD', 'BNB', 'BTC'];

var check = (blockchain.includes(‘Eos’));
var checkagain = (blockchain.includes(‘BCH’));

console.log(check);
console.log(checkagain);

Map

vdqcxldyst4gdyloqyaa
eko8siuiyqlak2kgbhch
Map creates a new array with the results of whatever function applied to the original array elements.
Below returns an array with the cuberoot of the numbers arrays. You can see that the original numbers arrays is not modified, instead, the result is assigned and displayed by the new array cubeRoot.

var blockchains = ['Hive', 'Ethereum', 'Eos', 'Steem'];
var coins = ['HBD', 'BNB', 'BTC'];
var numbers = [8, 27, 64, 125, 216]
var cubeRoot = numbers.map(Math.cbrt);

console.log(numbers);
console.log(cubeRoot);

Other Array methods will be looked into in the next part
References
Ref 1 | Ref 2

246 Trackbacks / Pingbacks

  1. JavaScript Tutorial : Array and Array Methods 2 [Video] - Nairatag Programming
  2. https://processbuild48083.wixsite.com/sdehnkys
  3. canadian drug store
  4. https://weruybsd.fireblogz.com/39575666/four-issues-to-do-immediately-about-online-pharmacies
  5. keuybc.estranky.skclanky30-facts-you-must-know--a-covid-cribsheet.html
  6. gwertvb.mystrikingly.com
  7. online canadian pharmacy
  8. https://graph.org/The-Way-To-Get-Health-Care-At-Home-During-COVID-19---Health--Fitness-04-07
  9. https://chubo3.wixsite.com/canadian-pharmacy/post/what-parents-must-find-out-about-kids-and-covid-19
  10. buy viagra now
  11. canadian online pharmacy
  12. canada drug
  13. canada online pharmacies
  14. canadian pharmacy world
  15. canadianpharmacy
  16. fwervs.gumroad.com
  17. sasnd0.wixsite.comcialispostimpotent-victims-can-now-cheer-up-try-generic-tadalafil-men-health
  18. hsoybn.estranky.skclankytadalafil-from-india-vs-brand-cialis---sexual-health.html
  19. pharmacy
  20. canadadrugs
  21. canada pharmacy online
  22. canadian pharmacycanadian pharmacy
  23. sernert.estranky.skclankyconfidential-information-on-online-pharmacies.html
  24. 626f977eb31c9.site123.mebloghow-google-is-changing-how-we-approach-online-order-medicine-1
  25. canada viagra
  26. deiun.flazio.com
  27. canadian pharmacies mail order
  28. http://ime.nu/cialisonlinei.com
  29. canadian pharmacycanadian pharmacy
  30. canadian pharmacy cialis
  31. https://pharmacy-online.webflow.io/
  32. canada pharmacy
  33. https://site273035107.fo.team/
  34. canadian pharmaceuticals
  35. https://site102906154.fo.team/
  36. https://hertnsd.nethouse.ru/
  37. uertbx.livejournal.com402.html
  38. lwerts.livejournal.com276.html
  39. avuiom.sellfy.store
  40. buy viagra usa
  41. canadian pharmacy king
  42. aonubs.website2.me
  43. https://kertvbs.webgarden.com/
  44. https://swenqw.company.site/
  45. 628f789e5ce03.site123.meblogwhat-everybody-else-does-when-it-comes-to-canadian-pharmacies
  46. discount canadian pharmacies
  47. online drug store
  48. kwersv.proweb.cz
  49. https://kwervb.estranky.cz/clanky/canadian-government-approved-pharmacies.html
  50. canadian online pharmacies
  51. 62b2f636ecec4.site123.meblogcanadian-pharmaceuticals-online
  52. canada drug pharmacy
  53. canadian pharmacies online
  54. pharmacy canada
  55. www.reddit.comuserdotijezocomments9xlg6gonline_pharmacies
  56. my.desktopnexus.comPharmaceuticalsjournalcanadian-pharmaceuticals-for-usa-sales-38346
  57. www.formlets.comformsv7CoE3An9poMtRwF
  58. https://agrtyh.micro.blog/
  59. https://www.artstation.com/etnyqs6/profile
  60. kvqtig.zombeek.cz
  61. online drug store
  62. canadian prescription drugstore
  63. pharmacy
  64. https://form.jotform.com/decote/canadian-pharmacies-shipping-to-the
  65. https://linktr.ee/canadianpharmacy
  66. kawers.micro.blog
  67. buy cialis
  68. buy cialis online no prescription
  69. https://kalwer.micro.blog/
  70. https://hub.docker.com/r/tadalafil/20mg
  71. buy cialis pills online
  72. form.jotform.comogmynbuycialisonline
  73. linktr.eebuycialisonline
  74. telegra.phCialis-20mg-08-13
  75. graph.orgTadalafil-20mg-08-13
  76. kwenzx.nethouse.ru
  77. canadian medications
  78. https://linktr.ee/canadianpharmacies
  79. buyviagraonlinee.mystrikingly.com
  80. https://buyviagraonline.estranky.sk/clanky/buy-viagra-without-prescription-pharmacy-online.html
  81. https://buyviagraonline.fo.team/
  82. buy viagra online us pharmacy
  83. https://buyviagraonline.estranky.cz/clanky/can-i-buy-viagra-without-prescription.html
  84. https://buyviagraonline.proweb.cz/
  85. https://telegra.ph/How-to-get-viagra-without-a-doctor-08-18
  86. my.desktopnexus.combuyviagraonlinejournalonline-viagra-without-a-prescriptuon-38932
  87. https://www.divephotoguide.com/user/buyviagraonline
  88. viagrawithoutprescription.webflow.io
  89. https://form.jotform.com/222341315941044
  90. https://buyviagraonline.home.blog/
  91. canadianpharmacy
  92. viagraonline.estranky.skclankyviagra-without-prescription.html
  93. viagraonlineee.wordpress.com
  94. buy viagra no rx
  95. https://viagraonlinee.livejournal.com/492.html
  96. buy viagra cheap
  97. buy viagra usa
  98. https://dailygram.com/index.php/blog/1155353/we-know-quite-a-bit-about-covid-19/
  99. challonge.comencanadianpharmaceuticalsonlinemt
  100. https://www.seje.gov.mz/question/canadian-pharmacies-shipping-to-usa/
  101. https://pinshape.com/users/2441403-canadian-pharmaceuticals-online
  102. reallygoodemails.comcanadianpharmaceuticalsonline
  103. northwestpharmacy
  104. canada drug
  105. canadajobscenter.comauthorcanadianpharmaceuticalsonline
  106. northwest pharmacy canada
  107. canadian government approved pharmacies
  108. www.provenexpert.comcanadian-pharmaceuticals-online
  109. purchase stromectol online
  110. stromectol composition
  111. https://aoc.stamford.edu/profile/goatunmantmen/
  112. stromectol price
  113. buy stromectol fitndance
  114. canadajobscenter.comauthorereswasint
  115. aoc.stamford.eduprofilehispennbackwin
  116. bursuppsligme.bandcamp.comreleases
  117. canadian online pharmacy
  118. stromectol generic
  119. canadian discount pharmacies
  120. web904.comcanadian-pharmaceuticals-for-usa-sales
  121. https://500px.com/p/skulogovid/?view=groups
  122. 500px.compbersavahi?view=groups
  123. reallygoodemails.comcanadianpharmaceuticalsonlineusa
  124. canadian pharmacies mail order
  125. sanangelolive.commemberspharmaceuticals
  126. https://haikudeck.com/canadian-pharmaceuticals-online-personal-presentation-827506e003
  127. buyersguide.americanbar.orgprofile4206420
  128. https://experiment.com/users/canadianpharmacy
  129. https://challonge.com/esapenti
  130. challonge.comcitlitigolf
  131. stromectol order online
  132. buy stromectol scabies online
  133. stromectol medicine
  134. https://dsdgbvda.zombeek.cz/
  135. inflavnena.zombeek.cz
  136. www.myscrsdirectory.comprofile4217080
  137. canadian pharmacies that ship to us
  138. canadian medications
  139. canadian rx
  140. canadian prescriptions online
  141. www.audiologysolutionsnetwork.orgprofile4220190
  142. buy viagra 25mg
  143. sanangelolive.commemberscanadianpharmaceuticalsonlineusa
  144. https://sanangelolive.com/members/girsagerea
  145. canadian pharmaceuticals online
  146. www.mojomarketplace.comuserCanadianpharmaceuticalsonline-EkugcJDMYH
  147. canada pharmacies online prescriptions
  148. canadian drugstore
  149. feeds.feedburner.combingCanadian-pharmaceuticals-online
  150. search.gmx.comwebresult?q="My Canadian Pharmacy - Extensive Assortment of Medications – 2022"
  151. https://search.seznam.cz/?q="My Canadian Pharmacy - Extensive Assortment of Medications – 2022"
  152. sanangelolive.commembersunsafiri
  153. https://duckduckgo.com/?q="My Canadian Pharmacy - Extensive Assortment of Medications – 2022"
  154. buy viagra 25mg
  155. https://www.dogpile.com/serp?q="My Canadian Pharmacy - Extensive Assortment of Medications – 2022"
  156. https://search.naver.com/search.naver?where=nexearch
  157. https://search.givewater.com/serp?q="My Canadian Pharmacy - Extensive Assortment of Medications – 2022"
  158. www.bakespace.commembersprofileСanadian pharmaceuticals for usa sales1541108
  159. www.qwant.com?q="My Canadian Pharmacy - Extensive Assortment of Medications – 2022"
  160. results.excite.comserp?q="My Canadian Pharmacy - Extensive Assortment of Medications – 2022"
  161. https://www.infospace.com/serp?q="My Canadian Pharmacy - Extensive Assortment of Medications – 2022"
  162. legitimate canadian mail order pharmacies
  163. online drug store
  164. canadian drugs
  165. https://feeds.feedburner.com/bing/stromectolnoprescription
  166. aoc.stamford.eduprofilecliclecnotes
  167. https://pinshape.com/users/2491694-buy-stromectol-fitndance
  168. www.provenexpert.commedicament-stromectol
  169. https://challonge.com/bunmiconglours
  170. stromectol dosering
  171. tropkefacon.estranky.skclankybuy-ivermectin-fitndance.html
  172. canadian pharmacycanadian pharmacy
  173. motocom.codemosnetw5askmequestioncanadian-pharmaceuticals-online-5
  174. viagra canada
  175. https://zencastr.com/@pharmaceuticals
  176. https://aleserme.estranky.sk/clanky/stromectol-espana.html
  177. https://orderstromectoloverthecounter.mystrikingly.com/
  178. https://stromectoloverthecounter.wordpress.com/
  179. buystromectol.livejournal.com421.html
  180. https://orderstromectoloverthecounter.flazio.com/
  181. search.lycos.comweb?q="My Canadian Pharmacy - Extensive Assortment of Medications – 2022"
  182. https://conifer.rhizome.org/pharmaceuticals
  183. telegra.phOrder-Stromectol-over-the-counter-10-29
  184. https://graph.org/Order-Stromectol-over-the-counter-10-29-2
  185. https://sandbox.zenodo.org/communities/canadianpharmaceuticalsonline/
  186. https://demo.socialengine.com/blogs/2403/1227/canadian-pharmaceuticals-online
  187. viagra canada
  188. taylorhicks.ning.comphotoalbumsbest-canadian-pharmaceuticals-online
  189. my.afcpe.orgforumsdiscussiondiscussionsreputable-canadian-pharmaceuticals-online
  190. www.dibiz.comndeapq
  191. https://www.podcasts.com/canadian-pharmacies-shipping-to-usa
  192. online pharmacy canada
  193. soundcloud.comcanadian-pharmacy
  194. canadian pharmacy
  195. canadianpharmacy
  196. dragonballwiki.netforumcanadian-pharmaceuticals-online-safe
  197. canada drug
  198. canada online pharmacies
  199. https://medium.com/@pharmaceuticalsonline/canadian-pharmaceutical-drugstore-2503e21730a5
  200. https://infogram.com/canadian-pharmacies-shipping-to-usa-1h1749v1jry1q6z
  201. https://pinshape.com/users/2507399-best-canadian-pharmaceuticals-online
  202. https://aoc.stamford.edu/profile/upogunem/
  203. https://500px.com/p/maybenseiprep/?view=groups
  204. https://challonge.com/ebtortety
  205. https://sacajegi.estranky.cz/clanky/online-medicine-shopping.html
  206. https://speedopoflet.estranky.sk/clanky/international-pharmacy.html
  207. sanangelolive.commembersmaiworkgendty
  208. https://issuu.com/lustgavalar
  209. https://calendly.com/canadianpharmaceuticalsonline/onlinepharmacy
  210. aoc.stamford.eduprofileuxertodo
  211. https://www.wattpad.com/user/Canadianpharmacy
  212. https://pinshape.com/users/2510246-medicine-online-shopping
  213. canadian pharcharmy online
  214. challonge.comebocivid
  215. obsusilli.zombeek.cz
  216. https://sanangelolive.com/members/contikegel
  217. https://rentry.co/canadianpharmaceuticalsonline
  218. canadian prescriptions online
  219. canadian pharmacys
  220. canadianpharmaceuticalsonline.eventsmart.com20221120canadian-pharmaceuticals-for-usa-sales
  221. suppdentcanchurch.estranky.czclankyonline-medicine-order-discount.html
  222. https://aoc.stamford.edu/profile/tosenbenlren/
  223. pinshape.comusers2513487-online-medicine-shopping
  224. 500px.compmeyvancohurt?view=groups
  225. https://challonge.com/townsiglutep
  226. https://appieloku.estranky.cz/clanky/online-medicine-to-buy.html
  227. https://scisevitrid.estranky.sk/clanky/canada-pharmacies.html
  228. canadian prescriptions online
  229. https://aoc.stamford.edu/profile/plumerinput/
  230. pinshape.comusers2517016-cheap-ed-drugs
  231. https://challonge.com/afersparun
  232. https://plancaticam.estranky.cz/clanky/best-drugs-for-ed.html
  233. https://piesapalbe.estranky.sk/clanky/buy-erectile-dysfunction-medications-online.html
  234. https://www.cakeresume.com/me/canadian-pharmaceuticals-online/
  235. canadianpharmaceuticalsonline.studio.site
  236. https://en.gravatar.com/canadianpharmaceuticalcompanies
  237. https://canadianpharmaceuticalsonline.blog.jp/archives/19372004.html
  238. https://canadianpharmaceuticalsonline.ldblog.jp/archives/19386301.html
  239. canadianpharmaceuticalsonline.dreamlog.jparchives19387310.html
  240. online pharmacy canada
  241. canadianpharmaceuticalsonline.diary.toarchives16857199.html
  242. https://canadianpharmaceuticalsonline.weblog.to/archives/19410199.html
  243. https://canadianpharmaceuticalsonline.bloggeek.jp/archives/16871680.html
  244. https://canadianpharmaceuticalsonline.blogism.jp/archives/17866152.html
  245. https://canadianpharmaceuticalsonline.blogo.jp/archives/19436771.html
  246. https://canadianpharmaceuticalsonline.blogto.jp/archives/19498043.html

Leave a Comment