JavaScript Flashcards
What are functions and why are they referred to as first class functions?
Block of code that is self-contained
Optionally accept parameters and returns one value
Referred to as first class functions because they can be:
- Assigned to a value
- Passed as arguments
- Used as a return value
What is the difference between var, let and const?
var
- Can be reassigned
- Global scope if declared outside of a function
- Hoisted to the top so it will throw undefined if you try to access them before
let
- Can be reassigned
- Scoped to what the closure is
- Throw reference error if you try to access them before
const
- Does not provide immutability but it ensures that the reference can’t be changed
- Scoped to what the closure is
- Throw reference error if you try to access them before
What is prototypal inheritance?
Javascript has a baseline prototype of the object that everything inherits from and when you create a new object based on the other object, you can either inherit all those properties which will be default or you can overwrite them with your own properties
What does “this” mean in JavaScript?
Depending on the scope, “this” can change values
If there is no scope, then it’s the global window object
What is the data structure of the DOM?
Tree
What is a stack?
What is a queue?
How would you create those data structures in JavaScript?
Stack is LIFO
Queue is FIFO
Use an array - pop/push, shift/unshift
What is a worker and when would you use one?
Used in a browser to offload computationally expensive work to a different thread because JavaScript is single threaded so you don’t have any blocking operations
What is event delegation and why is it important?
Traditionally, for event handlers in html, you could apply an event handler to every single element in your html
But event listeners are expensive because every time it renders, it’s checking if something has happened or not
Using event delegation, you can use one event listener at the top, and when that event listener is triggered, it bubbles up to the parent that handles the event
Important for performance reasons
What is the difference between function expressions and arrow functions?
In function expressions, the this is bound to different values based on the context of which it is called
Arrow functions do not bind their own this, so it will lexically go up a scope and use the value of this in the parent scope
Arrow functions are a good choice for working with closures or callbacks but not a good choice for working with class/object methods or constructors
What is the difference between continue and break statements?
Both affect loops
Continue statement terminates execution of the current iteration in a loop
Break statement stops the execution of a loop entirely
What is the difference between return and yield statements?
Return statement is used to return the value of the function call to the caller and will not let you do anything else after the return statement
Yield statement is used to pause and resume a generator function
What is the difference between a while loop and a for loop?
A while loop loops through a block of code as long as the condition evaluates to true (must ensure the condition will eventually return false otherwise stuck in an infinite loop)
A for loop loops through a block of code until the counter reaches a specified number
What is the difference between an array and an object?
Both are considered special in Javascript
Both represent a data type that is mutable
Objects are used to store a collection of data and used to represent characteristics/properties, uses for/in loop to iterate over object properties
Arrays are used to store a list of values, uses for/of loop to iterate
What is Javascript injection?
Injecting Javascript code which can modify a website’s design or hacking someone’s account credentials - can be prevented by sanitising user input
Not as serious as SQL injection because it is client-side and not as risky as XSS attack
What is strict mode?
Allows the Javascript runtime to catch errors and other overlooked issues
What does tree shaking mean?
Removing dead code from the bundle before you ship to your users
Reduces file size and loading time
What is a polyfill?
A way to provide new functionality available in modern browsers or modern browser API to older browsers
Immediately Invoked Function Expression
IIFE
Executes functions immediately
Useful because they don’t pollute the global scope - also a simple way to isolate variables and declarations
Wrapped inside parentheses to indicate a function expression rather than a function declaration
What is scope?
Where the JS engine will look for things
Portion of the code where the variable is visible
Can be globally or locally defined:
- Global scope: highest level of scope
- Local scope: any scope defined past global scope and
broken down into function scope and block scope
Scope can be changed by using .call(), .apply(), .bind() methods
What is a pure function?
Function that is idempotent and doesn’t produce side effects
Does not mutate shared state
Produce stronger guarantees of encapsulation than objects without function purity
Given the same input, a pure function will always produce the same output
What is destructuring?
Simplified way of defining variables and extracting them out of an object or array
What are higher order functions?
Methods or functions that accept other functions
Can be passed around
Can be returned without being invoked
Allows you to create extensible code
What does single-threaded mean?
Process and execute only one task at a time
JavaScript is a single-threaded language
What is synchronous programming?
Two or more things cannot be executed at the same time
Only one thing can be run to completion at any given time
What is asynchronous programming?
Allows the computer to perform other tasks while waiting for an event to occur
Approaches to asynchronous programming:
- Callback functions
- Promises
- Async/await
What is the call stack?
Mechanism in the JavaScript engine that keeps track of the order of function calls
What is the callback queue?
Holding area for all the callbacks that are waiting to be put on the call stack and eventually executed
What is the event loop?
Monitor the call stack and callback queue
Anytime the call stack is empty, the event loop takes the first task from the callback queue and pushes it onto the call stack, and runs it
What are web APIs?
Process async operations while keeping the call stack clear of blocking operations
When a web API is done processing an async task, it’s not immediately executed on the call stack but pushed onto the callback queue
ie. setTimeout(), XMLHttpRequest(XHR), Fetch API, DOM event API
