What is a side effect in JavaScript?
A side effect is any application state change that is observable outside the called function other than its return value. For example modifying any external variable like global variable, logging to console, writing to file, writing to network, calling other functions with side effects.
function printSomething(foo) {
console.log(foo);
}
// printing to console make this function to have a side effect.
Side effects are mostly avoided in functional programming, which makes the program easier to understand and to test.
References:
- Master the JavaScript Interview: What is Functional Programming?
- 3 common approaches to side-effects in Redux apps
- Redux side effects and me
- Preventing Side Effects in JavaScript
- HOW TO DEAL WITH DIRTY SIDE EFFECTS IN YOUR PURE FUNCTIONAL JAVASCRIPT
- Dealing with side effects and pure functions in javascript
What is a Monorepo?
Monorepo, is a single repository which contains more than one logical project like a web application and its iOS application.
Benefits:
- Single build system
- Easy to refactor
- Code sharing
Disadvantages
- Tight coupling and unclear ownership boundaries
- Source control system scalabity issues
References:
Dependency Injection in JavaScript
Dependency Injection is a pattern where instead of creating or requiring dependencies directly inside a module, we pass them as paramaeters or reference.
// foo.js
export default class Foo {
print() {
console.log('Hello world!');
}
}
//baz.js
import Foo from './foo.js';
export default class Baz {
constructor() {
this.foo = new Foo();
}
}
//app.js
import Baz from './baz.js';
let b = new Baz();
// Using Dependecy Injection
// Updated baz.js
export default class Baz {
constructor(foo) {
this.foo = foo;
}
}
//app.js
import Foo from './foo.js';
import Baz from './baz.js';
let b = new Baz(new Foo()); // Foo instance is passed as parameter to Baz
Benefits
- Unit testing - Avoid need for stubbing
- Flexibility - Freedom to change implementation at any point
References:
Component Composition
Component composition is where a more “specific” component renders a more “generic” one and configures it with props.
function Button(props) {
return (
<button>{props.label}</button>
)
}
function SignupButton() {
return (
<Button label="Signup"/>
)
}
Higher-Order Components
A higher-order component is a function that takes a component and returns a new component. It composes the original component by wrapping it in a container component. Its a pure function with zero side-effects. The wrapped component receives all the props of the container, along with any new props from the container comopnent. HOCs are similar to pattern called “container components”. Container components are part of a strategy of separating responsibility between high-level and low-level concerns. Containers manage things like subscriptions and state and pass props to components that handle things like rendering UI. HOCs add features to a component. They shouldn’t drastically alter its contract. It’s expected that the component returned from a HOC has a similar interface to the wrapped component.
const EnhancedComponent = higherOrderComponent(WrappedComponent);
References:
Webpack Bundle and Chunk
Bundle
Produced from a number of distinct modules, bundles contain the final versions of source files that have already undergone the loading and compilation process.
Chunk
Bundles are composed out of chunks. Typically chunks directly correspond with the output bundles. However, there are some configurations that don’t yield one-to-one relationship.