Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript Introducing ES2015 Objects and New Collection Types Set

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

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

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,092 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

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

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