Advertisement
JavaScript & AJAX

Quick Tip: How to Extend Built-in Objects in JavaScript

by

Constructor functions, like Array, offer a wide range of methods and properties that you can make use of. But have ever wished that one of these objects offered some method that isn't built-in? Is there a way to do so yourself? Absolutely! Let's see how.

Reversing a String

This little snippet takes advantage of the Array object's "reverse" method, and applies its functionality to a given string. In effect, something like "hello" will be turned into "olleh," and can be accessed by using "myString.reverse()".

String.prototype.reverse = function() {
	return Array.prototype.reverse.apply(this.split('')).join('');
};
	
var myString = 'hello';
console.log(myString.reverse());

Bonus Question

Now that we have a basic of understanding of augmenting objects, can you figure out a way to write a custom "contains" method for the String object? For example, the jQuery library allows us to write things like:

$("div:contains('John')").css('fontWeight', 'bold');

The snippet above will search through all of the divs on the page, and then filter that wrapped set down to only those that contain the string "John." How could we extend the String object, with raw JavaScript, to allow for this? Leave your solution in the comments, and we'll discuss!

Related Posts
  • Code
    WordPress
    Quick Tip: Post Types, Taxonomies and PermalinksPost types taxonomies urls
    Custom Post Types and taxonomies are two powerful features of WordPress. Unfortunately, they can have a tendency to cause problems if developers aren't familiar with how permalinks, URLs, and rewriting works within WordPress. In this quick tip, we aim to cover the topic very briefly to make sure you know all you need to know about WordPress URLs, custom post types, taxonomies, and how they all relate.Read More…
  • Code
    WordPress
    Object-Oriented Programming in WordPress: TypesWordpress oop
    In the last post, we took a look at classes which are the building blocks of object-oriented programming. Before we go any further, we need to take a survey of some of the data types that PHP offers. Though we won't be reviewing every type in this particular article, we're going to take a look at some of the more popular types that we'll be using in WordPress development.Read More…
  • Code
    Web Development
    Laravel Unwrapped: Session, Auth and CacheLaravel wide retina preview
    Join me as we learn how to use Laravel's component-based system, Illuminate. Additionally, we'll see how to utilize service providers, Laravel's manager system, the Session, Auth, and Cache components, and the Store, Guard, and Repository libraries.Read More…
  • Code
    WordPress
    Mastering WordPress Meta Data: Understanding and Using ArraysMetadata
    In the first part of this series, we covered what WordPress meta data is, how it can be retrieved, and the various data types (such as objects or arrays) in which it can be returned. Now it's time to learn about the different types of arrays. When you write an array manually you know what its structure is an what the name of each index is. But when you are building arrays by querying a database, you are going to need to do some detective work to determine the structure of the data returned and the names of the indexes.Read More…
  • Code
    JavaScript & AJAX
    Testing in Node.jsNodejs testing chai retina preview
    A test driven development cycle simplifies the thought process of writing code, makes it easier, and quicker in the long run. But just writing tests is not enough by itself, knowing the kinds of tests to write and how to structure code to conform to this pattern is what it's all about. In this article we will take a look at building a small app in Node.js following a TDD pattern.Read More…
  • Code
    JavaScript & AJAX
    JavaScript ObjectsCover
    In JavaScript, objects are king: Almost everything is an object or acts like an object. Understand objects and you will understand JavaScript. So let's examine the creation of objects in JavaScript.Read More…