Почему эта функция возвращает undefined, но не loggin в консоли?

Question

function getIcon(id) { 
 
    var icons = { 
 
    'i8' : 'nachos1', 
 
    'i4' : 'eggs', 
 
    'i6': 'glass2', 
 
    'i5': 'drink', 
 
    'i1': 'starter', 
 
    'i2': 'steak', 
 
    'i3': 'ice-cream2', 
 
    'i10': 'carrot', 
 
    'i9': 'bread', 
 
    'i7': 'pizza', 
 
    'i11' : 'salad' 
 
    }; 
 
    console.log('getIcon'); /* Wont happen */ 
 
    return 'icon-'+icons[id]; 
 
} 
 

 
$app = { 
 
    init: function() { 
 
    $el = $('div.el'); 
 
    console.log($el.data('id')); /* i5 */ 
 
    var icon = getIcon[$el.data('id')]; 
 
    console.log(icon); /* undefined */ 
 
    $el.text(icon); 
 
    } 
 
} 
 
$(function(){ 
 
    $app.init(); 
 
})

div { 
 
    border: 1px solid; 
 
    display:inline-block; 
 
    margin:50px; 
 
    height: 40px; 
 
    min-width: 200px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
(it should be 'icon-drink') 
 
<div class="el" data-id="i5"></div>

Я пытаюсь принести класс значок на основе идентификатора,

Но функция, которая делает это ВСЕГДА Retrun неопределенными, и он не будет войти консоли,

Любая идея, что мне не хватает?

Answer 1

своп квадратные скобки для скобки:

getIcon[$el.data('id')] должен быть getIcon($el.data('id'))

Квадратные скобки для доступа к собственности; круглые скобки предназначены для вызовов функций.

Answer 2

getIcon не является массивом/объект, но передать его как таковой:

getIcon[$el.data('id')] 

Изменить его

getIcon($el.data('id')) 

Answer 3

своп квадратные скобки в круглые скобки

getIcon[$el.data('id')] 

Изменить На

getIcon($el.data('id'))