DEV Community: german9304

javascript: reduce array function

german9304 — Fri, 10 Jan 2020 23:09:53 +0000

Reduce

The reduce function as the name suggest reduces an array into a single input . This is helpful because you can make operations on arrays like removing duplicates, sum of an array of numbers, calculate the max of numbers, creating instances of new object and many more cases.

How does reduce work?

Let's pretend you would like to calculate the sum of an array of elements, how would you do this without reduce function?

1) declare a variable to store the result in this case total
2) iterate through the array
3) capture the value and sum the total plus the current number
4) total variable will contain the result from adding the numbers

const numbers = [1, 2, 3, 4, 5, 6];
let total = 0;

numbers.forEach((number) => {
  total = total + number;
});

console.log(total); // 21

Well this is good, however you can achieve the same result with the reduce function, I will show:

const numbers = [1, 2, 3, 4, 5, 6];
let result = numbers.reduce((acc, curr) => {
  return acc + curr;
}, 0);

console.log(result); // 21

This is nice right? reduce will produce the same effect and it is more understandable, but how does reduce now about the elements and how to sum them?

This is the anatomy of reduce:

Reduce accepts two arguments: a callback function and the initial argument
- There are a couple of arguments that the callback accepts you can take a look here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce, but the ones you have to know are the accumulator and the current value: in this case the accumulator will be the initial argument that is 0 and the current value will be the first number from the array in this case the number 1 from the numbers array.
- The callback returns the next number that will be assigned to the accumulator.
- The second argument is the initial argument, in other words where would you like the accumulator to start in this case is 0. If not provided then the first number of the array will be used in this case 1. In above example:


reduce( (acc, curr)=> {} /* <= callback */, 0 /* <= initial argument */);

Reduce iterates through all the elements array and the return from the callback will be assigned to the accumulator:

This is the process based on the example from above:
1) 1st iteration acc = 0, curr = 1 and returns 1
2) 2nd iteration acc = 1, curr = 2 and returns 3
3) 3rd iteration acc = 3, curr = 3 and returns 6
4) 4th iteration acc = 6, curr = 4 and returns 10
5) 5th iteration acc = 10, curr = 5 and returns 15
6) 6th and last iteration acc = 15, curr = 6 and returns 21

How does reduce work internally?

This is a small representation, this is not the original implementation it is just for you to have an idea about reduce.



function Reduce(array, cb, initalValue) {
  let result = initalValue;
  array.forEach(value => {
    result = cb(result, value);
  });

  return result;
}

function Cb(acc, curr) {
  return acc + curr;
}
let res = Reduce(numbers, Cb, 0);


console.log(res); // 21

Reduce is a great feature to know as it is helpful when dealing with arrays in js or even other programming languages!

Resources: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce

I hope this gives a better idea about reduce, reach out for any question.

javascript: arrays map function

german9304 — Sat, 04 Jan 2020 17:12:30 +0000

Welcome to an introduction to the map function in an array.

The map in an array is a function that takes your elements and transforms them into new elements. One of the benefits of map is that it does not mutate your original elements it creates a new array.

mutation: it means when your original array gets modified,
for instance: the use of the push function in an array mutates your original element, the original array gets modified.

Let's dive in:

What do I mean by transforms your elements?

Let's say we have an array of numbers:

const numbers = [1, 2, 3, 4, 5, 6];

And We would like to create an array of those elements with every element multiplied by 2, in order words: an array with their double number. Well map would do this very simple:

const numbers = [1, 2, 3, 4, 5, 6];
let doubleNumbers = numbers.map((number) => number * 2); // with arrow function 

console.log(doubleNumbers) // [ 2, 4, 6, 8, 10, 12 ]

// numbers remains intact, it is not mutated

console.log(numbers) // [ 1, 2, 3, 4, 5, 6 ]

Pretty simple right? But, how does map work internally?

This is a small representation of map, of course the original has more things to check or code, I just wanted to provide an example of this.

/**
 * map function
 * @param {Array} elements elements to transform
 * @param {function} cb callback that will transform the elements
 */
function map(elements, cb) {
  let newElements = [];
  for (let i = 0; i < elements.length; i++) {
    newElements.push(cb(elements[i]));
  }

  return newElements;
}

let resultDouble = map(numbers, number => number * 2); 
console.log(resultDouble); // [ 2, 4, 6, 8, 10, 12 ]

Note:
I've been using arrow function, but you can use normal function as well.

let myFunc = number => number * 2;

let myFunc2 = function(number) {
  return number * 2;
}

Pretty great right? you the the full benefits of immutability and also you accomplish to get a new transformed array.

What else could I do with map? well:

Let's give more examples:

Suppose you would like to return a string representation of an array of objects we can use map!


const person = [
  {
    name: 'john',
    lastName: 'frank',
    age: 34
  },
  {
    name: 'Mark',
    lastName: 'Roger',
    age: 40
  }
];

const personInfo = person.map(person => {
  return `My name is ${person.name}, Last Name is ${person.lastName} and age ${person.age}`;
});

console.log(personInfo); 
// Result: 
// [ 'My name is john, Last Name is frank and age 34',
 // 'My name is Mark, Last Name is Roger and age 40' ]

What about html?


const people = [
  {
    name: 'john',
    lastName: 'frank',
    age: 34
  },
  {
    name: 'Mark',
    lastName: 'Roger',
    age: 40
  }
];


const peopleHtml = people.map(person => {
  return `
      <li> 
        <p> name: ${person.name} </p>
        <p> last name: ${person.lastName} </p>
        <p> age: ${person.age} </p>
      </li>
    `;
});

const container = document.querySelector('div');

container.innerHTML = peopleHtml.join('');

console.log(peopleHtml.join(''))

/*

<li>
<p> name: john </p>
<p> last name: frank </p>
<p> age: 34 </p>
</li>

<li>
<p> name: Mark </p>
<p> last name: Roger </p>
<p> age: 40 </p>
</li>

*/

In react we often use the map function to create jsx:


function App() {

  const numbers = [1, 2, 3, 4, 5];

  return (
    <div className="App">
      <h1> map </h1>
      <ul>
        {numbers.map((number) => (
          <li> {number} </li>
        ))}
      </ul>
    </div>
  )
}

There are more cases to cover, however I wanted to make it simple so you get a better understand what the map function in an array is and why it is helpful.

If I forgot things or any feedback please leave a comment.

Thank you for taking the time to read it! Happy coding :)

Tic Tac Toe with reactjs hooks.

german9304 — Sun, 29 Dec 2019 21:54:03 +0000

Here we will build a tic tac toe in reactjs:

The react tutorial has done a good job explaining react with a tic tac toe, however it does not use hooks. I took another a approach and implement it with hooks which were recently added to the framework.
I hope you enjoy it.

There are three components:

Square
Board
Tic Tac Toe

Square

Square component just receives props to pass to the parent,
these buttons represent the square that the user will interact with.
This is a stateless component since there no state changing through this component.

export function Square({ className, buttonNumber, handleClick }) {
  return (
    <button type="button" className={className} onClick={handleClick}>
      <span>{buttonNumber}</span>
    </button>
  );
}

Board

The board consists as the name suggests the whole board of the tic tac toe.

This component returns all Square components for the tic tac toe. Also a stateless component.


export function Board({ board, squareClick, isWinner, winners }) {
  const SquareType = i => {
    const classType = type => {
      return `number ${i} ${type}`;
    };
    let win = winners.some(winner => winner === i);
    if (isWinner) {
      if (win) {
        return classType("winner");
      }
    }
    return classType("lose");
  };

  return (
    <div className="board">
      {board.map((number, i) => {
        return (
          <Square
            key={i}
            className={SquareType(i)}
            buttonNumber={number}
            handleClick={() => squareClick(i)}
          />
        );
      })}
    </div>
  );
}

Tic Tac Toe

This component is the parent component and uses the useState hook.

The useState hook returns an array with two values in it, the first one is to get the current state and the second one is to set the new state.

Hooks must be declared at the top of the function.

handleMove : handles user interaction when clicking a button if it is X or O turn.
handleSquareClick: handles when the user clicks a button and creates a new square to save history.


