DEV Community: coyla

Simple introduction to unit test

coyla — Fri, 14 Aug 2020 11:45:13 +0000

Unit test 🧪

In computer programming, unit testing is a software testing method by which individual units of source code—sets of one or more computer program modules together with associated control data, usage procedures, and operating procedures—are tested to determine whether they are fit for use. (Wikipédia)

Benefit of Unit testing (UT)

✅ Verify if a change (code) has created a bug or changed the behavior somewhere in the application
🐛 Find the root of the bug easily
📈 Improve software quality
🙌 Your teammates will thank you

A simple good test:

Has this specifications:

1. Clean code

Test code remains "code" so we should also try to respect good practices (ex: DRY, KISS, Single Responsibility... ), linters, recent langage...

👉 In order to keep the reliability, understanding and maintainability. for your team.

2. Independence

"Unit". Should not depend on the other tests. For example: tests should be able to be run in any order.

Avoid as much as possible the dependance of other systems/code of your software/app like instantiations for example, you can use mock data or stubs to avoid this.

3. Test the necessary

I don't know if everyone will be agree with this, but ...

We don't need to test all functions/routes/libs(...) or at least not right now... 😌

Prioritize the code that you change most often.

We can be discouraged by the HUGE work to cover all our app... We can start step by step and cover just 1 small part of our app. (let me know your opinion 🙏 )

4. Understanding 📖

Naming. We should understand the test when see the test name.

This is good pattern that works for me:

[unit name] ... [should] ... [when] ... context

The name should be composed by the description, then the pattern 'should' (result we expect) and optionally 'when' that describes the scenario or context.

Tips : If the test becomes bigger, divide it into small pieces.

➕ Bonus: Phases/Structure

Must know is AAA (arrange, act, assert).

Arrange: prepare -> mocks, before method (), parameters(context) for our function
Act: basically call the function/unit work that we want to test
Assert: define the result that you expect

Tips : Avoid many 'expect' for only one test, to keep Single Responsibility.

Examples

I will use AVA library for tests
https://github.com/avajs/ava

A basic & Simple Test preFlight request


test('isPreFlightRequest should be true when request method is OPTIONS', (t) => {
  // ARRANGE
  const mockRequest = {
    method: 'OPTIONS',
  };

  // ACT
  const ispreFlightRequest = cors.isPreFlightRequest(mockRequest);

  //ASSERT
  t.is(ispreFlightRequest, true, 'ispreFlightRequest should return true');
});

Run

Links

You can also read this

Thank for reading 🙇‍♂️

Testing arduino + wifi card project 📟

coyla — Sun, 09 Aug 2020 14:58:56 +0000

🎯 Goal

Goal: Simulate a system that prevents someone his is too close to some place or device by turning on a LED.

At a later stage, user will be able to turn on/off the system remotely via a web server.

use case can be used to prevent your child of dangerous place or device, like a hotplate ?

Steps

I divide the system into 3 separate system

LED sys
Presence/Distance sensor
Web server

Use tinkercad to simulate the project. Please try it, you will love it.
https://www.tinkercad.com/

LED device

diagram (tinkercad)

Distance sensor

Diagram

Web server + Wifi CARD

Testing server.

Final stage

In order to connect/plug PINS of the wifi card i used this diagram below.

LED + Distance sensor + Wifi card

I set up a range distance of 40cm to active the LED.

Test

Logs show that the server can get the distance from our system.

Issues

Instead of set up the wifi card you need to install the correct driver, this is tricky, for me this one was a solution: CP210x USB to UART Bridge VCP Drivers
Link : https://www.silabs.com/products/development-tools/software/usb-to-uart-bridge-vcp-drivers
Sometimes, a wifi card PIN must be activated to switch to OUTPUT mode.
I order to read and write data from arduino card at the sametime i need an asynchronous code.

Libs

Distance sensor HCSR04
https://github.com/jeremylindsayni/Bifrost.Arduino.Sensors.HCSR04

Wifi card
https://fr.macerobotics.com/developpeur/tutoriels/esp8266-controle-dune-led-par-wifi/

