{"componentChunkName":"component---src-templates-post-js","path":"/javascript-built-in-data-structure-array-part-2-3/","result":{"data":{"markdownRemark":{"html":"

This tutorial is a part of the Learn everything about Javascript in one course.

\n

Javascript built-in data structure - Array, part 1/3 part 2/3 (current), part 3/3.

\n\n

Get length of an array, property length

\n

Syntax array.length. Array length is the number of elements in array.

\n
array.js
\n
// Get length of an array, property length\nconsole.log([1,2,3, 'a'].length) // 4, length 4
\n

Empty array is different from sparse array

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Empty arraysparse array
[][,,,] or new Array(0)
array has no elementhas empty element
array length 0array length is not 0
\n
array.js
\n
// Empty array is different from sparse array\nconsole.log([]) // [], empty array\nconsole.log([].length) // 0, empty array length 0\nconsole.log([,,,]) // [ <3 empty items> ], sparse array, empty element\nconsole.log([,,,].length) // 3, sparse array length 3
\n

Removes the last element from an array, method pop()

\n

Syntax array.pop().

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
InputOutputModify original arrayTime complexity (worst)
Nonepopped elementYESO(1)
\n
array.js
\n
// Removes the last element from an array, method pop\nconst arr8 = [2,3,4]\nconsole.log(arr8.pop()) // 4, popped element\nconsole.log(arr8) // [ 2, 3 ], original array modified
\n

Removes the first element from an array, method shift()

\n

Syntax array.shift().

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
InputOutputModify original arrayTime complexity (worst)
Noneremoved elementYESO(1)
\n
array.js
\n
// Removes the first element from an array, method shift\nconst arr9 = ['a', 'b', 'c']\nconsole.log(arr9.shift()) // a, 'shifted' element\nconsole.log(arr9) // [ 'b', 'c' ], original array modified
\n

Adds element(s) to the end of an array, method push()

\n

Syntax array.push(element1, [element2, [element3 ...]]).

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
InputProcessOutput
as many elements as wanted, separated by comma ,append new element(s) to the end of arraylast pushed element
\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Modify original arrayTime complexity (worst)
YESO(1) for an element
\n
array.js
\n
// Adds element(s) to the end of an array, method push\nconst arr10 = [1, 'b', 3]\nconsole.log(arr10.push(4)) // 4, 'pushed' element\nconsole.log(arr10) // [ 1, 'b', 3, 4 ], original array modified\nconsole.log(arr10.push(5,6)) // 6, last 'pushed' element\nconsole.log(arr10) // [ 1, 'b', 3, 4, 5, 6 ], original array modified
\n

Adds element(s) to the beginning of an array, method unshift()

\n

Syntax array.unshift(element1[, ...[, elementN]]).

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
InputProcessOutput
as many elements as wanted, separated by comma ,append new element(s) to the beginning of arraylast pushed element
\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Modify original arrayTime complexity (worst)
YESO(1) for an element
\n
array.js
\n
// Adds element(s) to the beginning of an array, method unshift\nconst arr101 = [1, 'b', 3]\nconsole.log(arr101.unshift(4)) // 4, 'unshifted' element\nconsole.log(arr101) // [ 4, 1, 'b', 3 ], original array modified\nconsole.log(arr101.unshift(5,6)) // 6, last 'unshifted' element\nconsole.log(arr101) // [ 5, 6, 4, 1, 'b', 3 ], original array modified
\n

Adds and/or removes elements from an array, method splice()

\n

Syntax array.splice(start[, deleteCount[, item1[, item2[, ...]]]]).

\n

Example arr11 = [1,2,3,4,5]

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
InputWhat it doesOutputOriginal array
arr11.splice(1)remove element from index 1 to end[ 2, 3, 4, 5 ][ 1 ]
arr11.splice(1,2)remove 2 elements from index 1[ 2, 3 ][ 1, 4, 5 ]
arr11.splice(1,2,'a','b','c')remove 2 elements from index 1, then
add element a, b, c at index 1		[ 2, 3 ][ 1, 'a', 'b', 'c', 4, 5 ]
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
InputOutputModify original arrayTime complexity (worst)
as examplearray of removed elementsYESO(n + k) n is original array length
k is number of new elements to add
\n
array.js
\n
// Adds and/or removes elements from an array, method splice\nconst arr11 = [1,2,3,4,5]\nconsole.log(arr11.splice(1)) // [ 2, 3, 4, 5 ], removed elements\nconsole.log(arr11) // [ 1 ], modified original array\n\nconst arr12 = [1,2,3,4,5]\nconsole.log(arr12.splice(1,2)) // [ 2, 3 ], removed elements\nconsole.log(arr12) // [ 1, 4, 5 ], modified original array\n\nconst arr13 = [1,2,3,4,5]\nconsole.log(arr13.splice(1,2, 'a', 'b', 'c')) // [ 2, 3 ], removed elements\nconsole.log(arr13) // [ 1, 'a', 'b', 'c', 4, 5 ], modified original array
\n

Sorts the elements of an array, method sort()

\n

Syntax array.sort([compareFunction(a, b)]). a and b are array elements.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
InputProcessOutput
noneConvert all elements to string and arrange to order of UTF-16 table. Default sort order is ascendingsorted array
compareFunction(a,b)- If function returns less than 0, sort a to an index lower than b (i.e. a comes first).
- If function returns 0, leave a and b unchanged with respect to each other, but sorted with respect to all different elements.
- If function returns greater than 0, sort b to an index lower than a (i.e. b comes first).		sorted array
\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Modify original arrayTime complexity (worst)
YESvaries by browser, but safe to assume O(nlogn) merge sort
\n
array.js
\n
// Sorts the elements of an array, method sort\nconst arr14 = [4,3,9,7]\nconsole.log(arr14.sort()) // [ 3, 4, 7, 9 ], sorted array\nconsole.log(arr14) // [ 3, 4, 7, 9 ], original array modified\n\nconst arr15 = [['c', 5], ['b', 4], ['a', 7]]\nconsole.log(arr15.sort((a,b) => a[1] - b[1]))\n// sort by the number\n// [ [ 'b', 4 ], [ 'c', 5 ], [ 'a', 7 ] ]\n\nconsole.log(arr15.sort((a,b) => a[0].charCodeAt(0) - b[0].charCodeAt(0)))\n// sort by the character\n// [ [ 'a', 7 ], [ 'b', 4 ], [ 'c', 5 ] ]
\n

Reverses the order of the elements of an array, method reverse()

\n

Syntax array.reverse().

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
InputProcessOutput
NoneReverse order of all element in array. Last element -> first element and so on.Reversed array
\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Modify original arrayTime complexity (worst)
YESO(n), n is array length
\n
array.js
\n
// Reverses the order of the elements of an array, method reverse\nconst arr16 = ['a', 'b', 'c']\nconsole.log(arr16.reverse()) // [ 'c', 'b', 'a' ], reversed array\nconsole.log(arr16) // [ 'c', 'b', 'a' ], original array modified
\n

Concatenate array with other array(s) and/or value(s), method concat()

\n

Syntax array.concat([value1[, value2[, ...[, valueN]]]]).

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
InputProcessOutput
Any kind of varible
As many as wanted		Concatenate input(s) and original arrayOne single array contains everything
\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Modify original arrayTime complexity (worst)
NOO(n), n is number of input(s)
\n
array.js
\n
// Concatenate array with other array(s) and/or value(s), method concat\nconst arr17 = [1,2]\nconsole.log(arr17.concat([4,5], [6], 7)) // [ 1, 2, 4, 5, 6, 7 ]\nconsole.log(arr17.concat('a', 'b')) // [ 1, 2, 'a', 'b' ]\nconsole.log(arr17.concat('c')) // [ 1, 2, 'c' ]\nconsole.log(arr17) // [ 1, 2 ], original array NOT modified
\n

Summary

\n\n

Continue to learn about array part 3/3.

","timeToRead":8,"excerpt":"This tutorial is a part of the Learn everything about Javascript in one course. Javascript built-in data structure - Array, part 1/3 part…","frontmatter":{"title":"Javascript built-in data structure - Array, part 2/3","thumbnail":{"childImageSharp":{"fixed":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAADFklEQVQ4y4VVSU8UQRTugaMHLlz8DaIwyBZkHWPEGeieAY0HJUSuxsTEhIuJB8ETRMJBXBITFK8evAoXY2I0hGCCgwONrDrAALOwKXRTz/dVd016gIROXup1V9VXX31vaU3zPKkZXUuZhvJ9bPmpGSM/M2v4tmbDGnznm+7DmrSpyz3HHgnkTmxEg/DztVMeF9iz38gFVGPaNPJc/wxbO9sQ2wjbKNswWydbgcPQ8OWCsp8yc8B8rn+DbdGOtxGtthFG5R+utBHPxdk6sDZjhnMISaobUyEvsy5s+rsYwUbLYzbG5LRu7c6HGfw65nu8TLN6Ks3ADGC8QACAg0Hbv6QvGEhszxlibyFM/B3gNq1J0E4vhqYi5mq26DKTYImoLpYmmgUfwIzDtDDeLCY/BcVaVMeh9g4z5bUJtsIsloddO3TihdZmTKfDeES8HQzQ5UApbTH4y6cNVF9XSmXlJfSoq0bsL4dpc1o/cFnezbJEbrkvQxCdc8vaiOlCrETEq/5Gqqry0+y3EJ0rukC9j+to/adO0c9B2nKksECCx/eulnkaktYFHFEMAWjHI/R6oJGqq/2UmNLpzu1KKq8oof4n9bQy2SK1TbI0B79bATihgqOhAlzAUfc0m68saL2V3r0IUAWDZFhD6Pi8r4Eqq0ro1s0KQpCg4/6yBPyeBfRceVisOgyZkYA9fHCJamv9tM4Mx0ev0e6CQX3ddVR0vlgGi6NuW38k4AcPYDYonWDImyyOJF29clEU+4vpzbMArf5ooWBTGdXU+KUEg70NYnfeAEsVlPueoGTTpgAVsMdpw+xsMIp9CYmdeee6c2PNNPaxScx8DYk9TiFcd3sOo57kfWe9KZhlyZMduDYS999S2MYVoRUSm4GRKoqZrBpKSHb3JIbpSKel3ZJRdcygPbgGTseVVNkhogDCN8y5YAPHSs9b2Bkzonx0lASAoes+pwZMNghHs6RidrRbndS+lKaFqAAkLfIMqYFoIgBKs6Pty9MPDe1IXzu9wZpGToNNx1pO7tqq86pfAMoJTJR5fwGpE34B/wEgbi1Y5n1kcAAAAABJRU5ErkJggg==","width":150,"height":150,"src":"/static/5e267e2ee412a23e797106ee564145a0/4148e/js.png","srcSet":"/static/5e267e2ee412a23e797106ee564145a0/4148e/js.png 1x,\n/static/5e267e2ee412a23e797106ee564145a0/de03e/js.png 1.5x"}}},"slug":"javascript-built-in-data-structure-array-part-2-3","date":"2020-03-11T00:00:00.000Z","categories":["Javascript","Frontend","Backend"],"tags":["javascript","fundamentals"],"template":"post"},"fields":{"slug":"/javascript-built-in-data-structure-array-part-2-3/","date":"2020-03-11T00:00:00.000Z"}}},"pageContext":{"slug":"/javascript-built-in-data-structure-array-part-2-3/"}},"staticQueryHashes":[]}