Variables
Variables can be declared with let, cost, or var.
Variables declared with var can be redeclared and updated.
Variables declared with let cannot be redeclared but can be updated.
Variables declared with const cannot be updated or redeclared.
Functions
A function is a set of statements that performs a task or calculate a value. Functions take input and return output. Functions allow you to define a block of code, give it a name, and execute it as many times as you would like.
In Javascript, functions are considered first-class objects. This means you can pass functions as arguments into other functions as variables. The function that is passed in another function is a callback function.
What is a callback function?
A callback function is a function that is passed in as a parameter to another Javascript function. They can be used synchronously or asynchronously.
What is a function declaration?
A function declaration is the most common way to define a function. You can declare a function before or after you call it. This is thanks to hoisting.
What is hoisting?
Hoisting is Javascript’s ability to call functions or variables before they appear in the code. Described in more detail in MDN, hoisting is “the process whereby the compiler allocates memory for variable and function declarations prior to execution of the code.”
For hoisting to work, the function must be defined using a function declaration.
Variables defined with const and let are can not be hoisted — their initial value is set to uninitialized. Variables defined with var can be hoisted but have an initial value of undefined.
What is an anonymous function?
It is a function that doesn’t have a name. We don’t have any way to call an anonymous function. We can only invoke it as a callback function. An anonymous function captures the work without doing it.
What is a collection processing method?
A collection processing method is a method provided by Javascript that visits each element in a pair or collection, tests that element or pair with work, returns a new collection or value. Some collection processing methods are listed below: every (Links to an external site.): Did all elements satisfy the callback?
find: Find the first element that satisfies the callbackfindIndex: Find the index of the first element that satisfies the callbackmap: Transform every element and create a new arrayreduce: Reduce every element into a new valuesome: Did any element satisfy the callback?
Additional explanations:
What does forEach do and why do we want to avoid it?
ForEach is the least expressive but most flexible collection processing method. It communicates the least to other programmers about what we’re trying to do. The best time to use forEach is when you need to enumerate a collection to cause some sort of side-effect. One example of this would be iterating through an array to console.log values. You don’t need to create a new array to get this done, and .map() would unnecessarily create a new array. Most of the time, thought, you want to try to use .map or .reduce to communicate our intentions.
What does .map do?
This method produces a new array after transforming or applying work to each element.
What does .reduce do?
This method starts with an initial value, does some work, and updates the initial value.
What does .filter do?
.Filter() takes an element with an optional index and array. It maps a collection and only accumulates the elements that return a true value from the callback.
What is arity non-enforcement?
Arity non-enforcement means that we don’t have to provide all of the parameters that are available in a javascript function, and were indicated when that function was created, when we call that function. * elaborated in a future post *
What does array.prototype.index0f() do?
Array.prototype.indexOf() is called on an array and takes two arguments: the value you are looking for and an optional start position. It compares each element in turn to the value you're looking for using the strict equality operator (===) and returns the index of the first matching element. If the element isn't contained in the array, it returns -1. When you call it, you do not need to include the word prototype. Use this when you want to check an array for a simple value. Call the function on an array and pass the value you are looking for as an assignment.
What does array.prototype.find() do?
Array.prototype.find() allows you to execute more complex searches by passing it a callback function. The method will automatically iterate through the array, call the callback on each value, and return the first element in the array that satisfies the condition defined by the function. If no matching element is found, undefined is returned. Find is called on an array just like indexOf, but it takes a function as an argument. Use this when you want to define the condition the element should meet, allowing for more complex searches.
What is Prevent Default? What is the difference between preventDefault(), stopPropagation(), and returnFalse()? How do we use prevent default?
The preventDefault() method allows you to prevent the default behavior from occurring on an event, for example stopping an action upon clicking. It is used to prevent the browser from executing the default action of the selected element. The default behavior can change based on the type of element involved. With links, for example, the default behavior would be to redirect to the URL, but with preventDefault() we are able to prevent this from happening. For example, it can prevent the user from processing the request by clicking the link.
The stopPropagation() method doesn’t stop any default behaviors of the elements. It prevents further propagation of the current event in the capturing and bubbling phases. It does not prevent any default behaviors from occurring; for instance, clicks on links are still processed. If a parent event is called, stopPropagation() can stop the propagation of calling its children.
What is the rest/spread operator? How does it work?
The spread operator allows us to spread the value of an array (or any iterable) across zero or more arguments in a function or elements in an array (or any iterable). The rest parameter allows us to pass an indefinite number of parameters to a function and access them in an array.
The spread operator spreads the values from an array or string across zero or more arguments or elements. Using the rest parameter, which is the same syntax as the spread operator, we can pass an indefinite number of parameters to our function.
What is the spread operator?
The spread operator allows you to spread out elements of an iterable objects such as an array, map, or set. The spread operator consists of three dots. Spread syntax can be used when all elements from an object or an array need to be included in a list.
What is the rest operator?
Rest syntax looks exactly like spread syntax. While spread syntax expands an array into its elements, rest syntax collects multiple elements and condenses them into a single element.
What are some of the major features ES6 introduced?
Arrows, classes, enhanced object literals, and template strings are some of the new features in ES6.
What are the differences between let, const, and var?
Var declarations are globally scoped or function scoped while let and const are block-scoped. var variables can be updated and re-declared within its scope; let variables can be updated but not re-declared; const variables can neither be updated nor re-declared. They are all hoisted to the top of their scope
What are the differences between arrow functions and regular function declarations? When would you need to use one over the other?
Arrow function — also called fat arrow function — is a new feature introduced in ES6 that is a more concise syntax for writing function expressions
What is a callback function? When do we use them?
A callback function is a function which is accessible by another function, and is invoked after the first function if that first function completes. Callbacks make sure that a function is not going to run before a task is completed but will run right after the task has completed. It helps us develop asynchronous JavaScript code and keeps us safe from problems and errors.
How do you create objects in Javascript?
In addition to the predefined objects, Javascript has, you can create your own using an object initializer or a constructor function. If you use a construction function, you must then instantiate an object by invoking that function with a new operator. (?)
What is closure?
A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function’s scope from an inner function. In JavaScript, closures are created every time a function is created, at function creation time.
Does JS have classes? If so, how can you create one?
JavaScript follows a similar model but does not have a class definition separate from the constructor. Instead, you define a constructor function to create objects with a particular initial set of properties and values. Any JavaScript function can be used as a constructor. Technically, the statement “JavaScript has no classes” is correct. Although JavaScript is object-oriented language, it isn’t a class-based language — it’s a prototype-based language. There are differences between these two approaches, but since it is possible to use JavaScript like a class-based language, many people (including myself) often simply refer to the constructor functions as “classes”.
What is the purpose of the constructor function?
The constructor method is a special method of a class for creating and initializing an object of that class. A constructor is a function that creates an instance of a class which is typically called an “object”. In JavaScript, a constructor gets called when you declare an object using the new keyword. The purpose of a constructor is to create an object and set values if there are any object properties present.
What is the meaning of the keyword this?
The this keyword refers to the current object in a method or constructor. The most common use of the this keyword is to eliminate the confusion between class attributes and parameters with the same name (because a class attribute is shadowed by a method or constructor parameter).
What do we mean by context? Identify the value of this everywhere you used it in your project (?)
Context is always the value of the this keyword which is a reference to the object that “owns” the currently executing code or the function where it’s looked at. We know that window is a global object in the browser so if we type this in the console and it should return window object, which it does.
How do you make an object method in JS?
Methods are actions that can be performed on objects.Object properties can be both primitive values, other objects, and functions. An object method is an object property containing a function definition.
How do you make a class method/function in JS?
A JavaScript class is a type of function. Classes are declared with the class keyword. We will use function expression syntax to initialize a function and class expression syntax to initialize a class.
How do you make a property/method private in ES6?
All properties in ES6 classes are public by default and can be examined or modified outside the class. You may be able to put it in a constructor(?)
How would you transform your OOJS code into functional code?
In functional programming, data cannot be stored in objects and it can only be transformed by creating functions. In object-oriented programming, data is stored in objects. In functional programming, it requires always a new object to execute functions and it takes a lot of memory for executing the applications.
How does destructuring work?
Destructuring is a convenient way of extracting multiple values from data stored in (possibly nested) objects and Arrays.
What does stopPropagation() do? On what type of events does it work?
The stopPropagation() method prevents further propagation of a current event in the capturing and bubbling phases. It does not prevent any default behaviors from occurring such as clicks on links. These would still be processed.
Execution Context
What is execution context?
Execution Context: When JavaScript functions run, they have an associated JavaScript Object that goes along with them which they can access by the keyword this. this: Inside a function, this is the Object that represents the function's execution context
When Javascript functions run, they have an associated Javascript obect that goes along with them which they can access through the keyword this. Inside of a function, this is the Object that represents the function’s execution context.
What are the methods call and apply?
Call works like (). It is a method on a function that calls the function. You provide a new execution context as the first argument, usually called thisArg, and the arguments you want to send to the function after. Apply also works like (), and calls the function. For apply, you send the arguments you want to send to the function as an array.
What is record-oriented programming?
Record oriented programing is a style of programming based on accessing records and processing them so they are updated(map) or so that their information is aggregated(reduce)
What is the method bind?
This method returns a copy of the function but without the execution context set to the argument that was passed.
Bind — the method
bind: This method returns a copy of the function but with the execution context "set" to the argument that's passed to bind. It looks like this: sayHello.bind(greenFrog)("Hello") //=> "Mr. GreenFrog says *Hello* to you all."
Methods
Call — The method
call: This is a method on a function that calls the function, just like (). You provide a new execution context as the first argument, traditionally called thisArg, and the arguments you want to send to the function after the thisArg. An invocation of call looks like: Calculator.sum.call(multilingualMessages, 1, 2)
Apply — The method
apply: This is a method on a function that calls the function, just like (). You provide a new execution context as the first argument, traditionally called thisArg, and the arguments you want to send to the function as an Array after the thisArg. An invocation of apply looks like: Calculator.sum.apply(multilingualMessages, [1, 2])
