Calling jQuery plugin methods

Question

I have two code snippets and the following questions:

1. Which uses the best practice and why?
2. Which one is good for performance?

Code 1

jQuery( function( $ ) {
 // Responsive video
 var $area = $( "#sidebar" );
 $area.fitVids();
 // Image gallery
 var $slider = $( ".owl-carousel" );
 $slider.owlCarousel();
});

Code 2

// Global jQuery variable
var $ = jQuery;
/**
 * Responsive video
 */
var fitvidsInit = function() {
 var $area = $( "#sidebar" );
 $area.fitVids();
};
/**
 * Slides
 */
var sliderInit = function() {
 var $slider = $( ".owl-carousel" );
 $slider.owlCarousel();
};
/**
 * Execute code
 */
$( function() {
 fitvidsInit();
 sliderInit();
} )

I also have to defined the variable $ because this is in WordPress.

• Jamal: You've already received an answer based on two code snippets. Please don't modify them and add a new one.
• Satrya: Oh, why? Should I create new question? Because the third code are different.
• Jamal: I suppose, or you could wait for further reviews. This one was up for just a day already.

Answer 1

Any performance difference would be too small to measure.

Code 2 pollutes the global namespace with three variables: $, fitvidsInit, and sliderInit. Therefore, Code 1 is better. I suggest eliminating $area and $slider as well:

jQuery( function( $ ) {
 // Responsive video
 $( "#sidebar" ).fitVids();
 // Image gallery
 $( ".owl-carousel" ).owlCarousel();
});

• Satrya: Actually I've more code to see but I'll accept your answer. Your explanation are make sense for me