Sitemap

Javascript Array Methods(at, concat, copyWithin, entries, every)

4 min readOct 3, 2023

--

Press enter or click to view image in full size

1.Array.at()

This methods accepts only one parameter(single value) and its is not mandatory, if parameter is not passed means its return the first element (0th position of the array), because default parameter value is 0

The Array.at method accepts a integer value and return the element at that index.It accepts

  1. Positive value
  2. Negative value

Positive value will count forward from the start of the array, where as Negative value count back from the last item in the array.

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];

console.log(arr.at(3)); // 4
console.log(arr.at(-2)); // 8
console.log(arr.at()); // 1
console.log(arr.at() === arr[0]); //true

Note: arr[0] is equal to arr.at(0)

2.Array.concat()

The Array.concat() method concatenates (merge) two or more arrays.The Array.concat() method returns a new array, containing the merged arrays.The Array.concat() method does not change the original arrays.

const array1 = ['a', 'b', 'c'];
const array2 = ['1', '2', '3'];
const array3 = array1.concat(array2);
console.log(array3); //[ 'a', 'b', 'c', '1', '2', '3' ]

//syntrax
Array.concat(val)
Array.concat(val1,val2)
Array.concat(val1,val2,...,valN)

These new values can be numbers, strings, boolean, objects, or even, arrays.

const arr1 = [1, 2, 3]
const arr2 = [4, 5, 6]
const arr3 = [7, 8, 9]

const aar4 = arr2.concat(arr3, arr1)
console.log(arr4)// [4, 5, 6, 7, 8, 9, 1, 2, 3]

The above code , we use the concat method on arr2 which means the contents of arr2 are first in the merged array.

For the arguments, we pass arr3 first, which means the contents of arr3 are next in the merged array, then followed by the contents of arr1.

const letters = ["a", "b", "c"];

const alphaNumeric = letters.concat(1, [2, 3]);

console.log(alphaNumeric);
// results in ['a', 'b', 'c', 1, 2, 3]

3.Array.copyWithin()

This method is used to replace the array elements from some position to some position with the same array elements to the target position.

const array1 = ['a', 'b', 'c', 'd', 'e','f'];

console.log(array1.copyWithin(1, 3, 5)); // a,d,e,d,e,f

copyWithin methods accepts 3 arguments

  1. Target(required)
  2. Start (optional) ==> default is 0(zero),if nothing passed 0 will assign
  3. End (optional) ==> default is array.length, if nothing passed array.length will assign

It will coping the element from start position to end position -1.

Get Manikandan L’s stories in your inbox

Join Medium for free to get updates from this writer.

In the above code first argument is 1, that means need to replace the values from position 1 that is b, 2nd argument is 3 and 3rd argument is 5, that means the elements copying from 3rd position to 4th position (5–1) and start replacing from position 1 onwards replacing two elements , b is replaced with d and c is replaced with e, no changes in the remaining elements

It will modify the original Array.

4.Array.entries()

The Array.entries works on iterable objects and does mutate the original array, no need to pass any arguments.This method returns an iterator object for an array.

const array1 = ['a', 'b', , 'd'];

const iterator1 = array1.entries();

console.log(iterator1.next().value); //Array [0, "a"]
console.log(iterator1.next().value); //Array [1, "b"]

Array.entries return iterable objects and you can iterate the objects only through for of loop only. Even you can iterate the empty values also.

const array1 = ['a', 'b', , 'd'];

const iterator1 = array1.entries();

for (let [key, value] of iterator1) {
console.log(key, value);
}

//output
//0 a
//1 b
//2 undefined
//3 d

Array.entries() is used to create an iterator for the array, and then a for...of loop is used to iterate over the entries. The entries are destructured into [index, value], where index is the index of the element in the array, and value is the value of the element.

This method is particularly useful when you need both the index and value of array elements during iteration. It provides a cleaner and more expressive way to achieve this compared to using a regular for loop.

5.Array.every()

The every() executes a callback function for each element in the array of iteration.Every method accepts two arguments one is callback function and the another one is thisArg

Callback function accepts 3 arguments like current element, index, and the original array.Index and the original array are optional. Current element is the element of each iteration in the array.

thisArg This parameter is optional, it holds the context to be passed as this is to be used while executing the callback function. If the context is passed, it will be used like this for each invocation of the callback function, otherwise undefined is used as default.

Every method returns only boolean values only that is true or false.Based on the user condition it returns the value

Once the callback function returns the false value the every method stops the iteration and returns the false value.

let arr = [1, 2, 3, 4, 5, 6, 7, 8];

let isValuesLessThan5 = arr.every((ele, i) => {
console.log('Iteration' + '_' + i, ele); return ele < 5;
});

console.log('isValuesLessThan5', isValuesLessThan5);

//output
Iteration_0 1
Iteration_1 2
Iteration_2 3
Iteration_3 4
Iteration_4 5
isValuesLessThan5 false

The above code stops the iteration when the callback functions returns false value, so the code stops at the 5th iteration, in the 5th the callback returns false.

let arr = [1, 2, 3, 4, 5, 6, 7, 8];

let isValuesLessThan9 = arr.every((ele, i) => {
console.log('iteration' + '_' + i, ele);
return ele < 9;
});

console.log('isValuesLessThan5', isValuesLessThan9);

//output
iteration_0 1
iteration_1 2
iteration_2 3
iteration_3 4
iteration_4 5
iteration_5 6
iteration_6 7
iteration_7 8

isValuesLessThan9 true
//anonther syntax

let arr = [1, 2, 3, 4, 5, 6, 7, 8];

function checkGreaterOrNot(ele, i) {
console.log('iteration' + '_' + i, ele);
return ele < 9;
}

let isValuesLessThan5 = arr.every(checkGreaterOrNot);

console.log('isValuesLessThan5', isValuesLessThan5);

//output
iteration_0 1
iteration_1 2
iteration_2 3
iteration_3 4
iteration_4 5
iteration_5 6
iteration_6 7
iteration_7 8

isValuesLessThan9 true

--

--