DEV Community

Cover image for Internal Logics Behind Javascript Array Methods
Ezhil Abinaya K
Ezhil Abinaya K

Posted on

Internal Logics Behind Javascript Array Methods

Array join()
It combines all the elements of an array into a single string.It allows us to specify our own separator between the elements.

const myArr=["HTML","CSS","JS"];
function joinDemo(arr,separator){
let result="";
for(let i=0;i<arr.length;i++){
result+=arr[i];
if(i<arr.length-1){
result+=separator;
}
}
return result;
}
console.log(joinDemo(myArr,"-"));//HTML-CSS-JS
Enter fullscreen mode Exit fullscreen mode

Built-in Logic

const arr=["HTML","CSS","JS"];
console.log(arr.join("-"));//HTML-CSS-JS
Enter fullscreen mode Exit fullscreen mode

Array at()
Returns the value at a specific array index, supporting both positive and negative indexing.

const myArr=["HTML","CSS","JS"];
function atDemo(arr,index){
if(index<0){
index=arr.length+index;
}
return arr[index];
}
console.log(atDemo(myArr,1));//CSS
console.log(atDemo(myArr,1));//JS
Enter fullscreen mode Exit fullscreen mode

Built-in Logic

const arr=["HTML","CSS","JS"];
console.log(arr.at(1));//CSS
console.log(arr.at(-1));//JS
Enter fullscreen mode Exit fullscreen mode

Array pop()
The pop() method removes the last element from an array and returns that removed element.

const myArr=["HTML","CSS","JS"];
function popDemo(arr){
    const removedElement=arr[arr.length-1];
    arr.length=arr.length-1;
    return removedElement;
}
console.log(popDemo(myArr));//JS
console.log(myArr);//[ 'HTML', 'CSS' ]
Enter fullscreen mode Exit fullscreen mode

Built-in Logic

const arr=["HTML","CSS","JS"];
const removed=arr.pop();
console.log(removed);//JS
console.log(arr);//[ 'HTML', 'CSS' ]
Enter fullscreen mode Exit fullscreen mode

Array push()
The push() method adds one or more elements to the end of an array.
Return type: New array length.

const myArr=["HTML","CSS"];
function pushDemo(arr,value){
arr[arr.length]=value;
return arr.length;
}
console.log(pushDemo(myArr,"JS"));//3
console.log(myArr);//[ 'HTML', 'CSS', 'JS' ]
Enter fullscreen mode Exit fullscreen mode

Built-in Logic

const arr=["HTML","CSS"];
const newlength=arr.push("JS");
console.log(newlength);//3
console.log(arr);//[ 'HTML', 'CSS', 'JS' ]
Enter fullscreen mode Exit fullscreen mode

Multiple Values Version

const myArr=["HTML"];
function pushDemo(arr,...values){
    for(let i=0;i<values.length;i++){
        arr[arr.length]=values[i];
    }
    return arr.length;
}
console.log(pushDemo(myArr,"CSS","JS"));//3
console.log(myArr);  //[ 'HTML', 'CSS', 'JS' ]
Enter fullscreen mode Exit fullscreen mode

Array shift()
The shift() method removes the first element from an array and returns that removed element.

const arr=["HTML","CSS","JS"];
function shiftDemo(arr){
    const removedElement=arr[0];
    for(let i=0;i<arr.length-1;i++){
        arr[i]=arr[i+1];
    }
    arr.length=arr.length-1;
    return removedElement;
    }
console.log(shiftDemo(arr));//HTML
console.log(arr);//[ 'CSS', 'JS' ]
Enter fullscreen mode Exit fullscreen mode

Built-in Logic

const arr=["HTML","CSS","JS"];
const removed =arr.shift();
console.log(removed);//HTML
console.log(arr);//[ 'CSS', 'JS' ]
Enter fullscreen mode Exit fullscreen mode

Array unshift()
The unshift() method adds one or more elements to the beginning of an array and returns the new length of that array.

