How to visualize some types of values in programming
Typically, an array is an ordered series of values encompassing different data types like numbers, strings, and even nested arrays.
Each item is converted into a string and then concatenated, with commas as their separators. For instance:
const array = [3, 4, '5a', '6b']; console.log(array.toString()); // Result:'3,4,5a,6b'
This is another useful method that operates in a similar way as the previous method.
Because how this method works is that it takes all the items in an array and “join” them together into a single string.
Automatically, the separator used to join the items is a comma, but you can freely modify the separator as an argument. For instance:
const recipe= ['Rice', 'Steak', 'Vegetables']; console.log(recipe.join()); // Result: Rice,Steak,Vegetable console.log(recipe.join(' and ')); // Result: Rice and Steak and Vegetable console.log(recipe.join('-')); // Result: Rice-Steak-Vegetable
This method is simply used to find the first instance of a specific item within an array.
It will return the index—hence the name—of the item if it is found in the array. However, if the item is not found, the method will return “-1”.
const beasts = ['ant', 'bison', 'camel', 'duck', 'bison']; console.log(beasts.indexOf('bison')); // Result: 1
One useful method for looping through the items of an array and doing a specific action on each item.
This method will take a function as an argument, which is then executed once for each item inside the array. As the function is executed, the current item is passed as an argument to the function.
const arrayTest = ['one', 'second', '3']; arrayTest.forEach(item => console.log(item)); // Result:'one' // Result:'second' // Result:'3'
It can be used as an alternative to a for loop, and often results in more concise code.
This method enables you to fetch an item from a specific index within the array.
If the index you provided is out of range, the method will return undefined.
const arrayTest = ['one', 'second', '3', '4th']; console.log(arrayTest.at(2)); //Result: '3'
In the example above, the method is called on the arrayTest array to fetch the item at index 2, which is ‘3’.
This simple method lets you take out the last item inside an array and then return it as a different value, for example:
const arrayTest = [3, 4, 5, 6]; console.log(arrayTest.pop()); //Result: '6' console.log(arrayTest); //Result: '[3, 4 ,5]'
Compared to the last method, this one is a more versatile method for modifying arrays compared to the last one. It enables you to add, remove, or even replace items within an array.
const recipe = ['Rice', 'Soy Sauce', 'Vegetables', 'Eggs']; // Inserts at index 1 recipe.splice(1, 0, 'Garlic'); console.log(recipe); // Result: Array ['Rice', 'Garlic', 'Soy Sauce', 'Vegetables', 'Eggs'] // Replaces 1 item at index 3 recipe.splice(3, 1, 'Meat'); console.log(recipe);
The push() method is an easy and straightforward way to add one (or more) items to the end of an array.
const recipe = ['Rice', 'Soy Sauce', 'Vegetables', 'Eggs']; recipe.push('Sesame Oil', 'Chili Sauce'); console.log(recipe); // Result:Array ['Rice', 'Garlic', 'Soy Sauce', 'Vegetables', 'Eggs', 'Sesame Oil', 'Chili Sauce']
This simple method is used to delete the first item from an array and return that item. Example:
const recipe = ['Rice', 'Soy Sauce', 'Vegetables', 'Eggs']; recipe.shift(); console.log(recipe); // Result:Array ['Soy Sauce', 'Vegetables', 'Eggs']
Opposite to the previous method, the unshift() method allows you to add one or more items to the beginning of an array.
const recipe = ['Soy Sauce', 'Vegetables', 'Eggs']; recipe.unshift('Beef'); console.log(recipe); // Result:Array ['Beef', 'Soy Sauce', 'Vegetables', 'Eggs']
This method—would you guess—allows you to fill all or specific parts of an array with a static value.
This fill() method also modifies the original array by setting the values of one or more items into the specified value.
const arrayTest = [3, 4, 5, 6]; arrayTest.fill(2); console.log(arrayTest); // Result: Array [2, 2, 2, 2]
To fill only specific parts of an array here’s an example how to do it:
arrayTest.fill(7, 2, 4); console.log(arrayTest); // Result: Array [3, 4, 7, 7]
In this code, the method fills the number 7 into the array from position 2 until position 4.
Functions exactly as described – it reverses the order of items in an array.
It’s a simple method that also modifies the original array by modifying the order of its items.
const arrayTest = [3, 4, 5, 6]; arrayTest.reverse(); console.log(arrayTest); // Result:Array [6, 5, 4, 3]
The Includes() method helps you determine whether an array contains a particular item.
It returns a boolean “true” or “false” value depending on whether the item exists in the array.
const recipe = ['Beef', 'Soy Sauce', 'Vegetables', 'Eggs']; console.log(recipe.includes('Chili Sauce')); // Result:false
This method is similar to the previous method as it allows you to check whether all the items in an array pass a certain condition that you can set as arguments.
It also returns another true or false value indicating whether all the items in the array met the certain condition or not.
const isBelowLimit = (limit) => limit < 50; const arrayTest = [2, 22, 19, 23, 42, 49]; console.log(arrayTest.every(isBelowLimit)); // Result:true
The some() method is also similar to the previous methods above. It checks whether at least one item in an array meets a particular condition.
If any item in the array satisfies the test, it returns a true boolean value, otherwise it returns false.
const arrayTest = [2, 22, 19, 23, 42, 49]; // Checks whether an item is odd const odd = (item) => item % 2 !== 0; console.log(arrayTest.some(odd)); // Result:true