Q:

Why does bind seem to present arguments as arrays?

It was my impression that I could pass arguments to a function by using bind and then call on those arguments as if they had been passed normally. Why do I need to do this:
$(document).ready(function() {
  var func = function(button) {
    button[0].on('click', function() {
      alert('Hello World.');
    })
  }
  func.bind(null, [$('.button')])();
});

When it seems like I should be able to just do this:
$(document).ready(function() {
  var func = function(button) {
    button.on('click', function() {
      alert('Hello World.');
    })
  }
  func.bind(null, [$('.button')])();
});

Example, treating the button argument as an array:

$(document).ready(function() {
  var func = function(button) {
    button[0].on('click', function() {
      alert('Hello World.');
    })
  }
  func.bind(null, [$('.button')])();
});
html, body, div {
  padding:0;
  margin:0;
  display:flex;
  justify-content:center;
}

.button {
  background-color:gray;
  margin:50px;
  padding:50px;
  width:50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="button">Button</div>

A:

bind() is used to bind the current calling scope to a function so that even if you call it from somewhere else, it will know about local variables in that bound scope.
What you're looking for is apply().

var func = function(button) {
  button.on('click', function() {
    console.log('hello world');
  });
}

func.apply(this, [$('.button')]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="button">Click Me</button>

For completeness, there's also a call() function that is more commonly used. Instead of an array of arguments, it uses a list of arguments after the initial scope argument.
func.call(this, $('.button'));

