Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 959 of the free egghead.io lessons, plus get JavaScript content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Array Comprehensions - NON-STANDARD

2:28 JavaScript lesson by

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

See comments.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

With ECMAscript 6 you have access to powerful array comprehensions for generating new arrays from existing arrays based on criteria you specify.

Avatar
Sidhartha

This doesn't work anymore with traceur since array comprehensions aren't turned on by default because they were deferred to after ES6 by TC39.

Any idea how to make it work? --array-comprehension gives me a ModuleEvaluationError: Object # has no method 'setProperty'

In reply to egghead.io
Avatar
Yonatan

This doesn't work anymore with traceur since array comprehensions aren't turned on by default because they were deferred to after ES6 by TC39.

Any idea how to make it work? --array-comprehension gives me a ModuleEvaluationError: Object # has no method 'setProperty'

I've verified this doesn't work. It gives a traceur error. I believe this video should either be fixed or removed.

In reply to Sidhartha
Avatar
Mauro

Hey guys,
You should add "arrayComprehension: true" to traceur's options.
https://github.com/google/traceur-compiler/wiki/Options-for-Compiling
Regards!

In reply to Yonatan
Avatar
Andrew

Yeah, maybe this vid should be removed. "Non-standard. Do not use!" here https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Array_comprehensions

too bad

In reply to Yonatan
Avatar
Eric

Removed from Babel 6! D:

Avatar
Weng Koon

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,

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.

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.

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.

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.

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.

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.

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.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?