A deep dive in the Vue.js source code (#9): the camelize function

The camelize function camelizes a hyphen-delimited string.

This is the ninth post in a series examining the Vue.js source code line-by-line. In the last post, we examined the cached function. In this post, we examine the camelize function which takes a string and returns a camelized string.

First, a variable named camelize is initialized in the top level scope and set to the results of calling the cached function. The cached function is passed a function that accepts a string as a parameter:

var camelize = cached(function (str) {
return str.replace(camelizeRE, function (_, c) { return c ? c.toUpperCase() : ''; })
});

As you will remember from our last post, the cached function creates a cached version of a function. In this case, when the camelize variable is initialized, the cached function creates an empty object:

function cached (fn) {
var cache = Object.create(null);
return (function cachedFn (str) {
var hit = cache[str];
return hit || (cache[str] = fn(str))
})
}

And returns a function (creating a closure) that will check, every time camelize is called, to determine whether camelize has been called with a particular parameter. If it hasn’t, the results are mapped to thecache object. If it has been called with the particular parameter, camelize will just return the results from the cache object.

function cached (fn) {
var cache = Object.create(null);
return (function cachedFn (str) {
var hit = cache[str];
return hit || (cache[str] = fn(str))
})

}

But what results are we talking about? The camelize function passes a function to cache which calls the String replace() method. The String replace() method “searches a string for a specified value, or a regular expression, and returns a new string where the specified values are replaced,” taking the search value as the first parameter and the new value as the second parameter.

var camelize = cached(function (str) {
return str.replace(camelizeRE, function (_, c) { return c ? c.toUpperCase() : ''; })
});

Here, the regular expression at issue is camelizeRE:

var camelizeRE = /-(\w)/g;

So, the String replace() method searches for a hyphen before a word character:

var camelize = cached(function (str) {
return str.replace(camelizeRE, function (_, c) { return c ? c.toUpperCase() : ''; })
});

And replaces it by using a function to return the replacement text:

var camelize = cached(function (str) {
return str.replace(camelizeRE, function (_, c) { return c ? c.toUpperCase() : ''; })
}
);

The function checks to determine whether a c parameter was passed; if so, the function calls the String toUppercase() method to convert c to uppercase and returns c.

var camelize = cached(function (str) {
return str.replace(camelizeRE, function (_, c) { return c ? c.toUpperCase() : ''; })
});

If a c parameter is not passed, it the function returns an empty string:

var camelize = cached(function (str) {
return str.replace(camelizeRE, function (_, c) { return c ? c.toUpperCase() : ''; })
});

To recap, in the seventh post of this series, we learned that the normalizeProps function calls the camelize function. In the eighth post, we examined the cached function which allows the camelize function to cache results. And finally, in this post, we examined the camelize function which camelizes a hyphen-delimited string. In the next post, we can finally turn back to the normalizeProps function.

If you like the series and want to motivate me to keep working through it, please feel free to clap, follow, respond, or share to your heart’s content.

Next Post: