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"]
