alpersonalwebsite / basic-tic-tac-toe

TODO > Basic Tic Tac Toe

Basic Tic-Tac-Toe

TODO: Overview

NOTE: This project was bootstrapped with Create React App.

Immutability

Shallow copy

const state = {
  isGame: false,
  players: {
    order: ['player1', 'player2'],
    player1: 1,
    player2: 2
  },
  currentPlayer: '',
  isWinner: false
};

console.log(`Original state: ${state.players.player1} `)


const newState1 = {...state};
newState1.players.player1 = 11;
// At this point state.players.player1 = 11

const newState2 = Object.assign({}, state);
newState1.players.player1 = 111;

console.log(`state is ${state.players.player1} 
newState1 is ${newState1.players.player1}
newState2 is ${newState2.players.player1}`)

Result:

Original state: 1 
state is 111 
newState1 is 111
newState2 is 111

TODO: Performance deep

Deep copy (or clone) with lodash

const state = {
  isGame: false,
  players: {
    order: ['player1', 'player2'],
    player1: 1,
    player2: 2
  },
  currentPlayer: '',
  isWinner: false
};

console.log(`Original state: ${state.players.player1} `)

const deepCloneOfState = _.cloneDeep(state);
deepCloneOfState.players.player1 = 111111;

console.log(`state: ${state.players.player1} 
deepCloneOfState: ${deepCloneOfState.players.player1}`)

Result:

Original state: 1 
state: 1 
deepCloneOfState: 111111

DOING:

Example of adding a hobby to the hobbies's array of player1

Having the following object (state)...

const state = {
  players: {
    player1: {
      name: 'Cindy',
      hobbies: ['3D printing', 'Reading', 'Gaming'],
      age: 30
    },
    player2: {
      name: 'Paul',
      hobbies: ['Painting', 'Gaming', 'Coloring'],
      age: 99
    },
  }
}

Attempt #1...

If we try...

const newState1 = {
  ...state
}

console.log('Original', state.players.player1.hobbies)

newState1.players.player1.hobbies.push('new hobbie')


console.log('Original state', state.players.player1.hobbies)
console.log('newState1', newState1.players.player1.hobbies)

Result:

Original (3) ["3D printing", "Reading", "Gaming"]

Original state (4) ["3D printing", "Reading", "Gaming", "new hobbie"]
newState1 (4) ["3D printing", "Reading", "Gaming", "new hobbie"]

We are mutating the original object. So... Let's go deeper.

Attempt #2

If we try...

const newState1 = {
  ...state,
  players: {
    ...state.players,
    player1: {
      ...state.players.player1
    }
  }
}

console.log('Original', state.players.player1.hobbies)

newState1.players.player1.hobbies.push('new hobbie')


console.log('Original state', state.players.player1.hobbies)
console.log('newState1', newState1.players.player1.hobbies)

Result:

Original (3) ["3D printing", "Reading", "Gaming"]
Original state (4) ["3D printing", "Reading", "Gaming", "new hobbie"]
newState1 (4) ["3D printing", "Reading", "Gaming", "new hobbie"]

Yes... We should expect to see the same, but... We can make changes for the key player1 without altering the original source. Well, for the properties or keys holding primitives values;

Example:

const newState1 = {
  ...state,
  players: {
    ...state.players,
    player1: {
      ...state.players.player1
    }
  }
}

console.log('Original state', state.players.player1.name, state.players.player2.name)

// This does NOT mutate
newState1.players.player1.name = 'Player 1';

// This will mutate state
newState1.players.player2.name = 'Player 2';


console.log('newState1 > player1', newState1.players.player1.name)
console.log('newState1 > player2', newState1.players.player2.name)

console.log('state', state.players.player1.name, state.players.player2.name)

Result:

state Cindy Paul
newState1 > player1 Player 1
newState1 > player2 Player 2
state Cindy Player 2

Attempt #3

If we try...

const newState1 = {
  ...state,
  players: {
    ...state.players,
    player1: {
      ...state.players.player1,
      hobbies: [...state.players.player1.hobbies]
    }
  }
}

console.log('Original', state.players.player1.hobbies)

newState1.players.player1.hobbies.push('new hobbie')


console.log('Original state', state.players.player1.hobbies)
console.log('newState1', newState1.players.player1.hobbies)

Result:

Original (3) ["3D printing", "Reading", "Gaming"]
Original state (3) ["3D printing", "Reading", "Gaming"]
newState1 (4) ["3D printing", "Reading", "Gaming", "new hobbie"]

Great!