SharePoint JavaScript Working with Hyperlink Fields

When using JSOM to retrieve SharePoint items (and their columns) getting a value is usually pretty straightforward. The following should look familiar:

itemVariable.get_item(‘abc’) where abc is the internal name of the column. (Remember the good old _x0020_ for spaces).

But if you try to do the same on a Hyperlink column you will be returned an [object] instead of the value you were expecting. This is because these fields are indeed an object. They store multiple values. Mainly, the URL for the link and the text that needs to be displayed. So how do we get the values we need?

If you inspect the object using a debugger you will see two methods to return the values. Assuming our column name is URL:

var urlObject = oListItem.get_item('URL');

var linkHref = urlObject.get_url()

var linkText = urlObject.get_description()