Js String & Array Methods

Array Methods

| NOTICE |
Array indexes start with 0 .
[0] is the First array element,
[1] is the Second ,
[2] is the Third .

Changing elements

Array elements are accessed using their Index Number.

var x = ["java" , "css" , "c++" , "php"];// Before
x[0] = "html";
x[2] = "javascript";
var y = x;//After

Before Array (x):

After Array (y):

Length Property

The Length property provides an easy way to append a new element to an array.

var x = ["one","two","three","four"];
x[x.length] = "five"; // x.length = 4
var y = x;

Before Array (x):

After Array (y):

toString()

The Javasript method toString() converts an array to String of(comma separated) array values.

var x =["hello" , "friends","welcome","to","Sololearn"];
var y =x.toString();
var z = typeof y;

Array (x):

Result (y):

typeof y (z):

join()

1)The join() method also joins all array elements into string, and returns the string.
2)The Element will be separated by a specified separator.
3)The default separator is comma(,) .

var x = ["welcome "," to ", " Sololearn."];
var y = x.join(" ");
var z = x.join(" * ");

Array (x):

First Result (y):

Second Result (z):

pop() - Popping

The pop() method removes the last element from an array.

var x = ["javascript "," is easy"," to Learn."];
var y = x.pop(); //The value of y is "to learn."
var z = x ;

Array(x):

Popping (y):

After Array (z):

push() - pushing

The push() method adds a new element to an array(at the end):

var x = [" Javascript " , " is "];
var y = x.push(" easy "); //The value of y is 3 .
var z = x;

Array (x):

pushing (y):

After Array (z):

shift() - Shifting

1)Shifting is equivalent to popping,work on the first element insted of the last.
2)The shift() method removes the first array element and "shifts" all other elements to a lower index.

var x = ["one","two","three","four"];
var y = x.shift();//Removes first element(one) from x
var z = x;

Array (x):

shifting (y):

After Array (z):

unshift()

The unshift() method adds a new element to an array(at the begining), and "unshifts" older elements.

var x = ["one","two","three","four"];
var y = x.unshift("zero");
var z = x;
//This example Y adds a new element(zero) to x .
//Y returns the new Array Length

Array (x):

unshifting (y):

After Array (z):

Deleting Elements

Since Javascript arrays are objects,
elements can be deleted by using the Javascript operator delete .

var x =
["games", "girls", "coding", "sololearn"];
delete x[1];
var y = x;

Before Array (x):

After Array (y):

| NOTICE |
using delete() on array elements leaves undefined whole in the array.
use pop() or shift() instead.

splice() - Add Elements

The splice() method can be used to add new items to an array.
This method changes the original array.

| NOTICE |
array.splice(2 , 0 , "js" , "php");
1)The first parameter(2) defines the position Where new elements should be added(spliced in).
2)The second parameter(0) defines How many elements should be removed.
3)The rest of the parameters("js" , "php") define the new elements to be added.

var x = ["css","sql"];
x.splice(0 , 0 , "html" );
var y = x;
x.splice(2 , 0 , "js","php");
var z = x;

Array (x):

First Result (y):

Second Result (z):

splice() - Remove Elements

With clever parameter setting, you can use splice() to remove elements without leaving "holes" in the array.

| NOTICE |
array.splice( 1 , 2 );
1)The first parameter(1) defines the position where elements should be added(splice in).
2)The second parameter(2) defines How many elements should be removed.
3)The rest of the parametes are omitted.no new elements will be added.

var x = ["html","css","js","php","sql"];
var y = x.splice(1,2);
var z = x;

Before Array (x):

Removed (y):

After Array (z):

sort()

The sort() method sorts an array alphabetically.

var x = ["samsung","sony","htc","huawei","oppo","lg","apple"];
var y = x.sort();

Array (x):

Sorted Array (y):

reverse()

The reverse() method reverses the elements in array.
you can use it to sort() an array in descending order:

var x = ["E","B","C","D","A"];
var y = x.sort();
var z = x.reverse();

Array (x):

Sorted Array (y):

Reversed Array (z):

Numeric Sort

| NOTICE |
1)By default, the sort() function sorts values as strings.
2)This works well for strings("Apple" comes before "Banana").
3)However,if numbers are sorted as strings, "25" is bigger than "100" , because "2" is bigger than "1".
4)Because of this, the sort() method will produce incorrect result when sorting numbers.
5)You can fix this by providing a compare function.

Default sort :(w):

