developernaomi

[developernaomi]

Objects Javascript Summary

You have already learned that JavaScript variables are containers for data values. Objects are variables too. But objects can contain many values.

Example of what an object looks like:

const address = { street: { line1: '11 Broadway', line2: '2nd Floor' }, city: 'New York', state: 'NY', zipCode: '10004'. "The Country is": "United States of America" };

Things to remember about objects:

Remember to use a comma after every object. " , "

You can have an object in an object like with street { }.

to access an object in a line we would do the following;

address.state // => which would return a value of 'New York'

But what if we wanted to access '11 Broadway' ??

address.street.line1. // => Targeting each object before line1

But what if we wanted to access the string "The Country is"? We would need a thing called Bracket Notations eg.

address["The Country is"] // => By adding the brackets we can target it properly

Another reason we would use Brackets if is we want to access an object that doesn't have a value like street above. Look at the following code and after it will show you how you access the first cars type:

let cars = [

{"colour": "purple", "type": "minivan", "registration": new Date('2021-01-03'), "capacity": 7 },

{ "colour": "red", "type": "station wagon", "registration": new Date('2022-03-03'), "capacity": 5} ]

console.log(cars[0].type);

[developernaomi]

Array Examples

const cats = ["Milo", "Otis", "Garfield"];

✓ Add a name destructively to the end of array:

function destructivelyAppendCat(name){ cats.push(name = 'Ralph'); };

✓ Add a name destructively to the start of array:

function destructivelyPrependCat(name){ cats.unshift(name = 'Bob'); };

✓ Remove last cat destructively of array:

function destructivelyRemoveLastCat(){ cats.pop(); };

✓ Remove first cat destructively of array:

function destructivelyRemoveFirstCat(){ cats.shift(); };

✓ Appends a cat to the cats array and returns a new array, leaving the cats array unchanged

function appendCat(){ let name_1 = ["Milo", "Otis", "Garfield", "Broom"]; return name_1; };

✓ Prepends a cat to the cats array and returns a new array, leaving the cats array unchanged

function prependCat(){ let name_2 = ["Arnold", "Milo", "Otis", "Garfield"]; return name_2; };

✓ Removes the last cat in the cats array and returns a new array, leaving the cats array unchanged - Non Destructive

function removeLastCat(){ let kittens = cats.slice(0, cats.length-1); return kittens; };

✓ Removes the first cat from the cats array and returns a new array, leaving the cats array unchanged - Non Destructive

function removeFirstCat (){ let kittens = cats.slice(1); return kittens; };

[developernaomi]

Adding / Removing / Replacing Elements in an Array

Adding to an Array

We'll start with the JavaScript methods we can use to add elements to an array: .push() and .unshift(), The difference is that the .push() method adds elements to the end of an Array and .unshift() adds them to the beginning of the array.

eg. const superheroes = ['Catwoman', 'She-Hulk', 'Jessica Jones']; superheroes.push('Wonder Woman'); // => 4 superheroes; // => ["Catwoman", "She-Hulk", "Jessica Jones", "Wonder Woman"]

const cities = ['New York', 'San Francisco']; cities.unshift('Boston', 'Chicago'); // => 3 cities; // => ["Boston", "Chicago", "New York", "San Francisco"]

OR

Spread Operator The spread operator, which looks like an ellipsis: ..., allows us to "spread out" the elements of an existing Array into a new Array, creating a new copy in a nondestructive way. eg.

const coolCities = ['New York', 'San Francisco']; const allCities = ['Los Angeles', ...coolCities]; allCities; // => ["Los Angeles", "New York", "San Francisco"]

Remove Elements from an Array

We have .pop() and .shift() to remove elements from an Array.

The .pop() method removes the last element in an Array:

const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']; days.pop(); // => "Sun" days; // => ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]

The .shift() method removes the first element in an Array:

const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']; days.shift(); // => "Mon" days; // => [Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]

The last method which removes in a nondestructive way (without mutating the original Array) is .slice(). Slice also allows you to remove one or two arguments. eg.

const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']; days.slice(2, 5); // => ["Wed", "Thu", "Fri"]

the first is the index where the slice should begin and the second is the index before which it should end.

The last one to note is .splice() which removes, adds or replaces elements in a destructive manner. It can do over 3+ arguments the formula is below:

array.splice(start, deleteCount, item1, item2, ...)

eg if you want to remove: const menu = ['Jalapeno Poppers', 'Cheeseburger', 'Fish and Chips', 'French Fries', 'Onion Rings']; menu.splice(1, 2, 'Veggie Burger', 'House Salad', 'Teriyaki Tofu'); // => ["Cheeseburger", "Fish and Chips"] menu; // => ["Jalapeno Poppers", "Veggie Burger", "House Salad", "Teriyaki Tofu", "French Fries", "Onion Rings"]

or eg if you want to insert:

const books = ['Bleak House', 'David Copperfield', 'Our Mutual Friend']; books.splice(2, 0, 'Great Expectations', 'Oliver Twist'); // => [] books; // => ["Bleak House", "David Copperfield", "Great Expectations", "Oliver Twist", "Our Mutual Friend"]

[developernaomi]

Functions that calls information in an Array

When creating a function that calls information on an Array first you need to declare what the Array is eg:

const drivers = ['Sally', 'Bob', 'Freddy', 'Claudia'];

then we need to create a function that will select the first two drivers in the array. Note all Arrays are started with zero-indexed which means they start 0, 1 , 2 , 3, in the case above.

const returnFirstTwoDrivers = function (drivers) { return drivers.slice(0,2); };

or function returnFirstTwoDrivers = drivers { return drivers.slice(0,2); };