Testing arduino + wifi card project 📟

coyla — Sun, 09 Aug 2020 14:52:34 +0000

🎯 Goal

Goal: Simulate a system that prevents someone his is too close to some place or device by turning on a LED.

At a later stage, user will be able to turn on/off the system remotely via a web server.

use case can be used to prevent your child of dangerous place or device, like a hotplate ?

Steps

I divide the system into 3 separate system

LED sys
Presence/Distance sensor
Web server

Use tinkercad to simulate the project. Please try it, you will love it.
https://www.tinkercad.com/

LED device

diagram (tinkercad)

Distance sensor

Diagram

Web server + Wifi CARD

Testing server.

Final stage

In order to connect/plug PINS of the wifi card i used this diagram below.

LED + Distance sensor + Wifi card

I set up a range distance of 40cm to active the LED.

Test

Logs show that the server can get the distance from our system.

Issues

Instead of set up the wifi card you need to install the correct driver, this is tricky, for me this one was a solution: CP210x USB to UART Bridge VCP Drivers
Link : https://www.silabs.com/products/development-tools/software/usb-to-uart-bridge-vcp-drivers
Sometimes, a wifi card PIN must be activated to switch to OUTPUT mode.
I order to read and write data from arduino card at the sametime i need an asynchronous code.

Libs

Distance sensor HCSR04
https://github.com/jeremylindsayni/Bifrost.Arduino.Sensors.HCSR04

Wifi card
https://fr.macerobotics.com/developpeur/tutoriels/esp8266-controle-dune-led-par-wifi/

Avoid messy git history, use linear history

coyla — Fri, 07 Aug 2020 23:21:01 +0000

Lost 😰

Have you already encountered the same git history ? Maybe you don't if you work alone or work on small project/team, BUT i have already faced this situation on standard projects (>10 members).

The problem here is not to GET many branches, this is a normal situation but the problem is THE WAY we manage these branches.

The problems

😖 Hard to read, Look at the history even if you don't need to find or revert a commit, visually you feel bad, same as you are when you see messy home for example.
🔍 Hard to find/revert to a commit of our history will be also be annoying, this will even can create other conflicts... so a bug fixes and maintenance will be more complicated.
🐛 Filter or create new bugs when merging work to the another branch why ? Take the followed example:
- branche 'B' pulled from dev branch
- dev branch keeps moving, meanwhile you work on feature
- now you finished & you will merge
- you fix conflicts
- now it's merge
- the problem starts here ⚠️

Even if you fixed conflicts you don't even know if the merged (dev branch) is working, but this is to late, you have already mixed the 2 branches.

Ok There is some bugs? I can revert BUT you will create another commit on dev.. SO you are polluting the branch with unnecessary commits and potentially creating bugs if you don't see/test before.

Linear history works well to me, this is one solution.

🤔 Do i really need to see old branches ? Maybe not it depends

Linear History 🙏

This is Angular(google) git history. I don't know exactly which internal rules or tools they use to get this.

But this is a example of what i prefer to see in my projects.

You can also see that the messages are clean. I will write another post about that soon.

How i do to get a linear history

avoiding --no-ff option
using rebase instead of simple merge

Avoid [merge --no-ff]

You commits are directly following the origin branch ? So GIT will create a linear history without creating a "new merge commit", just by mixing and move HEAD pointer.

👉 This case can change, it depends on:

Is the target branch ahead (more changes) ?
Gitlab/Github merges configuration (default --no-ff ? )

Result will be this. It created a "new merge commit"

Rebase: my 🦸‍♂️

Mix branches in order to get linear history needs to following next steps

basically:

update
rebase
merge

/feature branch is ready to be mixed ?
update (pull from origin) the target branch (dev)
rebase on top of /dev branch (for example): now /feature is updated too and ready to test
tests, unit, functional and so on.
merge, as your /feature is directly following the HEAD of dev branch, you branch will merge without creating "new merge commit" (see first GIF).

Observation

