0

I'm reading the book Understanding EMCAScript 6 and I came across a strange line that I can't decipher. result[keys[i]] = object[keys[i]];

I know that ...keys is a rest parameter. However I can access a rest parameter using standard array syntax, for example keys[i]. What does [keys[i]] mean? I googled and I can't find anything. It looks like an array but I'm not sure what type of array or how it works. Just knowing the name would be a huge help. It's from this code.

function pick(object, ...keys) {
    let result = Object.create(null);
    for (let i = 0, len = keys.length; i < len; i++) {
        result[keys[i]] = object[keys[i]];
    }
    return result;
}
DR01D
  • 1,325
  • 15
  • 32
  • 1
    I'm interested in the answer, I've never seen array keys wrapped like that. – Difster Jul 13 '17 at 01:34
  • 1
    um bracket notation with an array referencing the index – epascarello Jul 13 '17 at 01:35
  • 3
    It just means that the expression `keys[i]` is used as the property name in `result[…]`. – Bergi Jul 13 '17 at 01:36
  • 2
    Bracket notation isn't unique to arrays. All objects can use it as a [property accessor](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors). – 4castle Jul 13 '17 at 01:37
  • It's also not new to ES6. JavaScript always worked like this. You can put any expression inside the brackets (`result[...]`). `keys[i]` is an expression. – Felix Kling Jul 13 '17 at 01:40

2 Answers2

3

It's no magic, just nested property access using bracket notation.

result[ keys[i] ] = object[ keys[i] ];

could also be written

const key = keys[i];
result[key] = object[key];
Bergi
  • 630,263
  • 148
  • 957
  • 1,375
  • Fascinating! So `result[keys[i]]` is another way to say `result.keys[i]`. It's the property name. (mind blown!) – DR01D Jul 13 '17 at 01:44
  • 3
    @DR01D [No](https://stackoverflow.com/questions/4968406/javascript-property-access-dot-notation-vs-brackets) – Bergi Jul 13 '17 at 01:45
  • 1
    @DR01D: That's not right. I think you are making it more complicated than it is. `result[...]` and `keys[...]` mean exactly the same thing. `...` can be any arbitrary expression. – Felix Kling Jul 13 '17 at 01:48
1

To understand this function, you have to understand that, in JavaScript objects are just hashes. object.foo is just syntactic sugar for object["foo"].

This means that you can dynamically get and set object properties, which is what this function is doing.

The keys value is an array of the arguments passed to the function. Therefore, the for loop iterates over every value in keys.

  • The expression keys[i] means ith element of keys.
  • The expression object[key] means the property of the object named key. For example, if key = "foo", then writing object[key] is the same as writing object.foo.

This means that the for loop in the function:

  • Looks up the object property matching the given argument;
  • Creates a new property in result with the same name, and assigns the value of the property to it

Therefore, the pick function can be used to select certain attributes from an object:

pick({x: 1, y: 2, z: 3}, "x", "z") // -> {x: 1, z: 3}
Challenger5
  • 959
  • 6
  • 26
  • 1
    @4castle Oh, you're right. I got rest parameters and `arguments` mixed up. Will edit. – Challenger5 Jul 13 '17 at 01:48
  • Thank you for deconstructing that function. I'm using your explanation to take it apart and put it back together. Holy smokes! That one was tough but your explanation is spot on. – DR01D Jul 13 '17 at 02:06
  • 1
    @DR01D I should probably mention that arrays are just objects as well, but some of their attributes are numbers, which means that you can only access them using the `[]` notation. – Challenger5 Jul 13 '17 at 02:18