JavaScript – What’s the difference between using “let” and “var” to declare a variable?

[Origin]: https://stackoverflow.com/questions/762011/whats-the-difference-between-using-let-and-var-to-declare-a-variable

The difference is scoping. var is scoped to the nearest function block and let is scoped to the nearest enclosing block, which can be smaller than a function block. Both are global if outside any block.

Also, variables declared with let are not accessible before they are declared in their enclosing block. As seen in the demo, this will throw a ReferenceError exception.

Demo:

Global:

They are very similar when used like this outside a function block.

let me = 'go';  // globally scoped
var i = 'able'; // globally scoped

However, global variables defined with let will not be added as properties on the global windowobject like those defined with var.

console.log(window.me); // undefined
console.log(window.i); // 'able'

Function:

They are identical when used like this in a function block.

function ingWithinEstablishedParameters() {
  let terOfRecommendation = 'awesome worker!'; //function block scoped
  var sityCheerleading = 'go!'; //function block scoped
}

Block:

Here is the difference. let is only visible in the for() loop and var is visible to the whole function.

function allyIlliterate() {
  //tuce is *not* visible out here

  for( let tuce = 0; tuce < 5; tuce++ ) {
    //tuce is only visible in here (and in the for() parentheses)
    //and there is a separate tuce variable for each iteration of the loop
  }

  //tuce is *not* visible out here
}

function byE40() {
  //nish *is* visible out here

  for( var nish = 0; nish < 5; nish++ ) {
    //nish is visible to the whole function
  }

  //nish *is* visible out here
}

Redeclaration:

Assuming strict mode, var will let you re-declare the same variable in the same scope. On the other hand, let will not:

'use strict';
let me = 'foo';
let me = 'bar'; // SyntaxError: Identifier 'me' has already been declared

'use strict';
var me = 'foo';
var me = 'bar'; // No problem, `me` is replaced.
shareedit
Advertisements

What does the construct x = x || y mean?

[Origin]: https://stackoverflow.com/questions/2802055/what-does-the-construct-x-x-y-mean/2802064

What is double pipe operator (||)?

Double pipe operator (||) is logical OR operator . In most languages it works the following way:

  • If the first value is false, it checks the second value. If it’s true, it returns true and if it’s false, it returns false.
  • If the first value is true, it always returns true, no matter what the second value is.

So it’s basically (note that it’s actually a pseudo-code, because you have to either give this function a name or wrap it in ( and ) to make it work):

function(x, y) {
  if (x) {
    return true;
  } else if (y) {
    return true;
  } else {
    return false;
  }
}

If you still don’t understand, look at this table:

      | true   false  
------+---------------
true  | true   true   
false | true   false  

In other words, it’s only false when both values are false.

How is it different in JavaScript?

JavaScript is a bit different, because it’s a loosely typed language. In this case it means that you can use || operator with values that are not booleans. Though it makes no sense, you can use this operator with for example a function and an object:

(function(){}) || {}

What happens there?

If values are not boolean, JavaScript makes implicit conversation to boolean. It means that if the value is falsey (e.g. 0""nullundefined (see also All falsey values in JavaScript)), it will be treated as false; otherwise it’s treated as true.

So the above example should give true, because empty function is truthy. Well, it doesn’t. It returns the empty function. That’s because JavaScript’s || operator doesn’t work as I wrote at the beginning. It works the following way:

  • If the first value is falsey, it returns the second value.
  • If the first value is truthy, it returns the first value.

Surprised? Actually, it’s “compatible” with the traditional || operator. It could be written as following function:

function(x, y) {
  if (x) {
    return x;
  } else {
    return y;
  }
}

If you pass a truthy value as x, it returns x, that is, a truthy value. So if you use it later in ifclause:

(function(x, y) {
  var eitherXorY = x || y;
  if (eitherXorY) {
    console.log("Either x or y is truthy.");
  } else {
    console.log("Neither x nor y is truthy");
  }
}(true/*, undefined*/))function(x, y) {
  if (x) {
    return x;
  } else {
    return y;
  }
}

you get "Either x or y is truthy.".

If x was falsey, eitherXorY would be y. In this case you would get the "Either x or y is truthy." if y was truthy; otherwise you’d get "Neither x nor y is truthy".

