The most important JavaScript callback function

Ariful islam
3 min readNov 2, 2020

If you start learning the javascript programming language, you should know these types of functions which are called a callback function. Today we are discussing these callback functions.

.map()

Basically accessing an array property we are using for loop & and that also good.
but javascript have a callback function which called map().The map() method return a new array populated with the results of calling a provided function on every element in the calling array.

const array = [10, 20, 30, 40];
const test = array.map(item => item + item);
console.log(test);
expected output: [20, 40, 60, 80]

.reduce()

When we are find out sum of nth number that’s time we are use for loop. But javascript have a callback function which called reduce(). Bassically this function use for sum of nth number..
Suppose to get and you like this…

let sum = 0;
let array1 = [2,4,5,6,7,8];
for(let i = 0; i < array1.length; i++){
sum = sum + array1[i];
}
console.log(sum);
expected output: 32

reduce function example:
const array1 = [2,4,5,6,7,8];
const result = array1.reduce((sum, index) => sum + index,0)
console.log(result);
expected output: 32

.filter()

If you have an array and you want to filter out an element from the array that’s time you can use this filter() function.

Here my data:

var pilots = [

{id: 2, name: “Wedge Antilles”, faction: “Rebels”,},

{id: 8, name: “Ciena Ree”, faction: “Empire”,},

{id: 40, name: “Iden Versio”, faction: “Empire”,},

{id: 66, name: “Thane Kyrell”, faction: “Rebels”,}

]

const test = pilots.filter(item => item.faction === “Rebels”);
console.log(test)
expected output:
[{ id: 2, name: ‘Wedge Antilles’, faction: ‘Rebels’ },
{ id: 66, name: ‘Thane Kyrell’, faction: ‘Rebels’ }]

.find()

This array method does exactly what it says: it finds what you looking for.
This array method returns the first value that’s correspondence to the passed condition. and this method reruns an object. let see an example…

var pilots = [
{id: 2, name: “Wedge Antilles”, faction: “Rebels”,},
{id: 8, name: “Ciena Ree”, faction: “Empire”,},
{id: 40, name: “Iden Versio”, faction: “Empire”,},
{id: 66, name: “Thane Kyrell”,faction: “Rebels”,}
]
const test = pilots.find(item => item.faction === “Rebels”);
console.log(test)

Expected Output:
{ id: 2, name: ‘Wedge Antilles’, faction: ‘Rebels’ }

Example 2:
var number = [10,20,30,40,50];
const test = number.find(item => item > 15);
console.log(test);

Expected Output:
20

.forEach()

forEach() this function called callback function. this take maximum three argument.
1. value of an array.
2. index of an array.
3. array object being traversing.

for example:
const number = [10,20,30,40,50];
number.forEach((item) => console.log(item) );
expected output:
10
20
30
40
50

example 2:
const number = [10,20,30,40,50];
number.forEach((item, index) => console.log(item, index) );
expected output:
10 0
20 1
30 2
40 3
50 4

.Join()

This join method returns a new string by concatening of the all element an array separated by comma.
for example:
const name = [‘Ariful’, ‘Islam’, ‘Shoriful’, ‘Khan’];
console.log(name.join())

Expected Output:
Ariful,Islam,Shoriful,Khan

.indexOf()

The indexOf method take a parameter which called index number. and this index number find the location of the searching array value.
for example:
const name = [‘Ariful’, ‘Islam’, ‘Shoriful’, ‘Khan’];
console.log(name.indexOf(‘Shoriful’));

Expected Output:
Index number: 2

example 2:
const number= [10,50,60,20,45,35];
console.log(number.indexOf(35))

Expected Output:
Index number: 5

.push()

The push method does exactly added one or more element in the end of the array.

For example:
const number = [10,50,60,20,45,35];
number.push(100);
console.log(number);

Expected Output:
[
10, 50, 60, 20,
45, 35, 100
]

Example 2:

const name = [‘Ariful’, ‘Selim’, ‘Kalam’];
name.push(‘Balam’);
console.log(name);

Expected Output:
[ ‘Ariful’, ‘Selim’, ‘Kalam’, ‘Balam’ ]

.pop()

The pop method does exactly delete one or more elements from the last point in the array.

For example:
const name = [‘Ariful’, ‘Selim’, ‘Kalam’];
name.pop();
console.log(name);

Expected Output:
[ ‘Ariful’, ‘Selim’ ]

Example 2:
const number = [10,20,30,40,60,70,5];
number.pop();
console.log(number);

Expected Output:
[ 10, 20, 30, 40, 60, 70 ]

.shift()

The shift method deletes the first element from an array.

for example:
const number = [10,20,30,40,60,70,5];
number.shift();
console.log(number);

Expected Output:
[ 20, 30, 40, 60, 70, 5 ]

Example 2:
const name = [‘Arif’, ‘Kalam’, ‘Balam’, ‘Taher’];
name.shift();
console.log(name);

Expected Output:
[ ‘Kalam’, ‘Balam’, ‘Taher’ ]

--

--