JavaScript accessor methods
In JavaScript, arrays are list-like objects whose prototype has functions and methods to perform bulk operations, mutations, and traversals. Arrays in JavaScript are dynamic and can contain a collection of elements of mixed types including strings, numbers, objects:
const mixedTypes = [‘Martins’, ‘🐮’, ’Sam’, [1, 2, 3], { name: ‘David’ } ];
Arrays in JavaScript only use numbers as element index. One thing to note about arrays in JavaScript is that they aren’t dense data structures. Instead, the length of the array can be changed at any time, and data can be stored at non-contiguous locations in the array (as opposed to statically typed languages where the length and element type is defined on initialization).
Accessor methods
JavaScript accessor methods do not modify the original /existing array, instead, they return a new modified array based on the original array.
Below are a few JavaScript accessor methods:
concat
The concat method is used to join/merge two or more arrays into one.
const barn = ['🐮', '🐑', '🐔'];const feed = ['🥬', '🍃', '🌱'];const barnAndFeed = barn.concat(feed);console.log(barnAndFeed); // [ '🐮', '🐑', '🐔', '🥬', '🍃', '🌱' ]
filter
The filter method takes a function as an argument, the provided function acts as the condition against which each element is tested. A new array is created containing only elements that pass the test.
const farm = [{ name: 'cow', avatar: '🐮', type: 'animal'},{ name: 'sheep', avatar: '🐑', type: 'animal'},{ name: 'hen', avatar: '🐔', type: 'animal'},{ name: 'lettuce', avatar: '🥬', type: 'plant'},{ name: 'mushroom', avatar: '🍄', type: 'plant'}];const plantsOnly = farm.filter(element => element.type === 'plant');console.log(plantsOnly);
includes
The includes method checks whether an array includes a certain value among its elements. It returns true if a value is found and returns false if no matching element is found.
const farm = ['🐮', '🐑', '🐔'];const farmHasChicken = farm.includes('🐔');const farmHasRabbit = farm.includes('🐰');console.log(farmHasChicken); // trueconsole.log(farmHasRabbit); // false
indexOf
The indexOf method returns the first index at the point in which a given element is found in any given array. This method returns -1 if no element is found.
const farm = ['🐮', '🐑', '🐔'];const whereIsCow = farm.indexOf('🐔');const whereIsRabbit = farm.indexOf('🐰');console.log(whereIsCow); // 2console.log(whereIsRabbit); // -1
join
The join method creates and returns a new string by concatenating all of the elements of an array into one string separated by commas. The elements can also be separated by any separator of your choice (instead of commas), just by passing in an optional argument.
const farm = ['🐮', '🐑', '🐔'];const oneFamily = farm.join();const withLettuce = farm.join('🥬');console.log(oneFamily); // 🐮,🐑,🐔console.log(withLettuce); // 🐮🥬🐑🥬🐔
slice
The slice method returns a shallow copy of a
const farm = ['🐮', '🐑', '🐔'];const stringFarm = farm.toString();const noCows = farm.slice(1);const onlyCows = farm.slice(0, 1);console.log(farm); // [ '🐮', '🐑', '🐔' ]console.log(noCows); // [ '🐑', '🐔' ]console.log(onlyCows); // [ '🐮' ]
toString
The toString method returns the string representation of the array and its elements.
const farm = ['🐮', '🐑', '🐔'];const stringFarm = farm.toString();console.log(stringFarm); // 🐮,🐑,🐔
Mutator methods, iteration methods, and accessor methods are the most common array methods in Javascript. You can use most of them in practical terms, others you can use together to perform complex data manipulation on JavaScript array objects.
You can find all the examples used here.