The actual question

Now, when you know how || operator works, you can probably make out by yourself what does x = x || y mean. If x is truthy, x is assigned to x, so actually nothing happens; otherwise y is assigned to x. It is commonly used to define default parameters to function, because default function parameters were introduces in ES6 and are not supported by older browsers. However, it is often considered as a bad programming practice, because it prevents you from passing a falsey value (which is not necessarily undefined or null) as a parameter. Consider following example:

function badFunction(/* boolean */flagA) {
  flagA = flagA || true;
  console.log("flagA is set to " + (flagA ? "true" : "false"));
}

It looks valid at the first sight. However, what would happen if you passed false as flagAparameter (since it’s boolean, i.e. can be true or false)? It would become true. In this example, there is no way to set flagA to false.

Better example would be to explicitly check whether the flagA is undefined, like that:

function goodFunction(/* boolean */flagA) {
  flagA = typeof flagA !== "undefined" ? flagA : true;
  console.log("flagA is set to " + (flagA ? "true" : "false"));
}

Though it’s longer, it always works and it’s easier to understand (which OP has proven by asking this question).

See also

shareedit

How can I send the “&” (ampersand) character via AJAX?

[Origin]: http://stackoverflow.com/questions/11294107/how-can-i-send-the-ampersand-character-via-ajax

I want to send a few variables and a string with POST method from JavaScript. I get the string from the database, and then send it to a PHP page. I am using XMLHttpRequest object. The problem is that the string contains the character “&” few times, and $_POST array in PHP sees it like multiple keys. I tried replacing the “&” with “\&” with replace() function, but doesn’t seem to do anything. Can anyone help?

The javascript code and the string looks like this:

var wysiwyg = dijit.byId("wysiwyg").get("value");
var wysiwyg_clean = wysiwyg.replace('&','\&');

var poststr = "act=save";
poststr+="&titlu="+frm.value.titlu;
poststr+="&sectiune="+frm.value.sectiune;
poststr+="&wysiwyg="+wysiwyg_clean;
poststr+="&id_text="+frm.value.id_text;     
xmlhttp.open("POST","lista_ajax.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send(poststr);

String is:

<span class="style2">&amp;quot;Busola&amp;quot;</span>
shareedit

You can use encodeURIComponent().

It will escape all the characters that cannot occur verbatim in URLs:

var wysiwyg_clean = encodeURIComponent(wysiwyg);

In this example, the ampersand character & will be replaced by the escape sequence %26, which is valid in URLs.

shareedit

What is the difference between null and undefined in JavaScript?

http://stackoverflow.com/questions/5076944/what-is-the-difference-between-null-and-undefined-in-javascript

In JavaScript, undefined means a variable has been declared but has not yet been assigned a value, such as:

var TestVar;
alert(TestVar); //shows undefined
alert(typeof TestVar); //shows undefined

null is an assignment value. It can be assigned to a variable as a representation of no value:

var TestVar = null;
alert(TestVar); //shows null
alert(typeof TestVar); //shows object

From the preceding examples, it is clear that undefined and null are two distinct types: undefined is a type itself (undefined) while null is an object.

shareedit

HTML Button Close Window

http://stackoverflow.com/questions/8057802/html-button-close-window

When in the onclick attribute you do not need to specify is javascript.

<button type="button" onclick="window.open('', '_self', ''); window.close();">Discard/<button>

This should do it. In order to close it your page need to be opened by the script, hence the window.open. Here is an article explaining this in detail: http://www.yournewdesigner.com/css-experiments/javascript-window-close-firefox.html

shareedit

How to send a JSON object using html form data?

http://stackoverflow.com/questions/22195065/how-to-send-a-json-object-using-html-form-data

Get complete form data as array and json stringify it.

var formData = JSON.stringify($("#myForm").serializeArray());

You can use it later in ajax. Or if you are not using ajax; put it in hidden textarea and pass to server. If this data is passed as json string via normal form data then you have to decode it using json_decode. You’ll then get all data in an array.

$.ajax({
  type: "POST",
  url: "serverUrl",
  data: formData,
  success: function(){},
  dataType: "json",
  contentType : "application/json"
});
shareedit