# Coding the Example

## Is JavaScript an OOP Language?

Some say that JavaScript isn't a true object-oriented language; The `class` statement just adds a bit of glitter to prototypical inheritance that is already there (more on that in a bit). They claim that JavaScript classes are therefore not classes in the traditional sense.

JavaScript utilizes a concept called `constructor functions` to define objects and features (properties). Constructors allow you to effectively create as many objects as you need. When a constructor function creates a new object instance, the core functionality isn't completely copied over to the new object. Unlike "classic" OO languages, functionality is linked via a reference chain known as a **prototype chain** (we'll discuss this in the next module). Let's put this into practice with some real JavaScript.

## Basic Example

1. Let's first define a person with a normal function. Add this to your `.js` file:

   ```javascript
   function createNewPerson(name) {
    var obj = {};
    obj.name = name;
    obj.greeting = function() {
        alert('Hi! I\'m ' + this.name + '.');
    };
    return obj;
   }
   ```
2. Let's call the function and create a new person.

   ```javascript
   var paul = createNewPerson('Paul');
   paul.name;
   paul.greeting();
   ```
3. Let's simplify this with a constructor function:

   ```javascript
   function Person(name) {
    this.name = name;
    this.greeting = function() {
        alert('Hi! I\'m ' + this.name + '.');
    };
   }
   ```

   Constructor functions don't return anything or explicitly create an object, they basically just define properties. The `this` keyword basically means that the name value passed to the constructor call will be the same one used by both the `name` property and `greeting()` method. Please note that constructor names typically begin with a capital letter to be more recognizable.
4. Let's create some objects!

   ```javascript
   var person1 = new Person('Bob');
   var person2 = new Person('Sarah');
   ```
5. Here are the properties:

   ```javascript
   person1.name
   person1.greeting()
   person2.name
   person2.greeting()
   ```

   When calling the properties or methods you need to start with `person1` or `person2`. The `name` property and `greeting` methods have the same syntax, but need to be called separately. This is one of the reasons the `this` keyword is so important, so that each will use its own values and not the others.

\
&#x20;Let's look back at the constructor calls.

```javascript
var person1 = new Person('Bob');
var person2 = new Person('Sarah');
```

The `new` keyword tells the browser we are creating a new object instance, followed by the function with parameters in parentheses, and storing the result in a variable. We already know the function definition, so let's see what these objects look like now.

```javascript
{
    name:'Bob',
    greeting: function() {
        alert('Hi! I\'m ' + this.name '.');
    }
}
```

The **"Sarah"** object looks the same. Rather than calling similar functions like `greeting()` multiple times, we can define them on the prototype(more on that later).

## Creating our Finished Constructor

1. Here's a new constructor function

   ```javascript
   function Person(first, last, age, gender, interests) {
    this.name = {
        'first': first,
        'last': last
    };
    this.age = age;
    this.gender = gender;
    this.interests = interests;
    this.bio = function() {
        alert(this.name.first + ' ' + this.name.last + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
    };
    this.greeting = function() {
        alert('Hi! I\'m ' + this.name.first + '.');
    };
   }
   ```
2. Let's create an object instance; put this code right below the constructor function.

   ```javascript
   var person1 = new Person('Bob', 'Smith', 32, 'male', ['music', 'skiing']);
   ```

## Challenges - Optional

1. Create a few more objects just to get the hang of this concept.
2. Figure out how to output different gender pronouns with the `bio()` method.
3. Figure out how to take in more than two interests in the constructor function.

## Other Methods of Object Instance Creation

* **The Object Literal**
  1. A very common way of creating an object is an **object literal**.

     ```javascript
     var person = {
      name: ['Bob', 'Smith'],
      age: 32,
      gender: 'male',
      interests: ['music', 'skiing']
     ```
  2. The main idea is that you are creating the **properties** and giving them **values** at the same time.
  3. Object literals take up less space, and are perfect if you aren't doing anything else with that object. **Constructor Functions** are sometimes better because you can create additional objects off of it, basically using it as a template.
* **The Object() Constructor**
  1. Let's store an empty object in the `person` variable.

     ```javascript
     var person1 = new Object();
     ```
  2. Fun fact, you can add properties/methods using either dot or bracket notation!

     ```javascript
     person1.name = 'John';
     person1['age'] = 69;
     person1.greeting = function() {
      alert('Hi! I\'m ' + this.name + '.');
     };
     ```
  3. Let's combine the previous two steps and pass an object literal to the `Object()` constructor.

     ```javascript
     var person1 = new Object({
      name: 'John',
      age: 69,
      greeting: function() {
          alert('Hi! I\'m ' + this.name + '.')
      }
     });
     ```
* **The create() method**
  1. You can create objects based on existing ones using the `create()` method.

     ```javascript
     var person2 = Object.create(person1);
     ```
  2. `person2` has access to the properties/methods of `person1`.

     ```javascript
     person2.name
     person2.greeting()
     ```

## Resources

To learn more about OOP Basics, visit the [MDN Docs](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS).