Descending sort (x1):

Descending sort (x2):

Ascending sort (z1):

Ascending sort (z2):

The Compare Function

| NOTICE |
1)The purpose of the compare function is to define an alternative sort order.
2)The compare function should return a negative , zero or positive value, depending on the arguments .
function(a,b){return a-b}
3)when the sort() function compares two values , it sends the values to the compare function, and sorts the values according to the returned (Negative , Zero , positive)value.
Example :-
i)when comparing 40 and 100,the sort() method calls the compare function(40,100).
ii)The function calculates 40-100 , and returns -60(a Negative value).
iii)The sort function will sort 40 as a value lower than 100.

Find the Highest or Lowest value

you can use compare function to find the highest or Lowest value in array.

var arr = [20 , 100 , 230 , 80 , 50 , 160];
var y = arr.sort(function(a,b){return a-b});
var min = y[0];
var x = arr.sort(function(a,b){return b-a});
var max = x[0];

Array (arr):

Lowest (min):

Highest (max):

concat() - Joining Arrays

The concat() method creates a new array by concatenating two arrays.
This method can take any number of array arguments.

var x = ["Android" , "Windows" , "Ios"];
var y = [1,2,3];
var z = ["Html","Css","Js"];
var x_y = x.concat(y);
var x_y_z = x.concat(y , z);

Join 2 Arrays (x_y):

Join 3 Arrays (x_y_z):

slice() - Slicing an Array

1)The slice() method slices out a piece of an array into a new array.
2)This method can take two arguments like slice(2,5).
3)The method then selects elements from the start argument, and up to(but not including) the end argument.
4)if the end argument is omitted, like slice(2) , the slice() method slices out the rest of the array.

var arr = ["Html","Css","Keep","Learning","Javascript"];
var x = arr.slice(1);
var y = arr.slice(3);
var z = arr.slice(2,5);

Array (arr):

slice (1) :

slice (3) :

slice (2,5) :

valueOf()

| NOTICE |
1)The valueOf() method is the default behavior for an array.
2)It converts an array to a Primitive value.
3)Javascript will automatically convert an array to a string when a primitive value is expected.
4)Because of this, all these examples will produce the same result.
5)all Javascript objects have the valueOf() and toString() methods.

var arr = ["Html","Css","Js"];
fir.innerHTML = arr;
sec.innerHTML = arr.valueOf();
thir.innerHTML = arr.toString();

Array (fir):

valueOf (sec):

toString (thir):

lastIndexOf()

1)The lastIndexOf() method is used to returns the last index at which a given element can be found in the array.
2)Or -1 if it is not found.
3)case, The array is searched from back to font.

var x = ["Python","C++","C","java"];
var y = x.lastIndexOf("Java");
var z = x.lastIndexOf("C" , 4);
second parameter(4) returns the starting position for searching backwords

Array (x):

search "Java" (y):

search "C" (z):

map()

The map() method is used run a function on every item in the array
And returns the results in an array.

function calculateSquare(element , index , array){
return ( element * element );
}
var squareList = [1,2,3,4,5];
var x = squareList.map(calculateSquare);

Array (squareList):

Result (x):

some()

1)The some() method executes a callback function once for each element present in the array until it finds one where the callback returns a true value.
2)if one is found,
some immediately return true,
otherwise, some returns false.
3)The example below callback function is NeedToReorder.

function needToReorder(element , index , array){ return (element < 4);}
var a = [5 , 6 , 8 , 5 , 14];
var b = [11 , 2 , 7 , 14 , 5];
var ReorderInv1 = a.some(needToReorder);
var ReorderInv2 = b.some(needToReorder);

ReorderInv1 :

ReorderInv2 :

every()

1)The every() method is used run a function on items in the array while that function is returning true.
2)It returns true if the function returns true for every item in the array.

function every_test( element , index , array){
return ( element > 4)}
var x = [5 , 6 , 8 , 5 , 14];
var y = [11 , 2 , 7 , 14 , 5];
var fir_every = x.every(every_test);
var sec_every = y.every(every_test);

Fir_every :

Sec_every :

filter()

The filter() method is used run a
function on every item in the array and
returns an array of all items for which the function returns true.

function testing_filter1(element , index , array){
return (element > 5);}
function testing_filter2(element , index , array){
return (element < 5);}
var num = [1 ,7 , 4 , 2, 6, 5 , 9 , 3];
var x = num.filter(testing_filter1);
var y = num.filter(testing_filter2);