Ok rebase, needs a little more steps compared to merge, but this was useful to me, i can improve tests and avoid bugs.
This is not THE SOLUTION, sometimes you need to keep track of an old branch, i don't know maybe you need to see when a feature branch was started and finished/merged, it depends of your needs, you should ask yourself do i need to see this branch in my history ? is it meaningful ? YES/NO ?
As rebase creates "new commits" than you feature branch, if you team mate has pulled his work from your /feature branch he might have conflicts when he will merge to /dev branch (MAYBE). This is a little bit tricky, see how REBASE work here: https://git-scm.com/book/en/v2/Git-Branching-Rebasing. If you need me to explain it please let me know.

Thank you for reading ! 🙇‍♂️

Array '[]'

coyla — Tue, 02 Jun 2020 12:21:01 +0000

Array '[]'

All examples are Javascript langage.

One on the must used data structure.

It's used to store one/many data of same nature or different nature, in order to get ALL of this
data in one place (this array).

Examples of arrays

// same nature elements
['apple', 'orange', 'pineapple']

[ {'name': 'Naruto'}, 'Ninja', []]
// -> different nature, the first is an object, second is a string and the third an empty array

Depending on the langage, sometimes we need to use an extra coding instruction or an array variant in order to use 'different nature' arrays.

How to use it

Now we need to see how to create an array, make basics instructions like add elements, delete, get and element. You need to learn how to do it in your langage.

The basics operations:

create

//creation 
const fruits = [];

add element(s)

fruits[0] = 'apple' 
fruits[1] = 'orange'
fruits.push('pineapple') // push add an element at the end of the array

//result: ['apple', 'orange', 'pineapple']

delete elements(s)

delete fruits[2]
//this is the must primitive way to delete an element but we will see that we don't use it often... most of the time we use 'filters, maps, splice'.

find and element(s)

console.log(fruits[1]) //get the second element, 0 is the begining

find and specific element(s) with loops and if condition like

fruits.forEach((fruit) => {
  if (fruit === 'orange') console.log(fruit)
})
// we use a forEach iteration to get the orange fruit and print it.

Middle and common operation/function of array

add element at the end (push) and begining (shift)
delete the last and first element (pop, unshift)
concat arrays
filter elements
map (like convertion)
(splice, slice) cut/replace/delete
find and replace
clone array
be confortable with multi dimentional array (array into array)
sort an array

Check this to JS array method for all of this operations
https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array#

Exercises

Swap to elements without 3 variables
Reverse array
Nombre pair le + petit
Intersection of array
Find Max and Minimum of unsorted array
Delete repeated numbers of array
Check if contains a number if they Array
Not the largest path in path matrix m*m

++ https://www.geeksforgeeks.org/array-data-structure/

Note

Feel free to send to suggest improvement to this post.

I created a github global view for my issues comments React/Gatsby/GraphQL

coyla — Fri, 24 Apr 2020 10:28:12 +0000

