In this post, I am going to deep dive into Modern JavaScript and TypeScript way of dealing with Object and Function. Bonus: Generics in TypeScript.

__Previous Topic:__
- [Getting Started with TypeScript](https://steemit.com/utopian-io/@superoo7/get-started-with-typescript)
- [TypeScript Data Type](https://steemit.com/utopian-io/@superoo7/typescript-data-types)

<center>
![bynNY5dJ.jpg](https://res.cloudinary.com/hpiynhbhq/image/upload/v1514856422/a8mr1orqfa10shbzmaam.jpg)
</center>
[Source](https://twitter.com/typescriptlang)

## Object literal
### In JavaScript/TypeScript
Object is a quite common data type in JavaScript and TypeScript. In this section, I will talk about some of the feature that TypeScript had, but not all JavaScript platform has.

- normal object
```
let obj = {
	round: true,
	name: "circle",
	edge: 0
};
```

- object in ES6
Object in ES6 offer prototype inside the object, string interpolation and more...
```
let world = "Earth";
let animal = {
	__proto__: AnimalObject.prototype,
	species: "Dog",
	name: "Bob",
	world,
	[`${world}`]: true,
};
```

- simple object destructure
In ES6, we can destructure object with this method.
```
let someone = {
	name: "Bob",
	age: 3
};
const {name, age} = someone;
console.log(`${name} is ${age} years old`); // Bob is 3 years old
```

- deep nested object destructure
If the object is deeply nested, it still can be done.
```
let someone = {
	name: "Bob",
	age: 30,
	skills: {
		web_dev: {
			html: {experience: "4 years"},
			css: {experience: "1 year"},
			javascript: {experience: "1 year"}
		}
	}
};
let {
	name, 
	age, 
	skills: {web_dev: skill}
} = someone;
```

output:

<center>
![Screen Shot 2018-01-02 at 8.53.23 PM.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1514902850/hl1wjzzqyqufxmi8twgf.png)
</center>

- Rest and Spread Properties
This is a bit like pattern matching in any functional language (e.g. Elixir), where we seek what the data looks like on our right, and we try to extract out on the left.

This is available to JS just like how spread operator in arrays. These features are available to TypeScript.

> Still in proposal stage 3. I tested with node v8.9.2

__Rest__ (extract out)

```
let colors = { r: 0, g: 120, b: 100 };
let { r, ...others } = colors;
console.log(others); // { g: 120, b: 100 }
```

__Spread__ (merge in)

```
let rgb = { r: 0, g: 120, b: 100 };
let rgba = { ...rgb, a: 0.2}
console.log(rgba); // { r: 0, g: 120, b: 100, a: 0.2 }
```

This is one of my favourite feature in the proposal and TypeScript.

Imagine this case of scenario, you had to add a new `a` into rgb. The old way of doing it:

```
let rgb = { r: 0, g: 120, b: 100 };
let rgba = rgb;
rgba.a = 0.2
```

The code will become more messier when there is more properties!.

- Getter and Setter
In OOP language, this is the common approach to access private data to achieve Encapsulation.

`Getter` - return value of the property

`Setter` -set the value of the property 

```
var employee = {
    first: "Boris",
    last: "Sergeev",
    get fullName() {
        return this.first + " " + this.last;
    },
    set fullName(value) {
        var parts = value.toString().split(" ");
        this.first = parts[0] || "";
        this.last = parts[1] || "";
    },
    email: "boris.sergeev@example.com"
};
console.log(employee.fullName); //Boris Sergeev
employee.fullName = "Alex Makarenko";
console.log(employee.first);//Alex
console.log(employee.last);//Makarenko
console.log(employee.fullName);//Alex Makarenko
```
[source](https://stackoverflow.com/a/40241468/7514001)

## Functions Types
In TypeScript, when we want to define how a function shape looks like.


```
let register: (firstname: string, lastname: string) => User; // declare function type
register = (firstname, lastname) => (new User()); // a function value
```

### Interface to define function types
```
interface newUser {
	(firstname: string, lastname: string): User
}
let register: newUser = (firstname, lastname) => (new User()); 
```

### Optional Parameters
And TypeScript, assumes every argument in the function is required. However, you can use optional to state that that argument is optional.

The syntax is just like SwiftLang with `?`.

```
function createAnimal(
						eyes: number,
						wings?: number,
						tail?: boolean
						) {...}
```

### Default Parameters Value
Same as ES6, there is default value for TypeScript.

```
function createAnimal(
						eyes: number,
						wings?: number,
						tail?: boolean,
						alive: boolean = true
						) {...}
```

### Rest Parameters
`Rest` is what I have shown just now.

``` 
function addition(base: number, ...others: number[]) {...};
addition(1,2,3,4,5);
addition(1,2,3);
```


## Generics in TypeScript
- allow us to reuse code accross many types, interfaces and functions.

```
function makeFive<T>(x: T): T[] {
	return [ x, x, x, x, x ];
}
let num: number[] = makeFive(3);
let foods: string[] = makeFive("FOOD");
```

- Array also can be express this way

```
let cards = Array<[Suit, CardNumber]>(52);
```

- Promise also

```
let data: Promise<Response> = fetch("https://google.com");
```

<hr>

<br>

That's the end of the description on Object and Function with Modern JavaScript and TypeScript. TypeScript already have more features than JavaScript, and JavaScript team (TC39) are slowly implement some features from TypeScript!

<br /><hr/><em>Posted on <a href="https://utopian.io/utopian-io/@superoo7/deep-dive-into-object-and-function-with-typescript-and-javascript">Utopian.io -  Rewarding Open Source Contributors</a></em><hr/>