Array (num):

Greater than 5 (x):

Less than 5 (y):

forEach()

The forEach() method executes a callback function once for each element present in the array.

function forEach_test(element , index , array){
alert("arr[" + index + "] = " + element + " ;");
}
function for_Each(){
var x = [1,2,3];
x.forEach(forEach_test);
}

Array (x):

reduce()

The reduce() method executes a function on every item in the array and collect the results from previous calls.

function reduce_test1(previousValue , currentValue , index , array){
return (previousValue + currentValue);}
function reduce_test2(previousValue , currentValue , index, array){
return (currentValue - previousValue);}
function reduceTest(){
var arr = [2,4,6,8,10];
var x = arr.reduce(reduce_test1);
var y = arr.reduce(reduce_test2);
}

Array (arr):

previous + current (x):

current - previous (y):

reduceRight()

The reduceRight() method executes a function on every item in the array and collects the results from previous calls,
but in reverse order.

function reduceRight_test1(previousValue , currentValue , index , array){
return previousValue + currentValue;}
function reduceRight_test2(previousValue , currentValue , index, array){
return currentValue - previousValue;}
function reduce_right(){
var arr = [2,4,6,8,10];
var x = arr.reduceRight(reduceRight_test1);
var y = arr.reduceRight(reduceRight_test2);
}

Array (arr):

previous + current (x):

current - previous (y):

copyWithin()

The copyWithin() method copies array Elements within the array , to and from specified positions.
example (x):-
copy the first two array elements to the last two array elements.

var arr = ["Hello","Friend","How","are","You"];
var x = arr.copyWithin(2, 0);
var y = arr.copyWithin(1,2,4);

Array (arr):

copyWithin 2,0 (x):

second Test 1,2,4 (y):

find()

1)The find() method returns the value of the first element in an array thats pass a test(provided as a function).
2)This method executes the function once for each element present in the array.
3)If it finds an array element where the fucntion returns a true value,find() returns the value of that array element(and does not check the remaining values)
array.find
(function(currentValue , index , array),thisValue)

var ages = [10,15,20,25,30,35];
function testing_find(age){
return age >= Your_Age;}
var x = ages.find(testing_find);

Your_Age :

Ages:

Your age above (x):

findIndex()

1)The findIndex() method returns the index of the first element in an array that pass a test(provided as a function)
2)This method executes the function once for each element present in the array.
3)If it finds an array element where the fucntion returns a true value,findIndex() returns the value of that array element(and does not check the remaining values)
4)Otherwise it returns -1.

var ages = [10,15,20,25,30,35,40,45];
function fI_testing(age){
return age >= Your_Age;
}
var x = ages.findIndex(fI_testing);

Your_Age :

Ages :

findIndex your Age above (x):

isArray()

The isArray() method returns true if the object is an array,and false if not.

var x = ['Hello','World!'];
var y = Array.isArray(x);

Array (x):

x is an array ? (y):

fill()

The fill() method fills all the elements in an array with a static value.
it's possible to specify the index for starting and ending fill(),
By default it changes the whole array.

var arr = ["Mint","Arch","Kali","Suse"];
var y = arr.fill("Fedora", 0 , 2);
var z = arr.fill("Debian");

Array (x):

Fill "Fedora" (y):

Default, Fill "Debian"(z):

keys()

The keys() method returns an array iterator object with the keys of an array.

var arr = ["xp","vista","win7","win10"];
var x = arr.keys();

Array (arr):

Result (x):

entries()

The entries() method returns an array iterator object with key/value pairs.
For each item in the original array, The new iteration object will contain an array,
the new iteration object will contain an array with the index as the key, and the item value as the value.
[0 , "xp"] [1 , "vista"]
[2 , "win7"] [3 , "win10"]

var arr = ["xp","vista","win7","win10"];
var x = arr.entries();

Array (arr):

Result (x):

from()

The Array.from() method creates a new array instance from an Array-like or iterable object.
1)array-like objects(objects with a length property and indexed elements)
or
2) iterable objects(objects where you can get it's elements, such as Map and Set).

x = Array.from("Keep Learning.Good Luck!");
arr_map = new Map([[2,4],[4,6],[6,8]]);
y = Array.from(arr_map);

Simple From (x):

Array (arr_Map):

From Used to Map (y):

Other Array Methods Resources

Websites

Youtube Videos

My Previous Codes

Created By ☆Sampath👻

Javascript Array Methods Full Tutorial