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
Built-in Logic
const arr=["HTML","CSS","JS"];
console.log(arr.join("-"));//HTML-CSS-JS
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
Built-in Logic
const arr=["HTML","CSS","JS"];
console.log(arr.at(1));//CSS
console.log(arr.at(-1));//JS
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' ]
Built-in Logic
const arr=["HTML","CSS","JS"];
const removed=arr.pop();
console.log(removed);//JS
console.log(arr);//[ 'HTML', 'CSS' ]
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' ]
Built-in Logic
const arr=["HTML","CSS"];
const newlength=arr.push("JS");
console.log(newlength);//3
console.log(arr);//[ 'HTML', 'CSS', 'JS' ]
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' ]
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' ]
Built-in Logic
const arr=["HTML","CSS","JS"];
const removed =arr.shift();
console.log(removed);//HTML
console.log(arr);//[ 'CSS', 'JS' ]
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' ]
Built-in Logic
const arr=["CSS","JS"];
const newLength=arr.unshift("HTML");
console.log(newLength);//3
console.log(arr);//[ 'HTML', 'CSS', 'JS' ]
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' ]
Built-in Logic
const arr1=["HTML","CSS"];
const arr2=["JS","React"];
const result=arr1.concat(arr2);
console.log(result);//[ 'HTML', 'CSS', 'JS', 'React' ]
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)
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 ]
Built-in Logic
const myArr=[1,2,3,4,5];
myArr.copyWithin(0,3);
console.log(myArr);//[ 4, 5, 3, 4, 5 ]
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 ]
Built-in Logic
const arr = [1, 2, [3, 4], [5, 6]];
console.log(arr.flat());//[ 1, 2, 3, 4, 5, 6 ]
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);
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' ]
Built-in Logic
const arr=["HTML","CSS","JS","React"];
const result=arr.slice(1,3);
console.log(result);//[ 'CSS', 'JS' ]