$(function() {・・・・});って何をしているか
結論としては、
・ページが読み込み完了し、DOMの構築が完了した時点でfunction()内が実行される。
ということです。
$(function() {・・・・});を素のjsで書くと
hoge.js
document.addEventListener('DOMContentLoaded', () => {
ここに処理
});
このような感じになります。
また、以下のようにも書けます。
hoge2.js
window.addEventListener('load', () => {
ここに処理
});
DOMContentLoadedとloadの違いは？
DOMContentLoaded
これは**「DOMの読み込み完了時に発火」ということで、jQueryの$(function() {・・・・});**と同等の動きになります。
load
これは**「DOMの読み込み完了＋ページ内のリソース（画像等）の読み込み完了時に発火」**ということになります。
DOMContentLoadedとloadの使い分けは？
DOMContentLoadedは「DOMの読み込み完了時に発火」なので、ページ表示時、HTML要素に何かをしたければ使用する。
loadは「DOMの読み込み完了＋ページ内のリソース（画像等）の読み込み完了時に」なので、ページ表示時、画像などに何かをしたければ使用する。
と言った使い分けになります。
まとめ
$(function() {・・・・});やDOMContentLoaded、loadは用途により使い分けが必要ですが、基本的には決り文句として覚えておくのが良いかと思います。
appendix
jsファイルに$(function() {・・・・});を書かず、head内でjsファイルを読み込んでいたら、
hoge.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="/assets/js/common.js"></script>
<title>Document</title>
</head>
<body>
</body>
</html>
html構築より早くjsファイルが読み込まれるのでjsが動かないです。