# Object Oriented and Functional Programming

1-Declare JavaScript Objects as Variables

```javascript
var car = {
  "wheels":4,
  "engines":1,
  "seats":5
};

var motorBike = {
  "wheels":3,
  "engines":1,
  "seats":2,

  // Only change code below this line.

};
```

2-Construct JavaScript Objects with Functions

* 構造函數通常第一個字大寫，用來區分一般函數
* this 指向創建出來的對象

```javascript
var Car = function() {
  this.wheels = 4;
  this.engines = 1;
  this.seats = 5;
};

// Only change code below this line.

var MotorBike = function() {
  this.engines=1;
  this.wheels=2;
  this.seats=2;
};
```

3-Make Instances of Objects with a Constructor Function

* 用 `new function()` 來創建一個實力 instance

```javascript
var Car = function() {
  this.wheels = 4;
  this.engines = 1;
  this.seats = 5;
};

// Only change code below this line.

var myCar = new Car();
myCar.nickname = "Chacha";
```

4-Make Unique Objects by Passing Parameters to our Constructor

```javascript
var Car = function(wheels, seats, engines) {
  //Change this constructor
  this.wheels = wheels;
  this.seats = seats;
  this.engines = engines;
};

//Try it out here
var myCar = new Car(2, 2, 1) ;
```

5-Make Object Properties Private

* 建構函數內，自己的函數稱為方法，自己的特徵稱作屬性(忘了)
* 讓私有資料只能透過方法存取

```javascript
var Car = function() {
  // this is a private variable
  var speed = 10;

  // these are public methods
  this.accelerate = function(change) {
    speed += change;
  };

  this.decelerate = function() {
    speed -= 5;
  };

  this.getSpeed = function() {
    return speed;
  };
};

var Bike = function() {

  // Only change code below this line.
  var gear = 2;

  this.getGear = function(){
    return gear;
  };

  this.setGear = function(change){
    gear = change;
    return gear;
  };

};

var myCar = new Car();

var myBike = new Bike();
myBike.getGear(3);
```

6-Iterate over Arrays with map

* 有點詭異的迴圈
* .map() 括號中是個 callback function
* 第一個參數是處理的元素，第二個是 index，第三個是陣列
* 好吧其實我看不太懂
* <https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/map>
* <http://fred-zone.blogspot.tw/2017/01/javascript-mapreduce.html>

```javascript
var oldArray = [1,2,3,4,5];

// Only change code below this line.

var newArray = oldArray.map(function(val){
 return val+3; 
}
);
```

7-Condense arrays with reduce

* 將陣列變成一個數字
* reduce() 有兩個參數
* 第一個，callback function 有兩個參數，累加器和當前值
* 第二個，是初始值

```javascript
var array = [4,5,6,7,8];
var singleVal = 0;

// Only change code below this line.

singleVal = array.reduce(function(previousVal, currentVal){
  return previousVal+currentVal;
},0);
```

8-Filter Arrays with filter

```javascript
var oldArray = [1,2,3,4,5,6,7,8,9,10];

// Only change code below this line.

var newArray = oldArray.filter(function(val){
  return val<6;
});
```

9-Sort Arrays with sort

* a-b 是正序排
* b-a 是逆序排

```javascript
var array = [1, 12, 21, 2];

// Only change code below this line.

array.sort(function(a, b){
  return b-a;
});
```

10-Reverse Arrays with reverse

```javascript
var array = [1,2,3,4,5,6,7];
var newArray = [];

// Only change code below this line.

newArray = array.reverse();
```

11-Concatenate Arrays with concat

```javascript
var oldArray = [1,2,3];
var newArray = [];

var concatMe = [4,5,6];

// Only change code below this line.

newArray = oldArray.concat(concatMe);
```

* delimiter 分隔符號

12-Split Strings with split

```javascript
var string = "Split me into an array";
var array = [];

// Only change code below this line.

array = string.split(' ');
```

13-Join Strings with join

```javascript
var joinMe = ["Split","me","into","an","array"];
var joinedString = '';

// Only change code below this line.

joinedString = joinMe.join(" ");
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ayugioh2003.gitbook.io/free-code-camp-practice/front-end-development-certification/object-oriented-and-functional-programming.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.