Javascript built-in data structure - Array, part 2/3

/
javascriptfundamentals

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

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

Get length of an array, property length

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

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

Empty array is different from sparse array

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

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

Syntax array.pop().

Input Output Modify original array Time complexity (worst)
None popped element YES O(1)
array.js
// Removes the last element from an array, method pop
const arr8 = [2,3,4]
console.log(arr8.pop()) // 4, popped element
console.log(arr8) // [ 2, 3 ], original array modified

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

Syntax array.shift().

Input Output Modify original array Time complexity (worst)
None removed element YES O(1)
array.js
// Removes the first element from an array, method shift
const arr9 = ['a', 'b', 'c']
console.log(arr9.shift()) // a, 'shifted' element
console.log(arr9) // [ 'b', 'c' ], original array modified

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

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

Input Process Output
as many elements as wanted, separated by comma , append new element(s) to the end of array last pushed element
Modify original array Time complexity (worst)
YES O(1) for an element
array.js
// Adds element(s) to the end of an array, method push
const arr10 = [1, 'b', 3]
console.log(arr10.push(4)) // 4, 'pushed' element
console.log(arr10) // [ 1, 'b', 3, 4 ], original array modified
console.log(arr10.push(5,6)) // 6, last 'pushed' element
console.log(arr10) // [ 1, 'b', 3, 4, 5, 6 ], original array modified

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

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

Input Process Output
as many elements as wanted, separated by comma , append new element(s) to the beginning of array last pushed element
Modify original array Time complexity (worst)
YES O(1) for an element
array.js
// Adds element(s) to the beginning of an array, method unshift
const arr101 = [1, 'b', 3]
console.log(arr101.unshift(4)) // 4, 'unshifted' element
console.log(arr101) // [ 4, 1, 'b', 3 ], original array modified
console.log(arr101.unshift(5,6)) // 6, last 'unshifted' element
console.log(arr101) // [ 5, 6, 4, 1, 'b', 3 ], original array modified

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

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

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

Input What it does Output Original 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 ]
Input Output Modify original array Time complexity (worst)
as example array of removed elements YES O(n + k) n is original array length
k is number of new elements to add
array.js
// Adds and/or removes elements from an array, method splice
const arr11 = [1,2,3,4,5]
console.log(arr11.splice(1)) // [ 2, 3, 4, 5 ], removed elements
console.log(arr11) // [ 1 ], modified original array

const arr12 = [1,2,3,4,5]
console.log(arr12.splice(1,2)) // [ 2, 3 ], removed elements
console.log(arr12) // [ 1, 4, 5 ], modified original array

const arr13 = [1,2,3,4,5]
console.log(arr13.splice(1,2, 'a', 'b', 'c')) // [ 2, 3 ], removed elements
console.log(arr13) // [ 1, 'a', 'b', 'c', 4, 5 ], modified original array

Sorts the elements of an array, method sort()

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

Input Process Output
none Convert all elements to string and arrange to order of UTF-16 table. Default sort order is ascending sorted 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
Modify original array Time complexity (worst)
YES varies by browser, but safe to assume O(nlogn) merge sort
array.js
// Sorts the elements of an array, method sort
const arr14 = [4,3,9,7]
console.log(arr14.sort()) // [ 3, 4, 7, 9 ], sorted array
console.log(arr14) // [ 3, 4, 7, 9 ], original array modified

const arr15 = [['c', 5], ['b', 4], ['a', 7]]
console.log(arr15.sort((a,b) => a[1] - b[1]))
// sort by the number
// [ [ 'b', 4 ], [ 'c', 5 ], [ 'a', 7 ] ]

console.log(arr15.sort((a,b) => a[0].charCodeAt(0) - b[0].charCodeAt(0)))
// sort by the character
// [ [ 'a', 7 ], [ 'b', 4 ], [ 'c', 5 ] ]

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

Syntax array.reverse().

Input Process Output
None Reverse order of all element in array. Last element -> first element and so on. Reversed array
Modify original array Time complexity (worst)
YES O(n), n is array length
array.js
// Reverses the order of the elements of an array, method reverse
const arr16 = ['a', 'b', 'c']
console.log(arr16.reverse()) // [ 'c', 'b', 'a' ], reversed array
console.log(arr16) // [ 'c', 'b', 'a' ], original array modified

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

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

Input Process Output
Any kind of varible
As many as wanted		 Concatenate input(s) and original array One single array contains everything
Modify original array Time complexity (worst)
NO O(n), n is number of input(s)
array.js
// Concatenate array with other array(s) and/or value(s), method concat
const arr17 = [1,2]
console.log(arr17.concat([4,5], [6], 7)) // [ 1, 2, 4, 5, 6, 7 ]
console.log(arr17.concat('a', 'b')) // [ 1, 2, 'a', 'b' ]
console.log(arr17.concat('c')) // [ 1, 2, 'c' ]
console.log(arr17) // [ 1, 2 ], original array NOT modified

Summary

  • Array has a lot of built-in methods. They are not there to overwhelm you. They are there so you can use them when you need to. And you will.
  • Remember what built-in methods can do while read/watch the lectures, syntax will become your muscle memory as you practice.

Continue to learn about array part 3/3.