Frontend Flashcards
What are some key differences between functional programming and object oriented programming?
FP
- Stateless programming model
- Immutable Data
- Pure functions - No side effects
- Execute in any order
OOP
- Stateful programming model
- Mutable Data (methods to change values)
- Execute in particular order
What is an arrow function? Why was it created and why is it used?
- Compact alternative to traditional function expression
- Mainly created and used for scoping
- this – bind to its own scope for callback
Normal: when referring to THIS it’s referring to the global scope
Arrow: when referring to THIS it’s referring to its own scope
Have you used a state management system before, such as Redux and if so, explain what it is?
- A snapshot state of the whole application / state container
- States are immutable
- Flow
- Action → (Effects/ex: Sagas) → Reducer → State
Explain the differences between these 2 code blocks and what are their output:
Code 1:
hello();
function hello() {
return ‘Hello World’;
}
Code 2:
hello();
var hello = () => {
return ‘Hello World’;
}
- Code block 1 hoisted its function while code block 2 does not.
- Code block 2 will not execute as it cannot execute before it is defined.
Which of these are “truthy”?
24
null
0
-0
“hello”
“”
[ ]
{ }
Undefined24 - True
null - False
0 - False
-0 - False
"hello" - True
"" - False
[ ] - True - checking that it exists and not the values inside of it
{ } - True - checking that it exists and not the values inside of it
Undefined - FalseWhat is the difference between map, filter, and reduce?
Map
Takes an array and returns a new array with any modified values. | does not modify original array
Filter
Takes an array and returns a new array with only values that pass the condition(s) in the filter. | does not modify original array
Reduce
Returns a new value that is produced after operating on each item in the array
** does not modify original array **
How many data types in Javascript can you name?
- Function
- Object
- Array
- Undefined
- Number
- String
- Null
- Boolean
How do callback functions work and when have you used them?
Callback is a function passed into another function as an argument to be executed later.
Toggle() , will be called immediately
button.addEventListener(‘click’, toggle) , will only be called when btn is clicked because toggle is the callback function
Toggle() does not equal () => {} // not callback function
Toggle does equal () => {} //callback function
setTimeout(firstAction, 5000)
callback function as firstAction is being passed inside another function and will be called after a condition is met aka 5 seconds
Are you familiar with currying in Javascript and, if so, how have you used it?
(functions returning functions)
Yes, currying is when you break down a function that takes multiple arguments into a series of functions that each take only one argument.
Example: Creating a redux action.
Const makeAction = (type: T) => (payload: P) => ({ type, payload });
PROS:
- its a checking method to make sure that you get everything you need before you proceed
- it makes your function pure and less prone to errors or side effects
Another ex:
const sendRequest => greet => name => message => {greet, name, message}
sendRequest(‘Hi’, ‘Zuko’, ‘Lets be friends’);
What are the major differences between these Javascript framework - Angular, React, and Vue?
Angular
- Big Framework
- Batteries included FrontEnd
- Less reliance on 3rd party modules
React
- Simple library that are good for building reusable components
- Largest community
- Largely reliance on 3rd party modules
Vue
- Mixture of both Angular and React
- Template directives like Angular
- Less boilerplate like React
Advantages and disadvantages of a monolithic and microservice architect?
Monolithic
- Everything in one place
PROS:
- Works for smaller applications
CONS:
- Not scalable
- Expensive when uploading entire application to server - Easier configurations between your different services
- Lots of related code that makes it harder to debug
Microservice PROS: - Scalable - Allowing teams in a large organization to work more independently - Easier to debug when issues arise - Keeps services modular - Can be used in different projects - Work well with containers - Netflix moved to micro-services for those reasons , account signup is one service, movie selection is one, and tv selection
CONS:
- Potentially too granular
- Extra effort for communication between services
- Complex testing
- Additional management, security needs
Are you familiar with closure in Javascript?
- functions inside of other functions
- A functions scope is determined at the time of definition
- A closure gives you access to an outer function’s scope from an inner function.
EX:
- alertFun does not have access to the inner function
- the inner function DOES have access to outer function
- you can use closures to make a function factory that takes an argument then returns a brand new function, which can be passed along to other functions that expect a callback
function alertFun(message) {
return () => {
alert(‘hi {message})
}
}
const alertZuko = alertFun(‘hi zuko’)
alertZuko();
What is your preferred development stack and why?
JAMStack - use all these other applications to pass the data from back to front
static page generator - NextJS - snapshot of
I’d say MERN but because you’d only need to know JavaScript and the JSON document structure.
FE:
React since its easier to whip up an application thats light weight and has such a large community surrounding it.
Server:
I recently used ExpressJS for the first time in a side project to help handle my http requests and responses. Nodejs is a given as you need Node with Express.
DB:
I haven’t used MongoDB before but I have used a similar NoSql like DB called Cloud Firestore. (FERN). Firebase falls under JAMStack as we don’t have to maintain that server and we still get backend functionality.
What are some primitive types?
Numbers and strings
does {name: “val” } == {name: “val” }? Explain answer.
No, because when comparing objects we are comparing their space in memory which are two different spaces.
If we were comparing their primitive values specifically like obj1.name == obj2.name then it would be true.
