DEV Community

Megan Paffrath
Megan Paffrath

Posted on

1

JavaScript: Functions, Function Expressions, Objects, Methods, and this

Simple Basic Function

Here is a simple function that takes no arguments:

function hello() {
  console.log('Hello there stranger, how are you?');
}

hello();
Enter fullscreen mode Exit fullscreen mode

Here is a function that takes one argument:

function greet(person) {
  console.log(`Hi there ${person}.`);
}

greet('Megan');
Enter fullscreen mode Exit fullscreen mode

We can have more than one argument as follows:

function greetFullName(fName, lName) {
  console.log(`Hi there ${fName} ${lName}.`);
}

greetFullName('Megan', 'Paffrath');
Enter fullscreen mode Exit fullscreen mode

Function Expressions

Function expressions are just another way of writing functions. They still work the same way as above:

const square = function(x) {
   return x * x;
};

square(2); // 4
Enter fullscreen mode Exit fullscreen mode

Higher Order Functions

These functions operate with/on other functions, perhaps they:

  • accept other functions as arguments
  • return a function

An example of a function taking another function as an argument is:

function callTwice(func) {
  func();
  func();
}

function rollDie() {
  const roll = Math.floor(Math.random() * 6) + 1;
  console.log(roll);
}

callTwice(rollDie);
// random number
// random number
Enter fullscreen mode Exit fullscreen mode

An example of a function returning a function is:

function makeBetweenFunc(min, max) {
  return function (num) {
    return num >= min && num <= max;
  };
}

const isBetween = makeBetweenFunc(100, 200);
// isBetween(130); // true
// isBetween(34); // false
Enter fullscreen mode Exit fullscreen mode

Methods

We can add functions as properties on objects (these are called methods).

Ex:

const myMath = {
  PI: 3.14,
  square: function (num) {
    return num * num;
  },
  // note the 2 diff ways of defining methods
  cube(num) {
    return num ** 3;
  },
};
Enter fullscreen mode Exit fullscreen mode

This

'this' is mostly used WITHIN methods of objects. It is used to reference properties of the object.

const person = {
  first: 'Abby',
  last: 'Smith',
  fullName() {
    return `${this.first} ${this.last}`;
  },
};

person.fullName(); // "Abby Smith"
person.lastName = 'Elm';
person.fullName(); // "Abby Elm"
Enter fullscreen mode Exit fullscreen mode

Note, outside of objects, 'this' refers to the top-level window object. To see what this contains, enter this in the console. General functions are stored in the this object too:

// defined on its own (outside of an object)
function howdy() {
  console.log('HOWDY');
}

this.howdy(); // HOWDY
Enter fullscreen mode Exit fullscreen mode

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay