Return to Level1Techs.com

Devember - Learning JavaScript

devember2k18

#21

Ah well there you go, best practice stuff.
So using Let instead of Const would be good in your first example. Only problem you may find using let, is you declare a variable in one part of your code, and you cannot access it in another.
Say if you do something dodgy like declare a variable in a IF block. Just move the deceleration to the start of the code, and assign it when you need to.


#22

Day 4

Doing if…else statements. The logic is simple but getting used to the syntax of the code is the tricky bit.

let sale = true;
sale = false;
if(sale) {
console.log(‘Time to buy!’);
} else {
console.log(“Time to wait for a sale.”);
}

Looking at comparison operators now. I don’t like === and !==. I would prefer just == and !=. Why is it like this?

//Should I eat?
let hungerLevel = 7;
if (hungerLevel > 7){
console.log(“Time to eat!”);
} else {
console.log(“I can eat later!”);
}

Next onto logical operators, this reminds me of when I studied electronics in school; looking at logic gates.

//Should I sleep?
let mood = ‘sleepy’;
let tirednessLevel = 6;
if (mood === “sleepy” && tirednessLevel > 8){
console.log(“time to sleep”);
} else {
console.log(“not bed time yet”);
}

Truthy and falsy; funny words! Doing short-circuit evaluations and it’s hurting my head a little trying to translate the long way of doing it into the short way:

let tool = ‘marker’;

let writingUtensil = tool || “pen”;

console.log(The ${writingUtensil} is mightier than the sword.);

I am starting to get it, I think the course just does a poor job of explaining what’s going on.

I like the look of ternary operators; anything to squeeze typing down to a minimum and keep things looking clean!

let isLocked = false;
isLocked ? console.log(‘You will need a key to open the door.’) : console.log(‘You will not need a key to open the door.’);

let isCorrect = true;
isCorrect ? console.log(‘Correct!’) : console.log(‘Incorrect!’);

let favoritePhrase = ‘Love That!’;
favoritePhrase === ‘Love That!’ ? console.log(‘I love that!’) : console.log(“I don’t love that!”);

Next, else if statements, for more complex conditionals.

let season = “summer”;

if (season === “spring”) {
console.log(“It’s spring! The trees are budding!”);
} else if(season === “winter”) {
console.log(“It’s winter! Everything is covered in snow.”);
} else if(season === “fall”) {
console.log(“It’s fall! Leaves are falling!”);
} else if(season === “summer”) {
console.log(“It’s sunny and warm because it’s summer!”);
} else {
console.log(“Invalid season.”);
}

Finally I end today’s session on Switch statements.

let athleteFinalPosition = ‘first place’;

switch (athleteFinalPosition) {
case “first place”:
console.log(“You get the gold medal!”)
break;
case “second place”:
console.log(“You get the silver medal!”)
break;
case “third place”:
console.log(“You get the bronze medal!”)
break;
default:
console.log(“No medal awarded.”)
break;
}

I found today quite tough compared to the previous three. I’m not feeling so confident I can remember everything as I have done thus far.


#23

Me again… I did a quick search. == means is basically equal to, and === means is totally exactly equal to.
Javascript is weakly typed, meaning you put numbers, strings and true/false values into vars and compare them all, and javascript isn’t angry about it. If two vars contain a word and a number and you compare/work with both, it will work with it. Similar to boolean values, a 0 and a 1 are commonly how a false and true value are stored respectively. Sometimes a -1 is used to store a false value.
So, if you try and console.log(1 == true), you should get a true since they sort of mean the same thing. However if you do a console.log( 1 === true), you should get a false, because they are not exactly the same thing.
I guess it is a best practice thing, like above. Most of the time it wont cause issues, until it does.

Good work so far!


#24

So is == is the same as truthy? Would that make != falsey?


#25

there’s also the shorthand if/else.

const result = expression ? if-true-condition : else-condition

#26

That’s what I used with the locked door, correct answer and favorite phrase code. I really like concise code.


#27

Some argue against it because it is less explicit with what it’s doing. So for small things I would say its fine but once you really throw some big logic in there I’d recommend to stick with the traditional If/else.


#28

I don’t understand what the problem with it is. Just readability?


#29

I had never heard of truthy or falsy… Javascript developers are a special bunch :slight_smile:

Not exactly the same thing. Truthy just means things that are the same as a boolean value of true. Pretty much any non zero variable you can compare.
Where is falsy is any variable that is a zero or empty.

Using the == you could compare pretty much any non-zero value (truthy) to true, and that would be a true statement. However if you used === it wouldn’t be a true statement.

Does that make sense?


#30

Sorry I am still confused.


#31

Yeah, it is confusing. Don’t worry about it! It will make sense down the track.
In the mean time just use == and !=, it will be fine. If you get bugs in your code you can’t figure out, it might be due to some of this stuff.


#32

Day 5

Woo functions! This brings back vague memories of computing class… 14 years ago. I feel old saying that.

Starts off nice and simple:

function getReminder() {
console.log(“Water the plants.”);
}

function greetInSpanish() {
console.log(“Buenas Tardes.”);
}

Then has me calling functions:

function sayThanks() {
console.log(“Thank you for your purchase! We appreciate your business.”);
}
sayThanks();
sayThanks();
sayThanks();

Parameters and arguments next:

function sayThanks(name) {
console.log('Thank you for your purchase ’ + name + ‘! We appreciate your business.’);
}

sayThanks(“Cole”);

Default parameters:

function makeShoppingList(item1 = “milk”, item2 = “bread”, item3 = “eggs”){
console.log(Remember to buy ${item1});
console.log(Remember to buy ${item2});
console.log(Remember to buy ${item3});
}

Return! Not just a fancy name for the big enter key.

function monitorCount(rows, columns) {
return rows * columns;
}

const numOfMonitors = monitorCount(5, 4);

console.log(numOfMonitors);

Helper functions:

function monitorCount(rows, columns) {
return rows * columns;
};

function costOfMonitors(rows, columns){
return monitorCount(rows, columns) * 200;
};

const totalCost = costOfMonitors(5, 4);

console.log(totalCost);

Function expressions:

const plantNeedsWater = function(day) {
if(day === “Wednesday”){
return true;
}
else {
return false;
}
};

console.log(plantNeedsWater(“Tuesday”));

I’m not sure I enjoyed function expressions as much as function declarations. Found it a bit trickier to get my head around.

Next arrow functions, like function expressions but minimally different?

const plantNeedsWater = (day) => {
if (day === ‘Wednesday’) {
return true;
} else {
return false;
}
};

Finish the day up with concise body arrow functions, turning this:

const plantNeedsWater = (day) => {
return day === ‘Wednesday’ ? true : false;
};

Into this:

const plantNeedsWater = day => day === ‘Wednesday’ ? true : false;

I think I found today a little bit easier than yesterday. I hope that’s the material sinking in and not just me feeling false confidence. I think it helps that I studied maths along with physics in the recent past so this feels tangentially familiar.


#33

Day 6

Scope is being covered. This is where I assume the difference between var and let come in.

Blocks are the code between curly braces. The variable skyscraper is in the block but the variable city is not; making it a global variable.

const city = “New York City”;
function logCitySkyline() {
let skyscraper = “Empire State Building”;
return 'The stars over the ’ + skyscraper + ’ in ’ + city;
}

console.log(logCitySkyline());

Using global variables in a block of code:

const satellite = “The Moon”;
const galaxy = “The Milky Way”;
const stars = “North Star”;

function callMyNightSky () {
return 'Night Sky: ’ + satellite + ', ’ + stars + ', and ’ + galaxy;
};

console.log(callMyNightSky());

Demonstrating scope further; Reference error occurs when trying to console.log the value of lightWaves from outside the function. Works fine when calling the function:

function logVisibleLightWaves() {
const lightWaves = “Moonlight”
console.log(lightWaves);
};

logVisibleLightWaves();

console.log(lightWaves);

Scope pollution. Changing the value of global variables from inside a function as an example:

const satellite = ‘The Moon’;
const galaxy = ‘The Milky Way’;
let stars = ‘North Star’;

const callMyNightSky = () => {
stars = “Sirius”;
return 'Night Sky: ’ + satellite + ', ’ + stars + ', ’ + galaxy;
};

console.log(callMyNightSky());
console.log(stars);

Logging the value of lightWaves from inside and outside a block of code to note the differences in output, demonstrating scope:

const logVisibleLightWaves = () => {
let lightWaves = ‘Moonlight’;
let region = ‘The Arctic’;
// Add if statement here:
if (region === “The Arctic”) {
let lightWaves = “Northern Lights”;
console.log(lightWaves);
};
console.log(lightWaves);
};

logVisibleLightWaves();

Today was super easy. I feel like a relatively simple concept was dragged over many tasks when it didn’t really need that many. It was a good lesson though and thinking about scope has me pondering more on the future of where my knowledge will go and structuring longer pieces of code.


#34

Didn’t have time last night to report; catching up now.

Day 7

Arrays: Making lists and storing data. Here’s my first array, it’s very big:

const hobbies = [“Video games”, “Reading”, “Cooking”];
console.log(hobbies);

Arrays start at 0. I remember reading about this in memes or something on the internet. Accessing elements like so:

const famousSayings = [‘Fortune favors the brave.’, ‘A joke is a very serious thing.’, ‘Where there is love there is life.’];
const listItem = famousSayings[0];
console.log(listItem);
console.log(famousSayings[2]);
console.log(famousSayings[3]);

Trying to access an index beyond the last element returns undefined.

Updating elements:

let groceryList = [‘bread’, ‘tomatoes’, ‘milk’];
groceryList[1] = “avocados”;
console.log(groceryList);

Let arrays vs const arrays:

let condiments = [‘Ketchup’, ‘Mustard’, ‘Soy Sauce’, ‘Sriracha’];

const utensils = [‘Fork’, ‘Knife’, ‘Chopsticks’, ‘Spork’];

condiments[0] = “Mayo”;
console.log(condiments);

condiments = [“Mayo”];
console.log(condiments);

utensils[3] = “Spoon”;
console.log(utensils);

.length works for finding the number of elements in an array in the same way it finds characters in a string:

const objectives = [‘Learn a new languages’, ‘Read 52 books’, ‘Run a marathon’];
console.log(objectives.length);

Using .push() to make arrays even bigger!

const chores = [‘wash dishes’, ‘do laundry’, ‘take out trash’];
chores.push(“cook dinner”, “go shopping”);
console.log(chores);

And .pop() to knock an element off the end.

const chores = [‘wash dishes’, ‘do laundry’, ‘take out trash’, ‘cook dinner’, ‘mop floor’];
chores.pop();
console.log(chores);

More array methods:

const groceryList = [‘orange juice’, ‘bananas’, ‘coffee beans’, ‘brown rice’, ‘pasta’, ‘coconut oil’, ‘plantains’];

groceryList.shift();
console.log(groceryList);

groceryList.unshift(‘popcorn’);
console.log(groceryList);

console.log(groceryList.slice(1, 4));
console.log(groceryList);

const pastaIndex = groceryList.indexOf(“pasta”);
console.log(pastaIndex);

Using functions with arrays:

const concept = [‘arrays’, ‘can’, ‘be’, ‘mutated’];

function changeArr(arr){
arr[3] = ‘MUTATED’;
}

changeArr(concept);
console.log(concept);

function removeElement(newArr){
newArr.pop();
};

removeElement(concept);
console.log(concept);

Finally, making a nested array!

const numberClusters = [[1, 2], [3, 4], [5, 6]];
const target = numberClusters[2][1];

I enjoyed this one. Learning about arrays was good, but combining my lessons on functions felt like I was making some good progress.


#35

Here’s the code for how I’m connecting to my database. Thought you’d like to see it since you’re learning JS.

// connect to database
let db
let conn
(db = async () => {
  try {
    conn = await mariadb.createConnection(dburi)
  } catch (err) {
    console.log('not connected due to error: %s', err)
  }
  if (conn) {
    console.log('database connected! connection id is %s', conn.threadId)
  }
})()

And here’s another fun one. A high-order function which takes a function as a parameter and returns a chained method to it. In this case, it is a .catch because I am using promises.

// Catch Errors HOF
// returns new function with chained .catch method
const catchErrors = (fn) => (req, res, next) => fn(req, res, next).catch(next)

The reason why this is useful, is because if I encounter an error, I will pass the object to next which will be picked up by a singular error handler. This allows me to centralize my error handling on my server and not have to have the same boilerplate error handling in every single route listener I have.

Picked that one up courtesy of Wes Bos. check the guy out he’s hella smart.


#36

Day 8

Loops today. Not the cereal, but the iterative functions.

Let’s repeat a task to gain an appreciation for how loops will help us in the future:

const vacationSpots = [“India”, “China”, “Japan”];
console.log(vacationSpots[0]);
console.log(vacationSpots[1]);
console.log(vacationSpots[2]);

Lucky it only had me do 3 elements in that array.

Using for to count from 5 to 10:

for (let counter = 5; counter < 11; counter++){
console.log(counter);
};

Very concise!

Now to count down from 3 to 0:

for (let counter = 3; counter >= 0; counter–){
console.log(counter)
};

Looping through arrays:

const vacationSpots = [‘Bali’, ‘Paris’, ‘Tulum’];
for (let i = 0; i < vacationSpots.length; i++){
console.log("I would love to visit " + vacationSpots[i]);
};

Nested loops. Not sure I completely understood the syntax on this one but the program says I got it right?

const bobsFollowers = [“Alph”, “Beth”, “Casey”, “Dean”];
const tinasFollowers = [“Casey”, “Dean”, “Edgar”];
const mutualFollowers = [];

for (let i = 0; i < bobsFollowers.length; i++){
for (let j = 0; j < tinasFollowers.length; j++){
if (bobsFollowers[i] === tinasFollowers[j]){
mutualFollowers.push(bobsFollowers[i]);
}
}
}

The while loop. A wild while loop appears!

const cards = [‘diamond’, ‘spade’, ‘heart’, ‘club’];
let currentCard;

while (currentCard != “spade”){
currentCard = cards[Math.floor(Math.random() * 4)];
console.log(currentCard);
};

Do…while.

let cupsOfSugarNeeded = 10;
let cupsAdded = 0;

do {
cupsAdded++
console.log("Added cup of sugar number " + cupsAdded);
} while (cupsAdded < cupsOfSugarNeeded);

Break keyword:

const rapperArray = [“Lil’ Kim”, “Jay-Z”, “Notorious B.I.G.”, “Tupac”];

for (let i = 0; i < rapperArray.length; i++){
console.log(rapperArray[i]);
if (rapperArray[i] === “Notorious B.I.G.”){
break;
}
}
console.log(“And if you don’t know, now you know.”);

I didn’t enjoy that last activity. All these functions, arrays and loops are too much for my head right now. I hope my head feels more fresh tomorrow and I can get a hang of this. My confidence is wavering a bit tonight.


#37

I can kind of understand some of that but I do’t know try or catch yet.


#38

Don’t forget to indent! (Apologies if you do and it didn’t translate into the post)

const bobsFollowers = [“Alph”, “Beth”, “Casey”, “Dean”];
const tinasFollowers = [“Casey”, “Dean”, “Edgar”];
const mutualFollowers = [];

for (let i = 0; i < bobsFollowers.length; i++){
	for (let j = 0; j < tinasFollowers.length; j++){
		if (bobsFollowers[i] === tinasFollowers[j]){
			mutualFollowers.push(bobsFollowers[i]);
		}
	}
}

Also great work for going at it every day :clap:t3::clap:t3:


#39

Yeah it indents automatically when I type it, just doesn’t translate in the copy - paste.


#40

It would if you used spaces, instead of tabs.

_which is why spaces are superior