JavaScript Flashcards
What is the purpose of variables?
To store data
How do you declare a variable?
variable key word let var or const and variable name operator then value
How do you initialize (assign a value to) a variable?
assignment operator value
What characters are allowed in variable names?
must begin with letter, $, _ cannot use (.) or dash. cannot use key words reserved for words. All variables are case sensitive. Bad practice to use same name using different cases.
What does it mean to say that variable names are “case sensitive”?
It has to match; and you use camelcase to make sure that is the case
What is the purpose of a string?
store and manipulate text
What is the purpose of a number?
store numbers
What is the purpose of a boolean?
Booleans are helpful when
determining which part of a
script should run.
What does the = operator mean in JavaScript?
it assigns a value
How do you update the value of a variable?
You don’t need to use the variable keyword you use the variable name.
What is the difference between null and undefined?
Null is a non-existent or invalid object or address.
whereas undefined has been just assigned
Why is it a good habit to include “labels” when you log values to the browser console?
It describes the variable that is being entered and if you don’t put it it can be very confusing when reading your logs.
Give five examples of JavaScript primitives.
null, string, bigint, boolean, undefined, symbol and null
What data type is returned by an arithmetic operation?
Number
What is string concatenation?
Process of joining together two or more strings to create one new string
What purpose(s) does the + plus operator serve in JavaScript?
to perform addition or string concatenation
What data type is returned by comparing two values (, ===, etc)?
boolean
What does the += “plus-equals” operator do?
adds the value on the right, to the variable on the left, and then assigns that value back into the variable on the left.
What is an expression
Junk of work that JavaScript needs to do
What are objects used for?
THere used to group together a set of variables and functions.
What are object properties?
it is a variable that is now a part of the object
Describe object literal notation.
variable object = { key: value}
How do you remove a property from an object?
you use the key word delete and then use dot notation to identify the property or method you want to remove from the object.
What are the two ways to get or update the value of a property?
use dot notation or square brackets
What are arrays used for?
to store data thats in a list format
Describe array literal notation.
var variable = [ ‘ ‘ ]
How are arrays different from “plain” objects?
objects are collection of data with individual set of data. arrays are lists with set format or list.
What number represents the first index of an array?
0
What is the length property of an array?
amount of items in an array
How do you calculate the last index of an array?
array length -1
What is a function in JavaScript?
Functions allow you to package up code for use later in your program. Block of code written to perform a task repeatably.
Describe the parts of a function definition.
Function definitions are made of: the function keyword an optional name zero or more parameters a code block an optional return statement
Describe the parts of a function call.
Functions are called with () parentheses and passed zero or more arguments.
When comparing them side-by-side, what are the differences between a function call and a function definition?
Functions are called with () parentheses and passed zero or more arguments.
When a function is called, the parameters in its definition take on the values of the arguments that were passed.
What is the difference between a parameter and an argument?
When a function is called, the parameters in its definition take on the values of the arguments that were passed.
Why are function parameters useful?
A function can take parameters which are just values you supply to the function so that the function can do something utilising those values
What two effects does a return statement have on the behavior of a function?
it exits the functions code block. And can return values
Why do we log things to the console?
To see what the code we are writing is doing.
What is a method?
function stored in a property in an object
How is a method different from any other function?
a method is associated with an object
How do you remove the last element from an array?
array.pop
How do you round a number down to the nearest integer?
math.floor
How do you generate a random number?
math.random * number
How do you delete an element from an array?
splice.method
How do you append an element to an array?
push method
How do you break a string up into an array?
str.split()
Do string methods change the original string? How would you check if you weren’t sure?
do not change original string. could console or look via documentation.
Roughly how many string methods are there according to the MDN Web docs?
20ish
Is the return value of a function or method useful in every situation?
No, it could be just a placeholder for data that you want to collect further down the road
Roughly how many array methods are there according to the MDN Web docs?
50ish
What three-letter acronym should you always include in your Google search about a JavaScript method or CSS property?
MDN
Give 6 examples of comparison operators.
==, !=, ===(strict equal) !===(strict not equal) > < >= <=
What data type do comparison expressions evaluate to?
boolean
What is the purpose of an if statement?
Evaluates or checks a condition in order to execute a subsequent code block.
Is else required in order to use an if statement?
no
Describe the syntax (structure) of an if statement.
{
if (operand 1) comparison operator (operand 2)
}
What are the three logical operators?
&& || !
logical and, logical or, logical not
How do you compare two different expressions in the same condition?
logical operators
What is the purpose of a loop?
Is to continuously run a bit of code until all conditions are met.
What is the purpose of a condition expression in a loop?
It allows the loop to end if it is false
what does iteration mean
it means that it is being ran through x many times
When does the condition expression of a while loop get evaluated?
It gets ran through first
When does the initialization expression of a for loop get evaluated?
It gets ran through first
When does the condition expression of a for loop get evaluated?
after it goes through the initialization
When does the final expression of a for loop get evaluated?
after the condition has been ran through and the block underneath has been ran through as well
Besides a return statement, which exits its entire function block, which keyword exits a loop before its condition expression evaluates to false?
break
What does the ++ increment operator do?
it increases the count by 1
How do you iterate through the keys of an object?
you use a for in loop
What event is fired when a user places their cursor in a form control?
focus
What event is fired when a user’s cursor leaves a form control?
blur
What event is fired as a user changes the value of a form control?
change
What event is fired when a user clicks the “submit” button within a ?
input
What does the event.preventDefault() method do?
IT clears the data from the inputs after the browser reloads
What does submitting a form without event.preventDefault() do?
It continues to reload with the values still in the inputs
What property of a form element object contains all of the form’s controls.
Elements
What property of form a control object gets and sets its value?
type
What is an advantage of having your console open when writing a JavaScript program?
It allows you to see if you are messing up or if the code is acting the way that you want it to.
What is JSON?
Javascript Object Notation it is a way to pass information between networks. String containing javascript syntax
What are serialization and deserialization?
Serialization is the process of turning an object in memory into a stream of bytes so you can do stuff like store it on disk or send it over the network.
Deserialization is the reverse process: turning a stream of bytes into an object in memory.
Why are serialization and deserialization useful?
converting objects into bytes and then converting them back into objects allows for things to be sent over the network. Allows you to get data later on.
How do you serialize a data structure into a JSON string using JavaScript?
json.stringify
How do you deserialize a JSON string into a data structure using JavaScript?
using JSON Parse
How do you store data in localStorage?
storage.setitem()
How do you retrieve data from localStorage?
storage.getItem()
What data type can localStorage save in the browser?
string
When does the ‘beforeunload’ event fire on the window object?
When the window document and it’s resources are about to be unloaded. The document is still visible at this point however.
What is a method?
It is a function which is a property of an object.
How can you tell the difference between a method definition and a method call?
There is no function code block in the method call
Describe method definition syntax (structure).
function definition
Describe method call syntax (structure).
object.method()
How is a method different from any other function?
It’s not any different. A method is associated with an object while a function is not.
What is the defining characteristic of Object-Oriented Programming?
objects can contain both data(as properties) and behavior (as methods)
What are the four “principles” of Object-Oriented Programming?
Abstraction, Encapsulation, inheritance, polymorphism
What is “abstraction”?
Being able to work with complex things in simple ways
What does API stand for?
Application programming interface
What is the purpose of an API?
is to give programmers a way to interact with a system in a simplified consistent fashion aka abstraction.
What is this in JavaScript?
It is referring to the object you are in.
What does it mean to say that this is an “implicit parameter”?
It is available in a functions code block even though it was never included in the functions parameter list or declared with a variable
When is the value of this determined in a function; call time or definition time?
it is determined when a function is called
What does this refer to in the following code snippet?
var character = {
firstName: 'Mario',
greet: function () {
var message = 'It\'s-a-me, ' + this.firstName + '!';
console.log(message);
}
};
This means nothing until it is called
Given the above character object, what is the result of the following code snippet? Why?
character.greet();
It’s-a-me a Mario!
How can you tell what the value of this will be for a particular function or method definition?
You can’t
How can you tell what the value of this is for a particular function or method call?
name of the object that you are in.
Given the above character object, what is the result of the following code snippet? Why?
var hello = character.greet; hello();
hello it’s a me undefined!
What kind of inheritance does the JavaScript programming language use?
prototypal inheritance
What is a prototype in JavaScript?
It is an object that contains properties and methods that can be used by other objects. Has to be told that the first object is a prototype.
How is it possible to call methods on strings, arrays, and numbers even though those methods don’t actually exist on objects, arrays, and numbers?
They use the methods that are found on the prototype method
If an object does not have it’s own property or method by a given key, where does JavaScript look for it?
it is looking at the prototype object
What does the new operator do?
lets developers create an instance of a user-defined object type or of one of the built-in object types that has a constructor function.
creates a blank plain JS object, adds a new object with __proto__
What property of JavaScript functions can store shared behavior for instances created with new?
__proto_
What does the instanceof operator do?
Tests to see if the prototype property of a constructor appears anywhere in the prototype chain of an object. The return is a boolean
What is a “callback” function?
A callback function is a function that is passed into another function as an argument which is then invoked inside the outer function to complete some kind of routine or action.
Besides adding an event listener callback function to an element or the document, what is one way to delay the execution of a JavaScript function until some point in the future?
use the setTimeout function
How can you set up a function to be called repeatedly without using a loop?
Set Interval function
What is the default time delay if you omit the delay parameter from setTimeout() or setInterval()?
a value of 0 is used. so Immediately or the next event cycle.
What do setTimeout() and setInterval() return?
The return is a timeoutID
What is AJAX?
IT is a programming practice of building dynamic webpages using a technology know as XMLHttpRequests
update the DOM and HTML without the need for a page refresh.
What does the AJAX acronym stand for?
Asynchronous JavaScript and XML but is now just a group of technologies that offer asynchronous functionality in the browser
Which object is built into the browser for making HTTP requests in JavaScript?
xmlhttpRequest object
What event is fired by XMLHttpRequest objects when they are finished loading the data from the server?
load events are fired
Bonus Question: An XMLHttpRequest object has an addEventListener() method just like DOM elements. How is it possible that they both share this functionality?
Because XMLHttpRequest object is a constructor object so they both share functionality via prototypal inheritance
new XMLHttpRequest()
creates a new XHR object
xhr.open()
to set the request method and url
xhr.responseType
to automatically parse the JSON body into JavaScript Objects
xhr.addEventListener()
to execute a function when the response is eventually loaded
xhr.send()
to actually send the request to the server at the URL specified in xhr.open()
xhr.status
to read the HTTP status code of the response message
xhr.response
to get the body of the HTTP response once it has been converted from a JSON string toJavaScript objects.
What is a code block? What are some examples of a code block?
Code block is just grouped together/ code inside curly braces. functions definitions and conditional statements all have code blocks
What does block scope mean?
are variables who only exist within the corresponding block that they were declared… difference is function is function scoped.
What is the scope of a variable declared with const or let?
they are both block scoped where var is function scoped
What is the difference between let and const?
let can be updated but not redeclared. Const is constant it cannot be update nor can it be redeclared.
Why is it possible to .push() a new value into a const variable that points to an Array?
because the array naming is immutable the values are mutable
How should you decide on which type of declaration to use?
if something is going to be constant (none changing) then use const. If you want to reassign a certain value than you should declare it with the variable let
What is the syntax for writing a template literal?
put them in backticks like this ${Expression}
What is “string interpolation”?
it is the ability to substitute part of the string for the values of variables or expressions
What is destructuring, conceptually?
makes it possible to unpack properties from objects and values from arrays into distinct variables
What is the syntax for Object destructuring?
const { property: [optional], property, property} = object
What is the syntax for Array destructuring?
const []
How can you tell the difference between destructuring and creating Object/Array literals?
left hand declaration assignments instead of right hand
What is the syntax for defining an arrow function?
variable variable name assignment operator equal sign greater than sign function with return of an expression
no need to define a function with the word function
When an arrow function’s body is left without curly braces, what changes in its functionality?
If you use an expression in the body of an arrow function, you don’t need to use the curly braces.
However, if you use a statement, you must wrap it inside a pair of curly braces as and you have to have a return.
with one parameter parenthesis aren’t required.
no parameters = () parenthesis required
How is the value of this determined within an arrow function?
This is defined at the call time of its outer function.
An arrow function doesn’t have its own this value. Instead, it uses the this value of the enclosing lexical scope.
What is Node.js?
Open source JS tool asynchronous event-driven built for scalable network applications.
What can node.js be used for?
Be able to handle multiple connections concurrently.
what is REPL?
Read eval print loop langauage shell. takes single user inputs executes them and returns the result to the user.
accepts an expression from the user and and parses it into a data structure for memory.
when was Node.js created?
2009 by Ryan Dahl;
What is a computer process?
process is the active running of code.
can also be the act of manipulating altering or view data
Roughly how many computer processes are running on your host operating system (Task Manager or Activity Monitor)?
Over 100 easily
Why should a full stack Web developer know that computer processes exist?
Processes are made up of inputs and outputs so you’d want to know when you’d be able to access those inputs as outputs. Understanding this would allow you to read data, modify data, and then execute a procedure which is pretty much the crux of programming.
What is the process object in a Node.js program?
global object that can be accessed from anywhere and it provides information about the current Node.js process. It is an instance of the EventEmitter
How do you access the process object in a Node.js program?
it is global so you can grab it whenever you want
What is the data type of process.argv in Node.js?
it is an array of strings. Containing the command line arguments. The first element is the node and the second element is the javascript file argument vector!
What is a JavaScript module?
It is a way to split up javaScript programming. Good abstraction would be like chapters in a book.
Ultimately, it it is more efficient than having to use a library to do all the extra-client side processing. And allows for better maintainability, reusability of code without worrying about clashing of names.
just a file.
What values are passed into a Node.js module’s local scope?
exports, require, module, __filename, and __dirname
Give two examples of truly global variables in a Node.js program.
the Date Object; Promise object; process object
What is the purpose of module.exports in a Node.js module?
it allows you to export code to other modules
How do you import functionality into a Node.js module from another Node.js module?
you use the require function with a parameter of a directory.
What is the JavaScript Event Loop?
Checks the call stack and the task queue and if the call stack is empty the task queue will come
What is different between “blocking” and “non-blocking” with respect to how code is executed?
chunk of code that is running -blocking is put on the call stack and sits there until it is done and then move on.
What is a directory?
It is a collection. That is holding a collection of files
What is a relative file path?
it is the files path in relation to where you are in the directory
What is an absolute file path?
where it is on on the system after the on the root
What module does Node.js include for manipulating the file system?
fs module or file system
What method is available in the Node.js fs module for writing data to a file?
writeFile();
Are file operations using the fs module synchronous or asynchronous?
asynchronous by default
What is NPM?
Public register of small building blocks that allows you to reuse code. NODE PACKET MANAGER
What is a package?
A directory with one or more files in it package.json that has meta data about the package
How can you create a package.json with npm?
You run a CLI questionnaire by navigating to the root directory of your package and then running the npm init command
What is a dependency and how to you add one to a package?
when you are installing a npm package using npm install package-name that means you are installing it as a dependency
What happens when you add a dependency to a package with npm?
It allows you to use that library or bit of code
How do you add express to your package dependencies?
npm install express
What Express application method starts the server and binds it to a network PORT?
listen()
How do you mount a middleware with an Express application?
by calling the use method of the app object
Which objects does an Express application pass to your middleware to manage the request/response lifecycle of the server?
request object and the response object you can also have a callback argument function called next.
What is the appropriate Content-Type header for HTTP messages that contain JSON in their bodies?
application/json charset utf 8
What does the express.json() middleware do and when would you need it?
It parses the Post request into JSON for you . Whenever you are going to be receiving more complex requests that have JSON bodies.
What are the three states a Promise can be in?
Pending: which is its initial state/ it hasn’t been fulfilled nor rejected yet. It hasn’t been resolved
fulfilled: meaning it was successful.
rejected: meaning it failed
How do you handle the fulfillment of a Promise?
then() -one argument function with a promise
How do you handle the rejection of a Promise?
catch() it has one parameter (the rejection reason)
What is Array.prototype.filter useful for?
separates indexes that you want out of an array while keeping the original array intact
What is Array.prototype.map useful for?
When you want to apply an expression over the whole array.
What is Array.prototype.reduce useful for?
bringing down an array to a single value
What is “syntactic sugar”?
It means it is easier to read or to write.
What is the typeof an ES6 class?
function
Describe ES6 class syntax.
class name of the class in uppercase { constructor()
What is “refactoring”?
Is the process of refactoring without changing the existing behavior. It is intended to make code simpler and cleaner while increasing performance
What is Webpack?
its a javascript modular bundler it takes all of your code in your application and makes it usable in a web browser
How do you add a devDependency to a package?
–save-dev
What is an NPM script?
it allows you to run multiple commands one right after another instead of manually typing them in the command line
How do you execute Webpack with npm run?
npm run and script name
How are ES Modules different from CommonJS modules?
ES6 has declarative syntax like SQL. You describe the file that you want import export. it pre-parses the modules for you
What kind of modules can Webpack support?
ECMAScript CommonJS and AMD modules
What is React?
It’s a way to build user interfaces
What is a React element?
it is an object. A virtual representation of the DOM
How do you mount a React element to the DOM?
render method of the ReactDOM object
What is Babel?
it’s a Javascript compiler tool that is mainly used to convert code for backwards compatibility. changes source code and transforms syntax
What is a Plug-in?
its adds to a specific feature to an existing computer program
What is a Webpack loader?
Loaders are transformations that are applied to the source code of a module. They allow you to pre-process files as you import or “load” them.
How can you make Babel and Webpack work together?
Using a webpack loader
What is JSX?
Stands for JavaScript XML, which allows us to write HTML in React
Why must the React object be imported when authoring JSX in a module?
Because it needs to be in scope
How can you make Webpack and Babel work together to convert JSX into valid JavaScript?
you use them as dev dependencies babel loader by adding plug-in
What is a React component?
Similar to a function it allows you to return React elements that will be mounted to the DOM
How do you define a function component in React?
function call with uppercase(pass in props as a parameter) function code block
How do you mount a component to the DOM?
render.ReactMethod and pass the function component as an argument
What are props in React?
Documentation says its an arbitrary input - it is an object
How do you pass props to a component?
you put it where the parameter would go in a function call
How do you write JavaScript expressions in JSX?
{ in between }
How do you create “class” component in React?
using es6 class
class UPPERCASE extends React.Component {
}How do you access props in a class component?
this.props.
What is the purpose of state in React?
keep track of values of values change over time
condition
How do you pass an event handler to a React element?
onClick props and value is js expression
What Array method is commonly used to create a list of React elements?
map
What is the best value to use as a “key” prop when rendering lists?
a string that uniquely ids itself
What are controlled components?
The react component that renders a form also controls what happens in that form..
What two props must you pass to an input for it to be “controlled”?
onChange and value
What does fetch() return?
promise object
What is the default request method used by fetch()?
GET
How do you specify the request method (GET, POST, etc.) when calling fetch?
after the url, arg you have an option of adding an init object. You would add a method property with the value of the request method you would like
When does React call a component’s componentDidMount method?
immediately after a component is inserted into the DOM tree.
Name three React.Component lifecycle methods.
componentDidMount(), ComponentDidUpdate(),
componentWillUnmount(),
shouldComponentUpdate()
How do you pass data to a child component?
via props
What does express.static() return?
returns a string
What is the local __dirname variable in a Node.js module?
absolute path
What does the join() method of Node’s path module do?
it joins all the path segments together as a string value
What must the return value of myFunction be if the following expression is possible?
myFunction()();
a function
What does this code do? const wrap = value => () => value;
assigning wrap to 2 functions
In JavaScript, when is a function’s scope determined; when it is called or when it is defined?
when it is defined
What allows JavaScript functions to “remember” values from their surroundings?
closure
