Parameter and Object Oriented Programming

Posted on | In |

Parameter & Argument

Let’s compare the difference between parameters and arguments.

1
2
3
function change (price, moneypaid) {
  return moneypaid - price
};

price and moneypaid are parameters in the function above.

1
2

function change (100, 150);

100 and 150 are arguments in the function above.

The name changes depending on each case.

Rest Parameter

If there are more than one arguments and the number can constantly change? Use Rest Parameter!

Refer to the function that works as Math.min as an example.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

function minimum (...nums) {

  return nums.reduce( function (prev, cur) {
    if (prev > cur){
      return cur

    }

    else {
      return prev;

    }

  });

}

The function above uses reduce to find the smallest number. Using a rest parameter as …nums allows the parameters to be received in the form of array. This is possible from ES6 and not in ES5 because although it may look like an array, it is actually not. Array methods cannot be used.

1
2
3
4
5
6
7
8
9
10

function what(){

  console.log(arguments)

}

what (1, 3, 4, 5);

//{0:1, 1:3, 2:4, 3:5} .

Next is Default Parameter. Like the name, default parameter can be used when you want a default value.

1
2
3
4
5
6
7
8
9
10
11
12
13

function change (price, moneypaid = 200) {
  return moneypaid - price
};

change(50); 

// 150

change(50, undefined);

// 150.

OOP

After learning about parameters, it’s now time to learn about Object Oriented Programming.

  • To put it simply, object oriented programming can be explained as creating a blueprint that acts as a model and create many objects based on the blueprint. Here, blueprint is class and object is instance.

For example,

If class is

function car (color) {},

instance is

let bmw = new car (“blue”);

let avante = new car (“white”);

and etc.

In ES5, class needed to be created as function car (brand, name, color) {}, but from ES6, it can be crated using a class keyword.

1
2
3
4
5
6
7
class car {

  constructor (brand, name, color){

  } // Code for creating Instance

}

Properties and methods defined when making a class can be used in instances. Examples of property can be brand, color and name while example of method can be refuel(), driveWithCruise() and etc.

Properties can be set using “this”.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

ES5)

function car (brand, name, color) {

  this.brand = brand;

  this.name = name;

  this.color = color; 

}



ES6)

class car {

  constructor (brand, name, color){

  this.brand = brand;

  this.name = name;

  this.color = color;

  }

}

Setting method works in a similar way.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

ES5)

function car (brand, name, color) {

  car.prototype.refuel = function  () {}

  car.prototype.drivewithcruise = function () {} 

}



ES6)

class car {

  constructor (brand, name, color){ 
  }
  refuel () {
  }
  drivewithcruise () {
  }  
} 



Example)

let bmw = new car (benz, li750, black);

bmw.brand; // benz

bmw.name; //li750



bmw.refuel() //연료 충전!

bmw.drivewithcruise() //크루즈 모드~

Prototype like the word means the blueprint of all instances.

Instance is the model that you make based on prototype.

Constructor is the constructor function used to create class.

this

this is a context that changes by situation, and in this case refers to the instance that is being created by the new keyword.

An easy example to understand is:

1
2
3
4
5
6
7
8
9
10
11

let example = new Array(1, 3, 5);

example.length; //3

example[0]; //1



example.pop(); //[1, 3];

All the array methods in MDN are methods of Array class.

Finish

Finito

0%