25

JS3-1.2

Embed Size (px)

DESCRIPTION

vvvv

Citation preview

Page 1: JS3-1.2
Page 2: JS3-1.2

Using FE’s with arrays and map()A function expression is just that...an expression. We can pass them without variables!

var numbers = [12, 4, 3, 9, 8, 6, 10, 1];

var results = numbers.map( *some coolFunction goes here* );

12 4 3 9 8 6 10 1

wow

coolFunction

The map( ) method will always take in a function as a parameter, and return a new array with the results.

Page 3: JS3-1.2

A function expression is just that...an expression. We can pass them without variables!

var numbers = [12, 4, 3, 9, 8, 6, 10, 1];

);

12 4 3 9 8 6 10 1

wow

coolFunction

these

var results = numbers.map( *some coolFunction goes here* );

Using FE’s with arrays and map()

Page 4: JS3-1.2

are

A function expression is just that...an expression. We can pass them without variables!

var numbers = [12, 4, 3, 9, 8, 6, 10, 1];

12 4 3 9 8 6 10 1

wow

coolFunction

these

var results = numbers.map( *some coolFunction goes here* );

Using FE’s with arrays and map()

Page 5: JS3-1.2

A function expression is just that...an expression. We can pass them without variables!

var numbers = [12, 4, 3, 9, 8, 6, 10, 1];

12 4 3 9 8 6 10 1

wow

coolFunction

these are some

var results = numbers.map( *some coolFunction goes here* );

Using FE’s with arrays and map()

Page 6: JS3-1.2

A function expression is just that...an expression. We can pass them without variables!

var numbers = [12, 4, 3, 9, 8, 6, 10, 1];

12 4 3 9 8 6 10 1

wow

coolFunction

these are some pretty

var results = numbers.map( *some coolFunction goes here* );

Using FE’s with arrays and map()

Page 7: JS3-1.2

A function expression is just that...an expression. We can pass them without variables!

var numbers = [12, 4, 3, 9, 8, 6, 10, 1];

12 4 3 9 8 6 10 1

wow

coolFunction

these are some pretty cool

var results = numbers.map( *some coolFunction goes here* );

Using FE’s with arrays and map()

Page 8: JS3-1.2

A function expression is just that...an expression. We can pass them without variables!

var numbers = [12, 4, 3, 9, 8, 6, 10, 1];

12 4 3 9 8 6 10 1

wow

coolFunction

these are some pretty cool results

var results = numbers.map( *some coolFunction goes here* );

Using FE’s with arrays and map()

Page 9: JS3-1.2

A function expression is just that...an expression. We can pass them without variables!

var numbers = [12, 4, 3, 9, 8, 6, 10, 1];

12 4 3 9 8 6 10 1

wow

coolFunction

these are some pretty cool results !

var results = numbers.map( *some coolFunction goes here* );

Using FE’s with arrays and map()

Page 10: JS3-1.2

A function expression is just that...an expression. We can pass them without variables!

var numbers = [12, 4, 3, 9, 8, 6, 10, 1];

12 4 3 9 8 6 10 1

var results = numbers.map( *some coolFunction goes here* );

Using FE’s with arrays and map()

Page 11: JS3-1.2

LEVEL One

var numbers = [12, 4, 3, 9, 8, 6, 10, 1];

var results = numbers.map( *some coolFunction goes here* );

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

coolFunction

results[i] =

Map works like a loop that applies a function to each array index

Using FE’s with arrays and map()

Page 12: JS3-1.2

LEVEL One

Map works like a loop that applies a function to each array index

var numbers = [12, 4, 3, 9, 8, 6, 10, 1];

var results = numbers.map( *some coolFunction goes here* );

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

coolFunction(numbers[i]);results[i] =

The array’s map conveniently takes this entire loop format and consolidates it to one nice line of code.

Using FE’s with arrays and map()

Page 13: JS3-1.2

Let’s pass in function that will double each cell’s value in our numbers array.

var numbers = [12, 4, 3, 9, 8, 6, 10, 1];

var results = numbers.map(

);

12 4 3 9 8 6 10 1

function (arrayCell) {return arrayCell * 2;

}

We build an anonymous function for map’s parameter, which takes in the contents of each cell of numbers and returns a doubled value to results.

