мы должны писать сначала function () {...}, а не сразу написать тело функции?

Именно так. Таким образом на действие onclick пользователя вы говорите браузеру:"Выполни-ка вот эту функцию". Мне интересно как вы хотите сразу писать тело функции? Если как-то так:

a.onclick = {
//do somethiong
}

В таком случае вы скажете браузеру:"Вот когда хомосаппиенс нажмет на кнопку, тогда объект". Не совсем понятно, не так ли?
Если вы хотите тело передавать вот так:
a.onclick = //do something
То вы по сути начнете просто перечислять инструкции для браузера. А вы хотите, чтобы эти инструкции были именно для обработчика событий.

Таким образом, чтобы браузер понял, что надо сделать при определенном событии, вы должны передать ему именно функцию, которую он выполнит. Ну конечно можно сделать еще вот так:

a.onclick = func;
function func(){
//do somethong
}

Тут по факту вы тоже говорите браузеру, что надо сделать при событии. Тут главное написать вот так:
a.onlick = func
А не так
a.onlick = func()//Очень плохо, не пишите так
Во втором варианте вы передаете на обработчик уже результат выполненной функции.

И еще лучше использовать addEventListener, Например:

a.addEventListener('click',handler)
function handler(){
//do something
}

Вы инициализировали переменные foo и bar.
Дальше, когда вы задаете свойство объекту object, то в качестве ключа берете foo. То есть:
object[foo] = "value"; // foo = {unique_prop: 1}
Возможно вы хотели свойство foo, то есть вот так:
object["foo"] = "value";

Но в вашем примере вы в качестве ключа используете объект, а объект принимает в качестве ключа только строки. Поэтому ваш объект преобразуется в строку и после преобразования получается вот так:
object["[object Object]"] = "value";
Значит ваш object будет такой:

var object = {
"[object Object]":"value"
};

И собственно, когда вы делаете console.log, то объект bar тоже преобразуется в строку и строка принимает вид:
console.log(object["[object Object]"]);