Technical Javascript Flashcards
What is event delegation!
Explanation (E): Event delegation in JavaScript is a technique where we attach a single event listener to a parent element instead of attaching listeners to each individual child element.
Usage (U): it is commonly used when there are many elements which share similar behaviours
Example (E): an example would be if we had a list of elements, rather than adding event listeners to each element, we can add a listener to the parent so that when a child is clicked, the event bubbles up to the parent. Using event.target we can see which child element was clicked
Explain how this works in Javascript
Explanation: this is a keyword in javascript which refers to the object that a function is working with
Usage: this allows functions to have access to object properties
Example: in a method like, object.method() - this would refer to the object, and allow access to its properties and methods
Explain how prototypal inheritance works
Explanation: prototypal inheritances allows objects to inherit properties and methods from a prototype object
Usage: it allows objects to reuse behaviours and characteristics defined in the prototype
Example: an example would be a person object can inherit a name property and a greet method from a personPrototype object, allowing for multiple instances of a person object
What do you think of AMD vs CommonJS?
Explanation: AMD and CommonJS are different module systems in JavaScript, with AMD focusing on asynchronous module loading and CommonJS on synchronous loading.
Usage: AMD is commonly used in browsers for parallel loading, while CommonJS is popular in server-side environments.
Example: For example, AMD uses callback functions or promises for dependencies, whereas CommonJS uses the require() function for module imports.
Explain why the following doesn’t work as an IIFE: function foo(){ }();. What needs to be changed to properly make it an IIFE? (Immediately Invoked Function Expression)
this would not Immediately invoke as it is missing the correct syntax, it would need to be wrapped in parentheses for it to invoke
What’s the difference between a variable that is: null, undefined or undeclared?
How would you go about checking for any of these states?
Explanation: Null represents intentional absence, undefined indicates a variable without a value, and undeclared refers to a variable not explicitly declared in the code.
Usage: To check for these states, compare the variable to null for null, use the typeof operator to check for “undefined” and “undeclared”
What are two-way data binding and one-way data flow, and how are they different?
Explanation: Two-way data binding means that when you change something, it automatically updates everything connected to it, and vice versa.
Usage: Two-way data binding is commonly used in web development to make sure that what you see on the screen always matches the underlying data, making it easy to interact with.
Example: Imagine a form where you type your name. When you type your name, it instantly appears on the screen. If you change the name on the screen, it automatically updates in the input field. It’s like having a magical connection that keeps everything in sync as you make changes.
What is a closure, and how/why would you use one?
Explanation: A closure is when an inner function has access to the variables of its outer function even after the outer function has finished executing, forming a closure.
Usage: Closures are used to create private variables, encapsulate functionality and preserve the state of variables.
Example: In JavaScript, we can use closures to create a counter function that retains its own private count variable and can be accessed and modified through a returned inner function, providing data privacy and controlled access.
Can you describe the main difference between a .forEach loop and a .map() loop and why you would pick one versus the other?
Explanation both of these are used to loop through an array
Usage: .forEach is used to iterate through an array and modify it, map() is used for iterating through it and returning a new array
Example: If we have an array of names, using .forEach() would allow us to print each name, while using .map() would allow us to create a new array of uppercase names.
What’s a typical use case for anonymous functions?
Explanation: An anonymous function is a function without a specified name.
Usage: Anonymous functions are often used when we need a function for a specific task, but we don’t intend to reuse it elsewhere in our code.
Example: A typical use case for anonymous functions is in event handlers, where we define a function inline to respond to a specific event, such as a button click or form submission.
How do you organize your code? (module pattern, classical inheritance?)
In the MERN stack, we follow the MVC pattern to organize our code. It separates concerns and enhances code readability and reusability. The model represents the data layer with MongoDB schemas and models which makes use of OOP. The view uses React components for the user interface. The controller acts as an intermediary, handling user input, interacting with the model, and providing data. This approach simplifies code management, making it scalable and modular.
What’s the difference between host objects and native objects?
Explanation: host objects aren’t built into JavaScript but are accessed through its environment via web apis, and native are objects which are built into JavaScript such as an array object
Usage:
Understanding the distinction between host objects and native objects helps developers access environment-specific functionality and utilize built-in capabilities within JavaScript.
Example:
In JavaScript, you can access the host object ‘window’ to retrieve browser-related information, and use native objects like ‘Array’ for array manipulation and operations.
Difference between: function Person(){}, var person = Person(), and var person = new Person()?
Explanation:
function Person() is a constructor, var person1 = Person() assigns a method to a variable and var person = new Person() creates a new instance of the Person() constructor
Usage:
The function Person(){} is used to define a blueprint for creating objects, var person = Person() can be used to assign the result of the function to a variable (though it may not be an intended usage), and var person = new Person() is used to create a new instance of the object using the constructor.
Example:
if we have the constructor function function Person(name) { this.name = name; }, then var person = new Person(“John”) creates a new Person object with the name “John” and assigns it to the variable person.
What’s the difference between .call and .apply?
explanation: .call is for individual arguments, .apply is for array-like objects argument
usage: .call is used when we have a function with parameters which are single elements, and .apply is typically used when we have a parameter which is an array, or an array like object
example: if our function has 2 parameters, one for name and one for age, we would use .call, if out function has 2 parameters, name and hobbies, we may use apply for multiple different hobbies
Explain Function.prototype.bind.
Explanation: Function.prototype.bind creates a new function that always uses a specific object as the “this” value when the function is called.
Usage: It’s used to ensure that a function consistently operates within a particular object’s context.
Example: By using bind, you can create a new function that is permanently linked to an object, so whenever you call that function, it will always work with that object’s data and behaviour.
(if we have function greeting(message){
return console.log(${message} ${this.name})}
and let person = {name: “James”}
if I do greeting.bind(person, “hello”)
person is the context that greeting will use when this is referred, and “hello” will be the message)
When would you use document.write()
To overwrite the DOM, I’ve been told to steer clear of this and if I came across it I’d look into possibly refactoring it
