Javascript, function scope and return operator

Question

I have a written a simple javascript function that will write the variable value that is outside of the function using document.write and call the function. However, the code doesn't work:

var name = 'guru';
function type () {
  document.write = name;
}

I then tried returning document.write. However, this also did not work.

var name = 'guru';
function type () {
  return document.write = name;
}
type();

In this code, I just return the variable and use document.write outside of the function. This works.

var name = 'guru';
function type () {
    return name;
}
document.write = type();

Why is this happening? Can someone explain this to me?

edit

The code here doesn't work in firebug, because the firebug outside HTML5 document doesn't recognize document.write as a function, see the error in the image. That is if you fire up firebug and run this doesn't work but if it is run inside a HTML DOM this is an error, this is a bug or this is how it works.

firebug error

Did you intend to call the document.write function? Because none of the three versions seem to do that. They redefine document.write instead. — Thilo
– Thilo, Commented May 11, 2015 at 7:24
@HoboSapiens nope !! because firbug doesn't recognize document.write as a function, this is correct according to firebug . Wait I ll try it with in the HTML DOM. — CoDINGinDARK
– CoDINGinDARK, Commented May 11, 2015 at 7:27

royhowie · Accepted Answer · 2015-05-11 07:43:16Z

You shouldn't use document.write, but if you absolutely must:

var writeSomething = function (message) {
    document.write(message);
}

If you're trying to debug, I recommend using console.log. It's supported by all modern browsers and is much more useful (it lets you inspect objects, arrays, etc.). The problem with document.write is that it destroys the current document to write the new information (see note at end).

Here's an example use of this function:

var writeSomething = function (message) {
    document.write(message);
}

document.getElementById("myButton").onclick = function () {
    var message = document.getElementById("myMessage").value;
    writeSomething(message);
}

<button id="myButton">click me</button>
<input id="myMessage" placeholder="type message here">

from MDN on why document.write is a no-no:

Note: as document.write writes to the document stream, calling document.write on a closed (loaded) document automatically calls document.open which will clear the document.

tl;dr? avoid document.write like the plague.

Techy · Accepted Answer · 2015-05-11 07:28:17Z

2

The document.write is a function. The syntax is as follows:

document.write(exp1,exp2,exp3,...)

The parameters are optional. Multiple arguments can be listed and they will be appended to the document in order of occurrence

answered May 11, 2015 at 7:28

Techy

2,6547 gold badges47 silver badges89 bronze badges

Comments

Alex McMillan · Accepted Answer · 2015-05-11 07:28:26Z

2

document.write is a function, which you need to call like so:

var myHtml = "<html><head></head><body><div><span>Hello World!</span></div></body></html>";

document.write(myHtml);

answered May 11, 2015 at 7:28

Alex McMillan

18.1k13 gold badges63 silver badges91 bronze badges

Comments

cespon · Accepted Answer · 2015-05-11 07:38:28Z

2

When you do document.write = name;, you are overwriting the function.

You must use it like: document.write(message);

http://codepen.io/ces/pen/GJoxbX

answered May 11, 2015 at 7:38

cespon

5,8108 gold badges38 silver badges49 bronze badges

Comments

shershen · Accepted Answer · 2015-05-11 07:41:33Z

2

According to document.write syntax you should pass it an argument that will be actual DOM string.

By doing

function type() {
return name;
}
document.write = type();

You you actually overwrite the original document.write function. So now if you call document.write('foo') you will get Uncaught TypeError: document.write is not a function. Proper way however of using document.write could be:

document.write("<h1>Foo</h1>");

answered May 11, 2015 at 7:41

shershen

10k11 gold badges44 silver badges62 bronze badges

Comments

Tanmoy · Accepted Answer · 2015-05-12 05:24:40Z

2

A.

function type() {
var name = 'guru';  
 document.write (name);
}

B.

var name = 'guru';
  function type( text ) {
  document.write(text);

  }
  type( name );

You have do this like this.Look at it once,it helps you to under stand.

edited May 12, 2015 at 5:24

answered May 11, 2015 at 7:31

Tanmoy

1,0156 silver badges19 bronze badges

3 Comments

royhowie Over a year ago

You should not return document.write(arguments); that'll only ever return undefined, since document.write is the equivalent of a void function.

royhowie Over a year ago

Setting document.write equal to x, before returning x, is no different.

Tanmoy Over a year ago

There should be no return value wii be there i think.

Collectives™ on Stack Overflow

Javascript, function scope and return operator

6 Answers 6

Comments

Comments

Comments

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related