2

The list processing routine map on an array object is very convenient at times. Here's one of the handy ways to use it:

var numarr = [1,2,3,4];
console.log(numarr.map(String))

>>> ["1", "2", "3", "4"]

I took this for granted thus far. Today I was however puzzled by it. What the map function is returning above is an array of strings. We typically pass a function to map as argument. In above case we pass String object. String is implemented inside the Javascript implementation, so I don't know what kind of specialities it has. The above code works as if a new instance of String is created for each item in array.

If it's not clear, consider this. If I decide to implement an object in Javascript say MyString and pass it to map, I won't get the above behavior.

function MyString(x) { this.val = x; }

MyString.prototype.toString = function () { return String(this.val); };

var ms = new MyString(4)

console.log(String(ms));
>>> "4"

var arr = [1,2,3];
arr.map(MyString)
>>> [undefined, undefined, undefined]

Does anyone know why then arr.map(String) works the way it does?

Update: A comment I added below clarifies my question better.

Improve this question
3
  • 4
    Did you see what typeof String returns? "If I decide to implement an object in Javascript say MyString [...]": MyString is a function too! But it shows undefined because you are not returning anything form it. Commented May 2, 2013 at 2:38
  • You are right, I am not returning anything. But then what should I return? a new instance of MyString? Commented May 2, 2013 at 13:34
  • To important point here is that while String is a construtor function which returns a string object when it is called with new, it returns a string primitive value when it's called without new. You can do something similar with your function if you wanted to. But in general this would not make sense for custom constructors, so you would rather use .map with arr.map(function(v) { return new MyString(v); });. Commented May 2, 2013 at 13:41

3 Answers 3

Reset to default
4

At the end of the 2nd snippet, try console.log(val). You'll notice you've leaked a global:

var arr = [1,2,3];
arr.map(MyString);
console.log(val); // "3"

When using arr.map(MyString), you're calling that constructor as a function, without the new to create instances. And, since MyString doesn't return anything, you get undefined in the results. But, you've still set this.val, while this isn't an instance but is rather the global object.

String doesn't return undefined because it has a return when called without new:

When String is called as a function rather than as a constructor, it performs a type conversion.

Returns a String value (not a String object) computed by ToString(value). If value is not supplied, the empty String "" is returned.

You can imitate this with MyString by checking if this is an instance first, returning a new instance when this isn't one already:

function MyString(x) {
    if (this instanceof MyString) {
        this.val = x;
    } else {
        return new MyString(x);
    }
}

var arr = [1, 2, 3];
arr.map(MyString); // [ {val: "1"}, {val: "2"}, {val: "3"} ]
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Good observation regarding leaked "val". Took me a while to understand . But the answer doesn't address the question I have. See the update I added. I'm not looking for a practical solution, just trying to understand Javascript better.
@Jayesh Regarding your comment, you can avoid infinite recursion with if (this instanceof ...). With it, you can either modify this when it is an instance or return new MyString(x) when it isn't. It should only recurse once if needed. I've updated my answer with an example.
4

Array.map returns an array whose elements are the value returned by applying the specified function to each value in the this array. String is a function; it returns a string. That's all there is to it.

Improve this answer

6 Comments

Functions are always first-class Javascript objects: a function is a function object. You can also run the same trick on the other javascript "types": Array, Date, Number, Boolean, Object.
@thefrontender: What's your point? (as comment to this answer)
@FelixKling This was the best answer when I commented. Questioner is obviously confused about relationship between objects and functions in JS. Do you think this comment belongs elsewhere or is unhelpful?
@thefrontender: I thought you were criticizing this answer somehow, but couldn't see why. Now I understand that it is just additional information. It might have been better as comment to the question, but it's not a big deal, I was just confused.
Ok, I understand that "String is a function; it returns a string". Is it possible then to do it in pure javascript? If we write a Javascript object (i.e. function) and in its constructor create a new instance of itself in order to return it, won't it lead to infinite recursion? (This is out of mere curiosity about Javascript's working and not necessarily to solve a specific problem)
|
0

Thats is because String is a function. It returns a string constructed from what is passed to it. For example, if you call String(100), it will return "100".

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.