Question:

I was testing the difference between size() and length in jQuery using different versions, since according to the documentation they do the same thing:

length

Returns: Integer

Description: The number of elements in the jQuery object.

The number of elements currently matched. The .size() method will return the same value.

Case 1: using jQuery 3 size() gives error:

$(function(){
   console.log("Tamaño de li con size: "+$( "li" ).size());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<ul>
  <li>foo</li>
  <li>bar</li>
</ul>

Case 2: Using jQuery 3 length works:

$(function(){
   console.log("Tamaño de li con length: "+$( "li" ).length);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<ul>
  <li>foo</li>
  <li>bar</li>
</ul>

Case 3: Using jQuery version lower than 3

Both size() and length work

$(function(){
   console.log("Tamaño de li con size: "+$( "li" ).size());
   console.log("Tamaño de li con length: "+$( "li" ).length);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<ul>
  <li>foo</li>
  <li>bar</li>
</ul>

Ask

What is the difference between size() and length ? Any recommendations to keep the code up to date?

Answer:

What is the difference between size() and length ?

Excerpt from the documentation ( jQuery.size() ):

The .size() method is functionally equivalent to the .length property; however, the .length property is preferred because it does not have the overhead of a function call.

In Spanish:

The .size() method is functionally equivalent to the .length property; however it is preferable to use the .length property because it does not have the overhead of a function call.

Answer:

Functionally they are equivalent and return the same value, but performance .size() implies a call to a function that accesses the .length property inside it.

Due to functional duplication, and for performance reasons, .size() was deprecated in jQuery 1.8 and was definitively removed in jQuery 3.0, so although they are equivalent, the use of .size() be avoided for the code to work in modern and future versions of jQuery.

Any recommendations to keep the code up to date?

In the documentation you can see that it was marked as deprecated in version 1.8 (but its use was still allowed). It was completely removed in jQuery 3.0.

jQuery.size() documentation:

.size()

Returns: Integer

deprecated version: 1.8

removed: 3.0

The .size() method is deprecated as of jQuery 1.8. Use the .length property instead.

In Spanish:

.size()

Returns: Integer

obsolete version: 1.8

removed: 3.0

The .size() method is deprecated as of jQuery 1.8. Use the .length property instead.

Answer:

To keep your code up-to-date, always check the deprecated fields to see if a feature will be removed in the future and what its recommended alternative is.

In your case, if you didn't realize you had to .size() , you'll now need to migrate code to maintain compatibility with jQuery 3.0 or later (at the time of this writing it was jQuery 3.2.1).

I do not recommend using "tricks" such as defining the function if it is not defined because it will continue to create bad habits that you will carry over in later versions and you will also be forgetting a reason why the use of .size() was discarded in favor of .length : duplication of functionality (the most important reason) and performance (albeit minimal, barely noticeable).