Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Introducing ES2015 Objects and New Collection Types Set

Posted by cyber voyager
cyber voyager
8,859 Points

Difference between length and size?

What is the difference between those two? I searched for it but I didn't found any solid?

2 Answers

Iain Simmons
MOD
Iain Simmons
Treehouse Moderator 32,305 Points
Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

length is a property available on arrays (and strings), size is a property available on Set objects (i.e. those created with new Set()).

If you follow along in the video or workspaces and then log out the length of the set to the console, you'll see it doesn't give you the same value as the size, because it doesn't exist.

console.log('classroom.length:', classroom.length);
// undefined
Josh Renaud
Josh Renaud
168 Points

Why didn't the creators of ES2015 just use Array's length syntax with Set()? Why create a different property name for what is essentially the same thing?

Andres Ramirez
Andres Ramirez
18,094 Points
Andres Ramirez
Andres Ramirez
18,094 Points

Hello Stavros!

Length will give you the numbers of items in an array. For example:

Return the length of an array:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.length;

*** The result will be: 4 ***

Size... in the following code if you click the button, you will also get a return of 4, because JavaScript makes the browser only select 4 from the list of 7.

<!DOCTYPE html>
<html>
<body>

<select id="mySelect" size="1">
  <option>Cat</option>
  <option>Dog</option>
  <option>Horse</option>
  <option>Elephant</option>
  <option>Mouse</option>
  <option>Fish</option>
  <option>Cow</option>
</select>

<p>Click the button to change the number of visible options in the dropdown list.</p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
     document.getElementById("mySelect").size = "4";
}
</script>

</body>
</html>
```html
cyber voyager
cyber voyager
8,859 Points

I didn't understand it very well but thanks for the reply.

Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

Sorry. but the size property of a select HTML element is a completely different thing to what this video and course/workshop is about…