DEV Community

loading...

Object-Oriented JavaScript — Doing Things with Functions

aumayeung profile image John Au-Yeung Originally published at thewebdev.info ・2 min read

Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62

Subscribe to my email list now at http://jauyeung.net/subscribe/

JavaScript is partly an object-oriented language.

To learn JavaScript, we got to learn the object-oriented parts of JavaScript.

In this article, we’ll look at functions.

Running a Function

We can run a function by adding parentheses after its name.

It works regardless of how a function is defined.

For instance, if we have a function:

const sum = function(a, b) {
  return a + b;
};
Enter fullscreen mode Exit fullscreen mode

Then we run it by writing:

sum(1, 2);
Enter fullscreen mode Exit fullscreen mode

We pass in the numeric arguments sum expects.

Anonymous Functions

Anonymous functions are functions that have no name.

The sum function we had before had a function that had no name assigned to a variable.

This way, we can call it anywhere.

Callback Functions

Callback functions are functions that are called by other functions.

For instance, we can write:

function runAdd(a, b) {
  return a() + b();
}
Enter fullscreen mode Exit fullscreen mode

The runAdd function calls the a and b functions.

Therefore, we have to pass 2 functions to it.

We can use it by writing:

const sum = runAdd(() => 1, () => 2)
Enter fullscreen mode Exit fullscreen mode

We passed in a function that returns 1 and one that returns 2 as arguments.

Then we get 3 returned.

So sum is 3.

Callbacks are useful when we run async code.

We can call callback when the async code has its results.

We can also have synchronous callbacks to do repeated operations like with array methods like map , filter and reduce .

We can make our own map method by writing:

function map(arr, callback) {
  const result = []
  for (const a of arr) {
    result.push(callback(a));
  }
  return result;
}
Enter fullscreen mode Exit fullscreen mode

Then we can use it by writing:

const result = map([1, 2, 3], (x) => x * 2);
Enter fullscreen mode Exit fullscreen mode

Then result would be [2, 4, 6] .

map takes an array arr , loops through each entry with the for-of loop, and call callback on each entry with each entry.

Immediate Functions

Immediate functions are functions that are called immediately after they’re defined.

For instance, we can write:

(
  function() {
    console.log('foo');
  }
)();
Enter fullscreen mode Exit fullscreen mode

Then we created a function and called it immediately.

We should surround it with parentheses so we know we’re calling it.

We can also write:

(function() {
  console.log('foo');
})();
Enter fullscreen mode Exit fullscreen mode

And we can get the returned value and write:

const result = (function() {
  //...
  return {
    //...
  }
}());
Enter fullscreen mode Exit fullscreen mode

We return some result in the function and assigned that to result .

Inner (Private) Functions

Functions are like any other variable, so we can put them in another function.

For instance, we can write:

function outer(param) {
  function inner(a) {
    return a * 100;
  }
  return inner(param);
}
Enter fullscreen mode Exit fullscreen mode

We have a inner function that returns its parameter multiplied by 100.

Then we return the result.

The benefit of having inner functions is that the variables inside the function can’t be accessed from the outside.

But the inner function can access variables from the outer function.

This is a big benefit since we don’t have to define variables at the global scope.

Conclusion

There’re many benefits to defining private functions.

We can also define immediately invoked functions to return something.

Functions can be anonymous and can be parameters of another function.

Discussion (0)

pic
Editor guide