Javascript Notes

For loops

A for loop lets us repeat code a fixed number of times.

Array.push()

Adds one or more elements to the end of an array and returns the new length of the array.

Why must we add JS script tag at bottom of html file?

Bc the JS needs to see html before rendering. If you put it before all html doesn't know what to add behavior to.

Another data type is the Boolean. Booleans may only be one of two values: true or false. They are basically little on-off switches, where true is "on" and false is "off." These two states are mutually exclusive.

Boolean values are never written with quotes. The strings "true" and "false" are not Boolean and have no special meaning in JavaScript.

What happens if I add CSS tag to bottom of html file like JS script tag?

CSS must go at the start to establish rules for the html to follow. If you put CSS at the end the html will render as is and then at the end learn of the CSS rules. Not good.

What is Inline JS?

Code written in the starting html tag

ELI5: what problem GraphQL solves? 1

Essentially it's middleware, it allows you to truncate requests. The following is a pretty good analogy.

You can nest arrays within other arrays, like below: [["Bulls", 23], ["White Sox", 45]]

This is also called a multi-dimensional array.

Image that breaksdown variables in JS

You can add data into this box

===

is equal to

!==

is not equal to

Does array.pop() pop it off the start or end of the array?

The end.

Does array.push() push it to the start or end of the array?

The end.

Prevent Object Mutation

Object.freeze

Inline JS

Inline JS has a lot of the downsides of Inline CSS. It's not very modular, it's difficult to debug and it's not good practice so try to avoid that.

In JavaScript, you can escape a quote from considering it as an end of string quote by placing a backslash (\) in front of the quote. var sampleStr = "Alan said, \"Peter is learning JavaScript\".";

= this: Alan said, "Peter is learning JavaScript".

Decimental numbers

Decimal numbers are sometimes referred to as floating point numbers or floats.

One way to think of a multi-dimensional array, is as an array of arrays. When you use brackets to access your array, the first set of brackets refers to the entries in the outer-most (the first level) array, and each additional pair of brackets refers to the next level of entries inside.

Example var arr = [ [1,2,3], [4,5,6], [7,8,9], [[10,11,12], 13, 14] ];

In order to get the last letter of a string, you can subtract one from the string's length.

For example, if var firstName = "Charles", you can get the value of the last letter of the string by using firstName[firstName.length - 1].

Parameters are variables that act as placeholders for the values that are to be input to a function when it is called. When a function is defined, it is typically defined along with one or more parameters. The actual values that are input (or "passed") into a function when it is called are known as arguments.

Here is a function with two parameters, param1 and param2: function testFun(param1, param2) { console.log(param1, param2); }

Strict equality (===) is the counterpart to the equality operator (==). However, unlike the equality operator, which attempts to convert both values being compared to a common type, the strict equality operator does not perform a type conversion.

If the values being compared have different types, they are considered unequal, and the strict equality operator will return false. 3 === 3 // true 3 === '3' // false

Arrow functions

In JavaScript, we often don't need to name our functions, especially when passing a function as an argument to another function. Instead, we create inline functions. We don't need to name these functions because we do not reuse them anywhere else.

NOTE:

It is common for developers to use uppercase variable identifiers for immutable values and lowercase or camelCase for mutable values (objects and arrays). In a later challenge you will see an example of a lowercase variable identifier being used for an array.

// comments out code in ....

Javascript

Remember that arrays have zero-based indexing, which means the last index of the array is length - 1

Just a reminder

ELIF - What is the DOM? pt 2

Let's assume you know what HTML is. Well, your browser doesn't. It also doesn't understand CSS, or a lot of other things. What your browser does is have an interpreter (called a layout engine) that transforms that HTML into a model called the DOM--which your browser does understand. Generally, you (or maybe just me, idk) will use Javascript after the document has loaded to manipulate the document, or the elements in it. When we say 'the document has loaded' (literally, the document.onload or window.onload events in javascript)--that means that the html has been interpreted and loaded into the dom at this point.

Array.pop()

Removes the last element of the array and returns it

Math.random();

Returns a random number between 0 and 1

typeof(variable)

Returns the type of a variable

What does DOM do?