const myArr=["CSS","JS"];
function unshiftDemo(arr,value){
for(let i=arr.length;i>0;i--){
arr[i]=arr[i-1]; 
}
arr[0]=value;
return arr.length;
}
console.log(unshiftDemo(myArr,"HTML"));//3
console.log(myArr);//[ 'HTML', 'CSS', 'JS' ]
Enter fullscreen mode Exit fullscreen mode

Built-in Logic

const arr=["CSS","JS"];
const newLength=arr.unshift("HTML");
console.log(newLength);//3
console.log(arr);//[ 'HTML', 'CSS', 'JS' ]
Enter fullscreen mode Exit fullscreen mode

Array concat()
The concat() method in JavaScript merges two or more arrays and returns a brand-new array without modifying the original arrays.

const arr1=["HTML","CSS"];
const arr2=["JS","React"];
function concatDemo(arr1,arr2){
const result=[];
for(let i=0;i<arr1.length;i++){
result[result.length]=arr1[i];
}
for(let i=0;i<arr2.length;i++){
result[result.length]=arr2[i];
}
return result;
}
console.log(concatDemo(arr1,arr2));//[ 'HTML', 'CSS', 'JS', 'React' ]
Enter fullscreen mode Exit fullscreen mode

Built-in Logic

const arr1=["HTML","CSS"];
const arr2=["JS","React"];
const result=arr1.concat(arr2);
console.log(result);//[ 'HTML', 'CSS', 'JS', 'React' ]
Enter fullscreen mode Exit fullscreen mode

Array copyWithin()
The copyWithin() method copies array elements to another position within the same array. It directly modifies (mutates) the original array without changing its length.
Syntax

array.copyWithin(target, start, end)
Enter fullscreen mode Exit fullscreen mode

target β†’ The index where the copied elements will be pasted.
start β†’ The index from which elements will be copied.
end β†’ The index up to which elements will be copied (exclusive, not included).

const myArr=[1,2,3,4,5];
function copyWithinDemo(arr,target,start){
for(let i=start;i<arr.length;i++){
arr[target]=arr[i];
target++;
}
return arr;
}
console.log(copyWithinDemo(myArr,0,3));//[ 4, 5, 3, 4, 5 ]
Enter fullscreen mode Exit fullscreen mode

Built-in Logic

const myArr=[1,2,3,4,5];
myArr.copyWithin(0,3);
console.log(myArr);//[ 4, 5, 3, 4, 5 ]
Enter fullscreen mode Exit fullscreen mode

Array flat()
The flat() method creates a new array with all sub-array elements concatenated into it recursively up to a specified depth.

const arr = [1, 2, [3, 4], [5, 6]];

function flatDemo(arr) {

    const result = [];

    for (let i = 0; i < arr.length; i++) {

        if (Array.isArray(arr[i])) {

            for (let j = 0; j < arr[i].length; j++) {
                result.push(arr[i][j]);
            }

        } else {

            result.push(arr[i]);

        }
    }

    return result;
}

console.log(flatDemo(arr));//[ 1, 2, 3, 4, 5, 6 ]
Enter fullscreen mode Exit fullscreen mode

Built-in Logic

const arr = [1, 2, [3, 4], [5, 6]];
console.log(arr.flat());//[ 1, 2, 3, 4, 5, 6 ]
Enter fullscreen mode Exit fullscreen mode

Array slice()
The slice() method copies a portion of an array and returns it as a new array without modifying the original one.
Syntax

array.slice(startIndex, endIndex);
Enter fullscreen mode Exit fullscreen mode
const arr=["HTML","CSS","JS","React"];
function sliceDemo(arr,start,end){
const result=[];
for(let i=start;i<end;i++){
result[result.length]=arr[i];
}
return result;
}
console.log(sliceDemo(arr,1,3));//[ 'CSS', 'JS' ]
console.log(arr);//[ 'HTML', 'CSS', 'JS', 'React' ]
Enter fullscreen mode Exit fullscreen mode

Built-in Logic

const arr=["HTML","CSS","JS","React"];
const result=arr.slice(1,3);
console.log(result);//[ 'CSS', 'JS' ]
Enter fullscreen mode Exit fullscreen mode

Top comments (1)

Collapse
 
vidhya_murali_5aabe7784bd profile image
vidhya murali

NiceπŸ˜‡