Chamando uma Função Definida pelo Usuário no jQuery

Estou tentando chamar uma função definida pelo usuário no jQuery:

$(document).ready(function() {
  $('#btnSun').click(function() {
    myFunction();
  });
  $.fn.myFunction = function() {
    alert('hi');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnSun">Say hello!</button>

Eu tentei o seguinte também:

$(document).ready(function() {
  $('#btnSun').click(function() {
    myFunction();
  });
});

function myFunction() {
  alert('hi');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnSun">Say hello!</button>

Não parece funcionar! Alguma idéia de onde estou errado?

questionAnswers(10)

yourAnswerToTheQuestion