You almost there.

This $(this).attr('class') returns a string with the whole set of class names.

An alternative is splitting the class names using this regex /\s+/ and get the desired class name.

Use this regex /\s+/ to split the classnames with these formats: cc btn btn-primary, or cc btn btn-primary, or cc btn btn-primary, Etc,.

$('button').click(
  function() {
    //$id = $(this).attr('id');
    var classNames = $(this).attr('class').split(/\s+/);
    console.log(classNames)
    console.log(classNames.length ? classNames[0] : '');

    //Check is classname 'cc' exists.
    console.log(this.classList.contains('cc')); // Native attribute classList.        
    console.log($(this).hasClass('cc')); // jQuery function hasClass.
  }
)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="view" class="cc      btn      btn-primary">Click this View</button>

@nancy harigton, method I usually go with is to split the classes into an array, like so: https://jsfiddle.net/90dty5oo/8/

$('button').click(function() {
    var myClass= $(this).attr('class');

    myFirstClass = myClass.split(" ");

    alert(myFirstClass[0]);
});

You also do not need the first line inside the function regarding the ID.

ES6 Update

Here's the ES6 version of the code using arrow functions and template literals:

document.querySelectorAll('button').forEach(button => {
  button.addEventListener('click', () => {
    const myClass = button.getAttribute('class');
    const [myFirstClass] = myClass.split(' ');
    alert(myFirstClass);
  });
});