JS Flashcards
(46 cards)
Explain event delegation.
Events can be applied to buttons so that when you click a button for example it’ll perform an action. However, if you want multiple buttons to perform the action when clicked it becomes repetitive as you have to add an event listener to each button which is repeated code. Using event delegation you take advantage of the fact that when you click a button it also counts towards the parent elements. Using this you can use the parent element to place the event listener and then target the child elements, which are the buttons to all perform the code. For example if you have a div called button container, and then buttons with the class button class, you can add the event listener to the container to trigger when a button with the class “buttonclass” is selected. This essentially adds the trigger to all buttons instead of just one.
Explain how “this” works in JavaScript.
Can you give an example of one of the ways that working with “this” has changed in ES6?
This is used in functions. The value of this depends on the way the function was invoked. For example if you have an object with the variable name, and you called a method that has the code to print this.name, the value will depend on how it’s called. So to sum it up, if you called the method on an object with values assigned using this will use the values assigned to the object that called the method.
I’m not too sure about that one.
Explain how prototypal inheritance works.
Javascript objects have prototypes inherently. These contain certain values about the object, a object can have multiple prototypes storing different values. For example if you created an object with a variable a and then you created a new instance of that object you can access the value of a, however, if you created a prototype with the value b and then tried to access b on new instance of the object it would return the value from the prototype since it doesn’t exist in the original object. This prototype chain continues until the value reaches null.
What’s the difference between a variable that is: null, undefined or undeclared?
How would you go about checking for any of these states?
Undefined is when it has been declared but not given a value. For example you create a variable named name but you don’t give it a value. While it is declared it is considered undefined because it has no value. Undeclared is when it has not been created with a var tag. this means that it has not been declared as a variable and is considered a global variable. Null is assigned specifically and it means that the value is nothing. The difference between null and undefined is that undefined hasn’t been given a value whereas null has been given the value of null.
What is a closure, and how/why would you use one?
Usually variables within a function are temporary meaning their values are gone after the function has been called. Closures allow you to keep that variable so that it lasts longer. This is done by creating an inner function which references that temporary variable. That is then returned for the function meaning that a reference to that variable will continue to exist. An example use of this is when you create a new call to a method with a value, say you give the value 5, then the method returns that value 5. usually if you simply called the method it would not remember the previous call, but by using closure we can return that value of 5 any amount of times. This has a lot of practical use as you can create multiple instances of the function which each retain their own values from that function. They’re kind of like a save state for functions.
What language constructions do you use for iterating over object properties and array items?
For loop, for each loops, and for-in loops for objects.
Can you describe the main difference between the Array.forEach() loop and Array.map() methods and why you would pick one versus the other?
The foreach method returns undefined by default whereas the map method returns a new array created with modifications applied from the method.
What this means is that the map function has access to other functions because it has a return value, for example, you can use functions such as reduce(), sort() and filter() whereas foreach cant as it will say that it is undefined. Generally, if you plan to have the data returned, use map, however, if you don’t care need the returned values from the array, then foreach is fine.
What’s a typical use case for anonymous functions?
They’re usually used as arguments for other functions and are useful because they avoid name collisions for it.
What’s the difference between host objects and native objects?
Host objects are objects that are provided by other sources such as the browser, whilst native objects are objects accessible by all as they’re directly a part of JavaScript, you can think of them as global objects.
Explain the difference between: function Person(){}, var person = Person(), and var person = new Person()?
Function person is simply a function declaration.
Var person = person is a function call, or it invokes the function person which will return undefined.
Var new person instantiates the person function and creates a new object. For example, if the person function had a name if you used the second call and you tried to assign a name, when you tried to view the contents of the variable it was assigned to, it would be 0. On the other hand if you called it with the 3rd method and gave it a name, you can get the variable name
Explain the differences on the usage of foo between function foo() {} and var foo = function() {}
The first one is a function declaration whereas the second is assigned to a variable.
In the second case it is an anonymous function as it isn’t given a name as it isn’t necessary. The main difference between these 2 is the time of loading. The first is loaded immediately, whilst the second is loaded after the code has been reached. This means if you have a line of code that references the function in the second case, it won’t be able to return a value if it is called before the code reaches the declaration.
Can you explain what Function.call and Function.apply do? What’s the notable difference between the two?
Function call takes the arguments seperately, for example, if it takes in 2 arguments, it’ll take them seperately seperated by a comma, function apply on the other hand takes them together in the form of an array.
Explain Function.prototype.bind.
The bind function is used to reassign the value of this to the current context. This is because when you call the function, the value of “this” is different depending on the context of which it was called. By using bind you’re declaring that you’re using this in the context of the object.
What’s the difference between feature detection, feature inference, and using the UA string?
Feature detection checks whether the feature exists before referencing/using it.
Feature inference checks the existence of a feature and if it does it uses another feature which you can assume exists if the first feature you checked for exists.
User agent string checks the data that the browser sends. This is an old method that isn’t really used anymore as the data can be modified or spoofed.
Explain “hoisting”.
Hoisting is a feature where variables and functions are declared first, this allows them to load first even before the method has been called. For example, if you declare a function that returns the value passed, and then before the function in the code you add a reference to the function and pass in a value. Whilst it might seem like it wouldn’t run the code since the function is declared later in the code, due to hoisting this isn’t the case and the method will be called and return the value passed to it without any problems. This is also the case for variables. For example if simply gave a variable a value without declaring it and then you tried to return that value earlier in the code, it would return an error, however, if you declare the variable, then assign the value, the variable can be referenced even before its variable declaration and it’ll return the value undefined since it hasn’t been given a value. Exam
Describe event bubbling.
Event bubbling is the case where the child elements are run first. before the parent element and this is a chain. For example, if you have a bunch of elements nested and have a click element on the parent element, when you click on the child element, the code will run as it applies to the child elements first. If you had a code that displays code for clicking on the element, when you click on the child till display the code for the child first, then for the parent and the parent of that element until the top element. This is called bubbling.
Describe event capturing.
Event capturing is the opposite of event bubbling. In event bubbling the child element takes priority over the parent element on events, in event capturing it’s the opposite. To declare this process a third parameter must be passed to the event call which is “true” this will enable event capturing as opposed to event bubbling.
What’s the difference between an “attribute” and a “property”?
An attribute is what the object has and the property is the values it has. An attribute of a car would be that it has a colour, the property would be the colour is red.
What are the pros and cons of extending built-in JavaScript objects?
The pros are that you can use the functions of these objects easily and it is simple and looks good as part of the code.
The cons are though it saves time, once you modify these objects, all other references to these native objects in other code areas will be affected and can ruin the functionality of other parts of code. Although it’s possible it won’t, it just makes it more complicated and risky the more they’re used.
What is the difference between =, == and ===?
= is used to ensure the property on the left and right side of the moderator are equal to each other.
== is used to convert the properties so that they are of the same type. For example if one of the properties is a string and the other is a number, this will convert the string to a number then perform the function.
=== similarly to == the 3 equals mark is used to make sure the properties are of same type. Whilst == would convert the string to a number for the function, with 3 equals it will return false instead and not run unless they are already the same type (both numbers for example)
Explain the same-origin policy with regards to JavaScript.
The same origin policy is a safety mechanism which allows scripts to only interact with other pages that have the same “origin” so to speak.
This means that a script on one page can’t run and access your other pages that are not of the same domain/origin.
A few things that separate origins apart from the website is the domain name, so http and https can’t interact with one another, if the website has a different port or host the script cannot interact with that page.
ex:
http://pre.mid.com/test = accepted - origin
http://pre.mid.com/atest = accepted - different
https://pre.mid.com/test… = unaccepted - domain
http(s)://test.mid.com/test… = unaccepted - host
http(s)://pre.mid.com:80/test = unaccepted - port number
Why is it called a Ternary operator, what does the word “Ternary” indicate?
Ternary means 3 parts. In the context of ternary operator it means an operator that takes in 3 parameters. This is a similar functionality to if then else statement but is smaller and more compact.
-----Instead of-----
"if (condition) {
ifTrue
} else {
ifFalse
}"
-----It runs with-----
"condition ? ifTrue :ifFalse"
-------------------------
The ifFalse statement can be replaced with an else if type scenario where it will test another condition allowing nested if conditions.
At a certain point it’s better to just use a switch case or if then statement
What is strict mode? What are some of the advantages/disadvantages of using it?
Strict mode is used in JavaScript to enforce a tighter set of rules for coding that throw errors for bad coding.
These rules ensure the code you’re typing is correct, code that could lead to errors and exceptions are given the red flag. This means the code you’re typing is stricter, more secure and easier to read. It essentially removes leniency to bad coding practices and types.
While this is generally good the advantage being security, neater code, less errors and better practice, it has disadvantages that some people dislike. Since it’s more restrictive some people feel it’s a bad thing, also, if someone for example coded a part of code as a library or repository in strict mode, it can cause problems if the person using the library is using normal mode instead.
What are some of the advantages/disadvantages of writing JavaScript code in a language that compiles to JavaScript?
Disadvantage
1. Accessibility. The accessibility of the language means a lot more people are using it, more coders, more people that can be hired for a project using the code, more resources online, more documentation, more pre-created code to use as inspiration. This advantage is the main obvious one but it’s really important.
Advantage
- Variable inference. Variables are very vague and makes for a tough reading and usage experience. This is because you don’t directly define the variable types, they’re simply declared as a var (variable) and the type is assigned whilst giving it values. For example if you give it the value 1, it’s an int if you give it “1” it’s a string, very unclear and inefficient.
- Budget classes. Classes are a staple to programming languages, whereas JavaScript has its similar feature using prototypes but ultimately its attempting to do what classes do but just doesn’t do it as well.