The DOM converts html into a tree model.

ELIF - What is the DOM?

The Document Object Model (DOM) is a representation of an HTML website's properties. By using DOM, an HTML page can be modified (elements of it can be removed, changed, or new elements can be added).

What is a concern about Server Side Rendering(SSR)?

The SEO benefits are, for a lot of use cases, the primary concern.

There are many comparison operators in JavaScript. All of these operators return a boolean true or false value.

The most basic operator is the equality operator ==. The equality operator compares two values and returns true if they're equivalent or false if they are not. Note that equality is different from assignment (=), which assigns the value on the right of the operator to a variable on the left.

In JavaScript, scope refers to the visibility of variables. Variables which are defined outside of a function block have Global scope. This means, they can be seen everywhere in your JavaScript code.

Variables which are used without the var keyword are automatically created in the global scope. This can create unintended consequences elsewhere in your code or when running a function again. You should always declare your variables with var.

What is const?

When you declare a variable with const it creates a read-only value, meaning you can use the value stored in it, but you can not reassign the value.

What is difference between == and ===?

While "==" checks only for equality, "===" checks for equality as well as the type.

Loops offer a quick and easy way to do something repeatedly.

You can think of a loop as a computerized version of the game where you tell someone to take X steps in one direction, then Y steps in another. For example, the idea "Go five steps to the east" could be expressed this way as a loop:

Variables which are declared within a function, as well as the function parameters have local scope. That means, they are only visible within that function. Here is a function myTest with a local variable called loc.

function myTest() { var loc = "foo"; console.log(loc); } myTest(); // logs "foo" console.log(loc); // loc is not defined

We can pass values into a function with arguments. You can use a return statement to send a value back out of a function.

function plusThree(num) { return num + 3; } var answer = plusThree(5); // 8

>=

greater than or equal to

Internal JavaScript

in the html file within the script tags

external javascript

javascript code written separately in order to be brought into a document

<=

less than or equal to

Math.floor();

rounds a number down

parseInt() method

takes a 'String' argument and returns its integer value

In JavaScript, you can determine the type of a variable or a value with the typeof operator, as follows:

typeof 3 // returns 'number' typeof '3' // returns 'string'

An easy way to append data to the end of an array is via the push() function. .push() takes one or more parameters and "pushes" them onto the end of the array.

var arr1 = [1,2,3]; arr1.push(4); // arr1 is now [1,2,3,4]

Not only can you shift elements off of the beginning of an array, you can also unshift elements to the beginning of an array i.e. add elements in front of the array. .unshift() works exactly like .push(), but instead of adding the element at the end of the array, unshift() adds the element at the beginning of the array.

var ourArray = ["Stimpson", "J", "cat"]; ourArray.shift(); // ourArray now equals ["J", "cat"] ourArray.unshift("Happy"); // ourArray now equals ["Happy", "J", "cat"]

pop() always removes the last element of an array. What if you want to remove the first? That's where .shift() comes in. It works just like .pop(), except it removes the first element instead of the last.

var ourArray = ["Stimpson", "J", ["cat"]]; var removedFromOurArray = ourArray.shift(); // removedFromOurArray now equals "Stimpson" and ourArray now equals ["J", ["cat"]].

Unlike strings, the entries of arrays are mutable and can be changed freely.

var ourArray = [50,40,30]; ourArray[0] = 15; // equals [15,40,30]

It is possible to have both local and global variables with the same name. When you do this, the local variable takes precedence over the global variable. In this example:

var someVar = "Hat"; function myFun() { var someVar = "Head"; return someVar; } The function myFun will return "Head" because the local version of the variable is present.

A function can include the return statement but it does not have to. In the case that the function doesn't have a return statement, when you call it, the function processes the inner code but the returned value is undefined.

var sum = 0; function addSum(num) { sum = sum + num; } addSum(3); // sum will be modified but returned value is undefined

Another way to change the data in an array is with the .pop() function.

var threeArr = [1, 4, 6]; var oneDown = threeArr.pop(); console.log(oneDown); // Returns 6 console.log(threeArr); // Returns [1, 4]

In JavaScript, String values are immutable,

which means that they cannot be altered once created.