Tech Incent
JavaScript Snippets

Javascript array methods example

javascript-array-methods-example

Something need to know about javasciprt array…

  • Array in javascipt, actually array call javascript type object, to check with type “typeof arrayName”
  • Javascript array index start from 0

isArray -> return boolean

Javascript “typeof array” and “typeof object” is the same type “object”. So the isArray method check its array or not with return true and false value.

const languages = ['javascript', 'python', 'golang', 'ruby', 'java']

console.log(Array.isArray(languages)) // Result: true
console.log(Array.isArray('this is string')) // Result: false

form -> convert string to array

The form methods convert string to array. string contain all character count as the array element

const str = "ABCDF,1&*"

const arr = Array.from(str)
console.log(arr) // Result: ["A","B","C","D","F",",","1","&","*"]

join -> convert array to string

The join method convert array to javascript string

const languages = ['javascript', 'python', 'golang', 'ruby', 'java']

const strLanguage = languages.join()
console.log(strLanguage) // Result: "javascript,python,golang,ruby,java"
console.log(typeof strLanguage) // Result: string

push -> add element

The push methods are used to add new elements to the array at the end.

const languages = ['javascript', 'python', 'golang', 'ruby']
languages.push('kotlin')
console.log(languages) // Result: ["javascript", "python", "golang", "ruby", "kotlin"]
languages.push('php')
console.log(languages) // Result: ["javascript", "python", "golang", "ruby", "kotlin", "php"]

unshift -> add element

The unshift methods are used to add a new element to the array at the beginning.

const languages = ['javascript', 'python', 'golang', 'ruby']

languages.unshift('kotlin')
console.log(languages) // Result: ["kotlin", "javascript", "python", "golang", "ruby"]
languages.unshift('java')
console.log(languages) // Result: ["java", "kotlin", "javascript", "python", "golang", "ruby"]

pop -> remove element

The pop methods used to remove the last element of the array

const languages = ['javascript', 'python', 'golang', 'ruby', 'java']

languages.pop()
console.log(languages) // Result: ["javascript", "python", "golang", "ruby"]
languages.pop()
console.log(languages) // Result: ["javascript", "python", "golang"]

splice -> add, remove, replace elements

  • splice method can add elements in anywhere of the array.
  • splice method can replace elements in anywhere of the array.
  • splice method can delete elements in anywhere of the array.
  • so we can call splice method override array.
const languages = ['javascript', 'python', 'golang', 'ruby', 'php']

languages.splice(2, 0, 'C++') // Add element
console.log(languages) // Result: ["javascript", "python", "golang", "ruby", "kotlin"]

languages.splice(2, 2, 'kotlin', 'java') // Replace element
console.log(languages) // Result: ["javascript", "python", "golang", "ruby", "kotlin"]

languages.splice(1, 1) // Remove element
console.log(languages) // Result: ["javascript", "python", "golang", "ruby", "kotlin", "php"]

forEach – call this method for each array element

forEach methods take a callback function which can contain three parameters(element, index number, an array).

const numbers = [1, 2, 3, 4]
let count = 0;
numbers.forEach((element, index, arr) => {
  count += element
})
console.log('Result: ', count) // Result: 10

map -> return new array

map methods similar to forEach function but the map method return a new array

const numbers = [1, 2, 3, 4]
const newNumbers = numbers.map((element) => {
  return element * 2
})
console.log(newNumbers)

filter -> return a new array

filter method is also similar to forEach method, but the filter method returns a new filter array

const numbers = [1, 2, 3, 4, 5]
const newArray = numbers.filter((element) => {
  return element > 2
})

console.log('Result: ', newArray)  // Result: [2, 3, 4]

find -> return singe element or undefined

“find” method used to find a single element of the array. find method take callback function which takes three parameters no.1 element is mandatory. The rest of the two (index, array) are optional.

const products = [
  { name: 'Bike', price: 700 },
  { name: 'Phone', price: 500 },
  { name: 'Computar', price: 600 }
]

