Learning JavaScript Native Functions and How to Use Them

Devan Patel
💬 comments


JavaScript is becoming the most popular programming language though it is very misunderstood. Understanding JavaScript's internals is tough. Similarly, coercing JavaScript into a more conventional paradigm, such as Object Oriented or Functional Programming can be equally challenging. I want to highlight key native functions with hopes to elucidate JavaScript's innards.

In this article, I discuss the following behaviors:

  • Call/Apply
  • Bind
  • Map
  • Filter

I first define the function (with Mozilla's signature), then provide an example, and lastly implement it.

Table of Contents

    To explain these behaviors, I need to expound on the convoluted 'this' keyword as well as the 'arguments' array-like object.

    this && arguments Objects

    JavaScript's scoping is function-based, formally known as lexical-scoped, variables and methods' scopes are within the current function. "Additionally, functions run in the scope that they are defined in, not the one they are executed in." To read more on scopes, check out 4 Javascript Design Patterns You Should Know. The 'this' object references the present function context and used in several ways. For instance, it can be bound to the window (globally scoped).

    this.globalVar = {
        myGlobalVarsMethod: function (){
            // Implementation
    console.log(this.globalVar); // { myGlobalVarsMethod: [Function] }

    And variables can be bound to the containing function, like so:

    this.globalVariable = 'globalVariable';
    function globalFunction (){
        this.innerVariable = 'innerVariable';
        console.log(this.globalVariable === undefined); // true
        console.log(this.innerVariable === 'innerVariable'); // true
        return {
            innerFunction: function () {
                console.log(this.globalVariable === undefined); // true
                console.log(this.innerVariable === undefined); // true

    There are separate 'this' objects bound to each invoking function. Strict mode seeks to secure applications by throwing exceptions/erros (TypeErrors) if variables are undefined. In production environments strict mode is preferred; however, I purposefully opt out for the rest of this article to avoid thrown errors. Here is a simple example of strict mode:

    this.globalVar = 'globalVar';
    function nonStrictFunctionTest () {
        return function () {
            console.log(this.globalVar); // undefined
    function strictFunctionTest () {
        'use strict'; // Strict Mode
        return function () {
            console.log(this.globalVar); // TypeError: Cannot read property 'globalVar' of undefined

    Unbeknownst to many Javascript developers, there is an arguments object created within a function. It is an Array-like object (only having the property length). Arguments has three main properties, namely, callee (the invoking method), length, and caller (the reference to invoked function).

    Declaring a variable arguments inside a function replaces/overrides the primary arguments object.

    The following showcases the arguments object:

    function fn (){
        console.log(typeof arguments); // [object Object]
        console.log(arguments[0]); // DeathStar
        console.log(arguments[1]); // Tatooine
        arguments.push("Naboo"); // TypeError: undefined is not a function
        var arguments = "Star Wars";
        console.log(arguments[5]); // W
    fn("DeathStar", "Tatooine");

    To create an array with the arguments, take this route:

    var args = Array.prototype.slice.call(arguments);


    Both call and apply are used to invoke a method on an object. In contrasting to using the dot operator, call and apply both accept this as the first argument. As described above, every function maintains a specific scope in which it is defined. Therefore, you must take into account the function's scope when invoked on the object.

    Mozilla's apply and call signatures are, respectively, as follows:

    fun.apply(thisArg, [argsArray])
    fun.call(thisArg[, arg1[, arg2[, ...]]])

    By explicitly passing thisArg, the invoking function can access or modify objects in the particular context. The following example clarifies call's use.

    this.lightSaberColor = 'none';
    var darthVader = {
        team: 'Empire',
        lightSaberColor: 'Red'
    var printLightSaberColor = function(){
    printLightSaberColor() // none
    printLightSaberColor.call(darthVader); // Red
    printLightSaberColor.apply(darthVader); // Red

    Notice that the first invocation defaults to the global scope (window), however, the second one resolves to darthVader.

    The main difference between using call and apply is their signature. Call requires an explicit list of arguments separately passed in, whereas apply requires an array consisting of the arguments. I remember it by this mnemonic: "Apply uses an Array." Apply is more suitable when your program is not aware of the number of arguments.

    Currying (partial function application) is a functional programming use case for call and apply. Currying allows us to create functions that return functions requiring a subset of arguments with predetermined conditions. Here is a currying function:

    var curry = function(fun) {
      // nothing to curry. return function
      if (arguments.length < 1) {
        return this;
      // Create an array with the functions arguments
      var args = Array.prototype.slice.call(arguments, 1);
      return function() {
        // *Apply* fn with fn's arguments
        return fun.apply(this, args.concat(Array.prototype.slice.call(arguments, 0)));
    // Creating function that already predefines adding 1 to a
    function addOneToNumber(a) {
        console.log(1 + a);
    // addOneCurried is of function
    var addOneCurried = curry(addOneToNumber);
    console.log(addOneCurried(10)); // 11

    Even though arguments is not an array, Array.prototype.slice can transform Array-like objects to new arrays.


    The bind method is used to invoke methods while explicitly specifying this. Similar to call and apply, scoping matters. It is useful for when you need to bind an object to a function's this object.

    Below is bind's signature:

    fun.bind(thisArg[, arg1[, arg2[, ...]]])

    In layman's terms, we are taking function fun and passing thisArg through it. Essentially, whenever this is called in fun, it is referring to thisArg. Let's take a closer look at a simple example:

    var lukeSkywalker = {
        mother: 'Padme Amidala',
        father: 'Anakin Skywalker'.
    var getFather = function(){
    getFather(); // undefined
    getFather.bind(lukeSkywalker)(); // Anakin Skywalker
    getFather(lukeSkywalker); // undefined

    The first getFather() returns undefined because the father attribute is not set on this. Then what is this? It is the global window object since we did not explicitly set it! The second getFather() returns "Anakin Skywalker" because lukeSkywalker is getFather()'s this. Many Java/C++ developers would assume the last getFather() call would return the desired result - though once again, this is bound to global.

    Here is the implementation of bind:

    Function.prototype.bind = function(scope) {
      var _that = this;
      return function() {
        return _that.apply(scope, arguments);

    Consequent to Javascript's lexical scoping, the returned function's this object is different to bind's. Hence, _that is set to *this* to maintain the correct scope. Otherwise, this.apply(scope, arguments)would be undefined.


    Javascript's map function is a functional programming technique for iterating over an array while transforming each element. It creates a new array with the 'modified' elements returned in a callback. I mention modifying or transforming elements, though if the elements are objects (not primitives), good practice dictates cloning the object rather than physically altering the original one.

    Here is the method signature:

    arr.map(callback[, thisArg])

    The callback method has three parameters, namely, currentValue, index, and array.

    Here is a simple example of map:

    function Jedi(name) {
        this.name = name;
    var kit = new Jedi('Kit');
    var count = new Jedi('Count');
    var mace = new Jedi('Mace');
    var jedis = [kit, count, mace];
    var lastNames = ['Fisto', 'Dooku', 'Windu'];
    var jedisWithFullNames = jedis.map(function(currentValue, index, array) {
        var clonedJedi = (JSON.parse(JSON.stringify(currentValue))) // Clone currentValue
        clonedJedi.name = currentValue.name + " " + lastNames[index];
        return clonedJedi;
    jedisWithFullNames.map(function(currentValue) {
    Kit Fisto
    Count Dooku
    Mace Windu

    With an understanding of what map does, take a look at its implementation:

    Array.prototype.map = function (fun, thisArg) {
        if(typeof fun !== 'function') {
            throw new Error("The first argument must be of type function");
        var arr = [];
        thisArg = (thisArg) ? thisArg : this;
        thisArg.forEach(function(element) {
            arr[arr.length] = fun.call(thisArgs, element);
        return arr;

    [Note: this is a simple implementation. To see ECMAscript 5's full implementation, check out its spec.]


    The filter method is another array behavior. Similar to map, filter returns a new array and accepts a function and an optional thisArg. However, the returned array contains only elements that fit a certain condition tested in the callback function. The callback function must return a boolean - returning true signals the element to be accepted and inserted into the returned array.

    There are many use cases for filter, including picking the even integers, selecting objects with a particular property, or choosing valid phone numbers.

    Here is the method signature:

    arr.filter(callback[, thisArg])

    Once again, thisArg is optional and the callback function accepts three paramters, currentValue, index, and array.

    Here is an example of filter:

    function Person(name, side) {
        this.name = name;
        this.side = side;
    var hanSolo = new Person('Han Solo','Rebels');
    var bobaFett = new Person('Boba Fett','Empire');
    var princessLeia = new Person('Princess Leia', 'Rebels');
    var people = [hanSolo, bobaFett, princessLeia];
    var enemies = people.filter(function (currentValue, index, array) {
        return currentValue.side === 'Empire';
    .map(function(currentValue) {
        console.log(currentValue.name + " fights for the " + currentValue.side + ".");
    Boba Fett fights for the Empire.

    Interestingly, array methods are chainable to create fun and complex operations.

    Lastly, lets take a look at filter's implementation:

    Array.prototype.filter = function(fun, thisArg) {
        if(typeof fun !== 'function') {
            throw new Error("The first argument must be of type function");
        var arr = [];
        thisArg = (thisArg) ? thisArg : this;
        thisArg.forEach(function(element) {
          if (fun.call(thisArg, element)) {
            arr[arr.length] = element;
        return arr;

    [Here is the spec for ECMAscript's implementation]


    There are many more native functions that prove useful though these happen to be the most confusing. It is worth reviewing every method on Arrays and Functions.

    Hopefully, this gives an insight into Javascript's internals and clarifies Javascript's confusing lexical scope. Call, apply, and bind are tricky to grasp though it becomes more fluid with practice. Try to implement map and filter whenever possible while avoiding traditional looping techniques.

    Devan Patel

    3 posts

    I'm an avid Javascript developer which I write about here. Feel free to reach out to me on my Twitter or check out the projects I work on at my Github!