{"id":3403,"date":"2021-05-11T15:35:20","date_gmt":"2021-05-11T20:35:20","guid":{"rendered":"http:\/\/bluegalaxy.info\/codewalk\/?p=3403"},"modified":"2021-05-13T13:19:39","modified_gmt":"2021-05-13T18:19:39","slug":"javascript-how-to-use-the-call-method","status":"publish","type":"post","link":"https:\/\/bluegalaxy.info\/codewalk\/2021\/05\/11\/javascript-how-to-use-the-call-method\/","title":{"rendered":"JavaScript: How to use the .call( ) method"},"content":{"rendered":"\n

The .call()<\/code> method is a JavaScript built-in that allows you to call a function that is defined in another object. Here is what w3schools.com says about the .call()<\/code> method:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

The first argument when using .call()<\/code> will always be expected to be an object that contains keys that the calling function requires as arguments. For example:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

The syntax is:<\/p>\n\n\n\n

  1. The name of the object that contains the function<\/li>
  2. dot<\/li>
  3. The name of the function being used<\/li>
  4. dot<\/li>
  5. call(<\/li>
  6. The name of another object that has a key name or names that the function needs<\/li>
  7. closing parenthesis<\/li><\/ol>\n\n\n\n

    nameOfObject.nameOfFunction.call(nameOfOtherObject)<\/code><\/p>\n\n\n\n

    or<\/p>\n\n\n\n

    object.function.call(otherObject)<\/code><\/p>\n\n\n\n

    \/\/ \n\nobject.call()\nobject.call(thisArg)\nobject.call(thisArg, arg1)\nobject.call(thisArg, arg1, arg2)\nobject.call(thisArg, arg1, ... , argN)\n\n\/\/Note: In JavaScript, functions are objects, so we can substitute the name object above with a function name.\n<\/pre>\n\n\n\n
    If the object function being called has no function arguments passed in, but uses the this<\/code> key word instead, it means the the arguments to the function will come only from the context. The screen shot above shows this.<\/p>\n\n\n\n
    It is possible that the object function to be called uses it’s own function arguments as well though. For example:<\/p>\n\n\n\n
    \/* This function uses a mix of context and function arguments\nIt is set up such that it has a function that expects four pieces\nof information:\n1. firstName (not supplied, so must be supplied by another object)\n2. lastName (not supplied, so must be supplied by another object)\n3. city (not supplied, so must be supplied as a function argument in the call)\n1. country (not supplied, so must be supplied as a function argument in the call)\n*\/\nvar person = {\n  fullName: function(city, country) {\n    return this.firstName + \" \" + this.lastName + \", \" + city + \", \" + country;\n  }\n}\n\n\/\/ These objects will supply the two context arguments\nvar person1 = {\n  firstName: \"Peter\",\n  lastName: \"Pumpkineater\"\n}\nvar person2 = {\n  firstName: \"Anne\",\n  lastName: \"Green\"\n}<\/pre>\n\n\n\n
    Below I will detail more uses cases and what the outputs are via code.<\/p>\n\n\n\n
    Here is an example of using .call where all arguments are provided:<\/p>\n\n\n\n
    console.log(person.fullName.call(person1, \"Labrador\", \"Nova Scotia\"));<\/pre>\n\n\n\n
    The output is:<\/p>\n\n\n\n
    \"Peter Pumpkineater, Labrador, Nova Scotia\"<\/pre>\n\n\n\n
    Here is an example of using .call where only the first two arguments provided via properties defined as keys in an object:<\/p>\n\n\n\n
    console.log(person.fullName.call(person2));<\/pre>\n\n\n\n
    The output is:<\/p>\n\n\n\n
    \"Anne Green, undefined, undefined\"<\/pre>\n\n\n\n
    Notice that JavaScript automatically sets the missing argument values to undefined. <\/p>\n\n\n\n
    The first argument should always be an object with properties that fills in the first two arguments expected by the function. Therefore, this call interprets “North Dakota” as the third argument (city). It can’t find firstName or lastName keys in the string “Fargo”, so those first two arguments are filled with undefined.<\/p>\n\n\n\n
    console.log(person.fullName.call(\"Fargo\", \"North Dakota\"));<\/pre>\n\n\n\n
    The output is:<\/p>\n\n\n\n
    \"undefined undefined, North Dakota, undefined\"<\/pre>\n\n\n\n
    If a third argument was tacked onto the end like so:<\/p>\n\n\n\n
    console.log(person.fullName.call(\"Fargo\", \"North Dakota\", \"USA\"));<\/pre>\n\n\n\n
    The new output would be:<\/p>\n\n\n\n
    \"undefined undefined, North Dakota, USA\"<\/pre>\n\n\n\n
    This is because it is still looking for the first argument to be an object that supplies the first two properties needed by the person.fullName function. The second and third properties are therefore plugged into the city and country positions.

    What if we were to use an object with only one of the two needed first arguments for the person.fullName function?<\/p>\n\n\n\n
    var dog = {\n  firstName: \"Sammy\"\n}\nconsole.log(person.fullName.call(dog, \"Fargo\", \"North Dakota\"));<\/pre>\n\n\n\n
    The output is:<\/p>\n\n\n\n
    \"Sammy undefined, Fargo, North Dakota\"<\/pre>\n\n\n\n
    JavaScript automatically filled in undefined for the missing context argument.

    Could we also set up ALL of the expected arguments in the called object? Let’s try it:<\/p>\n\n\n\n
    var dog1 = {\n  firstName: \"Sammy\",\n  lastName: \"Bowammy\",\n  city: \"Nashville\",\n  country: \"Tennessee\"\n}\nconsole.log(person.fullName.call(dog1));<\/pre>\n\n\n\n
    Nope. The output is:<\/p>\n\n\n\n
    \"Sammy Bowammy, undefined, undefined\"<\/pre>\n\n\n\n
    This is because the person.fullName function requires arguments #3 and #4 to be supplied in the function call, not as properties of an object. So the lesson here is, if we want to only take in keys from objects, then don’t list any of the function arguments as needing to be passed in. We would instead need to use the key word this. For example:<\/p>\n\n\n\n
    var person = {\n  fullName: function() {\n    return this.firstName + \" \" + this.lastName + \", \" + this.city + \", \" + this.country;\n  }\n}\nconsole.log(person.fullName.call(dog1));<\/pre>\n\n\n\n
    Now we get the correct output:<\/p>\n\n\n\n
    \"Sammy Bowammy, Nashville, Tennessee\"<\/pre>\n\n\n\n
    Now if I add more arguments to the call, they will be ignored:<\/p>\n\n\n\n
    console.log(person.fullName.call(dog1, \"Brownsville\", \"Texas\"));<\/pre>\n\n\n\n
    Which yields:<\/p>\n\n\n\n
    \"Sammy Bowammy, Nashville, Tennessee\"<\/pre>\n\n\n\n
    This is because in the call, all four expected arguments have been supplied as context arguments using the this key word.<\/p>\n\n\n\n
    There is a way to allow for passing in function arguments to override context arguments. For example:<\/p>\n\n\n\n
    var person = {\n  fullName: function(city, country) {\n    if (city && country){\n      return this.firstName + \" \" + this.lastName + \", \" + city + \", \" + country;\n    } else {\n      return this.firstName + \" \" + this.lastName + \", \" + this.city + \", \" + this.country;\n    }\n  }\n}<\/pre>\n\n\n\n
    In this case, the function will first look to see if function arguments are provided. If not, it will attempt to use the target object’s context properties.<\/p>\n\n\n\n
    Let’s test this: (We can still get all arguments from an object)<\/p>\n\n\n\n
    console.log(person.fullName.call(dog1));<\/pre>\n\n\n\n
    The output is from the else portion, using only object context:<\/p>\n\n\n\n
    \"Sammy Bowammy, Nashville, Tennessee\"<\/pre>\n\n\n\n
    Now if I pass in two arguments to the function call, they get used!<\/p>\n\n\n\n
    console.log(person.fullName.call(dog1, \"Brownsville\", \"Texas\"));<\/pre>\n\n\n\n
    The output is from the if portion, using a mix of object context and function arguments:<\/p>\n\n\n\n
    \"Sammy Bowammy, Brownsville, Texas\"<\/pre>\n\n\n\n
    <\/p>\n\n\n\n
    <\/p>\n\n\n\n
    For more information about JavaScript’s built-in .call()<\/code> method, see:<\/p>\n\n\n\n
    https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Function\/call<\/a>
    https:\/\/www.w3schools.com\/Js\/js_function_call.asp<\/a><\/p>\n\n\n\n
    <\/p>\n","protected":false},"excerpt":{"rendered":"
    The .call() method is a JavaScript built-in that allows you to call a function that is defined in another object. Here is what w3schools.com says about the .call() method: The first argument when using .call() will always be expected to be an object that contains keys that the calling function requires as arguments. For example: … Continue reading JavaScript: How to use the .call( ) method<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[44],"tags":[225,45,226],"class_list":["post-3403","post","type-post","status-publish","format-standard","hentry","category-javascript-language","tag-call","tag-javascript","tag-this"],"_links":{"self":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/3403","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/comments?post=3403"}],"version-history":[{"count":13,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/3403\/revisions"}],"predecessor-version":[{"id":3420,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/3403\/revisions\/3420"}],"wp:attachment":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/media?parent=3403"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/categories?post=3403"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/tags?post=3403"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}