0

I am trying to use an arrow function and I am getting an error when I attempt to assign a variable

let cardColor;
let fontColor;

let toggleSidebarInfo = () => {
    let colors;
    $('.client-director, .person-link, .card-picture').click((evt) => {
        employeeId = evt.target.id;
      ///// FOCUS ON THIS PART //////
        colors = $(this).hasClass('card-picture') ?
            (cardColor = $(this).next().css('backgroundColor'),
             fontColor = $(this).next().css('color')) :
            (cardColor = $(this).css('backgroundColor'),
             fontColor = $(this).css('color'));
     /////////////////////////
        compareId(employeeId);
    });
};

if I console log cardColor of fontColor I get undefined as I am doing

.click((evt) => { . . . });

but if I do it the regular way

.click(function(evt) { . . . });

then everything works properly.

What am I missing?

Non
  • 8,409
  • 20
  • 71
  • 123
  • 2
    Because you're referring to `this`? Just don't try to use an arrow function where it's not appropriate. – Bergi Mar 21 '16 at 21:01
  • @Bergi so what should I use instead of `$(this)` ? I thought it was an special (this) feature of jQuery. Like a different kind of this applied to jQuery objects – Non Mar 21 '16 at 21:04
  • 1
    While the simplest solution is to use the proper function type, you could also use `evt.currentTarget` to get the bound element. Though I wouldn't use the arrow function unless you specifically need the `this` of the outer lexical environment. –  Mar 21 '16 at 21:20
  • `$()` is a special jQuery function, `this` is context and comes from Javascript. If `this` isn't appropriate for your use case, `$()` won't give you what you expect, but you have to get `this` right first, which has nothing to do with jQuery. – Jared Farrish Mar 21 '16 at 22:09

1 Answers1

0

Arrow functions will bind its lexical scope into it automatically, so in your case the this inside of event handler will not point the elements of event handler.

Using of arrow functions will make your event binding just like below,

$('.client-director, .person-link, .card-picture').click(function(evt){

}.bind(this));

Here during event binding, using arrow functions is inappropriate. The best option is to go with normal anonymous function.

Also note that you cannot override the scope bound by arrow function in any manner.

Rajaprabhu Aravindasamy
  • 66,513
  • 17
  • 101
  • 130
  • so what should I use instead of `$(this)` ? I thought it was an special feature of jQuery – Non Mar 21 '16 at 21:03
  • @NietzscheProgrammer: We didn't say you should change `$(this)`, we said you should change back to `function`. – Bergi Mar 21 '16 at 21:04
  • I didn't downvote your answer. Actually my code works only by putting function, if you put bind(this) at the end, it won't work. – Non Mar 21 '16 at 21:08
  • @NietzscheProgrammer I said, arrow function would make your code like that. So do not use it in this context. – Rajaprabhu Aravindasamy Mar 21 '16 at 21:09