Assessment 3 Overview

Advanced Array Methods

• forEach()
• map
• filter

.forEach()

forEach loops through each item in an array and executes a function for each item.

Syntax

    [1,2,3].forEach(function(element, index, array){
        //Code
    });

• element - the current iterated element.
• index - the current zero based index
• array - the full array of items
• Does not return anything

Example - Simple

See the Pen Array - forEach() by Jon (@Middaugh) on CodePen.

Example - More Complex

See the Pen Array - forEach() by Jon (@Middaugh) on CodePen.

.map()

map acts similar to forEach but it returns a whole new array.

Syntax

[1,2,3].map(function(element, index, array){ 
    return '';
});

• element - the current iterated element.
• index - the current zero based index
• array - the full array of items
• Returned item gets added to new array.
• Returns new array

Example

See the Pen Array - map() by Jon (@Middaugh) on CodePen.

.filter()

Filter iterates through an array and adds the element to the new array if it returns true.

Syntax

[1,2,3].filter(function(element, index, array){
    return true | false;
});

• element - the current iterated element.
• index - the current zero based index
• array - the full array of items
• Returns new array

Example Simple

See the Pen Array - filter by Jon (@Middaugh) on CodePen.

Example Advanced

See the Pen Array - Filter Advanced by Jon (@Middaugh) on CodePen.

.find()

Acts like filter, but only returns the first one found that matches the parameters

Syntax

[1,2,3].find(function(element, index, array){
    return true | false;
});

• element - the current iterated element.
• index - the current zero based index
• array - the full array of items
• Returns first item matching parameters

Example

See the Pen Array - Filter Advanced by Jon (@Middaugh) on CodePen.

Sort

Sorting an array happens in place, it doesn't return a new array.

Code

    var food = ['taco', 'burger', 'hotdog'];
    food.sort();
    console.log(food); //['burger', 'hotdog', 'taco'];

    var nums = [20, 3, 10, 1, 2]
    nums.sort();
    console.log(nums); //[1, 10, 2, 20, 3];

Uhhh?

.sort sorts by unicode character. Everything gets converted to a string before sorting.

So how do we sort numbers?

It gets a little complicated

This is what we are going to use for now

    var nums = [20, 3, 10, 1, 2]
    nums.sort(function(a,b){
        return a - b;
    });
    console.log(nums); //[1, 2, 3, 10, 20];

Regular Expressions/RegExp

RegExp are patterns that are used to match specific characters.

We'll use them for text searching and text replacement.

RegExps are not unique to JavaScript.

Basic Patterns

Syntax: /pattern/modifiers

var pattern = /lorem/i    
      

• lorem - looks for 'lorem'
• i - indicates it is case-insensitive

Text Replace with RegExp

    var str = "hello world. Hello class. hello things";
    var pattern = /hello/i;
    var newStr = str.replace(pattern, 'Goodbye'); 

Result: 'Goodbye world. Hello class. hello things'

Global Flag

We can add g to our pattern to globally replace.

    var str = "hello world. Hello class. hello things";
    var pattern = /hello/ig;
    var newStr = str.replace(pattern, 'Goodbye'); 

Result: 'Goodbye world. Goodbye class. Goodbye things'

Regex Test

Regex Test is a method that allows us to see if a block of text contains a pattern. This leverages the RegExp object.

    var str = "Lorem ipsum dolor";
    var patt = new RegExp(/lorem/i);
    var res = patt.test(str);        
    

The i flag allows 'Lorem' to match.

Useful Patterns

Constructing RegExp patterns can be really hard. I always keep a few handy.

• /[a-z]/gi - Letters only
• /[0-9]/gi - Numbers only
• /^[a-z0-9_-]{3,16}$/ - User Name min 3 max 16
• /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/ - Email
• /^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/ - URL

Create more here

Exercise 27