function TicTacToe() {
  let [history, setHistory] = useState([
    {
      squares: Array(9).fill(null)
    }
  ]);
  let [move, setMove] = useState(0);
  let [turn, setTurn] = useState(false);

  let isNext = turn ? "O" : "X";

  let currentSquares = history[move].squares;
  let [isWinner, whoWin, winners] = CalculateWinner(currentSquares);

  let nturn = <h2 className="turn">Next turn? {isNext}</h2>;
  let winner = <h2 className="winner-header"> Winner {whoWin}</h2>;

  function handleSquareClick(i) {
    let current = history.slice(0, move + 1);
    let currentHistory = current[move].squares;
    const newArr = [...currentHistory];
    newArr[i] = isNext;
    setHistory(prevHistory => {
      let newHistory = {
        squares: newArr
      };
      return [...current, newHistory];
    });
    setMove(prevMove => {
      return prevMove + 1;
    });
    setTurn(prev => !prev);
  }

  function handleMove(i) {
    setMove(i);
    setTurn(prev => !prev);
  }

  function handleClear() {
    setHistory([{ squares: Array(9).fill(null) }]);
    setMove(0);
  }

  return (
    <div className="App">
      <header className="AppHeader">
        <h1 className="title">TIC TAC TOE </h1>
        {isWinner ? winner : nturn}
      </header>
      <section className="clear-game">
        <button className="clear-btn" onClick={handleClear}>
          clear game
        </button>
      </section>
      <div className="game">
        <div className="steps-moves">
          <Board
            board={history[move].squares}
            squareClick={handleSquareClick}
            isWinner={isWinner}
            winners={winners}
          />
        </div>
        <ol>
          {history.map((stp, mve) => {
            return (
              <li key={mve}>
                <div className="steps">
                  <button className="step-btn" onClick={() => handleMove(mve)}>
                    {" "}
                    Go to move # {mve}
                  </button>
                </div>
              </li>
            );
          })}
        </ol>
      </div>
    </div>
  );
}

source code:

german9304 / tic-tac-toe

TIC TAC TOE

Implementation of tic tac toe with react hooks.

View on GitHub

Thank you and enjoy :)

Let's build a Queue with golang

german9304 — Sun, 29 Dec 2019 21:19:11 +0000

Queue

Golang is a great language because it is simple to learn and it's fast compare to other languages.

Here we will build a linear data structure called queue,
Queues are FIFO (first in first out)

For example: a waiting row of people to pay it is a que because the person who comes first pays first and etc.

There are different ways to build a queue, you have arrays, or linkedlists and even stacks. For this implementation I used a linkedlist.

Let's begin:

Node

We need some way to create our nodes:

package node

type Node struct {
    item int
    next *Node
}

// Init Node
func New(item int) *Node {
    return &Node{item, nil}
}

func (n *Node) Item() int {
    return n.item
}

func (n *Node) Next() *Node {
    return n.next
}

func (n *Node) SetItem(item int) int {
    n.item = item
    return item
}

func (n *Node) SetNext(nextNode *Node) *Node {
    n.next = nextNode
    return n.next
}

Methods implemented are:

**Item*: returns item from node
Next: return next element
SetItem: sets item to current node
SetNext: sets next element

LinkedList

1) First step is to create the linked list:

 package linkedList

import (
    "fmt"
    "stackqueue/node"
    it "stackqueue/iterator"
)


type iterator struct {
    current *node.Node
}

func (it *iterator) Next() *node.Node {
    current := it.current
    it.current = it.current.Next()
    return current
}

func (it *iterator) HasNext() bool {
    if it.current == nil {
        return false
    }

    return true
}

type LinkedList struct {
    head     *node.Node
    current  *node.Node
    length   int
}

func (li *LinkedList) Iterator() it.IIterator {
    head := li.head
    return &iterator{head}
}


func New(head, current *node.Node) *LinkedList {
    return &LinkedList{nil, nil, 0}
}

func (li *LinkedList) Head() *node.Node {
    return li.head
}

// Prints elements from the list
func (li *LinkedList) Print() {
    head := li.head
    for head != nil {
        fmt.Printf("%v\n", head.Item())
        head = head.Next()
    }
}

// Inserts at front of the list
func (li *LinkedList) Insert(item int) *node.Node {
    newNode := node.New(item) // init node
    if li.head == nil {
        li.head = newNode
        li.current = newNode
        li.length++
        return newNode
    }

    newNode.SetNext(li.current)
    li.current = newNode
    li.head = newNode
    li.length = li.length + 1
    return newNode
}

