The Genesis has just began- Thank you Austin Coding Academy#408
Explain the use cases for, and differences between — bind, apply and call.
--call and apply are very similar—they invoke a function with a specified this context, and optional arguments. The only difference between call and apply is that call requires the arguments to be passed in one-by-one, and apply takes the arguments as an array.
In this example, we’ll create an object, and create a function that references this but has no this context.
const book = {
title: 'Brave New World',
author: 'Aldous Huxley',
}function summary() {
console.log(`${this.title} was written by ${this.author}.`)
}summary()
Both call and apply are one-time use methods—if you call the method with the this context it will have it, but the original function will remain unchanged.
Sometimes, you might need to use a method over and over with the this context of another object, and in that case you could use the bind method to create a brand new function with an explicitly bound this.
const braveNewWorldSummary = summary.bind(book)braveNewWorldSummary()
How do you handle code organization?
— 5 ways to organize your JavaScript the right way.
1. Comment Your Code
— When writing a new function, class, model, constant, or really anything, leave comments behind to help whoever is working on it. Notice that this style of commenting gives you great tooltips in IDE’s like VS Code.
2. Use ES6 Classes
— ES6 has brought a whole host of features to JavaScript, so make use of them! One of these features is classes, which are probably the best way to organize your business logic.
— You can structure your models’ in a way that is very easy and simple to read and is also extendable. Extendability is huge! It means you can have a class that inherits particular properties and functions from the base class. As you can see, the PropertyAddress class actually extends from the Address class. This will help you maintain that great principle DRY (Don’t Repeat Yourself).
3. Promises Are Your Friend
— As a junior developer, it is very easy to get into the habit of passing callback functions into other functions. For instance, say you want to fetch a list of employees from the API. Well, you could call that, and pass in a call back function.
— Make use of what’s in your toolkit, Promises. This will allow you to chain call back functions in an organized an easy-to-read way. This also allows you to decouple the callback from the function completely, which means the list method no longer has to worry if there is a callback function or not!
4. Keep Things Separated
— When writing JavaScript that is specifically for a “module” that could potentially be reused, put it into its own JavaScript file. Also, if you are writing JavaScript with the intent of performing some functionality that is specific to the page then put it in its own file that is included on the page. Say you’re creating an employee list page, then you could end up with two files: employee.js, and index.js.
— The employee.js file contains all the model-based logic having to do with an employee — that is not page-specific. The index.js file encompasses things that are specific to that page. This could be something like maintaining a list of employees or what happens when you click an employee.
5. Use Constants and Enums
— If you find yourself writing the same hardcoded string again and again, you should create a constant for that. Constants are a great way to make things organized and easily changeable later.
— If you find yourself having a group of logic that all relate, such as types, enums could be really useful for that. Although JavaScript doesn’t really have “enums,” you can create an object and annotate it using something like JSDoc to help keep things in one place and easily visible.
— The bottom line is overlooking the importance of organizing your JavaScript could easily lead to a huge waste of time for other developers down the road. Writing tangled up, hard-to-read, unmaintainable code is one of the worst problems you can leave yourself or another developer with. This is a real problem especially in small companies that don’t have a real process in place or any senior developers to lead the charge.
The good news is that this problem can be solved with the right approach! It’s worth it to take some extra time to learn about what your writing and leave your code in better shape than when you found it.
How do you handle dependency management?
The Importance of Dependency Management
— When it comes to dependency management, open source software has made things more complex. Built on the foundation of sharing and reusing code, open source software now accounts for 60–80% of all applications’ code base, which means more dependencies to manage.
— So why do you need visibility into your dependencies anyway? Outdated dependencies can impact your software application in a number of ways:
- Security. Some libraries have known vulnerabilities. If you’re not updating these libraries, your application is exposed and you may be passing this risk on to others.
- Performance improvements. If your dependencies are outdated, you may be missing out on the latest enhancements that significantly improve performance or add new functionality.
- Quality assurance. To keep your application running smoothly, you need to prevent problems such as conflicting or circular dependencies as well as keep up to date on libraries that have been end-of-lifed and bug fixes.
- License compliance. With so many dependencies, it can be hard to keep track of all your open source licenses. Many organizations don’t understand all licenses need to be compatible with each other and that they are bound not just by the licenses of direct dependencies, but also by the licenses of every transitive dependency. By not fully understanding all your dependencies’ licenses, you put your own IP at risk.
- Keeping your dependencies up to date is important, but this is far easier said than done. The really hard part of managing your dependencies is understanding which dependencies are vulnerable to security threats and which updates won’t break your code. With so many direct and transitive dependencies, this can be a challenge, but we have some tips to help you manage this process:
- #1 Prioritize. Some dependencies are more important than others, so it is important to be able to prioritize them, particularly when it comes to vulnerabilities. You need to understand exactly which open source vulnerabilities are being accessed by your code and which vulnerabilities aren’t so that you can update your most critical dependencies first.
- #2 Automate. Maintaining your dependencies can be extremely time sensitive when it comes to vulnerabilities and bug fixes. You can save time and reduce your exposure by automating dependency updates in your software projects and have your dependencies updated when new versions are released.
- #3 Establish policies. Establishing a clear policy up front about open source usage and dependency management helps prevent headaches later in development when it is more costly to resolve them. Your policies act as a playbook by telling your development and security teams how to handle these threats in your open source components. Without policies to give clear guidance, managing dependencies efficiently tends to be extremely hard if not close to impossible.
What is React.cloneElement? And the difference with this.props.children?
In rare situations, you may want to create a copy of a React element with different props from those of the original element. One example is cloning the elements passed into this.props.children and rendering them with different props:
var cloneWithProps = require('react-addons-clone-with-props');var _makeBlue = function(element) {
return cloneWithProps(element, {style: {color: 'blue'}});
};var Blue = React.createClass({
render: function() {
var blueChildren = React.Children.map(this.props.children, _makeBlue);
return <div>{blueChildren}</div>;
}
});ReactDOM.render(
<Blue>
<p>This text is blue.</p>
</Blue>,
document.getElementById('container')
);
cloneWithProps does not transfer key or ref to the cloned element. className and style props are automatically merged.
Walk us through the process of creation of an application or website you’ve built.
I’ve found that most of my process goes into planning. Especially with the capstone project*
What are the differences between functional and imperative programming styles, and explain your preference, if any.
The difference between Imperative and Declarative programming is related to how a program works vs. what a program does. Imperative programming is about how a program works while Declarative programming is about what a program does.
Building a House “Imperatively”
Imperative is about the HOW. For example, if I was writing an imperative program for building a house, it would go something like this:
- Build the foundation
- Put in the framework
- Install the utilities
- Add the walls
- Finishing touches
In this imperative program, I have told you the exact steps to take in order to build the house. These instructions aren’t the most detailed in the world, but I have told you all the steps you need to take in order to arrive at a finished product.
Building a House “Declaratively”
Declarative is about the WHAT. Building a house declaratively would include the following steps:
- I don’t care how you build it, but I want a nice fireplace, a lakefront view, and a big kitchen.
Simple right? In this declarative program, I have told you the outputs that I want. I know that if I give you inputs in the form of money, I will get the desired outputs.
