DEV Community 👩‍💻👨‍💻

Amir.H Ebrahimi
Amir.H Ebrahimi

Posted on • Updated on

console.log(`[Arrays]`)

Here is a list of array operations that you can review, such as blitz. From now on, we'll be working with these arrays.

const numbers: number[] = [0, 1, 2];
const alphabet: string[] = ['a', 'b', 'c'];
Enter fullscreen mode Exit fullscreen mode

Indexing

numbers.indexOf(2) // 2
numbers.indexOf(10) // -1
numbers[5] // undefined
numbers[-1] // undefined
numbers[Infinity] // undefined
numbers['1'] // 1
Enter fullscreen mode Exit fullscreen mode

Bonus tips (negative index)

numbers.at(-1); // 2, (builtin at method)

const coolNumbers = new Proxy(numbers, {
  get(target, props) {
    const index: number = +(<string>props)
    if (index < 0) 
      return Reflect.get(target, index + target.length)
    return Reflect.get(target, props)
  },
})
coolNumbers[-1] // 2
Enter fullscreen mode Exit fullscreen mode

Adding (appending) items

/* IMMUTABILITY */
numbers.concat([3, 4]) // [ 0, 1, 2, 3, 4 ]
numbers // [ 0, 1, 2]

/* INPLACE CHANGES */
numbers.push(3) // numbers -> [0, 1, 2, 3]
numbers.unshift(-2) //  numbers -> [-2, 0, 1, 2, 3]
numbers.splice(1, 0, -1) // numbers -> [-2, -1, 0, 1, 2, 3]
numbers.splice(0,0, ...[-6, -4, -3]) 
numbers // [-6, -4, -3, -2, -1,  0,  1,  2,  3]
Enter fullscreen mode Exit fullscreen mode

Replacing item

numbers.splice(0, 1, -5) // numbers -> [-5, -4, -3, -2, -1,  0,  1,  2,  3]
numbers.splice(500, 100, 4) // numbers -> [-5, -4, -3, -2, -1,  0,  1,  2,  3, 5]
numbers[9] = 4 // numbers -> [-5, -4, -3, -2, -1,  0,  1,  2,  3, 4]
numbers [-5, -4, -3, -2, -1,  0,  1,  2,  3, 4]

Enter fullscreen mode Exit fullscreen mode

Creating array

new Array(5) // [ <5 empty items> ]
Array.from({ length: 5 }) // [ undefined, undefined, undefined, undefined, undefined ]
Array.from('12345', _ => undefined) // [ undefined, undefined, undefined, undefined, undefined ]
Array.from(document.querySelectorAll('img'), img => img.src)
Array.of(1, 2, 3, 4, 5) // [ 1, 2, 3, 4, 5 ]
Array(5) // [ <5 empty items> ]
Array.from({ length: 5 }, (_, i) => i) // [ 0, 1, 2, 3, 4 ]

Enter fullscreen mode Exit fullscreen mode

Bonus tips (manipulating array length)

alphabet.length = 5
alphabet // [ 'a', 'b', 'c', <2 empty items> ] length is 5
alphabet[7] = 'e'
alphabet // [ 'a', 'b', 'c', <4 empty items>, 'e' ] length is 8
alphabet.length = 3
alphabet // [ 'a', 'b', 'c' ] length is 3
Enter fullscreen mode Exit fullscreen mode

Iteration

alphabet.entries() // Iterator over [[0,'a'], [1, 'b'], [2, 'c']]
for (const [index, element] of alphabet.entries()) {}
alphabet.keys() // Iterator over [0, 1, 2]
for (const index in alphabet) {}
alphabet.values() // Iterator over [ 'a', 'b', 'c' ]
for (const value of alphabet) {}
Enter fullscreen mode Exit fullscreen mode

Inclusion

alphabet.includes('c') // true
alphabet.includes('c', 1) // true, from index 1
alphabet.includes('c', -2) // true, from index (length - 2)
alphabet.find(item => item.charCodeAt(0) > 'b'.charCodeAt(0)) // c
alphabet.findIndex(item => item.charCodeAt(0) > 'b'.charCodeAt(0)) // 2
alphabet.lastIndexOf('c') // 2
alphabet.indexOf('c') // 2
alphabet.indexOf('d') // -1

Enter fullscreen mode Exit fullscreen mode

Operators

alphabet.every(item => item.charCodeAt(0) < 'c'.charCodeAt(0)) // false
alphabet.some(item => item.charCodeAt(0) < 'c'.charCodeAt(0)) // true

// **flat** ES2019
const nested = [0, [1], [[2]], [[[3]]], [[[[4], 3], 2], 1]]
nested.flat() // [ 0, 1, [ 2 ], [ [ 3 ] ], [ [ [4], 3 ], 2 ], 1 ], default level  1
nested.flat(3) // [0, 1, 2, 3, [ 4 ], 3, 2, 1]
nested.flat(Infinity) // [0, 1, 2, 3, 4 , 3, 2, 1]

// **joining**
alphabet.join(',') // a,b,c
// @ts-ignore
alphabet.join`,` // a,b,c
alphabet.toString() // a,b,c

// **reducing** 
alphabet.reduce((acc, chr) => acc + ', ' + chr, '') // , a, b, c
alphabet.reduceRight((acc, chr) => acc + ', ' + chr, '') // , c, b, a
alphabet.reverse() // alphabet -> [ 'c', 'b', 'a' ]
alphabet // [ 'c', 'b', 'a' ]

// **sorting**
alphabet.sort() // shuffle alphabet, e.g. alphabet -> [ 'b', 'a', 'c' ] 
alphabet.sort(() => Math.random() - 0.5) // alphabet -> [ 'a', 'b', 'c' ] 
alphabet // [ 'a', 'b', 'c' ]

// **subset**
alphabet.slice(1) // ['b', 'c']
alphabet.slice(0, 2) // [ 'a', 'b' ]

Enter fullscreen mode Exit fullscreen mode

Bonus tips

For mapping over an array it must have value, it can be undefined or null or any thing, but it can not be empty .

/*  cool python range */
const range = (start: number, stop?: number, step?: number) => {
  if (step === undefined) step = 1
  if (stop === undefined) {
    stop = start
    start = 0
  }

  return Array.from(
    { length: (stop - start) / step + 1 },
    (_, i) => start + i * step!,
  )
}

for (let i in range(10)) console.log(i)
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Need a better mental model for async/await?

Check out this classic DEV post on the subject.

⭐️🎀 JavaScript Visualized: Promises & Async/Await

async await