now by using drivers(value).slice and selecting 0,2;

or if we wanted to choose the last two drivers we would;

const returnLastTwoDrivers = function (drivers) { return drivers.slice(2,5); };

[developernaomi]

First-Class Functions

Functions in JavaScript are first-class objects, which means they can be treated like any other object: they can be assigned to a variable, passed as values to other functions, returned as the value from another function. Basically they are functions within functions using return function to help classify them.

Example exercise

What we are trying to achieve: 1) index receivesAFunction(callback) receives a function and calls it:

function receivesAFunction(callbackFunction) { return callbackFunction(); }

This is a function that receives a function and calls it

2) index returnsANamedFunction() "before all" hook:

function returnsANamedFunction(fn){ return function name(){ return "Hello function my name is"; }; }

Because the returned function has the name of name this is what makes this a Named function with a return

3) index returnsAnAnonymousFunction() "before all" hook: working:

function returnsAnAnonymousFunction(){ return function (){ return "My name is Judge Judy";} ; }

Because the second function in returnsAnAnonymousFunction is completely empty but we have a return with a value this makes the function anonymous

github exercise with working:

[developernaomi]

Arrow Functions

The arrow syntax builds on the syntax of the function expression and provides a shorthand way to declare functions that doesn't require using the function keyword. In fact, in cases where the function body consists of one line of code, we can define it in a single line:

const add = (parameter1, parameter2) => parameter1 + parameter2;

below are some examples of arrow functions and how you can use them for mathematical equations

const divide = (x = 2000, y = 100) => x / y;

What was the aim: ✓ has a function expression called divide ✓ divide divides 2000 by 100

const square = (x = 2) => x * x;

What was the aim: ✓ has an arrow function called square ✓ square arrow function takes one parameter and multiplies it times itself

const add = (a = 3, b = 4) => a + b;

What was the aim: ✓ has an arrow function called add ✓ add arrow function takes two parameters and adds them together

link to my gitHub for this exercise:

https://github.com/nscole/phase-1-arrow-functions.git

[developernaomi]

Java Script Events

Say you want to move a block around your page using Javascript but you don’t know how? well now i’ll show you how.

in your html you want to create a div with the id of dodger.

<div id="game">             <div id="dodger" style="bottom: 0px; left: 180px;"></div>   </div>

In your css you want to define what the div “game is and also define “dodger” #dodger {   background-color: white;   height: 20px;   position: absolute;   width: 40px;}

#game {   background-color: #111;   height: 400px;   margin: 0 auto;   overflow: hidden;   position: relative;   text-align: center;   width: 400px;}

Now whats important to note is the height you have declared your #game and also the height and width you have declared your #dodger. These will be important for your next steps.

Next we have to create our code in a .js file.

1. We first need to grab it and save a reference to it in a variable.

const dodger = document.getElementById("dodger");

2. Now we'll build our moveDodgerLeft() function, adding a check on the current position of the dodger:

function moveDodgerLeft( ) {  const leftNumbers = dodger.style.left.replace("px", "");    const left = parseInt(leftNumbers, 10);    if (left > 0) {        dodger.style.left = `${left - 1}px`;    }}

now what is important to note about this is we are saying if left is greater ( > ) than 0 we can continue to move it left but once it reaches 0 it will stop. Also if you look at the information in the back ticks it is saying we can move our dodger -1 px every time we touch our left arrow key.

3. Last step is create an addEventListener.

document.addEventListener("keydown", function(e) {    if (e.key === "ArrowLeft") {        moveDodgerLeft();    }});

now you when you open up in the browser you will be able to move the dodger left.

Next we want to move the dodger right;

Note: It may seem logical that you would use the dodger's style.right property to move the dodger right, but that won't work. The reason is that changing the style.right property doesn't change the style.left property, which means we'd have conflicting information about where the dodger should be on the screen. JavaScript solves this problem by giving precedence to style.left. In other words, once the user presses the left arrow key for the first time and the value of style.left is changed, any subsequent changes to style.right will be ignored.

so we go straight to step two as we have already declared the reference and variable;

2. 

function moveDodgerRight () {    const leftNumbers = dodger.style.left.replace("px", "");    const left = parseInt(leftNumbers, 10);    if (left < 360) {        dodger.style.left = `${left + 1}px`;    }}

Notice how in this we have kept something in the left value because of note above. But whats change is the if line information. in this we are saying if it is less than (<) 360 we can continue to move right. To work out the 360 we have to take into consideration what we have written in out css document. Above we stated out #dodger is 40px wide by 20 px height and if the #game is 400px wide then we know that we have 360px of increments we can work with.

If you look at the information in the back ticks $ it is saying we can move our dodger +1 px every time we touch our left arrow key.

lastly the following is the code for move up and move down;

function moveDodgerUp () {    const bottomNumbers = dodger.style.bottom.replace("px", "");    const bottom = parseInt(bottomNumbers, 10);

 if (bottom < 380) {        dodger.style.bottom = `${bottom + 1}px`;    }} document.addEventListener("keydown", function(e){       if (e.key === "ArrowUp") {        moveDodgerUp();    }});

function moveDodgerDown() {    const bottomNumbers = dodger.style.bottom.replace("px", "");    const bottom = parseInt(bottomNumbers, 10);

   if (bottom > 0) {        dodger.style.bottom = `${bottom - 1}px`;    }} document.addEventListener("keydown", function(e){       if (e.key === "ArrowDown") {        moveDodgerDown();    }});

see if you can understand what information has changed in comparison to the other two functions and event listener. 

if you want to see this in full on my github account here is the link;

https://github.com/nscole/phase-0-javascript-events-acting-on-events-lab.git