Abstraction is a concept which means to represent something in a simple way without sharing all of the details. For example,
the add + operator is an abstraction of a JavaScript built-in function that takes in two
operands in an expression and
returns a single result.
add + operator
The +operator adds numbers and concatenates strings.
If one operand is a string, the return value is a string. Examples include:
5 + 100 // returns number 105
5 + "10" // returns string "510" given one of the operands is a string
Most JavaScript mathematical operators have the same functionality as their math counterparts such as * (multiply), / (divide), and - (subtract), but
+ (add) has multiple personalities depending on the operands! See the examples above.
Also note that the assignment = operator
is nothing like how we use the equal sign = in algebra! In JavaScript (and all modern programming languages) the = operator is the assignment operator! See the Math and JavaScript YouTube playlist for valuable information on JavaScript mathematical operators.
array
An array is a collection (or list) of anything: numbers, strings, arrays, objects, functions.
In JavaScript, arrays may contain different types of data such as strings and numbers
(but they rarely do given objects are generally a better storage container for mixed types of data).
A typical example of an array is a list of names or numbers. let students = ["Lisa", "Doug", "Kelsey", "Aaron"]; let scores = [90, 80, 70, 60]; Arrays are 0-based (just like other modern languages) so each item in the array is referenced sequentially starting with
0 using [square brackets]. In this case, the first array item is arr[0], the second is arr[1], and so forth.
See the Array vs. Objects YouTube for valuable information to compare storing and accessing data in JavaScript arrays versus objects.
arguments
Arguments are the values you pass to a function when it is executed.
You typically pass in one argument for each parameter variable that was defined when the function was created.
Note that programmers often interchange the terms arguments and parameters although they are technically not the same.
Parameters are variables that are created when the function is created.
Arguments are the values passed in for parameters when the function is executed.
function welcome(fname, title){ // create the welcome function with two parameters, fname and title
console.log("Welcome " + title + " " + fname + "!"); // function statements go here
} // close the function
welcome("Lisa", "Professor"); // run the welcome function and pass in two arguments
// Pass in the string "Lisa" for the fname parameter and string "Professor" for the title parameter See the JavaScript Functions 101 playlist that covers the why, what, when, where, and how of functions.
anonymous function
An anonymous function is a function without a function name. Anonymous functions are often created when you need a "one-off" function,
a unique function for a specific purpose that you will not need to execute more than once. window.onload = function() { // Note that this function has no name.
// Rather, it is assigned to the onload event of the window object and will be run only once.
// Given the code is only run once based on this specific event, it doesn't need to be named
// (named functions are much easier to reuse elsewhere in the script).
// code for the function goes here
}
Anonymous functions are also created when you use function expression syntax to create your function
but in that case, the variable name that the expression is assigned to acts like the function name,
so the function may be called multiple times using the variable name followed by (parentheses).
let xyz = function() { // Note that this function has no name.
// Rather, it is assigned to the variable named xyz
// code for the function goes here
}
You can run the anonymous function with xyz() (just like you run a named function).
assignment = operator
The = operator is an assignment operator. It assigns whatever is on the right side of the
operator to be the value stored by the variable on the left.
Examples include:
let name = "Lisa"; // create a variable named name and assign it to the string "Lisa"
let salary = 12 * 10000; // create a variable named salary and assign it to the result of the expression, 120000
let salesPrice = document.getElementById('sale'); // create a variable named salesPrice
// and assign salesPrice to the HTML element with id="sale"
Most JavaScript mathematical operators have the same functionality as their math counterparts such as * (multiply), / (divide), and - (subtract), but
+ (add) has multiple personalities depending on the operands! See the Math and JavaScript YouTube playlist for valuable information on JavaScript mathematical operators.
associativity
Associativity is either left-to-right or right-to-left and used to determine how to resolve an expression when two operators have the same precedence.
asynchronous
Asynchronous processes mean that they run more than one at a time. At its base, JavaScript runs in a synchronous fashion but there are features such as
asynchronous callbacks, promises, and async/await that allow you to do something (such as query a database and wait for the response) while allowing the rest of the code to continue running.
automatic semicolon insertion
Automatic semicolon insertion means that JavaScript will automatically insert a semicolon at the end of your statements, but it's considered best practice by many style guides such as the airbnb style guide to intentionally add semicolons when lines are to be finished to avoid certain hard-to-debug errors.
automatic type conversion
JavaScript employs automatic type conversion which means it automatically coerces
primitive data to a type of data that can be sensibly processed by the JavaScript engine. Examples include:
5 * "5" // returns number 25, the string "5" is coerced to number 5 for the purposes of this expression
"4" / 2 // returns number 2, the string "4" is coerced to the number 4 for the purposes of this expression
if (5) {"say true"} // returns string "say true" because the number 5 is considered "truthy" for the purposes of this expression
3 + "3" // returns string "33" given the + operator is also used to concatenate strings
B
binary operator
A binary operator (such as > or + ) takes two operands. a > b // The a and b variables are the operands. This expression will return true or false 5 + 10 // Numbers 5 and 10 are the operands. This expression returns 15 See the Math and JavaScript YouTube playlist for valuable information on JavaScript mathematical operators.
block
A block of code is what's inside of {curly braces}. Variables declared with let have scope only inside that block.
browser
Software such as Chrome, Edge, Firefox, or Safari that runs HTML, CSS, and JavaScript and renders (displays) the web page.
Boolean
Boolean is a data type that may only store true or false.
It is named after George Boole, hence "Boolean" vs. boolean.
A Boolean context is one in which only two answers of true or false make sense such as the
conditional expression after an if keyword that may return only true or false.
By value versus by reference refers to how variables are copied. If the variable contains a primitive value and is assigned to another variable, a copy of the primitive is made and stored in the second variable.
If the variable contains an object and is assigned to another variable, only a reference (like a pointer) is created in the second variable. a = 3; // a stores a primitive, the number 3
b = a; // b is it's own copy of a -- this is "by value" and happens to all primitives such as numbers, strings
a = {}; // a stores an object
b = a; //
b points to the same spot as the a object --
this is "by reference" and happens to all objects (or functions which are actually objects)
C
call
To call a function means to run it. You run a function with () parentheses. Synonyms include invoke, run, and execute.
callback function
A callback function is a function that you give to an outer function to be run when the outer function is finished.
So the function you call (also called invoke, execute, and run) "calls back" by calling the function you gave it when it finishes function timer(callback){ // create the timer function with one parameter.
// code that you want to run first goes here
callback(); // The callback! This runs the function I provide as the argument for the callback parameter.
}
timer(function() { // In this case, an anonymous function is passed to the callback parameter.
console.log("I am done!");
});
timer(someFunctionName); // Or I could pass in a named function as the argument for the callback parameter.
callback example
setTimeout is a built-in JavaScript function that requires two arguments, the function
that you want to run and how long to wait in milliseconds. The "callback" is the function passed into the built-in setTimeout function.
This is also an example of a first-class function which means we are able to pass a function as an argument to another function.
greeting is also an example of a function expression.
Accessing the greeting variable from the function is an example of closure because sayHiLater finishes, but in 3 seconds,
the anonymous function inside setTimeout is triggered. greeting is in the outer execution context.
function sayHiLater(){
let greeting = "Hi world!";
setTimeout(function() {
console.log(greeting);
}, 3000);
}
sayHiLater();
So when we execute sayHiLater, the greeting variable is assigned to "Hi world!".
Then sayHiLater executes the anonymous function we pass into the setTimeout function.
Copy and paste this code into the Console of your browser to see it log out "Hi world!" in 3 seconds!
closure
Closure means a function has access to what's in memory for whatever was created in its outer environment such as variables.
An execution context has "closed in" its outer variables.
function greet(whattosay){
return function (name) {
console.log(whattosay + ' ' + name);
}
}
let sayHi = greet("Hi!");
sayHi("Lisa");
greet("Hi")("Lisa");
Here we have invoked a function that returns a function and invoking the function that was returned.
let sayHi = greet("Hi");
sayHi("Lisa");
How does sayHi know what whattosay is? Due to closures.
closure example
function buildFunctions(){
let arr = [];
for (let i = 0; i < 3; i++) {
arr.push(
function() {
console.log(i);
}
)
}
return arr;
}
let fs = buildFunctions();
fs[0]();
fs[1]();
fs[2]();
This results in 3 in all cases because console.log(i) isn't executed until the fs statements. So i is equal to 3 when return arr executes, when buildFunction() ends. It all has to do with WHEN the function was executed.
code block
A code block contains the JavaScript statements inside { curly braces }. Code blocks can be nested. Variables declared with the let keyword are only visible within that code block.
coercion
Coercion refers to the JavaScript engine automatically converting a value from one type to another when an expression requires a
specific type of data. Examples include:
Number(null) coerces to 0
Number(false) coerces to 0 , but null == 0 is false and null < 1 is true
Number(true) coerces to 1
Number(undefined) coerces to NaN
"" == 0 is true
"" == false is true
Boolean(undefined) coerces false
Boolean(null) coerces false
Boolean("") coerces false
Boolean(0) coerces to false ... so if (x) when x is 0 is a problem....use if(x || x === 0)
The computed member access operator [] can be used instead of the more common . operator to access the properties of an object person["firstname"] = "Lisa"; // to add a or change a property in an object
conditional operator ? :
The conditional operator ? : is the only JavaScript operator that takes in three operands. From MDN: a condition followed by a question mark (?), then an expression to execute if the condition is truthy followed by a colon (:), and finally the expression to execute if the condition is falsy. This operator is frequently used as an alternative to an if...else statement." test ? true : false;
Console
A window within the developer's tools that provides indispensable feedback including errors and information to JavaScript programmers.
console.log()
The console.log() statement allows JavaScript programmers to "log out" information to the Console window making it much faster and easier to write and debug JavaScript. Examples include: console.log(total); // log out the value of the variable total
console.log('total is:', total); // log out the string 'total is:' as well as the value of the variable total
console.log(i); // log out the value of the variable i (which is often used as the "counter" variable in a loop);
CSS Cascading Style Sheets
CSS is the language used to style and position content on a web page. Key CSS terminology includes selector, property, and declaration.
p {
color: #00f;
}
/* p is the selector as it "selects" the HTML elements that are to be styled, in this case, paragraphs */
/* color is the CSS property which determines what is to be styled. In this case, text color. */
/* The declaration includes the property followed by a : followed by the property value followed by a ; */
/* curly braces surround all of the declarations for a selector */
The developer's tools provide valuable functionality to a web developer. They are provided by each modern browser and displayed in a special window. They allow
developers to better understand, write, and debug their code.
Of particular importance is the Elements tab which allows you to see and modify the DOM as well as view CSS styles.
The Console tab is also extremely valuable to developers as it displays
JavaScript error messages and also allows you to "log out" (using console.log()information which in turn gives you a powerful way to test and
debug JavaScript. Open the developer's tools in any browser by right-clicking the page and choosing the Inspect menu option.
dot operator .
The dot operator is used to access, add, or change the properties and methods of an object. *** This is the preferred way to access the members of an object.***
person.firstname = "Doug": // ...to add or change the firstname property of the person object.
person.addr.street = "111 Main St."; // ...to add/change the street property of the addr object of the person object
document.getElementById('someId'); // ... to access the HTML element with id="someId" using the getElementById() method.
DOM (Document Object Model)
The DOM is a tree-like structure created by the browser after it reads your HTML.
The DOM indents HTML elements to represent parent-child relationships. The DOM also applies rules that allow the browser to read HTML and decide how to render
it on the page even if the HTML has validation errors. For example, if an HTML element was coded with a missing closing tag, the DOM will most likely understand that error and add the closing tag in the proper location.
Well indented and validated HTML looks very similar to the DOM, but remember that the DOM is created by the browser after it reads your HTML code.
JavaScript has access to the DOM in memory. View the DOM for a specific HTML page using the Elements tab of the browser's developer's tools.
dynamic typing
JavaScript uses dynamic typing given the programmer doesn't declare variables with a specific data type (string, Boolean, number, date).
Most modern object-oriented languages use static typing where variables must be declared with their name as well as their data type. See also coercion.
ECMAScript 6 is the latest and official version of JavaScript that includes
this list of new features.
element (HTML element)
HTML elements identify or "tag" content. They consist of the opening tag and any attributes found in the opening tag, the content (if applicable), and the closing tag. Examples include: <h1>Main heading goes here</h1> // a typical HTML element with an opening tag, content, and a closing tag
<a href="http://somelink.com">Hyperlink goes here</a> // an anchor (hyperlink) element.
// The opening <a> tag contains the href attribute which provides information for the hyperlink's target
<hr> // a horizontal rule element
There are different categories of HTML elements. <hr> is considered to be an "empty element" given it does not contain content and does not need to be closed.
The <head> and <body> elements are considered "structural" elements given they provide overall structure to the page.
encapsulation
Encapsulation is a concept which means to "enclose" something. Examples would be to enclose data in an object, enclose the scope of a variable inside a function using the let keyword to declare the variable, or enclose statements inside a function itself.
The event queue keeps track of events that JavaScript might be listening for like clicks. JavaScript checks the event queue when the execution stack is empty. An event in the event queue creates a new execution stack to process.
execution context
The execution context is a wrapper to help manage the code that is running. It focuses on the code portion of a function object. It is created in two phases:
Creation phase: creates this (in the global object, this is the window object),
and sets up memory space for variables and functions. Functions are in memory in their entirety in creation phase.
Variables are set up and set equal to undefined. This is called hoisting.
The creation phase also sets up the this variable and the arguments variable. this points to different things based on where the function lives and how the function is invoked. arguments are the values (parameters) passed to the function when it is invoked.
Execution phase: The execution phase is when variable assignments are made and other code is run.
It also explains why all variables start out as undefined because assignments are made in execution phase.
execution stack
Every function that is executed creates a new execution context which is stacked on top of one another and executed
from the top of the stack to the bottom, the global execution context.
expression
An expression is a unit of code that results in a value. (An expression doesn't have to be assigned to a variable, but it often is, particularly when that value needs to be used elsewhere in the script.)
See the Math and JavaScript YouTube playlist for valuable information on JavaScript mathematical operators.
F
falsy
In JavaScript, all values are truthy when encountered in a Boolean context unless they are defined as falsy.
Falsy values include: 0, -0, 0n, "", null, undefined, and NaN.
See also truthy.
first class functions
"First class functions" means that everything you can do with other data types (strings, numbers, Booleans, so forth)
you can do with functions. For example, you can assign functions to variables (function expressions),
pass them around as parameters, and create them on the fly using literal syntax.
Functions are actually objects with several properties such as the name property.
A function consists of a name (which is optional given a function can be anonymous) and code (which is invocable using (parentheses)). Functions may also have values, objects, or other functions associated with it. This means you can use the dot operator to add properties to functions.
A free variable is a variable that is coded outside of a function,
but which a function has access to given the variable is in the function's outer execution context.
Function borrowing means using a method from another object. let person2 = {
firstname: "Doug",
lastname: "Freddy",
}
console.log(person.getFullName.apply(person2));
function constructor
A function constructor is a special type of function that returns an object. function Person(firstnamep, lastnamep) {
this.firstname = firstnamep;
this.lastname = lastnamep;
}
let lisa = new Person("Lisa", "Fred");
Note that the object and properties are returned from the function constructor.
Function constructors are good when you need to create many objects with the same properties.
By convention, they are named with a capital letter to help you not forget to use the new keyword when invoking them.
function currying
Function currying means to create a copy of the function with some preset parameters which is useful in mathematical situations when your calculation uses mathematical constants.
function multiply(a, b){
return a*b;
}
let multiplyByTwo = multiply.bind(this,2);
console.log(multiplyByTwo(4)); // returns 8
function expression
A function expression is (typically) an anonymous function assigned to a variable name. let anonymousGreet = function() {
console.log("hello!");
}
A function expression is invoked with anonymousGreet)().
It's an expression because it returns a value, and in this case, it results in a new object.
The function is not hoisted. See the JavaScript Functions 101 playlist that covers the why, what, when, where, and how of functions.
function overloading
Function overloading means to have the same function use a different number of parameters.
JavaScript doesn't have this exact thing. But in JavaScript, a function can call another function
(a feature of first class functions aka functional programming which is better than function overloading
because it keeps the tasks of each function easier to write and debug.
functional programming
Languages with functions that behave like objects: also called "first class functions."
Functional programming or first class functions means you can pass around functions around as if they are values.
You can pass functions as arguments to other functions.
You can use functions like any other value, variable, or object.
The programmer thinks and codes by creating functions that segment the code into components
that represent a single task or process and which can be assembled together.
//below is a generic function example, mapForEach, that we can ask to do different things: Note that the first parameter is given the variable name arr indicating it is an array.
The second parameter is given the variable name that indicates it is a function, fn but parameter names can be anything. They are merely variables used in the function.
function mapForEach(arr, fn) { // create a function named mapForEach with two parameters arr and fn
let newArr = []; // create an empty new array named newArr
for (let i = 0; i < arr.length; i++) { // run a for loop once for every item in the arr array that is passed in
newArr.push( // push an item into the newArr array
fn(arr[i]) // the item pushed is the return value of the function fn with arr[i] as its argument
) // close the push method
}; // close the for loop
return newArr; // return the newArr array
} // close the mapForEach function
let arr1 = [1,2,3] // declare a new array named arr1 with three members
console.log(arr1); // log out arr1 just to make sure it contains the array of [1, 2, 3]
let arr2 = mapForEach(arr1, function(item) { // declare arr2 and assign it to the mapForEach() function
return item * 2; // mapForEach takes in two arguments, an array and a function
}); // item * 2 is returned to mapForEach. mapForEach pushes that new item onto a new array
console.log(arr2); // mapForEach returns the new array to arr2, [2, 4, 6]
let arr3 = mapForEach(arr1, function(item) { // declare arr3 and assign it to the mapForEach() function
return item > 2; // mapForEach takes in two arguments, an array and a function
}); // this time, true or false is returns to mapForEach and mapForEach pushes that new return value into the new array
console.log(arr3); // mapForEach returns the new array to arr3, [false, false, true]
See the JavaScript Functions 101 playlist that covers the why, what, when, where, and how of functions.
function statement
A function statement is a way to create a function using the keyword function as the first word. function greet() {
console.log("hi!");
}
This code doesn't return a value until it is executed with (parentheses). greet();
Given there is no explicit return statement, the function returns undefined.
function factory
"Function factory" is a term given to a function which returns another function which in turn, takes advantage of closures.
function makeGreeting(language){
return function(firstname, lastname) {
if (language === "en") {
console.log("Hello " + firstname + " " + lastname);
}
if (language === "es") {
console.log("Hola " + firstname + " " + lastname);
}
}
}
let greetEnglish = makeGreeting("en");
let greetSpanish = makeGreeting("es");
greetEnglish("Lisa", "Fred"); // Hello Lisa Fred
greetSpanish("Doug", "Aaron"); // Hola Doug Aaron
The greetEnglish and greetSpanish functions have access to the "en" and "es" string variables because they are in separate execution contexts and due to closure.
See the JavaScript Functions 101 playlist that covers the why, what, when, where, and how of functions.
G
global
A global variable is one that is created outside of a function. It is available to all functions and is technically part of the window object in a traditional JavaScript environment. Global variables because they can create hard-to-debug errors. They "pollute" the global environment.
global execution context
The global execution context creates the global window object and the this variable which refers to the window object.
It is automatically created every time you run a .js file in a browser. It sets up variables and function names.
H
hoist or hoisting
From MDN (Mozilla Developer Network): : "JavaScript Hoisting refers to the process whereby the interpreter appears to move the declaration of functions, variables or classes to the top of their scope, prior to execution of the code."
HTML, HyperText Markup Language
HTML is the language by which web page content is structured and identified ("marked up") to describe the content.
HTML is made up of elements such as
<p> for paragraph, <h1> for heading level 1 and <li> list item to describe content.
HTML attributes further describe the opening tag of an HTML element such as the href attribute in the following html anchor (hyperlink) element: <a href="https://learncs.w3spaces.com/">Learn Computer Science<a/>
See also HTML elements.
An iife is a function that is created and immediately invoked.
An example using a function expression: let greetFunc = function(name){
console.log("Hello " + name);
}("Lisa");
The last line immediately invokes the function and passes the argument of "Lisa".
Another example using a function statement: (function(name){
let greeting = "Hello ";
console.log(greeting + name);
}("Lisa"));
If the first word is function, you're creating a function statement. To trick the parser into thinking it is not a function statement, use (parentheses) around the entire function because always surround an expression.
The reason this is so powerful is that variables created inside an iife doesn't collide with other variables in the global execution context.
Libraries and frameworks often wrap all of their code in an iife to make sure that their code doesn't collide with other code.
immutable
Immutable means it can't be changed. "mutate" means to change something, typically with the = assignment operator
inheritance
Inheritance means that one object has access to (inherits) the properties and methods of another object.
"Classical" inheritance is what is currently in C#, Java but it is verbose given there are so many different types (friend, protected, private, interface), and the properties and methods are actually copied from one object to another.
"Prototypal" inheritance is what's used in JavaScript which is much simpler, more flexible, and easier to understand given properties and methods are made available through the prototype chain but not actually copied from one object to another.
instanceof operator
The instanceof operator returns true or false based on if something has in its prototype chain
function Person(name) {
this.name = name;
}
let woman = new Person("Jane");
console.log(woman instanceof Person); // returns true which tells us that Person is up the prototype chain of woman
invocation
Invocation means running or executing or calling a function. We invoke a function with parentheses()
J
JSON: JavaScript Object Notation
JSON is a standardized way to pass data between different programs. It is similar to JavaScript object literal syntax given the data is wrapped in {curly braces} and uses key: value pairs,
but property (aka key) names must be wrapped in quotes
{
"firstname": "Lisa",
"isAProgrammer": true,
"address": {
"street": "123 Lakeview",
"city": "Branson"
}
}
All JSON syntax is valid JavaScript object syntax because the "quotation marks" around the property name are optional in JavaScript.
JSON.parse(JSONstring)
The JSON parse() method converts a JSON string back into a JavaScript object
JSON.stringify(objectLiteral)
The JSON.stringify() method converts a JavaScript string into JSON string
jQuery
jQuery is a giant, popular library of JavaScript methods.
If you see the $ in your code, you are most likely using jQuery because in jQuery. Given the large size of the jQuery library and the fact that most applications only need a very small bit of its functionality,
jQuery has fallen out of favor with some JavaScript programmers who prefer to write the needed functionality using vanilla JavaScript.
K
keyword
A JavaScript keyword is a special word reserved by the language that contains special functionality. JavaScript keywords cannot be used as variable or function names.
There are over 60 JavaScript keywords. The list of JavaScript keywords at w3schools.com.
L
let
let is a JavaScript keyword used to declare variables with a scope inside the current code block.
The lexical environment is the physical location of the function where your code resides. Determines outer environment which is important to closures and variables!! (Does a function sit within another function which creates a closure or does it sit in the global environment?)
literal syntax {} (for an object)
Literal syntax means you are literally creating an object with { curly braces } and assigning it to a variable name. let person = { firstname: "Lisa", lastname: "Fred"}; // (note commas between members) person.firstname = "Kelsey"; // the dot . operator is the preferred way to assign a new firstname value person["firstname"] = "Aaron"; // You can also use [square bracket] notation to assign property values
Add MDN to any Google search for official JavaScript documentation.
member access dot operator .
The dot operator is used to access a property or method from an object: person.firstname = "Doug": // to add a or change property to an object (note that you don't need to use the "quotation marks") *** this is the preferred method to access the members of an object***
method
A method is a function connected to an object. When a property contains a function, that property is referred to as a method.
A method is created using the function keyword and is invoked with (parentheses) just like a function. An example:
let prof = { // declare a variable named prof and assign it to an object
fname: "Lisa", // the first property name is fname with a value of "Lisa"
salutation: function(){ // the second property is assigned to a function so it is a method named salutation
return "Hello Professor " + this.fname // the method returns a string "Hellow Professor " concatenated to fname
} // close the function
} // close the object
To the method ... prof.salutation(); // returns "Hello Professor Lisa"
There are many built-inmethods that we use in JavaScript such as the log() method of the console object, the getElementById() method of the document object or the alert() method of the window object.
(Side note: I personally try to use (parentheses) behind methods when referring to them in documentation to help distinguish them from mere properties.)
See the YouTube: JavaScript functions, methods, and properties -- what's the difference?
method chaining
The ability to allow more than one method to be called on the same parent object. JavaScript example.
obj.method1().method2() both methods end up with a "this" variable pointing to "obj"
jQuery example: let q = $("ul.people").addClass("newclass").removeClass("people");
Both the .addClass and .removeClass jQuery methods return this.
mutate
Mutate means to change something, usually with an assignment statement using =, the assignment operator. "immutable" means it can't be changed.
In general, for clarity and debugging purposes, it's better to create and return new variables from a function rather than to mutate the value of variables passed into a function.
N
name/value pair
A name/value pair is also called a key/value pair such in as the following literal statement:
let prof = { fname: "Lisa", lname: "Fred" } // create a variable named prof and assign it to an object.
// the object has two name/value pairs aka key/value pairs
// note that the key names are also called the property names of the object
namespace
A namespace in other languages is a container for variables and functions used to keep variables and functions separated.
JavaScript doesn't have namespaces because we can separate our variables and functions with { object containers }. let objectliteral = {
firstname: "Lisa",
isAProgrammer: true,
address: {
street: "123 Lakeview",
city: "Branson"
}
}
NaN
NaN in JavaScript is short for "Not a Number." JavaScript returns NaN
when it cannot make sense of an expression that should return a number such as ("Lisa" * 5)
given strings cannot be used as an operand with the * multiplication operator in JavaScript.
new
The new keyword is used with function constructors.
The new keyword is an operator that runs a function that creates a new object.
It was created for Java programmers to feel comfortable with JavaScript.
Any function that is a function constructor should start with a capital letter which
helps you NOT forget the new operator when using that function.
There are several built-in function constructors: let a = new Number(3);
a is now a Number object with a primitive value of 3. It has access to Number object built-in methods such as toFixed. let a = new String("Lisa");
a is now a String object with a primitive value of "Lisa". It has access to String object built-in methods such as indexOf. let a = new Date("3/1/2017");
a is now a Date object with a primitive value of 3/1/2017.
It has access to Date object built-in methods such as getDate or getYear which is highly useful!!
In general, don't use new Number, new String, new Boolean
(because that would create an object of that type which is probably overkill).
What you probably want to create is just a mere primitive!! But yes, use the new operator to create new date objects if you need to "do math" on that date!
O
object
An object is a storage container which is a collection of name/value pairs
(but the value could be another object). Primitive values of an object are called properties. If a property contains a function it is called a method 3 ways to build objects:
object literal syntax means that you are "literally" creating the object. It's a straight-forward way to create new, unique objects. lisa = { firstname: "Lisa",
lastname: "Fred"
}
See also literal syntax.
using the new keyword
Use the new keyword when you need to make new date objects and also with function constructors. let today = new Date();
function constructors A function constructor is a function that returns a new object. function Person(firstnamep, lastnamep) {
this.firstname = firstnamep;
this.lastname = lastnamep;
}
let lisa = new Person("Lisa", "Fred");
Note that the object and properties are returned from the function constructor. Function constructors are good when you need to create many objects with the same properties. By convention, they are named with a capital letter to help you not forget to use the new keyword when invoking them.
let person = { firstname: "Lisa", lastname: "Fred"}: // preferred way to create a new, unique object (note commas between members). Note that if many objects with the same properties need to be created a function constructor should be considered. person.firstname = "Kelsey"; // Using dot notation to assign the value of the firstname property to "Kelsey" person["firstname"] = "Aaron"; // Using [square bracket] notation to assign the firstname property to "Aaron" person[fname] = "Doug"; // Using the variable fname to assign "Doug" as a property value. See also literal syntax.
operator
Operators are special built-in JavaScript functions that often mimic mathematical operators.
They generally take two parameters and return one result. Common examples include: + - * / % > < >= <= === !== (don't use == and != due to coercion unless coercion is intended)
The data that the operator works on or needs to process. "Operand" is typically a mathematical term.
Knowing that JavaScript operators such as + - > or ? are actually built-in functions, operands in built-in JavaScript are the parameters defined by the function.
operator precedence
Operator precedence refers to which operator function gets called first Operator Precedence pdf
outer environment
environment outside of a function's execution context -- this doesn't exist in the global environment because it is the outermost stack -- the outer environment for all functions declared in the global environment is the global environment (due to lexical environment) -- all functions declared in the global environment have the global environment as their outer environment "who created me ?"
P
parameters
Parameters are the variables you define for a function when it is created.
You pass in arguments for those parameters when it is executed.
The terms arguments and parameters are often interchanged in general conversation but technically the term parameter refers
to when the function's variables are created and the term argument refers to the values passed into the function when
it is later executed. function welcome(fname, title){ // create the welcome function with two parameters, fname and title
console.log("Welcome " + title + " " + fname + "!");
}
welcome("Lisa", "Professor"); // run the welcome function and pass in two arguments, "Lisa" and "Professor"
polyfill
Polyfill is a term given to code that adds a feature which a particular old browser's JavScript engine may lack. polyfill.io is an example.
primitive
The term primitive refers to one value (not an object or an array). There are 6 primitive types of JavaScript data:
All objects (including functions) store a __proto__ (prototype) object.
When calling a property on an object, properties are looked for on the object itself,
and next in the __proto__ object.
prototype chain
The prototype chain is where we have access to a property or method among a sequence of objects.
The JavaScript engine looks down the prototype chain to find a property or method. The prototype chain is the means by which JavaScript implements object inheritance.
Q
R
recursion
Recursion happens when a function calls itself until a condition is met. The classic example is the math factorial problem, which is defined as the product of all numbers between 1 and that number.
For example, 5! (5 factorial) would be defined as 5*4*3*2*1 and would be coded in a JavaScript function as follows:
function factorial(number) {
if (number === 0) { // set the condition for recursion to stop -- VERY IMPORTANT!
return 1;
} else {
return n * factorial(n - 1); // recursion;
}
};
factorial(5); // returns 5*4*3*2*1 which is 362880
See more at MDN (Mozilla Developer Network): recursion.
The ...rest parameter allows you to add an indefinite number of arguments as an array to a function.
Also see spread syntax. From MDN: "Spread syntax looks exactly like rest syntax. In a way, spread syntax is the opposite of rest syntax. Spread syntax "expands" an array into its elements, while rest syntax collects multiple elements and "condenses" them into a single element. "
return value
The return value of a function is what the function creates and "returns" to the statement that called the function when the function finishes executing.
The return value follows the return keyword in the function and is typically the last statement of the function. If the function has no explicit return value, undefined is returned from the function. See the JavaScript Functions 101 playlist that covers the why, what, when, where, and how of functions.
S
scope
Scope is where a variable is available in your code. Global scope means the variable is available anywhere in the script.
Scope is also called the "variable environment" which is where the variable lives -- in what execution context? (which is how the variables relate to one another in memory).
scope chain
Going down the scope chain means going down the execution stack to find the value of a variable.
Scope chain is determined by a function's outer reference which is determined by its lexical environment.
single-threaded
JavaScript is considered to be single-threaded, one command is executed at a time.
(But note that JavaScript also has asynchronous features.)
spread operator ...
Also see rest parameter syntax. Allows for other parameters in a function so you
can save additional arguments not defined in the function. From MDN: "Spread syntax looks exactly like rest syntax. In a way, spread syntax is the opposite of rest syntax. Spread syntax "expands" an array into its elements, while rest syntax collects multiple elements and "condenses" them into a single element. "
statement
A statement is a line of code that works, but doesn't necessarily result in a value (such as an expression).
strict mode
"use strict";
Using this statement apply strict mode to your script which means you must declare a variable with var, let, or const in order to use it.
The "use strict"; statement must go at the top of the entire file or the top of the function to apply it to only that function.
synchronous
In JavaScript, commands are synchronous, which means they are executed one at a time in order.
syntactic sugar
Syntactic sugar refers to a different way to write a statement that doesn't change how it works under the hood.
syntax
The grammar by which code is written. For example, how special characters such as +, {}, (), . or , are used in the language, the keywords the language reserves for special use, or the rules by which you can break a statement onto multiple lines.
syntax parser (aka JavaScript engine)
A program that reads your JavaScript, determines what it does, and decides if the syntax is valid. Each modern browser has a built-in syntax parser.
T
ternary operator
A ternary operator takes three parameters. The conditional operator is considered a ternary operator given there are
three parameters, the test followed by a ? followed by the true return value followed by a : followed by the false return value. test ? true : false; See the Math and JavaScript YouTube playlist for valuable information on JavaScript mathematical operators.
this
this is a keyword variable that is created for every execution context. For function statements or expressions at the global level, this points to window. Within objects, this points to {}, the object. BUT, this points to window when you create a function within a function within an object. So....let self = this; is used as the first line within a function within an object so self can be used and you're sure self always points to the object. let c = {
name: "the c object",
log: function(){
let self = this;
self.name = "the updated c object";
console.log(self);
let setname = function(newname){
self.name = newname;
}
setname("Updated again! The c object!);
console.log(self);
}
}
transpiled languages
"Transpiled" means to convert the syntax of one programming language to another. ex: TypeScript --> JavaScript
www.typescriptlang.org.
truthy
In JavaScript, a truthy value is a value that is technically not true but considered so when forced into a Boolean expression that returns only true or false.
Examples include:
if("lisa"); // Conditional expressions return only true or false. This expression will return true.
if(2000); // Strings and numbers are not technically true, but rather, truthy. This expression will return true.
See also falsy.
typeof operator
The typeof operator returns a string that tells you what type of primitive or object you are working with. let a = 3;
console.log(typeof a); // returns a string with the answer, "number"
a = "Lisa";
console.log(typeof a); // returns a string with the answer, "string"
console.log(typeof undefined); //returns "undefined"
console.log(typeof null); // returns "object" :( - BUG!
U
unary operator
A unary operator takes one parameter (such as !) See the Math and JavaScript YouTube playlist for valuable information on JavaScript mathematical operators.
undefined vs. not defined
The JavaScript keyword of undefined means the variable exists but is not yet assigned a value.
not defined means the variable does not exist at all and throws this message in the console: "Uncaught reference error"
(So never set a variable to undefined as that is very hard to debug if the code isn't working as planned!)
underscore.js
underscore.js is a JavaScript library of functional programming code : 100 functions in an annotated source code with great documentation! <script src ="underscore.js"></script>
Put this right before the <script> tag to your js file.
Vanilla JavaScript is a term used to describe pure JavaScript that does not rely or use any libraries such as jQuery
or React.js.
var
var is a JavaScript keyword used to create a new variable. The var keyword has wider scope than let and therefore less reliable.
Modern code uses let and const almost exclusively.
variable
A variable is a container for storing information. A variable can store a single value (often called a "primitive" such as a single string, number, or Boolean true/false value), array, object, or function.
Variables are declared with the let, older var, or const keywords. In the case of const the variable's value doesn't change, it's "constant."
Where the variable lives -- in what execution context? (which is how the variables relate to one another in memory)
W
whitespace
Whitespace refers to invisible characters that create literal "space" in your written code: carriage returns, tabs, spaces. Whitespace is valuable for making your code easier to read which in turn, cuts down on errors. // this is a comment to illustrate whitespace
function xyz() { // use whitespace to indent the statements and clearly place the closing } on its own line
//statements go here
}