使用|| 合并第一个非null值

Question

Here is a function:

function() {

    // if on wordpress site decipher if English or Français by using url path
    var lang = '';  
    var wp_path = document.location.pathname.match(/^\/(en|fr)\//)[0];

        if (wp_path == "/en/") {
        lang = "Français";}
        else if (wp_path == "/fr/") {
        lang = "English"; 
        }

    // if on ruby site decipher if English or Français by using querySelector on element
    var ruby_lang = document.querySelector('.menu--primary a[href*="lang="]').textContent.trim();

    // either lang or ruby_lang will be null, assign value to opp_language accordingly
    var opp_language = lang || ruby_lang;

return opp_language;

}

In the Chrome JS console this works if I type it line by line:

Eg on url http://www.example.com/en/

var lang = '';  
        var wp_path = document.location.pathname.match(/^\/(en|fr)\//)[0];

            if (wp_path == "/en/") {
            lang = "Français";} // yes NOT English, it's opposite
            else if (wp_path == "/fr/") {
            lang = "English"; 
            }

Returns Français as expected.

Then, when I'm on a page without a url path containing either en or fr I know that the variable "ruby_lang" will return either English or Français. I have verified this second part of the function works in the console.

So the 3rd part is presumably the problem. My expectation is that at this point, either lang or ruby_lang are set to a truthy value. So:

// either lang or ruby_lang will be null, assign value to opp_language accordingly
        var opp_language = lang || ruby_lang;

But instead, whenever I run this function opp_language is undefined.

Does the double bar || syntax behave in a different way than I understand?

Answer 1

If after this line var opp_language = lang || ruby_lang; var opp_language = lang || ruby_lang; your variable app_language is undefined this means that both lang and ruby_lang are evaluating to false. If all values in a "coalesce series" evaluate to false the expression will return the last value in the list.

If you go ahead and type in your console right now var a = b || c var a = b || c where b and c are undefined and then log a you will see that it is indeed undefined .

When an element is not found by document.querySelector() your ruby_language will be null or undefined , if you are getting undefined then it most probably is.

So basically make sure your variables are initialized and have default values that don't evaluate to false, I guess.

Answer 2

I got this working but I don't really understand it. I used try and catch which I have never used before. From what I understood, if the variables could not be set they would just be falsy no?

Anyway, this works:

function() {

    // if on wordpress site decipher if English or Français by using url path
    var lang = '';  

  try {
    var wp_path = document.location.pathname.match(/^\/(en|fr)\//)[0];

        if (wp_path == "/en/") {
        lang = "Français";}
        else if (wp_path == "/fr/") {
        lang = "English"; 
        }
  } catch (e) {
    lang = false;
  }


  // if on ruby site decipher if English or Français by using querySelector on element

  try {
  var ruby_lang = document.querySelector('.menu--primary a[href*="lang="]').textContent.trim();
  }
  catch (e) {
    var ruby_lang = false;
  }

    // either lang or ruby_lang will be null, assign value to opp_language accordingly
    var opp_language = lang || ruby_lang;

return opp_language;

}