// Removes an element from front of the list
func (li *LinkedList) RemoveFront() *node.Node {
    head := li.head
    if head != nil {
        nextNode := head.Next()
        li.head = nextNode
        head = nil
    }
    return nil
}

This go package implements the link list so we can use it on our Queue structure.

Methods implemented are:

New: initializes the linkedlist
Append: appends a new item at the end to the list
RemoveFront: removes an element from the front of the list
Head: returns the front of the list

We need some testing and golang has useful tools to testing,
to test a package we just need to create a file with the name of the file that you are testing and have _test at the end for instance: filename_test.

LinkedList Testing

 package linkedList

import (
    // "log"
    "fmt"
    "testing"
    it "stackqueue/iterator"
)

func TestInsert(t *testing.T) {
    expectedRoot := 10
    li := New(nil, nil)
    li.Insert(34)
    li.Insert(44)
    li.Insert(10)

    item := li.Head().Item()
    if item != expectedRoot {
        t.Errorf("got %v , expected %v \n", item, expectedRoot)
    }
}

func TestAppend(t *testing.T) {
    li := New(nil, nil)
    li.Append(32)
    li.Append(50)
    li.Append(100)

    head := func() int {
        return li.Head().Item()
    }

    if head() != 32 {
        t.Errorf("got %v, expected %v  \n", head(), 32)
    }

    li.RemoveFront()

    if head() != 50 {
        t.Errorf("got %v, expected %v  \n", head(), 50)
    }

    fmt.Println("iterator append")
    var iter it.IIterator = li.Iterator()
    for iter.HasNext() {
        fmt.Printf("%v\n", iter.Next().Item())
    }
    fmt.Println("iterator append")
}

func TestRemoveFront(t *testing.T) {
    numbers := []int{1, 2, 3, 4, 5, 6}
    li2 := New(nil, nil)

    if li2.RemoveFront() != nil {
        t.Errorf("should be nil")
    }


    li := New(nil, nil)
    for _, number := range numbers {
        li.Insert(number)
    }
    li.RemoveFront()

    // New Head 
    if got := li.Head().Item(); got != 5 {
        t.Errorf("got %v , expected %v \n", got, 5)
    }
    var iter it.IIterator = li.Iterator()
    for iter.HasNext() {
        fmt.Printf("%v\n", iter.Next().Item())
    }
}


func ExamplePrint() {
    numbers := []int{1, 2, 3, 4, 5, 6}
    li := New(nil, nil)
    for _, number := range numbers {
        li.Insert(number)
    }
    li.Print()
    // output:
    // 6
    // 5
    // 4 
    // 3
    // 2
    // 1
}

Queue

Now that we have the linkedList we can implement the queue.

 package queue

import (
    "stackqueue/linkedList"
    "stackqueue/node"
    it "stackqueue/iterator"
)


type IQueue interface {
    Enqueue(item int) *node.Node
    Dequeue() *node.Node
    Peek() *node.Node
    Iterator() it.IIterator
}

type Queue struct {
    li *linkedList.LinkedList
}


func New() *Queue {
    list := linkedList.New(nil, nil)
    return &Queue{list}
}

func (q *Queue) Iterator()  it.IIterator {
    return q.li.Iterator()
}

// Top of the list
func (q *Queue) Peek() *node.Node {
    return q.li.Head()
}
// Enqueues element
func (q *Queue) Enqueue(item int) *node.Node {
    newNode := q.li.Append(item)
    return newNode
}

// Dequeue element
func (q *Queue) Dequeue() *node.Node {
    removedNode := q.li.RemoveFront()
    return removedNode
}

Methods implemented are:

New: initializes the queue
Enqueue: appends an element to the front
Dequeue: removes the first element from the list
Peek: returns first element from the list

Queue Testing

package queue

import (
    "testing"
    "fmt"
)

// Queue test
func TestQueue(t *testing.T) {
    var queue IQueue = New()
    queue.Enqueue(32)
    queue.Enqueue(40)
    queue.Enqueue(100)

    peek := queue.Peek().Item()
    if peek != 32 {
        t.Errorf("got %v expected \n", peek)
    }

    iter := queue.Iterator()
    for iter.HasNext() {
        fmt.Printf("item %v \n", iter.Next().Item())
    }
}