Using FE’s with arrays and map()

Page 14: JS3-1.2

Let’s pass in function that will double each cell’s value in our numbers array.

var numbers = [12, 4, 3, 9, 8, 6, 10, 1];

12 4 3 9 8 6 10 1

Don’t forget to close both your anonymous function with a } and the map method with a ), while also adding a semicolon in order to execute the map.

var results = numbers.map(

);

function (arrayCell) {return arrayCell * 2;

}

Using FE’s with arrays and map()

Page 15: JS3-1.2

Let’s pass in function that will double each cell’s value in our numbers array.

var numbers = [12, 4, 3, 9, 8, 6, 10, 1];

12 4 3 9 8 6 10 1

doubled!

24

var results = numbers.map(

);

function (arrayCell) {return arrayCell * 2;

}

Using FE’s with arrays and map()

Page 16: JS3-1.2

var numbers = [12, 4, 3, 9, 8, 6, 10, 1];

12 4 3 9 8 6 10 1

24 8

doubled!

Let’s pass in function that will double each cell’s value in our numbers array.

var results = numbers.map(

);

function (arrayCell) {return arrayCell * 2;

}

Using FE’s with arrays and map()

Page 17: JS3-1.2

var numbers = [12, 4, 3, 9, 8, 6, 10, 1];

12 4 3 9 8 6 10 1

24 8

doubled!

Let’s pass in function that will double each cell’s value in our numbers array.

6

var results = numbers.map(

);

function (arrayCell) {return arrayCell * 2;

}

Using FE’s with arrays and map()

Page 18: JS3-1.2

var numbers = [12, 4, 3, 9, 8, 6, 10, 1];

12 4 3 9 8 6 10 1

24 8

doubled!

Let’s pass in function that will double each cell’s value in our numbers array.

6 18

var results = numbers.map(

);

function (arrayCell) {return arrayCell * 2;

}

Using FE’s with arrays and map()

Page 19: JS3-1.2

var numbers = [12, 4, 3, 9, 8, 6, 10, 1];

12 4 3 9 8 6 10 1

24 8

doubled!

Let’s pass in function that will double each cell’s value in our numbers array.

6 18 16

var results = numbers.map(

);

function (arrayCell) {return arrayCell * 2;

}

Using FE’s with arrays and map()

Page 20: JS3-1.2

var numbers = [12, 4, 3, 9, 8, 6, 10, 1];

12 4 3 9 8 6 10 1

24 8

doubled!

Let’s pass in function that will double each cell’s value in our numbers array.

6 18 16 12

var results = numbers.map(

);

function (arrayCell) {return arrayCell * 2;

}

Using FE’s with arrays and map()

Page 21: JS3-1.2

var numbers = [12, 4, 3, 9, 8, 6, 10, 1];

12 4 3 9 8 6 10 1

24 8

doubled!

Let’s pass in function that will double each cell’s value in our numbers array.

6 18 16 12 20

var results = numbers.map(

);

function (arrayCell) {return arrayCell * 2;

}

Using FE’s with arrays and map()

Page 22: JS3-1.2

var numbers = [12, 4, 3, 9, 8, 6, 10, 1];

12 4 3 9 8 6 10 1

24 8

doubled!

Let’s pass in function that will double each cell’s value in our numbers array.

6 18 16 12 20 2

var results = numbers.map(

);

function (arrayCell) {return arrayCell * 2;

}

Using FE’s with arrays and map()

Page 23: JS3-1.2

LEVEL One

var results = numbers.map(

);

function (arrayCell) {return arrayCell * 2;

}

var numbers = [12, 4, 3, 9, 8, 6, 10, 1];

Let’s pass in function that will double each cell’s value in our numbers array.

[24, 8, 6, 18, 16, 12, 20, 2]console.log(results);

Using FE’s with arrays and map()

Page 24: JS3-1.2

LEVEL One

var results = numbers.map( function (arrayCell) { return arrayCell * 2; } );

var numbers = [12, 4, 3, 9, 8, 6, 10, 1];

Let’s pass in function that will double each cell’s value in our numbers array.

[24, 8, 6, 18, 16, 12, 20, 2]console.log(results);

Short functions are often built in one line for clarity and simplicity.

Using FE’s with arrays and map()

Page 25: JS3-1.2