const toEnum = (...values) =>
Object.freeze(values.reduce((acc, curr) => {
acc[curr] = curr
return acc}, {}))
const Graphics = toEnum(
'circle',
'rect',
'triangle')console.log(Graphics.circle)
I sure dislike fake enums in js. Something like this at least dries things up – but still, yuk! 😀
<style>*{ font-family: sans-serif; margin-bottoM: .5em;}</style>
<h3>TODO</h3>
<ul id=todos></ul>
<label>What needs to be done?<br>
<input id=todo onchange="newTodo()"/><br>
</label>
<button id=add onclick="newTodo()">Add #1</button>
<script>
let count = 1
function newTodo() {
if (todo.value.length > 0) {
todos.innerHTML += `<li>${todo.value}</li>`
todo.value = ''
add.innerText = `Add #${++count}`
} }</script>
I don’t really like React… Don’t get me wrong, I don’t mind it and I even kind of like using it – there’s something fun about it… But it’s surprising to me that UI work is still so bulky… I think React and most other UI libraries are overly complex… Every now and then I do evil style vanilla js versions of the React homepage examples as a sort of rebellion 😀 This is the React version of the above snippet:
class TodoApp extends React.Component {
constructor(props) {
super(props);
this.state = { items: [], text: '' };
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}render() {
return (
<div>
<h3>TODO</h3>
<TodoList items={this.state.items} />
<form onSubmit={this.handleSubmit}>
<label htmlFor="new-todo">
What needs to be done?</label>
<inputid="new-todo"
onChange={this.handleChange}
value={this.state.text}
/><button>
Add #{this.state.items.length + 1}
</button>
</form>
</div>
);
}handleChange(e) {
this.setState({ text: e.target.value });
}handleSubmit(e) {
e.preventDefault();
if (this.state.text.length === 0) {
return;
}const newItem = {
text: this.state.text,
id: Date.now()
};
this.setState(state => ({
items: state.items.concat(newItem),
text: ''
}));
}}class TodoList extends React.Component {
render() {
return (
<ul>
{this.props.items.map(item => (
<li key={item.id}>{item.text}</li>
))}
</ul>
);
}}root.render(<TodoApp />);
console.log('print: %s %i %f %o %s', 'two', 1.4, 1.6, { cool: 321 }, [3, 2, 1]);
outputs: print: two 1 1.6 {cool: 321} 3,2,1
Notice how we are casting a float to an integer and an array to a string in the above example. I personally don’t use this much in javascript, but for someone coming from a C/C-like language this should look familiar and could be very useful.