3

The code snippet below is from 30 seconds of code website. This is a beginner example which embarrassingly has me stumped.

Why do this: 

const currentURL = () => window.location.href;

When you can simply do this?

const currentURL =  window.location.href;
  • 3
    The first sets `currentURL` to a function that evaluates to `window.location.href`, the other just sets `currentURL` to `window.location.href`. – zero298 Jul 31 '18 at 20:04
  • Possible duplicate of [What's the meaning of "=>" (an arrow formed from equals & greater than) in JavaScript?](https://stackoverflow.com/questions/24900875/whats-the-meaning-of-an-arrow-formed-from-equals-greater-than-in-javas) – zero298 Jul 31 '18 at 20:05
  • I understand one implies a function....but don't they both have the same net result. What would be the benefit of doing one over the other? –  Jul 31 '18 at 20:05
  • It is an over-simplified example. This scenario has really no use, but it is to show the possibility. – jrswgtr Jul 31 '18 at 20:06
  • It's part of the ES6 language and simplifies the functions: https://www.sitepoint.com/es6-arrow-functions-new-fat-concise-syntax-javascript/ `const multiplyES6 = (x, y) => { return x * y };`. The example used does not add anything to it other than being hard to read for beginners. But it does help you in the long run! – Igoranze Jul 31 '18 at 20:10
  • Can you add, from the linked duplicate, why you think the net result would be the same? I do not understand how you could draw that conclusion. – zero298 Jul 31 '18 at 20:18

2 Answers2

4

The first sets currentURL to a function that evaluates to window.location.href, the other just sets currentURL to window.location.href.

Consider the difference between the following:

/*
 * A function that will return the current href
 * returns {String}
 */
const currentURL1 = () => window.location.href;

/*
 * The current href
 * @type {String}
 */
const currentURL2 =  window.location.href;

console.log(currentURL1); // () => window.location.href
console.log(currentURL2); // https://stacksnippets.net/js

console.log(typeof currentURL1); // function
console.log(typeof currentURL2); // string

currentURL1(); // string
//currentURL2(); // error not a function
zero298
  • 25,467
  • 10
  • 75
  • 100
3

What you are seeing is shorthand for functions. 

const currentURL = () => window.location.href;

translates to 

const currentURL = function() { return window.location.href; }

To expand on this a little further; This is assigning a function to a constant which can be called at a later date to get the value as opposed to simply assigning it. This is not a great example of why you would do this, because of the simplicity of the function, but I think the author was simply trying to illustrate how you can do that.

Adam H
  • 1,750
  • 1
  • 9
  • 24
  • ahhhhh I get it now...... currentURL will always be up to date...where as the other simply assigns once? is that it? –  Jul 31 '18 at 20:07
  • I figured the explanation about what its actually doing would explain why you would do one over the other. Maybe I should expand on the answer? – Adam H Jul 31 '18 at 20:08
  • @E.Maggini No, it won't always be up to date. If `window.location.href` changes (e.g. the hash section), then a `currentURL` string wouldn't. But a function would return the new value if called. – Bergi Jul 31 '18 at 20:09