Create a Back-End App with JavaScript Flashcards
JavaScript Conditionals and Functions
Conditionals
Ternary Operator
The ternary operator allows for a compact syntax in the case of binary (choosing between two choices) decisions. It accepts a condition followed by a ? operator, and then two expressions separated by a :. If the condition evaluates to truthy, the first expression is executed, otherwise, the second expression is executed.
JavaScript Conditionals and Functions
Conditionals
else Statement
An else block can be added to an if block or series of if-else if blocks. The else block will be executed only if the if condition fails.
JavaScript Conditionals and Functions
Conditionals
switch Statement
The switch statements provide a means of checking an expression against multiple case clauses. If a case matches, the code inside that clause is executed.
The case clause should finish with a break keyword. If no case matches but a default clause is included, the code inside default will be executed.
Note: If break is omitted from the block of a case, the switch statement will continue to check against case values until a break is encountered or the flow is broken.
JavaScript Conditionals and Functions
Conditionals
Logical Operator:
and/or/not
- and: &&
- or: ||
- not:!
JavaScript Conditionals and Functions
Conditionals
Comparison Operators
=== strict equal
!== strict not equal
> greater than
>= greater than or equal
< less than
<= less than or equal
JavaScript Conditionals and Functions
Conditionals
else if Clause
JavaScript Conditionals and Functions
Conditionals
Truthy and Falsy
In JavaScript, values evaluate to true or false when evaluated as Booleans.
- Values that evaluate to true are known as truthy
- Values that evaluate to false are known as falsy
Falsy values include false, 0, empty strings, null undefined, and NaN. All other values are truthy.
JavaScript Conditionals and Functions
Functions
Arrow Functions (ES6)
Arrow function expressions were introduced in ES6. These expressions are clean and concise. The syntax for an arrow function expression does not require the function keyword and uses a fat arrow => to separate the parameter(s) from the body.
There are several variations of arrow functions:
- Arrow functions with a single parameter do not require () around the parameter list.
- Arrow functions with a single expression can use the concise function body which returns the result of the expression without the return keyword.
JavaScript Conditionals and Functions
Functions
Functions
Functions are one of the fundamental building blocks in JavaScript. A function is a reusable set of statements to perform a task or calculate a value. Functions can be passed one or more values and can return a value at the end of their execution. In order to use a function, you must define it somewhere in the scope where you wish to call it.
The example code provided contains a function that takes in 2 values and returns the sum of those numbers.
JavaScript Conditionals and Functions
Functions
Anonymous Functions
Anonymous functions in JavaScript do not have a name property. They can be defined using the function keyword, or as an arrow function. See the code example for the difference between a named function and an anonymous function.
JavaScript Conditionals and Functions
Functions
Function Expressions
Function expressions create functions inside an expression instead of as a function declaration. They can be anonymous and/or assigned to a variable.
JavaScript Conditionals and Functions
Functions
Function Parameters
Inputs to functions are known as parameters when a function is declared or defined. Parameters are used as variables inside the function body. When the function is called, these parameters will have the value of whatever is passed in as arguments. It is possible to define a function without parameters.
JavaScript Conditionals and Functions
Scope
Scope
Scope is a concept that refers to where values and functions can be accessed.
Various scopes include:
- Global scope (a value/function in the global scope can be used anywhere in the entire program)
- File or module scope (the value/function can only be accessed from within the file)
- Function scope (only visible within the function),
- Code block scope (only visible within a { … } codeblock)
JavaScript Conditionals and Functions
Scope
Block Scoped Variables
const and let are block scoped variables, meaning they are only accessible in their block or nested blocks. In the given code block, trying to print the statusMessage using the console.log() method will result in a ReferenceError. It is accessible only inside that if block.
JavaScript Conditionals and Functions
Scope
Block Scoped Variables
const and let are block scoped variables, meaning they are only accessible in their block or nested blocks. In the given code block, trying to print the statusMessage using the console.log() method will result in a ReferenceError. It is accessible only inside that if block.
JavaScript Arrays, Loops, and Iterators
Arrays
Method .push()
The .push() method of JavaScript arrays can be used to add one or more elements to the end of an array. .push() mutates the original array and returns the new length of the array.
JavaScript Arrays, Loops, and Iterators
Arrays
Method .pop()
The .pop() method removes the last element from an array and returns that element.
JavaScript Arrays, Loops, and Iterators
Loops
While Loop
The while loop creates a loop that is executed as long as a specified condition evaluates to true. The loop will continue to run until the condition evaluates to false. The condition is specified before the loop, and usually, some variable is incremented or altered in the while loop body to determine when the loop should stop.
JavaScript Arrays, Loops, and Iterators
Loops
Reverse Loop
A for loop can iterate “in reverse” by initializing the loop variable to the starting value, testing for when the variable hits the ending value, and decrementing (subtracting from) the loop variable at each iteration.
JavaScript Arrays, Loops, and Iterators
Loops
Do…While Statement
A do…while statement creates a loop that executes a block of code once, checks if a condition is true, and then repeats the loop as long as the condition is true. They are used when you want the code to always execute at least once. The loop ends when the condition evaluates to false.
JavaScript Arrays, Loops, and Iterators
Loops
Looping Through Arrays
An array’s length can be evaluated with the .length property. This is extremely helpful for looping through arrays, as the .length of the array can be used as the stopping condition in the loop.
JavaScript Arrays, Loops, and Iterators
Loops
Break Keyword
Within a loop, the break keyword may be used to exit the loop immediately, continuing execution after the loop body.
Here, the break keyword is used to exit the loop when i is greater than 5.
JavaScript Arrays, Loops, and Iterators
Loops
Nested For Loop
A nested for loop is when a for loop runs inside another for loop.
The inner loop will run all its iterations for each iteration of the outer loop.
JavaScript Arrays, Loops, and Iterators
Iterators
Functions Assigned to Variables
In JavaScript, functions are a data type just as strings, numbers, and arrays are data types. Therefore, functions can be assigned as values to variables, but are different from all other data types because they can be invoked.
JavaScript Arrays, Loops, and Iterators
Iterators
Callback Functions
In JavaScript, a callback function is a function that is passed into another function as an argument. This function can then be invoked during the execution of that higher order function (that it is an argument of).
Since, in JavaScript, functions are objects, functions can be passed as arguments.
JavaScript Arrays, Loops, and Iterators
Iterators
JavaScript Functions: First-Class Objects
JavaScript functions are first-class objects. Therefore:
* They have built-in properties and methods, such as the name property and the .toString() method.
* Properties and methods can be added to them.
* They can be passed as arguments and returned from other functions.
* They can be assigned to variables, array elements, and other objects.
JavaScript Arrays, Loops, and Iterators
Iterators
The .reduce() Method
The .reduce() method iterates through an array and returns a single value.
In the above code example, the .reduce() method will sum up all the elements of the array. It takes a callback function with two parameters (accumulator, currentValue) as arguments. On each iteration, accumulator is the value returned by the last iteration, and the currentValue is the current element. Optionally, a second argument can be passed which acts as the initial value of the accumulator.
JavaScript Arrays, Loops, and Iterators
Iterators
The .forEach() Method
The .forEach() method executes a callback function on each of the elements in an array in order.
In the above example code, the callback function containing a console.log() method will be executed 5 times, once for each element.
JavaScript Arrays, Loops, and Iterators
Iterators
The .filter() Method
The .filter() method executes a callback function on each element in an array. The callback function for each of the elements must return either true or false. The returned array is a new array with any elements for which the callback function returns true.
In the above code example, the array filteredArray will contain all the elements of randomNumbers but 4.
JavaScript Arrays, Loops, and Iterators
Iterators
The .map() Method
The .map() method executes a callback function on each element in an array. It returns a new array made up of the return values from the callback function.
The original array does not get altered, and the returned array may contain different elements than the original array.
In the example code above, the .map() method is used to add ‘ joined the contest.’ string at the end of each element in the finalParticipants array.
JavaScript Objects, Modules, and Browser Compatibility
Restrictions in Naming Properties
JavaScript object key names must adhere to some restrictions to be valid. Key names must either be strings or valid identifier or variable names (i.e. special characters such as - are not allowed in key names that are not strings).
JavaScript Objects, Modules, and Browser Compatibility
Dot Notation for Accessing Object Properties
Properties of a JavaScript object can be accessed using the dot notation in this manner: object.propertyName. Nested properties of an object can be accessed by chaining key names in the correct order.
JavaScript Objects, Modules, and Browser Compatibility
Accessing non-existent JavaScript properties
When trying to access a JavaScript object property that has not been defined yet, the value of undefined will be returned by default.
JavaScript Objects, Modules, and Browser Compatibility
JavaScript Objects are Mutable
JavaScript objects are mutable, meaning their contents can be changed, even when they are declared as const. New properties can be added, and existing property values can be changed or deleted.
It is the reference to the object, bound to the variable, that cannot be changed.
JavaScript Objects, Modules, and Browser Compatibility
JavaScript for…in loop
The JavaScript for…in loop can be used to iterate over the keys of an object. In each iteration, one of the properties from the object is assigned to the variable of that loop.
JavaScript Objects, Modules, and Browser Compatibility
Properties and values of a JavaScript object
A JavaScript object literal is enclosed with curly braces {}. Values are mapped to keys in the object with a colon (:), and the key-value pairs are separated by commas. All the keys are unique, but values are not.
Key-value pairs of an object are also referred to as properties.
JavaScript Objects, Modules, and Browser Compatibility
Delete operator
Once an object is created in JavaScript, it is possible to remove properties from the object using the delete operator. The delete keyword deletes both the value of the property and the property itself from the object. The delete operator only works on properties, not on variables or functions.
JavaScript Objects, Modules, and Browser Compatibility
javascript passing objects as arguments
When JavaScript objects are passed as arguments to functions or methods, they are passed by reference, not by value. This means that the object itself (not a copy) is accessible and mutable (can be changed) inside that function.
JavaScript Objects, Modules, and Browser Compatibility
JavaScript Object Methods
JavaScript objects may have property values that are functions. These are referred to as object methods.
Methods may be defined using anonymous arrow function expressions, or with shorthand method syntax.
Object methods are invoked with the syntax: objectName.methodName(arguments).
JavaScript Objects, Modules, and Browser Compatibility
JavaScript destructuring assignment shorthand syntax
The JavaScript destructuring assignment is a shorthand syntax that allows object properties to be extracted into specific variable values.
It uses a pair of curly braces ({}) with property names on the left-hand side of an assignment to extract values from objects. The number of variables can be less than the total properties of an object.
JavaScript Objects, Modules, and Browser Compatibility
shorthand property name syntax for object creation
The shorthand property name syntax in JavaScript allows creating objects without explicitly specifying the property names (ie. explicitly declaring the value after the key). In this process, an object is created where the property names of that object match variables which already exist in that context. Shorthand property names populate an object with a key matching the identifier and a value matching the identifier’s value.
JavaScript Objects, Modules, and Browser Compatibility
this Keyword
The reserved keyword this refers to a method’s calling object, and it can be used to access properties belonging to that object.
Here, using the this keyword inside the object function to refer to the cat object and access its name property.
JavaScript Objects, Modules, and Browser Compatibility
javascript function this
Every JavaScript function or method has a this context. For a function defined inside of an object, this will refer to that object itself. For a function defined outside of an object, this will refer to the global object (window in a browser, global in Node.js).
JavaScript Objects, Modules, and Browser Compatibility
JavaScript Arrow Function this Scope
JavaScript arrow functions do not have their own this context, but use the this of the surrounding lexical context. Thus, they are generally a poor choice for writing object methods.
Consider the example code:
loggerA is a property that uses arrow notation to define the function. Since data does not exist in the global context, accessing this.data returns undefined.
loggerB uses method syntax. Since this refers to the enclosing object, the value of the data property is accessed as expected, returning “abc”.
JavaScript Objects, Modules, and Browser Compatibility
getters and setters intercept property access
JavaScript getter and setter methods are helpful in part because they offer a way to intercept property access and assignment, and allow for additional actions to be performed before these changes go into effect.
JavaScript Objects, Modules, and Browser Compatibility
javascript factory functions
A JavaScript function that returns an object is known as a factory function. Factory functions often accept parameters in order to customize the returned object.
JavaScript Objects, Modules, and Browser Compatibility
javascript getters and setters restricted
JavaScript object properties are not private or protected. Since JavaScript objects are passed by reference, there is no way to fully prevent incorrect interactions with object properties.
One way to implement more restricted interactions with object properties is to use getter and setter methods.
Typically, the internal value is stored as a property with an identifier that matches the getter and setter method names, but begins with an underscore (_).
JavaScript Objects, Modules, and Browser Compatibility
Setting Up Babel
Babel is set up by installing @babel/cli and @babel/preset-env as development dependencies and providing a configuration in a .babelrc file. babel/cli provides Babel’s command-line interface while @babel/preset-env specifies a configuration for transpiling common modern JavaScript to be compatible with a wide range of browsers.
JavaScript Objects, Modules, and Browser Compatibility
Running Babel
Babel is run via the command line with arguments specifying the code Babel should run on and the location its output should be stored. The source directory is the first argument and the output location is specified with the -d flag.
Introduction to JavaScript Runtime Environments
A Browser’s Runtime Environment
An introduction to the Node runtime environment and a browser’s runtime environment.
The most common place where JavaScript code is executed is in a browser. For example, using any text editor, you could create a file on your own computer called my_website.html and put the following HTML code inside:
Save your file, then open your favorite browser. Most browsers will allow you to load websites that you have created locally by going to the menu File > Open File > my_website.html.
Upon loading, the embedded
will execute and the window.alert() method will create a pop-up box in your browser with the text “Hello World”. How is this possible? Where did the window.alert() method come from and how can it control your browser?The answer is that you are executing this code in the browser’s runtime environment. The window.alert() method is built into this environment and any program executed in a browser has access to this method. In fact, the window object provides access to a huge amount of data and functionality relating to the open browser window beyond just .alert().
Try replacing window.alert() with window.prompt() or window.confirm()
Applications created for and executed in the browser are known as front-end applications. For a long time, JavaScript code could only be executed in a browser and was used exclusively for creating front-end applications. In order to create back-end applications that could run on a computer WITHOUT a browser, you would need to use other programming languages such as Java or PHP.
Introduction to JavaScript Runtime Environments
The Node Runtime Environment
An introduction to the Node runtime environment and a browser’s runtime environment.
In 2009, the Node runtime environment was created for the purpose of executing JavaScript code without a browser, thus enabling programmers to create full-stack (front-end and back-end) applications using only the JavaScript language.
Node is an entirely different runtime environment, meaning that browser-environment data values and functions, like window.alert(), can’t be used. Instead, the Node runtime environment gives back-end applications access to a variety of features unavailable in a browser, such as access to the server’s file system, database, and network.
For example, suppose you created a file called my-app.js. We can check to see the directory that this file is located in using the Node runtime environment variable process:
Implementing Modules in Node
What are Modules?
Article on modular programs and implementing modules in the Node runtime environment.
Modules are reusable pieces of code in a file that can be exported and then imported for use in another file. A modular program is one whose components can be separated, used individually, and recombined to create a complex system.
Consider the diagram below of an imaginary program written in a file my_app.js:
Instead of having the entire program written within my_app.js, its components are broken up into separate modules that each handle a particular task. For example, the database_logic.js module may contain code for storing and retrieving data from a database. Meanwhile, the date_formatting.js module may contain functions designed to easily convert date values from one format to another (a common headache among programmers!).
Implementing Modules in Node
Implementing Modules in Node
Article on modular programs and implementing modules in the Node runtime environment.
Every JavaScript file that runs in a Node environment is treated as a distinct module. The functions and data defined within each module can be used by any other module, as long as those resources are properly exported and imported.
Suppose you wanted to write a simple program that would display the freezing point and boiling point of water in Fahrenheit. However, you only know the values in Celsius to be 0 (freezing) and 100 (boiling). Luckily you happen to know how to convert Celsius to Fahrenheit!
Such a program might look like this:
This water-limits.js program is simple but let’s break it down into its parts:
- At the top of the file, the function celsiusToFahrenheit() is declared. When given a value in Celsius, it will return the value converted to Fahrenheit. Both input and output will be a number.
- Below, freezingPointC and boilingPointC are assigned the known values 0 and 100, respectively.
- Using these values and the function celsiusToFahrenheit(), the additional values freezingPointF and boilingPointF are calculated.
- Lastly, these values are printed to the console.
Implementing Modules in Node
module.exports
Article on modular programs and implementing modules in the Node runtime environment.
To create a module, you simply have to create a new file where the functions can be declared. Then, to make these functions available to other files, add them as properties to the built-in module.exports object:
The code snippet above demonstrates two ways of exporting functions from a module. Let’s break it down:
At the top of the new file, converters.js, the function celsiusToFahrenheit() is declared.
* On the next line of code, the first approach for exporting a function from a module is shown. In this case, the already-defined function celsiusToFahrenheit() is assigned to module.exports.celsiusToFahrenheit.
* Below, an alternative approach for exporting a function from a module is shown. In this second case, a new function expression is declared and assigned to module.exports.fahrenheitToCelsius. This new method is designed to convert Fahrenheit values back to Celsius.
* Both approaches successfully store a function within the module.exports object.
module.exports is an object that is built-in to the Node.js runtime environment. Other files can now import this object, and make use of these two functions, with another feature that is built-in to the Node.js runtime environment: the require() function.
Implementing Modules in Node
require()
Article on modular programs and implementing modules in the Node runtime environment.
The require() function accepts a string as an argument. That string provides the file path to the module you would like to import.
Let’s update water-limits.js such that it uses require() to import the .celsiusToFahrenheit() method from the module.exports object within converters.js:
In this case, ./ is a relative path indicating that converters.js is stored in the same folder as water-limits.js. When you use require(), the entire module.exports object is returned and stored in the variable converters. This means that both the .celsiusToFahrenheit() and .fahrenheitToCelsius() methods can be used in this program!
Implementing Modules in Node
Using Object Destructuring to be more Selective With require()
Article on modular programs and implementing modules in the Node runtime environment.
In many cases, modules will export a large number of functions but only one or two of them are needed. You can use object destructuring to extract only the needed functions.
Let’s update celsius-to-fahrenheit.js and only extract the .celsiusToFahrenheit() method, leaving .fahrenheitToCelsius() behind:
