How to prepend a string using 'this'

Question

Say I have an array of strings. And I want to prepend each of these strings with a fixed (common) string. I know that in Javascript, strings can be concatenated like strM = str1 + str2 + str3 + ... + strN or strM = concat(str1, str2, str3, ..., strN). Consider this piece of code.

var defImgDirPath = 'res/img/';
$([
  'home-icon-dark.png',
  'home-icon-light.png'
]).each(function() {
  /*
   * Prepend each string with defImgDirPath
   */
});

Now I can't do this = defImgDirPath + this; (I was stupid enough to try)

Also, I tried return (defImgDirPath + this); but that wouldn't work either.

I am thinking something along the lines of a function like this.prependString(defImgDirPath); but does such a function exist? If not, how do I write one?

Note: I know it can be done much easily and simply with a for loop too, but what's the fun in that? :)

Answer 1

var defImgDirPath = 'res/img/';
var images = [
    'home-icon-dark.png',
    'home-icon-light.png'
];
$(images).each(function(idx, val) {
  images[idx] = defImgDirPath + val;
});

console.log(images);

Answer 2

In latest standards of javascript (ECMA 5), You can do this without jquery:

var defImgDirPath = 'res/img/';

['home-icon-dark.png','home-icon-light.png'].map(function(i) { 

        return defImgDirPath + i;  });

EDIT : Besides, map function of jquery works similar too.

Answer 3

The problem is that you are changing a copy of the item in the array, so the array will be unaffected.

Loop through the indexes in the array and put the result back in the array:

var arr = [ 'home-icon-dark.png', 'home-icon-light.png' ];

for (var i = 0; i < arr.length; i++) {
  arr[i] = defImgDirPath + arr[i];
}

If you really want to use a loop method from jQuery, then you would need to use map, so that you get the result as an array. Note that you need to use the parameters of the callback function, as this is not the item from the array:

arr = $.map(arr, function(str){
  return defImgDirPath + str;
});

Answer 4

In Javascript, this always refers to an object (the current context object), so it won't ever be a string, and therefore trying to concatenate it with another string will fail, as you've found.

However, there's no need to use jQuery or objects for what you're doing; you're just prepending a known value to the start of each of an array of strings.

Let's rewrite it using standard Javascript, without the jQuery complications...

var defImgDirPath = 'res/img/';
var images = [
  'home-icon-dark.png',
  'home-icon-light.png'
];

for(var count=0; count<images.length; count++) {
    images[count] = defImgDirPath + images[count];
}

I've put the images array into a variable to make it easier to see what the actual loop code is doing. As you can see, it's a pretty simple loop; no need for jQuery magic here.

hope that helps.

Answer 5

this.prependString(defImgDirPath);

No. Strings are immutable in JavaScript. Concatenation to a new string would be fine, and using .concat it would look like

var newString = defImgDirPath.concat(this); // no static function!

If not existing, how do I write one?

You can't, as assigning object to "this" is impossible.

Instead, you have to assign to a property of the array you're working on (using the static $.each instead of working on a collection):

var arr = [
  'home-icon-dark.png',
  'home-icon-light.png'
];
$.each(arr, function(i) {
   arr[i] = defImgDirPath + this;
});
arr[0] // res/img/home-icon-dark.png

Also I tried return (defImgDirPath + this);

You would need to use map for that, creating a new array:

var arr = $.map([
  'home-icon-dark.png',
  'home-icon-light.png'
], function(str) {
    return defImgDirPath + str;
});

---

Of course, it might be easier without jQuery at all:

for (var i=0; i<arr.length; i++) {
    arr[i] = defImgDirPath + arr[i];
}

And also map is available as a native function (not in outdated browsers):

var arr = [
  'home-icon-dark.png',
  'home-icon-light.png'
].map(function(str) {
    return defImgDirPath + str;
});