Object-Oriented JavaScript — Loops and Functions
Tags: webdev, programming, javascript, beginners
Published: 2021-01-24 21:54:27

**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 various kinds of loops and functions.

### Loops 

There are various kinds of loops we can use with JavaScript.

#### For…in Loops

The for…in loop lets us loop through an object’s keys.

For example, we can write:

```
let obj = {
  a: 1,
  b: 2,
  c: 3
}
for (const key in obj) {
  console.log(key, obj[key])
}
```

And we get the `key` with the key and we can access the value with `obj[key]` .

#### For…of Loops

The for…of loop lets us iterate through iterable objects, including arrays.

For instance, we can write:

```
let arr = [1, 2, 3]
for (const a of arr) {
  console.log(a);
}
```

We have the `arr` array which we loop through with the for-of loop.

`a` has the array entry.

### Comments

Comments are part of the code that’s ignore by JavaSdcript engines.

We can use them to explain how our code works.

Single line comments starts with `//` and ends at the end of the line.

Multiline comments starts with `/*` and ends with `*/` .

Anything in between them are ignored.

So we can write:

```
// single line
```

and:

```
/* multi-line comment on a single line */
```

or:

```
/*
  multi-line comment on a single line
*/
```

### Functions

Functions is a reusable piece of code.

We can use them to do something in our code.

There are various kinds of functions, they include:

*   anonymous functions 
*   callbacks 
*   immediate (self-invoking) functions
*   inner functions (functions defined inside other functions)
*   functions that return functions 
*   functions that redefine themselves 
*   closures
*   arrow functions

They let us group together code, give it a name, and reuse it later.

We can define a function by writing:

```
function sum(a, b) {
  let c = a + b;
  return c;
}
```

And we return the sum of `a` and `b` in the function.

`a` and `b` are parameters and we return a value.

We have the `function` keyword to define a function.

`return` lets us return a value.

If there’s no `return` statement, then it returns `undefined` .

We can also create arrow functions by writing

```
const sum = (a, b) => {
  let c = a + b;
  return c;
}
```

or we can write:

```
const sum = (a, b) => a + b
```

They don’t bind to `this` and they’re shorter.

### Calling a Function

We can call a function by writing:

```
const result = sum(1, 2);
```

The values in the parentheses are the arguments.

They’re set as the value of the parameters.

### Parameters

Parameters are the items in the parentheses of the function. 

So if we have:

```
function sum(a, b) {
  let c = a + b;
  return c;
}
```

then `a` and `b` are parentheses.

We pass in arguments to set them.

They’re set by their position.

If we forgot to pass them in then they’ll be `undefined` .

JavaScript isn’t picky when checking arguments.

The type can be anything, and we can skip any of them.

It’ll just do things that we don’t expect and fails silently if we don’t pass in what’s expected.

### Conclusion

Functions are reusable pieces of code we can invoke.

for…in loops let us loop through objects and for…of loops let us loop through iterable objects.