A guide to a few terms used in frontend development that might be alien to you
- 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.
With Function Scoping, any variable defined in a block is visible and accessible from inside the whole block, but not outside of it.
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 which means that the value of a variable is defined by its position when it’s written. Not when it’s called, which is something that happens with the alternative, dynamic scoping (used in some other programming languages).
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, referred to a variable, in what portion of a program that variable is visible.
const have block scoping, which determines a differnet scope from values defined using
var, which have function scoping.
Scoping is how a programming language determines the scope of the variables and functions. We can for example have block scoping, function scoping, lexical scoping.
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.