Does using Split() always need to be paired with an array?

Question

I've been looking at someone else's code and I'm stuck on some syntax that I can't make complete sense of.

var $windows = $('#tgx-window,#tgs-window,#tgm-window,#tgl-window'), 
    $buttons = $('#tgx-button,#tgs-button,#tgm-button,#tgl-button');
    $windows.hide();

$buttons.on('click', function() {
    var $id;
    $buttons.removeClass('closebutton');
    $id = $('#' + this.id.split('-')[0] + '-window');// Get window id
    // alert($id);
    $windows.slideUp();
    if(! $id.is(':visible') ) {
        $id.slideDown();
        $(this).addClass('closebutton');
    }
});

The line I'm looking at is $id = $('#' + this.id.split('-')[0] + '-window');

I'm trying to make sense out of the index array value: [0] and why it's there at all.

According to the ECMAScript 5 specification, using the split() method "Returns an Array object". So the substring in question is being held at the index value [0] (even though there aren't any more values in the array (I assume).

Then we append "-window" and get our final value: $id = #tgx-window (if you clicked the #tgx-button value).

Is this correct? It's really clever imo. But I don't understand why split and an array value are being used together.

Also, I was trying to use alert(); calls directly after the $id statement to try and "look into what was being created" but I didn't find any useful information. Mostly [object Object] and [object HtmlDivElement] which didn't give me any ah-ha moments. What would you have done to glean some clarity from what was happening in the line: $id = $('#' + this.id.split('-')[0] + '-window');// Get window id ??

If you read this far, thank you so much. I haven't had this much fun looking at code in years. It's an awesome feeling :)

I'm not quite sure what your problem is. .split always returns an array. So you have to access the element of the array that you want to get (0 in this case). — Felix Kling
– Felix Kling, Commented Mar 27, 2014 at 7:57
Exactly like above. In you particular case you are accessing first element of the array ([0]) which stands before the "-" sign. — Flasz
– Flasz, Commented Mar 27, 2014 at 7:58
Yeah, I think that was my confusion. Split always creates an array. Thanks — Sophisticake
– Sophisticake, Commented Mar 27, 2014 at 7:59

Philip G · Accepted Answer · 2014-03-27 08:02:50Z

1

You have the following IDs

$windows = $('#tgx-window,#tgs-window,#tgm-window,#tgl-window'), 
$buttons = $('#tgx-button,#tgs-button,#tgm-button,#tgl-button');

Since "this" will only reffer to the button. Split splits the ID to an array eg. (tgx,button);

hence

$('#' + this.id.split('-')[0] + '-window');

this.id.split('-')[0] will equal tgx (if #tgx-button is clicked);

This is the same as

$('#tgx-window');

EDIT

alert('#' + this.id.split('-')[0] + '-window')

will alert the ID

answered Mar 27, 2014 at 8:02

Philip G

4,1142 gold badges24 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sophisticake Over a year ago

Thanks. It finally clicked! It seems really clever for what he/she was trying to accomplish too. Or I'm just easily impressed at this stage :)

UdhayaGirish · Accepted Answer · 2014-03-27 08:06:33Z

1

Split method always returns an array. You are accessing the element at the first index of the returned array. You can know more about Split here

answered Mar 27, 2014 at 8:06

UdhayaGirish

474 bronze badges

Collectives™ on Stack Overflow

Does using Split() always need to be paired with an array?

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related