https://github.com/olhkyle/fxjs-verstenden

Learn fxjs based on functional-programming concept
https://github.com/olhkyle/fxjs-verstenden

functional-programming fxjs javascript

Last synced: 7 days ago
JSON representation

Learn fxjs based on functional-programming concept

• Host: GitHub
• URL: https://github.com/olhkyle/fxjs-verstenden
• Owner: olhkyle
• Created: 2023-06-22T13:20:38.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-06-28T15:22:26.000Z (over 1 year ago)
• Last Synced: 2024-11-23T00:32:18.825Z (2 months ago)
• Topics: functional-programming, fxjs, javascript
• Language: JavaScript
• Homepage:
• Size: 7.81 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# FxJS

Try to learn `functional programming` (Iterable Program - LISP)

> 📎 based on Fxjs Library







💡 The following article is a compilation of some of the basic concepts I've learned about iterables.

> Important Concept of Functional Programming in ES6+

## Iteration Protocol - introduced in ES6

It's the pre-promised rule written on ECMASCRIPT SPECS which is order to make iterable data collection

Prior to ES6, without the unified rule, iterable data collection such as Array, String, array-like-Object 

 and DOM Collections(NodeList, HTMLCollection)  could be traversed or looped in multiple ways using `for...in`, `for` statement and `forEach` method.

ES6 unifies iterable data collection into iterables that conform to the `iteration protocol` so that they can be used as targets of `for ... of` statements, `spread syntax`, and `array destructuring assignments`.







### `1. iterable protocol`

Calling a method that uses the well-known Symbol `Symbol.iterator` as a property key, and implementing it yourself or inheriting it from `prototype chain` will return an `iterator` that conforms to the `iterator protocol`. This convention is called the `iterable protocol`, and an object that conforms to the `iterable protocol` is called an `iterable`.

`Iterable` can be traversed by `for...of` statements, used in spread syntax, and assigned as targets for array destructuring.

That's why we use String as iterable.

```js

const str = 'string';

console.log([...str]); // ['s', 't', 'r', 'i', 'n', 'g'];

```







### `2. iterator protocol`

Calling `Symbol.iterator` on an `iterable` returns an `iterator` that conforms to the `iterator protocol`. The `iterator` owns a `next` method, which when called traverses the iterable and returns an iterator `result` object with properties `value` and `done`.

An object that conforms to the `iterator protocol` is called an `iterator`, and an iterator do as a pointer to navigate through the elements of an `iterable`.

```js

const arr = [1,2,3];

const iterator = arr[Symbol.iterator]();

// Array Iterator {}

// [[Prototype]]: Array Iterator

console.log(iterator.next()); // { value: 1. done: false }

console.log(iterator.next()); // { value: 2. done: false }

console.log(iterator.next()); // { value: 3. done: false }

console.log(iterator.next()); // { value: undefined. done: true }

```

We can say `Array`, `String`, `Map`, `Set`, NodeList, HTMLCollection(DOM Collection) are an `iterable`.

e.g.

`Array` is an `iterable` which extends `Symbol.iterator `method from `Array.prototype`. That's why it can be looped and traverse by `for...of` and can be used as the target of `Spread Syntax` and `Array Destructuring Assignments`.

```js

const array = [1, 3, 5];

console.log(Symbol.iterator in array); // true

for (const item of array) {

  console.log(item); 

  // 1

  // 3

  // 5

}

const [a, ...rest] = array;

console.log(a); // 1

console.log(rest); // [3,5]

```