Functional programming Javascript Flashcards
What is a closure
Functions that can access and use variables that are not passed directly into them because of where the function is relative to the variables. It consists of an outer and an inner function.
Example:
`
const someFunction=function(varOne){
// this function is a closure
return function someNestedFunction(){
// can use varOne, because it’s available within the “someFunction” function scope
}
}
`
A custom react hook is a perfect example of closures, if the hook takes a value of some kind for example:
`
const useSomeHook = (someValue)=>{
// functions that use this value are closures.
}
`
Explain currying and partial application
The two are related in that a curried function returns a function/object with methods/array with functions as items, that are only partially applied when the curried function is invoked.
This variable that references the invoked curried function can be fully applied by invoking it.
Great examples in React:
`
const [name,setName] = React.useState();
useState returns a function (setName) that is only partially applied at this stage.
useState is the curried function
react-query’s useMutation and useQuery hooks are also examples, here these hooks are factory functions.
`
Other name for arrow functions
Fat arrow functions
Lamda functions
What is a factory function
It’s a function that returns an object
What are pure functions?
For the same input, the same output is always retrieved
Generates no side-effects (permanent changes like API call, writing a file etc, OR causing a change outside of the function)
Only uses variables that are passed in, none from outside of the function’s scope. That is, no stateful values.
What is a side-effect
A change caused outside of a function, because of the function, is a side effect. Examples are, updating a variable outside of the function, saving to a database or file or causing a re-render etc
What is function composition?
It’s creating a new function by combining two or more function(s), in a way where the result of the one function is given as an argument to the next and so on.
Pure functions required
When the new function is invoked, then a value must be returned, which is a result of all the function invocations.
What is a good library for functional programming?
Ramda
Explain imperative vs declarative programming
Imperative is where you give the programme instructions as a programmer, line by line.
Declarative is where you give the application configuration settings via an object for example. The app will then take these settings into account in order to function as expected.
Explain React, Vue and Angular framework type
These are SPAs, single page applications, meaning that a user navigates to different pages, without the page refreshing. In order for the URL to be updated, by Next, Nuxt or similar, the browser’s history object’s pushState or replaceState (window.history)
Explain React, Vue and Angular programming paradigm
These three frameworks use a declarative style of programming.
The approach taken is that the application has state (should be immutable), and functions to update the state. Once the state is updated, the relevant component(s) are re-rendered, and the programmer sets rules according to which the framework either renders in a certain way or takes some kind of action.
Explain what functional programming is
Functional programming is a style of programming where you try to use pure functions exclusively, and where you limit side effects, and where needed, control them.
State updates, which have to be impure for example, but if this is done in an opinionated way, then it’s controlled.
The data model (state), along with rules (such as conditional rendering), form a declarative approach to programming, where every time the model (state) is updated, the rules are applied.
What are the benefits of pure functions?
Easy to test
Composable
Reusable
What are building blocks of functional programming?
Immutable data - state
Pure functions
Limited/Controlled side effects
Declarative approach, with rules such as conditional rendering, which run every time the state is updated.
