Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

javascript
communitycreator
accessor
concat
filter

JavaScript accessor​ methods

Martins Victor Onuoha

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

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); // true 
console.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); // 2
console.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 portion of the original arrayWhere the copy only contains elements within the specified start and end indices (end not included).. The slice method accepts two optional arguments, start index and end index. If no argument is provided, a shallow copy of the array is returned.

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.

RELATED TAGS

javascript
communitycreator
accessor
concat
filter

CONTRIBUTOR

Martins Victor Onuoha

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Keep Exploring