javascript, functions vs variables

Question

I'm starting to look into Javascript and JQuery (hence my choice of example below). And I found that I could define a function and call it (as expected), but that I could also just .. Do something else.. And that's the question:

function $() {
    console.log('hi');
}

$()
$

I don't get an error with either the function call or by just stating '$' without calling the function. What is the latter actually doing? And why does it work if it isn't actually calling the function?

Answer 1

It does nothing. It's just a variable that happens to hold a function.

It's no different from the following equally useless code:

42;

Answer 2

A JavaScript object is a mapping between keys and values. Keys are strings and values can be anything. This makes objects a natural fit for hashmaps.

Functions are regular objects with the additional capability of being callable.

FROM https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#.22Normal.22_objects.2C_and_functions

This mean that you can do things like:

function test(){
   console.log(1);
}

var a = test;

a();

or

var test2 = function(){
  console.log(2);
}

or autocall

//sorry for the indentation.
(
  function(){
     console.log(3);
  }
)()

Or create structures

var testHash = {
   a : 1,
   b : function(){
      console.log(4);
   }
}

testHash.b();

testHash['b']();

And create function difficult to call:

//in a browser environment
window['test3'] = function(){
   console.log(5);
} 

window['test space'] = function(){
   console.log(6);
} 

test3() //no error
test space() //error :D

---

EDIT: The user wants to know more about autocall functions:

Why this work?

(
  function(){
     console.log(3);
  }
)()

It easy to follow in 2 steps:

The parenthesis, if we know that a function is like other variables, and we know that the parenthesis is only for made groups or call functions.

var test_1 = 'string example';
var length = (test_1).length; // the same that test_1.length

Make sense in:

var test_1 = 'string';
var test_2 = ' example';
var length = (test_1 + test_2).length; // the same that test_1.length

instead of:

var test_1 = 'string';
var test_2 = ' example';
var aux = test_1 + test_2;
var length = aux.length; // the same that test_1.length

Now, Do this make sense for you?:

var length = ('string example').length; // instead the first example

Second step, we can change the string for the function.. and call it

( function(){ ... } )()

why is this interesting? Well, now appear the concept of closure.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures

The closures are a very important tool in javascript.

Answer 3

the name "$" is just the holder of the function, by doing the line "$" it is just to list the content of the code (in Google Chrome's developer tool).

$() is to call the function.

$ is to state what it is holding.