Array Comprehensions - NON-STANDARD

John Lindquist
InstructorJohn Lindquist
Share this video with your friends

Social Share Links

Send Tweet
Published 10 years ago
Updated 5 years ago

Array Comprehensions didn't make the ES6 cut. You probably shouldn't use them ;)

See comments.

Narrator: [00:00] If I have an array of people and I want to get all of their email addresses into a separate array, I can use array comprehension. For and then deconstruction, email of people. Give me all of the emails. Then from here I can just log them out, run this, and you can see I get each of their emails.

[00:22] Now if I want to only get the email if the person's name is Melinda, I can get the email and the first name. Then I can say if first name is Melinda, then it would return the email, and I'll log it out. You can see I get the two email addresses of this Melinda and of this Melinda.

[00:52] To do something a little simpler, let's get all of the numbers of above five, so we'll say four and then num of nums. Now here I'm not using the deconstruction this time. I'm just getting the actual item that comes back.

[01:08] I'll say if num is greater than five, then give me the number. I only want the numbers in this that are greater than five, I'll log it out, and I'll get 6 through 10. Obviously if instead I said less than five, then I ran it, you could see I'd get one through four.

[01:28] If you've worked with arrays before in this fashion, whether using a polyfill, your own thing, underscore or whatnot, this probably looks familiar from mapping and filtering and all the functions you've probably used in the past. It's just that now ES6 has a built-in syntax to handle these scenarios.

[01:44] As our final example, let's take the numbers and the letters, so we'll say four num of nums, and for letter of letters. Then we'll return the number plus the letter and you can see now we'll get a one-dimensional array from 1A going all the way down to 5E. Or if I wanted to, I could surround this with the array brackets.

[02:16] Once I run this again, I'll get a grid this time of a two-dimensional array with arrays inside of it for each row to represent the rows and the columns.

Eric
Eric
~ 8 years ago

Removed from Babel 6! D:

Weng Koon Wong
Weng Koon Wong
~ 8 years ago

HOw to make this work in command line?

TestMacBook (master *+) babeltest $ npm run build

babeltest@1.0.0 build /Users/TestMacBook/Documents/egghead/babeltest babel src -d lib

SyntaxError: src/index.js: Unexpected token (29:14) 27 | ] 28 |

29 | let emails = [for({email, firstName} of people) if(firstName === "Melinda") email] | ^ 30 | 31 | 32 | console.log(emails);

npm ERR! Darwin 15.5.0 npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "build" npm ERR! node v6.2.1 npm ERR! npm v3.9.3 npm ERR! code ELIFECYCLE npm ERR! babeltest@1.0.0 build: babel src -d lib npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the babeltest@1.0.0 build script 'babel src -d lib'. npm ERR! Make sure you have the latest version of node.js and npm installed. npm ERR! If you do, this is most likely a problem with the babeltest package, npm ERR! not with npm itself. npm ERR! Tell the author that this fails on your system: npm ERR! babel src -d lib npm ERR! You can get information on how to open an issue for this project with: npm ERR! npm bugs babeltest npm ERR! Or if that isn't available,

Markdown supported.
Become a member to join the discussionEnroll Today