{"id":2175,"date":"2013-04-05T16:38:23","date_gmt":"2013-04-05T23:38:23","guid":{"rendered":"http:\/\/jeffreyatw.com\/blog\/?p=2175"},"modified":"2013-04-05T16:38:23","modified_gmt":"2013-04-05T23:38:23","slug":"what-is-a-function","status":"publish","type":"post","link":"https:\/\/jeffreyatw.com\/blog\/2013\/04\/what-is-a-function\/","title":{"rendered":"What is a function?"},"content":{"rendered":"

I’m trying my hand at writing a ridiculously easy-to-follow guide on JavaScript essentials. There might be many of these out there, but this one is mine. Tell me what you think and whether I can clarify or simplify at any point.<\/em>
\nIn JavaScript, a function<\/dfn> is a bunch of code that can be run, or called, repeatedly.<\/p>\n

Creating a function<\/h2>\n

Here is an example of a function being created:
\n[javascript]
\nvar doStuff = function () {
\n \/\/ Code you want to run goes here!
\n}
\n[\/javascript]
\nIn this example, we are first creating a variable called doStuff<\/code>. doStuff<\/code> is then being assigned a function as its value – which means, from now on when we refer to doStuff<\/code>, we are referring to a bunch of code that can be called.<\/p>\n

Calling a function<\/h2>\n

Whenever you see parentheses following a variable, it means we are calling<\/dfn> a function – the code inside it will be run:
\n[javascript]
\ndoStuff(); \/\/ the doStuff function is being called.
\n[\/javascript]
\nThis is in contrast to just referring to a variable, which is valid, but doesn’t do anything:
\n[javascript]
\ndoStuff; \/\/ no-op
\n[\/javascript]<\/p>\n

Arguments<\/h2>\n

Some functions can change what they do, based on how they are called.
\nWhen we are writing code for the browser, we automatically have access to a function named alert<\/code>, which tells the web browser to pop up a dialog box. When we call alert<\/code>, we need to specify what exactly to show inside that dialog box:
\n[javascript]
\n\/\/ the alert function is being called with the string ‘Hello!’
\nalert(‘Hello!’);
\n[\/javascript]
\nIn this example, we are putting a string inside the parentheses. Anything placed inside these parentheses is called an argument<\/dfn>. In the case of alert<\/code>, the argument determines what text appears in the dialog box that shows up:
\n\"Screen<\/a>
\nIf we want to create a function that makes use of an argument, it would look like this:
\n[javascript]
\nvar takeThis = function (foo) {
\n \/\/ Inside these brackets,
\n \/\/ we have access to a variable named foo.
\n}
\n\/\/ foo’s value will be “Hello!” when the function is called.
\ntakeThis(“Hello!”);
\n\/\/ foo’s value will be 3 when the function is called.
\ntakeThis(3);
\n[\/javascript]
\nIn this example, we are saying that whatever is passed in as an argument when we call takeThis<\/code> will be referred to as foo<\/code> as the function runs. We can name the argument whatever we want, but it only affects how it will be referred to inside the function’s code.<\/p>\n

Returning<\/h2>\n

Functions can also give back a result after they’ve been called. This is called returning<\/dfn>. Returning is important if we want to receive the result of a function and use it someplace else:
\n[javascript]
\nvar giveMeSomething = function () {
\n return “Here you go”;
\n}
\nvar something = giveMeSomething();
\n\/\/ now something’s value will be “Here you go”
\n[\/javascript]
\nIn this example, we are using the command return<\/code> to specify what comes out of the function when it is called. Upon calling giveMeSomething<\/code>, we are taking its result and assigning it as the value of a new variable named something<\/code>.<\/p>\n

Multiple arguments<\/h2>\n

Functions can accept multiple arguments. It is as simple as separating the values being passed in with a comma. In this example, we are creating a function that can add two numbers together and return the result:
\n[javascript]
\nvar add = function (addend1, addend2) {
\n \/\/ add the two arguments together and then return the result
\n return addend1 + addend2;
\n}
\n\/\/ pass 1 and 2 when calling add and assign its result, 3, to sum
\nvar sum = add(1, 2);
\n[\/javascript]
\nHaving called add<\/code> with 1<\/code> and 2<\/code> as the arguments, those values are then assigned to addend1<\/code> and addend2<\/code>, respectively.<\/p>\n

Calling functions inside other functions<\/h2>\n

There’s nothing stopping us from calling functions within the code of another:
\n[javascript]
\nvar sayHello = function () {
\n alert(“Hello!”);
\n}
\n[\/javascript]
\nHere, we’re creating our own function and calling it inside another function we’re creating:
\n[javascript]
\nvar bar = function () {
\n \/\/ do something
\n}
\nvar foo = function () {
\n bar();
\n}
\nfoo(); \/\/ call foo, which will call bar
\n[\/javascript]
\nHere’s a more complex example where we’re passing in arguments and getting things returned to us:<\/p>\n

\n[javascript]
\nvar bar = function (arg) {
\n return arg – 1
\n}
\nvar foo = function (arg) {
\n return bar(arg) – 1;
\n}
\nvar result = foo(3);
\n[\/javascript]\n<\/div>\n

Seem complicated? Hover over these steps to see how this code will run:<\/p>\n

    \n
  1. bar<\/code> is defined and assigned<\/li>\n
  2. foo<\/code> is defined and assigned<\/li>\n
  3. foo<\/code> is called with 3<\/code> passed as the argument<\/li>\n
  4. foo<\/code> begins to run, with arg<\/code> having a value of 3<\/code><\/li>\n
  5. bar<\/code> is called with arg<\/code> passed as the argument<\/li>\n
  6. bar<\/code> begins to run, with its own version of arg<\/code> having a value of 3<\/code><\/li>\n
  7. arg<\/code> is subtracted by 1<\/code>, and returned<\/li>\n
  8. The result of bar(arg)<\/code>, which is 2<\/code>, is subtracted by 1<\/code>, and returned<\/li>\n
  9. The result of foo(3)<\/code>, which is 1<\/code>, is assigned to result<\/code>.<\/li>\n<\/ol>\n

    Passing functions into other functions<\/h2>\n

    To take it one step further, we can even pass functions themselves as arguments:<\/p>\n

    \n[javascript]
    \nvar bar = function () {
    \n \/\/ do something
    \n}
    \nvar foo = function (callMe) {
    \n \/\/ we are assuming that the argument is a function
    \n callMe();
    \n}
    \n\/\/ we are not calling bar here,
    \n\/\/ merely passing it in as an argument while calling foo
    \nfoo(bar);
    \n[\/javascript]\n<\/div>\n

    This last example might take a bit of time to understand. The difference between merely referring to a function versus calling it is an important distinction.<\/p>\n

      \n
    1. When we run foo(bar);<\/code> we are calling foo<\/code>, but not calling bar<\/code> – remember, we don’t see a pair of parentheses following it – we’re only referring to it and passing it in.<\/li>\n
    2. When foo begins to run, it has access to a variable named callMe<\/code>. Having specified the function bar<\/code> as the argument, callMe<\/code> now refers to it as well.<\/li>\n
    3. callMe<\/code>, or bar<\/code>, is called.<\/li>\n<\/ol>\n

      Why would we want to do this? So we can call foo<\/code> multiple times and tell it specifically which function to run each time. In the real world, foo<\/code> would do more than just call another function – it might do something with the result of that function, or return something itself.<\/p>\n

      \n

      That’s it for an introduction. I’ll see if I can write something about more complex topics like scopes, this<\/code>, recursion, closures, asynchronicity, et cetera – but we’ll start here and see how it goes.
      \n