Как можно сократить код js

Вот, вроде максимально сократил:

var cb=val=>{
    return function(){
        $('header').css('box-shadow',val)
    }
}
$('.cat-parent:lt(6)').hover(
    cb('0 14px 24px rgba(120, 134, 38, 0.3)'),
    cb('')
);

Упс, не заметил, что цвета меняются, тогда так:

var cb=val=>{
    return function(){
        $('header').css('box-shadow',val)
    }
}
['82, 56, 115','120, 134, 38','218, 113, 0','2, 84, 184','73, 89, 21'].forEach((v,k)=>{
    $(`.cat-parent:nth-child(${k+1})`).hover(
        cb(`0 14px 24px rgba(${v}, 0.3)`),
        cb('')
    )
})

И для пущего перфекционизма с моими новыми знаниями:

var cb=val=>function(){
    $('header').css('box-shadow',val)
}
['82, 56, 115','120, 134, 38','218, 113, 0','2, 84, 184','73, 89, 21'].forEach((v,k)=>{
    $(`.cat-parent:nth-child(${k+1})`).hover(
        cb(`0 14px 24px rgba(${v}, 0.3)`),
        cb('')
    )
})

Наверное лучше вынести определение цвета в data-attr, что бы упростить логику и повысить читаемость кода:

/* 
* Вариант с использованием data-attr* 
*/ 
//$('.cat-parent').on('mouseover mouseout', e => { 
//  $('header').css({ 
//    boxShadow: e.type === 'mouseover' ? `0 14px 24px ${$(e.target).data('color')}` : '' 
//  }); 
//}); 
 
/* 
* Вариант с массивом цветов 
*/ 
const $catParent = $('.cat-parent'); 
const colors = [ 
  'rgba(82,56,115, 0.3)', 
  'rgba(120, 134, 38, 0.3)', 
  'rgba(218, 113, 0, 0.3)', 
  'rgba(2, 84, 184, 0.3)', 
  'rgba(73, 89, 21, 0.3)' 
]; 
 
$catParent.on('mouseover mouseout', e => { 
  $('header').css({ 
    boxShadow: e.type === 'mouseover' ? `0 14px 24px ${colors[$catParent.index($(e.target))]}` : '' 
  }); 
});

header { 
  display: block; 
  height: 100px; 
} 
 
.cat-parent{ 
  float: left; 
  width: 50px; 
  height: 50px; 
  border: 1px solid #000; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<header></header> 
<div class="cat-parent" data-color="rgba(82,56,115, 0.3)"></div> 
<div class="cat-parent" data-color="rgba(120, 134, 38, 0.3)"></div> 
<div class="cat-parent" data-color="rgba(218, 113, 0, 0.3)"></div> 
<div class="cat-parent" data-color="rgba(2, 84, 184, 0.3)"></div> 
<div class="cat-parent" data-color="rgba(73, 89, 21, 0.3)"></div>

Не используйте js, если можно решить проблему с помощью css. Предлагаю следующий вариант решения вашего вопроса

<div class="item-box">
  <div class="item-box__item">Блок1</div>
  <div class="item-box__item">Блок2</div>
  <div class="item-box__item">Блок3</div>
  <div class="item-box__item">Блок4</div>
  <div class="item-box__item">Блок5</div>
</div>

.item-box {
  &__item {
    max-width: 150px;
    padding: 10px;
    margin: 30px 0;
    border: 1px solid #000;
    &:nth-child(1):hover {
      box-shadow: 0 14px 24px rgba(82,56,115, 0.3);
    }
     &:nth-child(2):hover {
      box-shadow: 0 14px 24px rgba(120, 134, 38, 0.3);
    }
     &:nth-child(3):hover {
      box-shadow: 0 14px 24px rgba(218, 113, 0, 0.3);
    }
     &:nth-child(4):hover {
      box-shadow: 0 14px 24px rgba(2, 84, 184, 0.3);
    }
     &:nth-child(5):hover {
      box-shadow: 0 14px 24px rgba(73, 89, 21, 0.3);
    }
  }
}