I needed an overview of my daily tasks on github dashboard. So i need to see clearly what are the comments of all REPOS/Projects in only 1 page (github doesn't provide a global overview dashboard).

You can check the code here:

code: https://github.com/blade-sensei/rtn-review
app: https://github-review.netlify.app/
my board: https://github.com/blade-sensei/learning/projects/3

I used github GraphQL API and Gatsby (test)
Deployed on netlify.
It supports markdown + highlight code

If you have any question about the process feel free to comment

The 1000th calculator React

coyla — Tue, 31 Mar 2020 14:44:12 +0000

I coded the 1000xxxxth calculator to test React.
Please check the code or the app and give me feedbacks, your way to do, everything.

code: https://github.com/blade-sensei/react-calculator/tree/master/src

app: https://calculator-1000.firebaseapp.com/

calculator service

import { operators } from '../constants';
class Calculator {

  calculationExpression(calculExpression) {
    let result = calculExpression.split('');
    while (!this.isLastResult(result)) {
      const terms = this.priorityOperationTerms(result)
      let resultCalcul = this.calculation(terms.operands, terms.operator);
      resultCalcul = resultCalcul.toString();
      const deltaDeleteIndex = (terms.limitIndexes.end - terms.limitIndexes.start) + 1;
      result.splice(terms.limitIndexes.start, deltaDeleteIndex, resultCalcul);
    }

    return Number(result[0]);
  }

  isLastResult(expression) {
    return expression.length === 1;
  }

  calculation(operands, operator) {
    const [firstOperand, secondOperand] = operands;
    if (operator === operators.MULTIPLICATION) {
      return this.multiplication(firstOperand, secondOperand);
    } else if (operator === operators.DIVISION) {
      return this.division(firstOperand, secondOperand);
    } else if (operator === operators.ADDITION) {
      return this.addition(firstOperand, secondOperand);
    } 
    return this.subtraction(firstOperand, secondOperand);
  }

  //return limitIndexes to know where to replace in 
  //current string expressionn, priority operation by futur priority result
  priorityOperationTerms(expression) {
    let firstOperatorFound = false;
    let indexPriorityOperator;
    let operands = [];

    for (let [index, term] of expression.entries()) {
      if (this.isOperator(term)) {
        if (this.isPriorityOperator(term)) {
          indexPriorityOperator = index;
          break;
        } if (!firstOperatorFound) {
          indexPriorityOperator = index;
          firstOperatorFound = true;
        }
      }
    }
    const [operandLeft, operandLeftIndex ] = this.getLeftOperand(expression, indexPriorityOperator);
    const [operandRight, operandRightIndex]  = this.getRightOperand(expression, indexPriorityOperator);
    operands = [operandLeft, operandRight];
    const terms = {
      operator: expression[indexPriorityOperator],
      operands,
      limitIndexes: {
        start: operandLeftIndex,
        end: operandRightIndex,
      }
    }
    return terms;

  }

  getRightOperand(expression, index) {
    let rightLimit = expression.length;
    let leftLimit = index + 1;
    for (let endIndex = leftLimit; endIndex < expression.length; endIndex++) {
      const term = expression[endIndex];
      if (this.isOperator(term)) {
        rightLimit  = endIndex;
        break;
      }
    }
    let number = expression.slice(leftLimit, rightLimit);
    number = number.join('');
    number = Number(number);
    return [number, rightLimit - 1]
  }

  getLeftOperand(expression, index) {
    let leftLimit = 0;
    for (let endIndex = index - 1; endIndex >= 0; endIndex--) {
      const term = expression[endIndex];
      if (this.isOperator(term)) {
        leftLimit  = endIndex + 1;
        break;
      }
    }
    let number = expression.slice(leftLimit, index);
    number = number.join('');
    number = Number(number);
    return [number, leftLimit]
  }

  isPriorityOperator(operator) {
    return (
      operator ===  operators.MULTIPLICATION ||
      operator === operators.DIVISION
    );
  }

  isOperator(term) {
    return Object.values(operators).includes(term)
  }

  addition(first, second) {
    return (first + second).toFixed(2);
  }

  subtraction(first, second) {
    return (first - second).toFixed(2);
  }

  multiplication(first, second) {
    return (first * second).toFixed(2);
  }

  division(first, second) {
    return (first / second).toFixed(2);
  }

}

export default Calculator;

It deals with string calcul expression (i wanted to try this way)

calculator component


import React from 'react';
import CalculatorButton from './CalculatorButton';
import CalculatorDisplayer from './CalculatorDisplayer';
import Calculator from '../services/calculator';
import './Calculator.css';
import { inputs, operators } from '../constants'

class CalculatorComponent extends React.Component {
  constructor(props) {
    super(props);
    this.calculator = new Calculator();
    this.state = {
      calculationExpression: '0',
    }
    this.handleUserInput = this.handleUserInput.bind(this);
  }


  handleUserInput(userInput) {
    const { type, value } = userInput;
    const lastUserInput = this.lastUserInput();

    switch(type) {
      case inputs.NUMBER:
        if (this.state.calculationExpression === '0') {
          return this.setState({
          calculationExpression: value,
        });
        }
        this.append(value);
        break;

      case inputs.OPERATOR: 
        if (lastUserInput.type === inputs.NUMBER) {
          this.append(value);
        }
        break;

      case inputs.SEPARATOR:
        if (lastUserInput.type === inputs.NUMBER) {
          const lastNumber = this.getLastNumberInExpression();
          if (!this.isFloat(lastNumber)) {
            this.append(value);
          }
        }
        break;

      case inputs.CLEAR:
        this.clearExpression(value);
        break;

      case inputs.RESULT: 
        if (this.lastUserInput().type === inputs.NUMBER ) {
          const normalizedExpression = this.normalizeToCalculation(this.state.calculationExpression);
          let result = this.calculator.calculationExpression(normalizedExpression);
          result = result.toString();
          result = this.normalizeToDisplay(result);
          this.setState({ calculationExpression: result });
        }
        break;

      default:
        break;
    }
  }

  append(input) {
    this.setState({
      calculationExpression: this.state.calculationExpression + input,
    });
  }

  isFloat(stringNumber) {
    return stringNumber.includes(',');
  }

  normalizeToCalculation(expression) {
    let expressionNormalized = expression;
    const regexMultiply = /x/gi;
    const regexSeparator = /,/gi;
    expressionNormalized = expressionNormalized.replace(regexMultiply, '*');
    expressionNormalized = expressionNormalized.replace(regexSeparator, '.');
    return expressionNormalized;
  }

  normalizeToDisplay(expression) {
    let expressionNormalized = expression;
    expressionNormalized = expressionNormalized.replace('.', ',');
    return expressionNormalized;
  }

  getLastNumberInExpression() {
    const expression = this.state.calculationExpression.split('');
    const rightLimit = expression.length;
    let leftLimit = 0;
    for (let termIndex = rightLimit; termIndex >= 0; termIndex--) {
      const term = expression[termIndex];
      if (this.isOperator(term)) {
        leftLimit  = termIndex + 1;
        break;
      }
    }
    const number = expression.slice(leftLimit, rightLimit + 1);
    return number.join('');
  }

  clearExpression(typeOfClear) {
    if (typeOfClear === inputs.CLEAR_ALL) {
      return this.resetExpression();
    } 
    return this.removeLastUserInput();
  }

  removeLastUserInput() {
    this.setState({
      calculationExpression: this.state.calculationExpression.slice(0, -1)
    })
  }

  resetExpression() {
    this.setState({ calculationExpression: '0'});
  }

  isOperator(term) {
    return Object.values(operators).includes(term)
  }

  lastUserInput() {
    const lastInput = this.state.calculationExpression.slice(-1);
    let type = '';
    if (!lastInput) return { type, lastInput } 
    if (!isNaN(Number(lastInput))) {
      type = inputs.NUMBER
    } else if (lastInput === ',') {
      type = inputs.SEPARATOR;
    } else {
      type = inputs.OPERATOR;
    } 
    return {
      type,
      lastInput,
    }
  }

  render() {
    return (
      <div className="calculator">
      <div className="displayer-container">
        <CalculatorDisplayer expression={this.state.calculationExpression} />  
      </div>
      <div className="inputs-container">
        <div className="row">
          <CalculatorButton value='AC' type='clear' onUserInput={this.handleUserInput} />
          <CalculatorButton value='' type='disabled' onUserInput={this.handleUserInput} />
          <CalculatorButton value='C' type='clear' onUserInput={this.handleUserInput} />
          <CalculatorButton value='/' type='operator' onUserInput={this.handleUserInput} />
        </div>

        <div className="row">
          <CalculatorButton value='7' type='number' onUserInput={this.handleUserInput} />
          <CalculatorButton value='8' type='number' onUserInput={this.handleUserInput} />
          <CalculatorButton value='9' type='number' onUserInput={this.handleUserInput} />
          <CalculatorButton value='x' type='operator' onUserInput={this.handleUserInput} />
        </div>

        <div className="row">
        <CalculatorButton value='4' type='number' onUserInput={this.handleUserInput} />
        <CalculatorButton value='5' type='number' onUserInput={this.handleUserInput} />
        <CalculatorButton value='6' type='number' onUserInput={this.handleUserInput} />
        <CalculatorButton value='-' type='operator' onUserInput={this.handleUserInput} />
        </div>

        <div className="row">
        <CalculatorButton value='1' type='number' onUserInput={this.handleUserInput} />
        <CalculatorButton value='2' type='number' onUserInput={this.handleUserInput} />
        <CalculatorButton value='3' type='number' onUserInput={this.handleUserInput} />
        <CalculatorButton value='+' type='operator' onUserInput={this.handleUserInput} /> 
        </div>

        <div className="row">
        <CalculatorButton value='0' type='number' onUserInput={this.handleUserInput} />
        <CalculatorButton value=',' type='separator' onUserInput={this.handleUserInput} />
        <CalculatorButton value='=' type='result' onUserInput={this.handleUserInput}/>
        </div>

      </div>
      </div>
    )
  }
}

export default CalculatorComponent;

Get alphabet position value of a letter [JavaScript]

coyla — Thu, 12 Dec 2019 13:34:59 +0000

a = 1, b = 2 ... z = 26 if we need these decimal values (alphabet position) of a letter. One of the solutions is to use UTF (ASCII) Table.

ASCII table contains the decimal/hex/binary representation of each character (letter, number, symbol ...) of your keyboard.

If you see this table 'a' represents 97 number and z represents 122, so alphabet starts at 97 number but we need 1 instead of 97, it's easy, the only thing we need to do is to subtract '96' for each letter representation.

JavaScript code

In order to get UTF code of a character, we use charCodeAt string function.

chatCodeAt returns UTF 16 decimal representation of one character into a string.




'hello'.charCodeAt(1) - 96 // output 5

//This takes only 1 parameter, index of the character we want.
//remember index starts at 0 (first letter = 0, second = 1)
//here we  get 'e' decimal so it returns number 5.

Use case

This is an example of algorithm problem



/**
Each letter of a word scores points according to its 
position in the alphabet: a = 1, b = 2, c = 3 etc.

We need the highest scoring word as a string.
If two words score the same, return the word that
appears earliest in the original string.
All letters will be lowercase and all inputs will be valid.

Write a high function which takes a string and returns 
the highest score word

tests:
**/

 assert.equal(high('man i need a taxi up to ubud'), 'taxi');
 assert.equal(high('what time are we climbing up the volcano'), 'volcano'); 
 assert.equal(high('take me to semynak'), 'semynak');

Misunderstanding of const keyword in JS

coyla — Sun, 24 Nov 2019 19:43:46 +0000

When you read forums or ask to JS friends developers about what's const keyword, sometimes they use this kind of answer:

variable const cannot be changed" or "const cannot be updated"

I think they really understand the difference between const let and var, but this sentences can be wrongly interpreted.

We should use the word "reassigned" instead of "change/update"

🚫 Reassignment


const color = 'red';
color = 'blue';
// TypeError: Assignment to constant variable.
color = { 'hex': '#FF0000' };
// TypeError: Assignment to constant variable.

const profile = { 'firstname': '', 'lastname': '' };
profile = 'Name';
// TypeError: Assignment to constant variable.

We can't reassign, set a new value to color variable.

✅ Change/Update value

const profile = { 'firstname': '', 'lastname': '' };
profile.firstname = 'Naruto';
profile.lastname = 'Uzumaki';
profile.rank = 'Hokage';

// output 
{ firstname: 'Naruto', lastname: 'Uzumaki', rank: 'Hokage' };

So, we were able to add a new property rank and change profile's property values, that means, we have changed the value of profile object.

😖 Confusion

const color = 'red';
color = 'blue';
// TypeError: Assignment to constant variable.

Here if you are thinking you are changing the value 'red' to 'blue'. You can be confused and might be wondering "Why i've got the TypeError if i'm changing the string value"

'r' letter doesn't change to 'b', 'e' to 'l' and so on ... actually 'blue' is considered as a "NEW" string so in other words it's a reassignment. That's a property of primitive values, when you think these kind of values have changed actually they are new values.

String, numbers and booleans are part of primitive values, this kind of values are immutable, their value can't be changed.

I hope this explanation will help someone. Let me know your feelings

ps: my english is not perfect, so give me some feedbacks if you want

XOR operator in programming use case

coyla — Wed, 13 Nov 2019 10:35:43 +0000

A few days ago, i solved a kata (programming problem) in codewar website, when i finished, i checked the other solutions found. I saw a solution that caught my attention, this solution uses XOR operation. You can easily understand XOR operator logic (truth table) but the purpose is to understand WHY XOR resolves the problem. So i did some research and i will try to explain you my understanding.

Kata problem

So the programming problem was:

Given an array, find the int that appears an odd number of times.

There will always be only one integer that appears an odd number of times.

So if you have a list like: [2, 3, 2, 4, 4]
3 is the good answer. 2 and 4 are repeated 2 times (even) and 3 just 1 > (odd)

Try to resolve this problem if you want. I did it with JavaScript and a forEach loop.
I will leave you my solution at the end of this post.
The solution given by other users is:

const findOdd = (xs) => xs.reduce((a, b) => a ^ b);
// this is arrow function

They use reduce function to iterate in the 'xs' list and ^ (XOR operator in JavaScript).

Understand

So first of all, you need to understand 3 THINGS:

^ = means XOR operation

1. Truth table

0 ^ 0 = 0
0 ^ 1 = 1
1 ^ 0 = 1
1 ^ 1 = 0

(this is useful to understand Properties below)

2. Properties:

Capital letters as A or B or X are the result of a xor operation.

A ^ A = 0
A ^ 0 = A

[A] can be a random number, for example 10 ^ 10 = 0
or 3 ^ 0 = 3

(ps: we don't need the other properties to understand next parts)

3. Associativity:

a ^ b ^ c = a ^ c ^ b
or even
a ^ b ^ c ^ d = a ^ c ^ d ^ b

So this means that the priority order of operations
can be changed.

This is not mandatory to start with a ^ b operation, we can
start with a ^ c if you we want.

Apply

OK now we will see how to apply XOR in this case.

Take this list as example

const array = [10, 3, 20, 10, 3, 20, 10]

here 10 is the number that is repeated odd times (3). It's the good
answer.
Reduce is a special function to javascript. Basically this function iterates each list element from LEFT to RIGHT and returns the result of a given operation between the previous and current iteration element.

So in our problem/example the list element is a number and the given operation is the XOR operation a ^ b. a will be the previous result and b the number of the current iteration.

This solution will iterate like this:

10 ^ 3 = A (the result is 9 but we don't need to know real
results, so we call it A)
A ^ 20 = B it's the same as 10 ^ 3 ^ 20 so B = 10 ^ 3 ^ 20 ..and so on
10 ^ 3 ^ 20 ^ 10. At this moment we can use associativity,
to change the order of prio operations.
So we can write 10 ^ 10 ^ 3 ^ 20, now use the properties (A ^ A = 0)
so 10 ^ 10 = 0 ... then 0 ^ 3 ^ 20.
Again use the property (A ^ 0 = A).. so 0 ^ 3 ^ 20 = 3 ^ 20.
3 ^ 20 ^ 3 .. Again use associativity and properties, the result
here is 20
20 ^ 20 = 0, then last iteration
0 ^ 10 = 10 ! AWESOME !

Conclusion

As you can see, the behaviour is that, if at a time we meet/encounter a number thats was ALREADY IN previous XOR operations .. like : [a] ^ b ^ c ^ [a] the repeated number [a] is somehow canceled or removed. A duplicate number will be removed step by step so at the end the number/result will be the number that has appeared only once (1 = odd)

Thats why XOR operation can resolve this kind of problem.

Thanks for reading 😌 !

Below, i leave you my solution (draft), i know, i don't respect clean code here 🤷‍♂️

function findOdd(A) {
  const occurencesTable = [];

  A.forEach(number => {
    const exist = occurencesTable.find(occurence => {
      return occurence[0] === number;
    });

    if (!exist) {
      occurencesTable.push([number, 1]);
    } else {
      exist[1] = exist[1] + 1;
    }
  });

  const odd = occurencesTable.find(occurence => {
    return (occurence[1] % 2 !== 0)
  });
  return odd[0];
}