Object-Oriented JavaScript — Functions and Objects

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 and objects.

Iterators

Iterators can be created with generator functions in JavaScript.

For instance, we can write:

function* genFn() {
  yield 1;
  yield 2;
  yield 3;
}

We have a generator function as indicated by the function* keyword.

Then we can call it to return an iterator:

const gen = genFn();
console.log(gen.next());
console.log(gen.next());
console.log(gen.next());

We called genFn to get an iterator.

Then we called next on the returned iterator.

And the next method will return the object with the value and done properties.

value has the value from yield .

And done is a boolean to indicate whether all the values are returned.

IIFE vs Blocks

We don’t need IIFEs for containing variables in blocks anymore.

We can use let and const to declare block-scoped variables.

So if we have:

(function() {
  var foo = 0;
}());
console.log(foo);

Then the console log will throw the ‘Uncaught ReferenceError: foo is not defined’ error.

We can do the same thing with let or const variables in blocks”

{
  let foo = 1;
  const bar = 2;
}

Arrow Functions

Arrow functions are great for creating callbacks.

For example, we often have to write code like:

$("#submit-btn").click(function(event) {
  validateForm();
  submit();
});

Arrow functions are a bit shorter and we won’t have to worry about the value of this in the function.

Instead, we can write:

$("#submit-btn").click((event) => {
  validateForm();
  submit();
});

We can write arrow functions in various ways. They’re:

• No parameters: () => {...}
• One parameter: a => {...}
• More than one parameters: (a,b) => {...}

Arrow functions can have both statement block bodies or expressions.

We can have a statement block with:

n => {
  return n ** 2;
}

And we can have an expression with:

n => n ** 2;

Objects

Objects are the most central part of object-oriented programming.

It’s made of various properties and methods.

And properties may contain primitive values or other objects.

We can create an object by writing:

const person = {
  name: 'james',
  gender: 'male'
};

An object is surrounded by curly braces.

And name and gender are the properties.

The keys can be in quotation marks.

For instance, we can write:

const person = {
  'name': 'james',
  gender: 'male'
};

We need to quote property names if the property name is one of the reserved words in JavaScript.

We also need to quote them if they have spaces.

And if they start with a number, then we also need to quote them.

Defining an object with {} is called the object literal notation.

Elements, Properties, Methods, and Members

An array can have elements.

But an object has properties, methods, and members.

The object:

const person = {
  name: 'james',
  gender: 'male'
};

only has properties.

Properties are key-value pairs.

The value can be anything.

Methods are just properties with function values.

So if we have:

const dog = {
  name: 'james',
  gender: 'male',
  speak() {
    console.log('woof');
  }
};

Then speak is a method.

Hashes and Associative Arrays

Object properties can be added and remove dynamically, so we can use them as hashes or associative arrays.

Hashes and associative arrays are just key-value pairs.

Conclusion

We can create iterators with generators, and we can define objects with properties and methods.