- Block Scoping
- Function Scoping
- Lexical Scoping
- Pure function
- Side effect
- Strict mode
- Tree Shaking
Code is asynchronous when you initiate something, forget about it, and when the result is ready you get it back without having to wait for it. The typical example is an AJAX call, which might take even seconds and in the meantime you complete other stuff, and when the response is ready, the callback function gets called. Promises and async/await are the modern way to handle async.
if statement contains a block, a
for loop contains a block.
A callback is a function that’s invoked when something happens. A click event associated to an element has a callback function that’s invoked when the user clicks the element. A fetch request has a callback that’s called when the resource is downloaded.
With Function Scoping, any variable defined in a function is visible and accessible from inside the whole function.
A variable is immutable when its value cannot change after it’s created. A mutable variable can be changed. The same applies to objects and arrays.
Lexical Scoping is a particular kind of scoping where variables of a parent function are made available to inner functions as well. The scope of an inner function also includes the scope of a parent function.
A function that has no side effects (does not modify external resources), and its output is only determined by the arguments. You could call this function 1M times, and given the same set of arguments, the output will always be the same.
let declaration allows you to reassign a variable indefinitely. With
const declarations you effectively declare an immutable value for strings, integers, booleans, and an object that cannot be reassigned (but you can still modify it through its methods).
Scope is the set of variables that’s visible to a part of the program.
Scoping is the set of rules that’s defined in a programming language to determine the value of a variable.
A shim is a little wrapper around a functionality, or API. It’s generally used to abstract something, pre-fill parameters or add a polyfill for browsers that do not support some functionality. You can consider it like a compatibility layer.
A side effect is when a function interacts with some other function or object outside it. Interaction with the network or the file system, or with the UI, are all side effects.
State usually comes into play when talking about Components. A component can be stateful if it manages its own data, or stateless if it doesn’t.
A stateful component, function or class manages its own state (data). It could store an array, a counter or anything else.
A stateless component, function or class is also called dumb because it’s incapable of having its own data to make decisions, so its output or presentation is entirely based on its arguments. This implies that pure functions are stateless. Note: in React, what we once called stateless components are now called function components because hooks give them the ability to use state.
Tree shaking means removing “dead code” from the bundle you ship to your users. If you add some code that you never use in your import statements, that’s not going to be sent to the users of your app, to reduce file size and loading time.