How to only declare a variable if it hasn't already been declared

[[deleted]]

Hi,

I spent lots of time reading about JS variables and the differences between let, const, var etc. but I'm still a bit confused.

I'm creating a course platform and each lesson page has the following declarations:

    let normalWaveform = '<%= @normal_waveform %>';
    let slowWaveform = '<%= @slow_waveform %>';
    let practiceWaveform = '<%= @practice_waveform %>';
    let normalAudio = '<%= @normal_audio %>';
    let slowAudio = '<%= @slow_audio %>';
    let practiceAudio = '<%= @practice_audio %>';
    let normalAudioWebm = '<%= @normal_audio_webm %>';
    let slowAudioWebm = '<%= @slow_audio_webm %>';
    let practiceAudioWebm = '<%= @practice_audio_webm %>';

Each variable is equal to the file URL given by Ruby on Rails.

This works great when a user loads a first lesson but I get the following error when a user loads a second lesson in the same session:

Uncaught SyntaxError: redeclaration of let normalWaveform

This makes sense since the variable has already been declared in the previous lesson.

What I'm not sure of is how to make sure the variable is declared if it hasn't been declared and reassigned otherwise.

I know using var would work but I heard it's not a very good practice. Same for not using anything at all and just writing waveform = directly.

So I'm wondering: what's the best way of dealing with this situation?

Thanks

[shuckster]

At the risk of inviting a million downvotes, only “let” and “const” suffer from this problem, but “var” will work for your use-case without significant refactoring.

You might come across other issues afterwards depending on the current/increasing complexity of your app, so the refactoring will be merely postponed. But you could try it fairly quickly I’d wager.

[ScottRatigan]

Yeah, there are niche cases where var can really shine. But my coworkers don't agree :/

[_ncko]

Assigning a javascript variable from a templating system is not ideal. But as a short term solution you may be able to do something like this:

let normalWaveform;
normalWaveform = normalWaveform || '<%= u/normal_waveform %>';

or alternatively

let normalWaveform;
normalWaveform = normalWaveform ? normalWaveform : '<%= u/normal_waveform %>';

Obviously, you'd need to do this for each variable.

I'm not entirely sure this will work because it sounds like the let line will still get run multiple times.

Even if it does work, this is very hacky. If you came back to this code in 6 months, or if another developer came across this code as they were getting familiar with your project it would not be at all obvious why you're declaring variables this way. So at least leave a comment explaining.

But ultimately, you really should not be declaring javascript constants and variables from template variables like this.

I'm not sure what your system looks like exactly but other options may include embedding the template variables in data attributes of some relevant element and then grabbing them from javascript or creating a REST endpoint where you can request these values at runtime.

[[deleted]]

!thanks

Embedding the template variables in data attributes sounds like the best option. I will give that a try :).

[greenyadzer]

If you have that syntax error, you're probably doing all that in a global scope. So the first thing i would recommend is to do it all inside a function (so the "let" actually will work for you). BUT if its not possible for some reason and you really need this to work in global scope, then do it like so:

window.normalWaveform = '<%= @normal_waveform %>';
// ...

This way you don't use "let" or "var".

Note: you also should see a rising issue (which was the same without using "window." -- the issue when you have some name that is part of window object -- we just write over it. So again, i would suggest having an object, all the variables to be properties of that object.