DEV Community

Code_Regina
Code_Regina

Posted on

|JavaScript| JavaScript: Callbacks and Arrays

          -The forEach Method
          -The map Method
          -Intro to Arrow Functions
          -Arrow Function Implicit Returns
          -The filter Method
          -Some and Every Methods
Enter fullscreen mode Exit fullscreen mode

The forEach Method

forEach accepts a callback function.
Calls the function once per element in the array.


const nums = [9, 8, 7, 6, 5, 4, 3, 2, 1];

nums.forEach(function (n) {
 console.log(n * n) 
}); 

nums.forEach(function (el) {
 if (el % 2 === 0) {
 console.log(el)
  }
})

Enter fullscreen mode Exit fullscreen mode

The map Method

The Map creates a new array with the results of calling a callback on every element in the array.
Map is similar to forEach in the sense that it accepts a callback function and it runs that function once per element in the array.

The major difference is that Map generates a new array using the result, using the return value of the callback.

It is a way to map an array from one state to another.


const texts = ['rofl', 'lol', 'omg', 'ttyl'];
const caps = texts.map(function (t) {
 return t.toUpperCase(); 
})

texts; 
caps; 

Enter fullscreen mode Exit fullscreen mode

Intro to Arrow Functions

Arrow functions are syntactocally compact alternative to a regular function expression.


const sqaure = (x) => {
 return x * x; 
}

const sum = (x, y) => {
 return x + y; 
}

Enter fullscreen mode Exit fullscreen mode

Arrow functions allow us to write functions without having to write the keyword function.

Arrow Function Implicit Returns

Implicit returns allows us to shrink arrow functions down even more.


const isEven = function (num) {
 return num % 2 === 0; 
}
const isEven = (num) => {
 return num % 2 === 0; 
}
const isEven = num => {
 return num % 2 === 0; 
}
const isEven = num => {
num % 2 === 0; 
}

Enter fullscreen mode Exit fullscreen mode

implicit returns removes the word return but the function of retuning is still occurring.

The filter Method

The filter method creates a new array with all elements that pass the test implemented by the provided function.



const nums = [9, 8, 7, 6, 5, 4, 3, 2, 1]; 

const odds = nums.filter(n => {
return n % 2 === 1; 

})

const smallNums = nums.filter(n => n < 5); 

Enter fullscreen mode Exit fullscreen mode

Some and Every Methods

Every method test whether all elements in the array pass the provided function. It returns a boolean value.


const words = ["dog", "dig", "log", "bag", "wag"];

words.every(word => {
 return word.length === 3; 
})

words.every(word => word[0] === 'd'); 

words.every(w => {
  let last_letter = w[w.length - 1];
  return last_letter === 'g'
})

Enter fullscreen mode Exit fullscreen mode

Some method is similar to every, but returns true if any of the array elements pass the test function.


const words = ['dog', 'jello', 'log', 'cupcake', 'bag', 'wag'];

words.some(word => {
 return word.length > 4; 
})

words.some(word => word[0] === 'Z'); 

words.some(w => w.includes('cake'))

Enter fullscreen mode Exit fullscreen mode

Top comments (1)

Collapse
 
smlka profile image
Andrey Smolko

Hey, just put my two cents.
'Arrow functions are syntactocally compact alternative to a regular function' this is more effect than cause.
The main difference in how both type of functions work with THIS
Good luck!