This question is from the JavaScript Documentation -
var elements = [
'Helium',
'Oxygen',
'Lithium',
'Beryllium'
];
console.log(elements.map(({ length }) => length));
// Output - [6, 6, 7, 9]I am not able to understand How is it able to calculate length of each elements from the array? I mean how this syntax works?
What you're using in your code is called destructuring assignment and it allows you to use directly desired properties of an object.
console.log(elements.map(( {length} ) => length));
is equivalent to
console.log(elements.map(str => str.length));
var elements = [
'Helium',
'Oxygen',
'Lithium',
'Beryllium'
];
console.log(elements.map(str => str.length));
Length of a string is available as a string property length:
console.log('test'.length);In your code, you iterate thru array of strings and do elements.map(( {length} ) => length). That is a short version of this:
var elements = [
'Helium',
'Oxygen',
'Lithium',
'Beryllium'
];
console.log(elements.map(item => item.length));This is called object destructing:
console.log(elements.map(( {length} ) => length));
is the same as:
console.log(elements.map(str => str.length));
is the same as:
console.log(elements.map(function(el){return el.length;}));
Here is how the map function works: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.
Since the each array items are of type string thus has the length property which is actually returned.
var elements = [
'Helium',
'Oxygen',
5, // has no length property
'Beryllium'
];
console.log(elements.map(str => str.length));This depends on what's your purpose for this snippet, but if you want to map an array like this you could do something like below: Copying your code
var elements = [
'Helium',
'Oxygen',
'Lithium',
'Beryllium'
];
elements.map(item=>{console.log(item)});
/* Output:
Helium,
Oxygen,
Lithium,
Beryllium*/
so basically what map function does is it maps every single element of it
forEach() — executes a provided function once for each array element.
map() — creates a new array with the results of calling a provided function on every element in the calling array.
arr.forEach((num, index) => {
return arr[index] = num * 2;
});
let doubled = arr.map(num => {
return num * 2;
});
output for both is same //[2, 4, 6, 8, 10]
for more details refer this
Destructuring assignmentofes2015