const result = products.find( (element) => {
  return element.name === 'Phone'
})

console.log('Result: ', result)
// Result: { name:"Phone", price:500 }

IndexOf, lastIndexOf -> return element index number

indexOf and lastIndexOf methods search for item element of an array and when element found return element position number. When multiple elements is found it will return the first element position number. If an element is not found, its return – 1.

lastIndexOf: To search end to start use the lastIndexOf method

const languages = ['javascript', 'python', 'golang', 'ruby', 'php']
console.log(languages.indexOf('python')) // Result: 3
console.log(languages.indexOf('kotlin')) // Result: -1

some -> return boolean

some methods are used to check values, and if any element matches the conditions. it will return true otherwise return false

const products = [
  { name: 'Bike', price: 700 },
  { name: 'Phone', price: 500 },
  { name: 'Computar', price: 600 }
]

const result = products.some( (element) => {
  return element.price > 500
})

console.log('Result: ', result) // Result: true

every -> return boolean

every method is similar to work as some methods. but every method checks all element matches the conditions to return true, otherwise, it will return false

const products = [
  { name: 'Bike', price: 700 },
  { name: 'Phone', price: 500 },
  { name: 'Computar', price: 600 }
]

const result = products.every( (element) => {
  return element.price > 500
})

console.log('Result: ', result) // Result: false

includes -> return boolean

includes method also used to return boolean. includes methods big difference is, includes method doesn’t take the argument as function. it takes the value as an argument.

const languages = ['javascript', 'python', 'golang', 'ruby', 'php']

console.log('Result: ', languages.includes('javascript')) // Result: true
console.log('Result: ', languages.includes('other-lang')) // Result: true

reduce, reduceRight -> return this case total value

reduce methods is different syntax, reduce methods take two parameters, one is a callback function and other is initialValue. The callback function takes four (current total, current element, current element index, array) parameters two(current total, current element) are mandatory and the rest of the two are optional.

reduceRight: reduceRight has an only difference, reduceRight will start with “end to start /right to left”

const products = [
  { name: 'Bike', price: 700 },
  { name: 'Phone', price: 500 },
  { name: 'Computar', price: 600 }
]

const result = products.reduce( (currentTotal, currentElement, index, arr) => {
  return currentTotal + currentElement.price
}, 0) // 0 as inititial value

console.log('Result: ', result)

slice -> return selected part as new array

slice methods use to select a particular part of the array. slice method takes two parameters which are starting point and ending point.

Note: ending point last will not be counted. As we know array index starts with 0.

const languages = ['javascript', 'python', 'golang', 'ruby', 'php']

console.log(languages.slice(1, 3)) // Result: ["python", "golang"]
console.log(languages.slice(2, 5)) // Result: ["golang", "ruby", "php"]

sort – sort elements of the array

const languages = ['javascript', 'python', 'golang', 'ruby', 'php']
languages.sort()
console.log(languages) // Result: ["golang","javascript","php","python","ruby"]


const numbers = [58, 54, 30, 2, 40, 90, 20]
numbers.sort()
console.log(numbers) // Result: [2,20,30,40,54,58,90]

How to sort object elements of the array.

const products = [
  { name: 'Bike', price: 700 },
  { name: 'Phone', price: 500 },
  { name: 'Computar', price: 600 }
]

products.sort((a, b) => b.price - a.price)
console.log(products)

// Result: [
//  {
//    name: "Bike",
//    price: 700
//  },
//  {
//   name: "Computar",
//   price: 600
//  },
//  {
//    name: "Phone",
//    price: 500
//  }
//]

reverse -> return reverse all elements as a new array

const languages = ['javascript', 'python', 'golang', 'ruby', 'php']
languages.reverse()
console.log(languages) // Result: ["php","ruby","golang","python","javascript"]

Related posts

JS calculate the total number of elements in an array

Sajal Mia

Pure function in javascript

Sajal Mia

Javascript string methods example

Sajal Mia