func TestDequeue(t *testing.T) {
    var queue IQueue = New()
    queue.Enqueue(32)
    queue.Enqueue(40)
    queue.Enqueue(100)
    queue.Enqueue(2)

    queue.Dequeue()

    fmt.Println("iterator Dequeue")
    iter := queue.Iterator()
    for iter.HasNext() {
        fmt.Printf("item %v \n", iter.Next().Item())
    }
    fmt.Println("iterator Dequeue")

    peek := queue.Peek()
    if peek.Item() != 40 {
        t.Errorf("wrong dequeue")
    }
    queue.Dequeue()

    peek = queue.Peek()
    if peek.Item() != 100 {
        t.Errorf("wrong dequeue")
    }
}

Queues are a great and fundamental data structures to learn. Fundamentals are good to learn and have a better ida of it.

Thank you for reading the post, I will implement the stack and give a better explanation of what is a linked list on my next posts.

Let me know what you think, thank you again!.

source code:

german9304 / datastructures-go

Data Structures

Linked Lists
Binary Search Tree
queue
stack

golang

View on GitHub

javascript: DOM (document object model)

german9304 — Sun, 29 Dec 2019 17:59:52 +0000

What is the DOM?

The DOM is a representation of the html elements in your document as a tree.

What does this mean?

It means that this html gets represented as a tree, so you can manipulate it with javascript.


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>DOM</title>
  </head>
  <body>
    <div class="container">
      <p id="pragraph">my paragraph</p>
    </div>
    <section>
      <header>
        <h1>header</h1>
      </header>
      <div class="container">
        <p class="counter">0</p>
      </div>
    </section>
  </body>
</html>

How do I access the DOM through javascript?

Well there are a couple of ways, however you need the global property called document, here is an example:

// By using querySelector or getElementById or getElementsByClassName

// Query selector 
  const paragraph = document.querySelector('#pragraph');
  console.log(paragraph); // this will get the paragraph element. 

// Or get element By id 
const paragraphById = document.getElementById('pragraph');
console.log(paragraphById);

To access any element we can just call querySelector:

  const div = document.querySelector('div'); // first div
  const divs = document.querySelectorAll('div'); // all divs
/*
 One thing to notice here is that 
 document.querySelectorAll will get all the divs,
 and document.querySelector will get the first div it encounters. 
*/

Also by accessing the DOM with javascript you can manipulate it however you want, for example we can access the counter element and increment it by 1

const counter = document.querySelector('.counter');
counter.textContent = '1';

One import thing to say is that js must be inside the script tag or you can import a file

<!--- no file --->
 <script>
 //  here goes your js  
</script>

<!--- file --->
<script src="./somescriptfile"> </script>

Thank you and please leave some feedback :) I hope you enjoy the reading.

Javascript: Closures 101

german9304 — Sun, 29 Dec 2019 07:51:39 +0000

A closure is a way to have access to the scope of an outer function.

However according to mozilla:
A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function’s scope from an inner function. In JavaScript, closures are created every time a function is created, at function creation time.

I'll give a better explanation with code:

Example 1

 function count() {
  let count = 0;
  return () => (count = count + 1);
}

let result = count();
console.log(result()); // 1
console.log(result()); // 2

In this example, a variable named count is declared, and this variable belongs to the scope of the outer function, however the anonymous function inside has access to the count variable.

 () => (count = count + 1);

As you can see when the result function is called the count variable increments:

let result = count();
console.log(result()); // 1
console.log(result()); // 2

Example 2

In this example, you would expect the result of index would be 0 ... 10,
however this is not the case, index will always be 10.

for (var index = 0; index < 10; index++) {
  (function closure() {
    setTimeout(() => {
      console.log(`i ${index}`);
    }, 0);
  })();
}

There are two ways to fix this:

Using an enclose variable

for (var index = 0; index < 10; index++) {
  (function closure() {
    var _index = index;
    setTimeout(() => {
      console.log(`i ${_index}`);
    }, 0);
  })();
}

or using let variable

for (let index = 0; index < 10; index++) {
  (function closure() {
    setTimeout(() => {
      console.log(`i ${index}`);
    }, 0);
  })();
}

Thank you for reading the post, if something is not clear please leave a feedback. I could give more explanation of closures or another topic.