Helpers

Question 1

How were we able to use helpers in the past?

Answer 1

Utility libraries like lodash

Question 2

List all of the array helper methods in ES6

Answer 2

• forEach
• map
• filter
• find
• every
• some
• reduce

Being proficient in these will help with collections of data, the cornerstone of web development

Question 3

What is the purpose of an array helper?

Answer 3

To help with iteration over an array

Question 4

What is the forEach helper?

Answer 4

colors. forEach(function(color){
console. log(color);

});

function(color) is an iterator function, takes an element in the array, runs something then returns, repeats then with the next item in the array. Inside the iterator you can do whatever you want with the element/value

WHY? - Much less code logic on the screen and less error prone

Question 5

What is a naming convention for forEach element callback? Assume the array name is plural

Answer 5

If the array name is plural, the callback function and the element argument should be singular

Question 6

Say you have numbers.forEach(adder)…why would you not use adder()?

Answer 6

Because it will immediately call the function and then pass the result to forEach. Instead we want to hold the function for a future call with all array elements

Question 7

What is a practical use of the forEach helper?

Answer 7

forEach helper is the swiss army knife of array helpers

Question 8

What is the most widely used array helper?

Answer 8

The map helper

Question 9

Why is the map array helper so special?

Answer 9

In large complex JS apps, you want to avoid mutating or changing data. Instead you want to return a new state.

For example, return to me double numbers of an existing array with numbers in the array.

Question 10

Explain what’s going on here:

var doubled = numbers.map(function(number){

return number * 2;

})

Answer 10

Each number in the numbers array is being passed into the callback and is returning a result that is being placed in a new array. Therefore ‘doubled’ is pointing to a new array with the elements doubled.

Note the return statement is CRUCIAL!

Question 11

What does it mean to pluck an array? What array helper helps with plucking?

Answer 11

Map

Question 12

What is a practical example of using map array helper?

Answer 12

When dealing with like twitter, facebook, places where there is a lot of posts. Backend returns to you an array of objects that are posts and you need to map out the different values from the object

Question 13

Explain how filter array helper works

Answer 13

We pass an element out of our source array and pass it into our iterator function. That iterator function has to return either a truthy or a false value if it returns. If truthy, it’ll be included in a result array so the array that gets returned from the filter helper.

JUST LIKE MAP DO NOT FORGET YOUR RETURN STATEMENT!!!

Question 14

What is a practical example of when you want to use the filter array helper?

Answer 14

When you want to get comments associated with a post. Whenever you’re working on a client side applicatio you’ve got a list of records and you need to filter

var post = { id: 4, title: “New Post”};

var comments = [
 {postId: 4, content: 'awesome post'},
 {postId: 3, content: 'it was ok'},
 {postId: 4, content: 'neat'}
 ];

function commentsForPost(post, comments){
 return comments.filter(function(comment){
 return comment.postId == post.id;
 });
}

commentsForPost(post, comments);

Question 15

What is the purpose of the find array helper? How does it work?

Answer 15

To find a particular element in an array. Note: Once it finds one of the values it will immediately exit.

Again, the return statement is necessary

var posts = [
 {id: 1, title: 'New Post'},
 {id: 2, title: 'Old Post'}
];

var comment = { postId: 1, content: ‘Great Post’};

function postForComment(posts, comment){
 return posts.find(function(post) {
 return post.id === comment.postId;
 })
}

postForComment(posts, comment);

Question 16

What is a realistic situation for the find helper?

Answer 16

Where you have the address param for a post and you want to find, out of all the posts that are in state, the ID that is 45

Question 17

What is the purpose of the ‘every’ helper?

Question 18

Explain how the every array helper works? What about some?

Answer 18

It looks at all elements and &&’s them together to form a single boolean value. Some helper uses an || instead and returns a single boolean value as well.

var computers = [
 {name: 'Apple', ram: 24},
 {name: 'Compaq', ram: 4},
 {name: 'Acer', ram: 32}
]

var computersCanRunProgram = true;
var onlySomeComputersCanRunProgram = false;

computers.every(function(computer){
return computer.ram > 16;
});

////////////

var names = [
“Alexandria”,
“Matthew”,
“Joe”
];

names.every(function(name){
return name.length > 4;
});

names.some(function(name){
return name.length > 4;
});

Question 19

When would you use ‘every’ or ‘some’ helper?

Answer 19

Doing validations off of multiple form fields when a user is logging in or registering

function Field(value){
 this.value = value;
}

Field.prototype.validate = function () {
return this.value.lenght > 0;
}

var username = new Field("2cool");
var password = new Field("my\_password");
var birthdate = new Field("10/10/2000");

// instead of listing these fields with .validate ALL the time.. you can use 'every'
var fields = [username, password, birthdate];

var formIsValid = fields.every(function(field){
 return field.validate();
});

if(formIsValid){
 // allow user to submit!
} else{
 // show an error message
}

Question 20

How does ‘reduce’ array helper work?

Answer 20

The first argument in reduce is our iterator function which will take two arguments. The first will be, as an example, sum. The second argument will be the number itself that is iterated. The second argument in the parent reduce function is the initial value for sum.

var numbers = [10, 20, 30];
var sum = 0;

for (var i = 0; i \< numbers.length; i++){
 sum += numbers[i];
}

”—”

numbers.reduce(function(sum, number){
return sum + number;
}, 0);

/////////////////

var primaryColors = [
 {color: 'red'},
 {color: 'yellow'},
 {color: 'blue'}
 ];

primaryColors.reduce(function(previous, primaryColor){
previous.primaryColor.color;
return previous;
}, []);