Código para el chapter del 12/05/22

chapter.js

// POO
class Car {
	color
	numWheels
	isRunning

	constructor(color, numWheels) {
		this.color = color
		this.numWheels = numWheels
		this.isRunning = false
	}

	start() {
		if (!this.isRunning) this.isRunning = true
	}

	stop() {
		if (this.isRunning) this.isRunning = false
	}
}

const i30 = new Car('blue', 4)
i30.start()

// PURE FUNCTION
function pureAdd(num1, num2) {
	return num1 + num2
}

pureAdd(5, 5) // 10

pureAdd(5, 5) // 10

// IMPURE FUNCTION
let num1 = 0

function impureAdd(num) {
	return (num1 += num)
}

impureAdd(5) // 5

impureAdd(5) // 10

// IMMUTABILIDAD MAL
function sum(obj) {
	obj.numbers = obj.numbers.reduce((acc, curr) => acc + curr, 0)
}

const obj = { numbers: [25, 100] }

console.log(obj) // { numbers: [25, 100] }

sum(obj)

console.log(obj) // { numbers: 125 }

// IMMUTABILIDAD BIEN
function sum(...args) {
	return args.reduce((acc, curr) => acc + curr, 0)
}

const num1 = 25
const num2 = 100

const result = sum(num1, num2)

console.log(result) // 125

// constante, no se puede redeclarar
const ENVIRONMENT = 'development'

// congela las propiedades de un objeto
// el intento de reasignación no produce TypeError
const obj = Object.freeze({ prop: 'value' })

// REDUX

const reducer = (state, action) => {
	switch (action.type) {
		case 'increase':
			return { ...state, count: state.count + 1 }
		case 'decrease':
			return { ...state, count: state.count - 1 }
		default:
			return { ...state }
	}
}

const initialState = { count: 0 }
const action = { type: 'increase' }

const newState = reducer(initialState, action)

console.log(initialState === newState) // false

console.log(newState) // { count: 1 }

// COMPOSITION IN REACT
function Accordion({title, children}) {
	return (
		<Accordion level={1}>
			<CollapsibleContainer>
				<CollapsibleContainerHeader>{title}</CollapsibleContainerHeader>
				<CollapsibleContainerBody>{children}</CollapsibleContainerBody>
			</CollapsibleContainer>
		</Accordion>
	)
}

// ESTILO IMPERATIVO
const container = document.getElementById('container')
const btn = document.createElement('button')

btn.className = 'btn red'
btn.onclick = function (event) {
	if (this.classList.contains('red')) {
		this.classList.remove('red')
		this.classList.add('blue')
	} else {
		this.classList.remove('blue')
		this.classList.add('red')
	}
}

container.appendChild(btn)

// ESTILO DECLARATIVO

function Component() {
	const [color, setColor] = React.useState('red')

	const handleChange = () => {
		setColor((color) => (color === 'red' ? 'blue' : 'red'))
	}

	return (
		<div id="container">
			<button className={`btn ${color}`} onClick={handleChange}>
				Cambiar color
			</button>
		</div>
	)
}

// WORKSHOP:
// helper que recibe una string y un número infinito de parámetros
// para reemplazar en la string en orden
// ej: "Vodafone is the {0} company", "best"

// imperativo
function formatUnicorn(str, ...params) {
	let finalStr = str.split(' ')

	for (let i = 0; i < finalStr.length; i++) {
		const word = finalStr[i]

		const firstLetter = word[0]
		const number = word.substr(1, word.length - 2)
		const lastLetter = word[word.length - 1]

		if (
			firstLetter === '{' &&
			!isNaN(Number(number)) &&
			lastLetter === '}'
		) {
			const parsedNumber = Number(number)

			finalStr[i] = params[parsedNumber].toString()
		} else {
			continue
		}
	}

	return finalStr.join(' ')
}

// declarativo
function formatUnicorn(str, ...params) {
	return str.replace(/\{(\d+)\}/g, (match, i) => {
		return i < params.length ? params[i].toString() : match
	})
}