Tag: javascript

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.

In JavaScript, a function is a bunch of code that can be run, or called, repeatedly.

Creating a function

Here is an example of a function being created:

var doStuff = function () {
  // Code you want to run goes here!
}

In this example, we are first creating a variable called doStuff. doStuff is then being assigned a function as its value – which means, from now on when we refer to doStuff, we are referring to a bunch of code that can be called.

Calling a function

Whenever you see parentheses following a variable, it means we are calling a function – the code inside it will be run:

doStuff(); // the doStuff function is being called.

This is in contrast to just referring to a variable, which is valid, but doesn’t do anything:

doStuff; // no-op

Arguments

Some functions can change what they do, based on how they are called.

When we are writing code for the browser, we automatically have access to a function named alert, which tells the web browser to pop up a dialog box. When we call alert, we need to specify what exactly to show inside that dialog box:

// the alert function is being called with the string 'Hello!'
alert('Hello!');

In this example, we are putting a string inside the parentheses. Anything placed inside these parentheses is called an argument. In the case of alert, the argument determines what text appears in the dialog box that shows up:

If we want to create a function that makes use of an argument, it would look like this:

var takeThis = function (foo) {
  // Inside these brackets,
  // we have access to a variable named foo.
}

// foo's value will be "Hello!" when the function is called.
takeThis("Hello!");

// foo's value will be 3 when the function is called.
takeThis(3);

In this example, we are saying that whatever is passed in as an argument when we call takeThis will be referred to as foo 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.

Returning

Functions can also give back a result after they’ve been called. This is called returning. Returning is important if we want to receive the result of a function and use it someplace else:

var giveMeSomething = function () {
  return "Here you go";
}

var something = giveMeSomething();
// now something's value will be "Here you go"

In this example, we are using the command return to specify what comes out of the function when it is called. Upon calling giveMeSomething, we are taking its result and assigning it as the value of a new variable named something.

Multiple arguments

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:

var add = function (addend1, addend2) {
  // add the two arguments together and then return the result
  return addend1 + addend2;
}

// pass 1 and 2 when calling add and assign its result, 3, to sum
var sum = add(1, 2);

Having called add with 1 and 2 as the arguments, those values are then assigned to addend1 and addend2, respectively.

Calling functions inside other functions

There’s nothing stopping us from calling functions within the code of another:

var sayHello = function () {
  alert("Hello!");
}

Here, we’re creating our own function and calling it inside another function we’re creating:

var bar = function () {
  // do something
}

var foo = function () {
  bar();
}

foo(); // call foo, which will call bar

Here’s a more complex example where we’re passing in arguments and getting things returned to us:

var bar = function (arg) {
  return arg - 1
}

var foo = function (arg) {
  return bar(arg) - 1;
}

var result = foo(3);

Seem complicated? Hover over these steps to see how this code will run:

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

Passing functions into other functions

To take it one step further, we can even pass functions themselves as arguments:

var bar = function () {
  // do something
}

var foo = function (callMe) {
  // we are assuming that the argument is a function
  callMe();
}

// we are not calling bar here,
// merely passing it in as an argument while calling foo
foo(bar);

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.

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

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

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