It's been a week since I posted about learning to code as a side business and, the more I get into the world of code, the more I like it. It's not that I'm good at it - I'd say I'm fairly ok so far - but more because I am learning so much at a very fast pace. I knew I had to give my all to this project (that is rapidly becoming a life project) in terms of hours spent learning, hours spent watching videos and reading a lot, but mostly because if I want to get proficient at this fast, I have to give it my all and a little bit more.
I said I would keep a timeline of my learning, both to keep track of how much time I've invested on it, and also to later on write "how long does it take to..." kind of articles, so:
| Concept | Time spent |
|---|---|
| Researching Howto | 8 hours |
| Downloading programs | 2 |
| Learning Javascript | 19 hours (so far) |
I could say 19 hours are enough to keep in a bootcamp I researched about, or at least that's what I thought after I finished the 6 homeworks of the prep course and read all the files, solved all the puzzles and watched all the videos... but when I signed up for the test that would allow me to begin the bootcamp, I realized I was nowhere ready. Out of 16 questions/problems I was only able to answer (or code) 2; I began to get frustrated because apparently the homeworks gave the applicant the tools to solve the test but, as it turns out and after I asked around in the slack, the average time spent studying by an average student in order to pass the test, is 120 hours.
So what I did was sign up to the test on September 24 and right now I am preparing for it, watching YT videos, solving more problems and so on.
By the way, do you know any kind of channel or website where I can learn to apply everything I know about Javascript and perhaps keep learning? So far I've found several channels, the best of them is "Whatsdev" on Youtube but maybe you can recommend me some others.
So, out of my progress, I've compiled a "How to Guide to learning JS basics", and I want to share it with you in case anyone is interested:
JS #3: Conditionals & Control Flow (if Statements, Logical Operators)
If statements are used to check condition, if it is true, it performs a specific action, if itās not, well, it doesnāt.
Basic example:
var num = 20; // (the variable is called num.)
if (num > 0) {
console.log(āThe number is a positiveā) // console.log means to print it.
}
Whatever is inside the parenthesis has to evaluate to true for the statement to print.
var num = 20;
if (num > 0) {
console.log(āThe number is a positiveā)
console.log(āRandom statementā) // Will also print because the if is true.
}
Then we can add if statements after that one, but if the first statement is true, then the loop stops there, if the first one is not true, then it keeps checking the next statements.
var num = -4;
if (num > 0) {
console.log(āThe number is a positiveā)
console.log(āRandom statementā)
}
if (num < 0) {
console.log(āThe number is a negativeā)
}
But we can also write the same code in a cleaner way by not having the two if statements:
var num = 7;
if (num > 0) {
console.log(āThe number is a positiveā){
} else {
console.log(āThe number is a negativeā)
}
But what if the number is a 0? We have to add a statement for that, by combining the statements.
var num = 5;
if (num > 0) {
console.log(āThe number is a positiveā){
} else if (num < 0) {{
console.log(āThe number is a negativeā)
} else {
console.log(āThe number is a zeroā)
}
So, it keeps reading the code and the statements until the statement is true, if the number would be 0, it would keep reading it until the last statement.
Now we want to take this to the next level, to a more interactive way of coding.
If we use alert instead of console.log we get a pop-up with the result of the if statement, the code would look like this and it gives the user a more interactive way of browsing the website.
var num = 14;
if (num > 0) {
alert(āThe number is a positiveā){
} else if (num < 0) {{
alert(āThe number is a negativeā)
} else {
alert(āThe number is a zeroā)
}
Then, we can use the prompt tool to open up a box telling the user they have to enter a number so the code can run, after the user types the number, the pop-up alert will pop on the userās screen, basically the prompt gives you an input to the user:
var num = prompt(āEnter a number, please!ā);
if (num > 0) {
alert(āThe number is a positiveā){
} else if (num < 0) {{
alert(āThe number is a negativeā)
} else {
alert(āThe number is a zeroā)
}
var isRaining = prompt(āIs it raining?ā);
if (isRaining === āyesā) { // *
alert(āGo take an umbrella!ā);
} else {
alert(āItās ok. You donāt need anything.2)
}
In here, we are already giving the user answers depending on their input, and we can keep going and going adding if statements.
*Whenever you compound two things, you canāt use one equal sign but two or three.
In Javascript there are two equality operators, the == and the ===, Iāll know what they mean later on but for right now, Iām just using ===. Both are for comparisons or equality checking, one equal sign is for assigning values to a variable.
"" Logical Operators
&& (AND)
|| (OR)
! (NOT)
They are used to combine conditions. We want to be able to add many conditions to the statements so we can have more complex statements.
true && true =0 true
true && false == false
false && true == false
false && false == false
true || true == true
true || false == true
false || true == true
false || false == false
!true == false
!false == true
The next example will make it clear:
var name = āEricā;
var age = 32;
var collegeDegree = true;
Letās say Eric is looking for a job at Walmart, and the job requirements are that the applicant is over 25 and to have a college degree.
if (age >= 25 && collegeDegree === true) {
alert(āYou are eligible to apply for this job.ā)
} else {
alert(āYou are not eligible to apply to this jobā).
Javascript #4: For Loops
Loops
Loops are to avoid typing things manually way too many times.
In any kind of loop you have three statements:
Initializer - The starting point, where you want your loop to start.
Endpoint - The condition where your loop should end, for how long you want your loop to continue for.
Incrementor or decrementor - The loop continues up or down
Each statement is separated by a semicolon.
for (var i=0;i<=15; i++) { // This could also be written as i+=1
console.log(i);
}
Where i is the name of the variable.
Where <= also includes 15
This loop says, as long as i is less than or equal to 15, keep going.
The loops begins, and then it keeps reading from right to left, checking the result, then running the increment, then checking the condition to see if it still has to run. The loop keeps running until it reaches 15.
The incrementor works as follows:
What is actually happening in every loop is:
i = i +1 // i = 0 + 1 so then, i = 1 ||| Then i is still less than 15, so it runs again
i = i + 1 // i = 1 + 1 so then i = 2
i = i + 1 // i = 2 + 1 so then i = 3
i = i + 1 // i = 3 + 1 so then i = 4
And it keeps doing that until it reaches 15 by asking, is i >= to 15? If it is not, the loop stops.
We donāt really need to print i, it is just for my learning experience.
If I wanted to make the loop have different increments, it would look like this:
for (var exampleOfLoop= 5; exampleOfLoop <= 30exampleOfLoop += 5){
console.log(exampleOfLoop);
}
Check how I changed the ++ for a += because if we remember, the ++ adds only 1 to the starting point variable.
For another example of a working code we have:
We want to add the numbers from one to ten:
var total = 0; // This variable is out of the loop. This total is a collector.
for (var num = 1; num <= 11; num++){
total += num; // We are incrementing by num ( total = total + num )
}
Every single cycle or loop, we are going to add our current number to total, then at the end after it has added all the numbers from one to ten to total, we will print that:
console.log(āThe total is: ā + total); // After the loop
As another example, we can use names of anything:
var animals = [āDogā, āCatā, āBirdā];
for (var pets = 0; pets < 3; pets++){
console.log(animals[pets]);
}
What we did is not printing the index, but printing the names.
This code will only work for our animals array and it will only print the first 3 because our condition was pets < 3, but we can tweak the code so it logs all the array, no matter how long it is or how many indexes it has by:
var animals = [āDogā, āCatā, āBirdā];
for (var pets = 0; pets < animals.length; pets++){
console.log(animals[pets]);
That way we can add more animals and it will print every one of them. Thatās why dynamic lengths are so usefukl.
Now weāll learn how to loop through an object.
var data = {
name: āEricā
male: true
age: 32
}
for (var element in data) { // I use element, but you can call it anything you want.
console.log(element); // This goes through all of the properties.
}
This code would give the result:
name
male
age
Because the āelementā changes every time, it becomes every property, it gives you the three properties.
But if we also want the value and not just the property,
var data = {
name: āEricā
male: true
age: 32
}
for (var element in data) {
console.log(element, data[element]); // We use the brackets to access each value
}
If I wanted to access the data of only one of the properties, the code would look like this:
var data = {
name: āEricā
male: true
age: 32
}
console.log(data[āmaleā) // It goes with quotes, the properties are strings and when you call them, you need to put quotes.
Loops that go from top to bottom:
for (var num = 10 >= ; num--){
console.log(num);
{
Another example:
var total = 0;
for(var num = 100; num >=0; num--){
total += num; // total = total + num (The same but shortcut
}
console.log(total)
This is the loop version to access an object. Objects donāt have index or order, we access them by their properties. This way is easier than the index version but itās more common to use the indexed version.
Javascript #5: While Loops
For objects we use for loops.
You need an initializer, a condition (for when your loop should end), an incrementor (or decrementor, It is pretty much the same concept as for loops but the syntax is a little different.
Letās print numbers from 1 to 10:
We have the initializer outside the parentheses:
var num = 0 // The initializer
while (num < 10) { // The condition
console.log(num); // The call of result
num++; // The incrementor
}
Another useful example:
// The point of this code is to add num to sum
var sum = 0 // Where we store the addition of numbers (The final value
var num = 0 // (it could be i) = 0
while (num < 10) // While the value of
sum += num; // This is how we add num to sum
num++;
}
console.log(sum); // The result would be 45
My number starts at 0 (num) and it goes, āif num is less than 10, run everything inside the curly bracesā, so it add sum and num, then adds num++ (1), and it keeps reading the condition until it reaches 10, then the condition wonāt be true, so the loop stops.
How to loop through Arrrays with while loops
This is an array because [ stuff inside with commas ]
var Stuff = [āappleā, 3.2414, 999, true, false, undefined, [āappleā, āballā, ācatā], 3, 2, ālastā];
string numbers booleans another array
var randomStuff = [āappleā, 3.2414, 999, true, false, undefined, [āappleā, āballā, ācatā], 3, 2, ālastObjectā];
console.log(randomStuff)
We run the code and we get
[āapple,
3.414,
999,
true,
false,
undefined,
[āappleā, āballā, ācarā],
3,
2,
ālastObjectā ]
Now we want to loop through that, weāll do:
When we use i we mean index and it goes through all the items of the array
var randomStuff = [āappleā, 3.2414, 999, true, false, undefined, [āappleā, āballā, ācatā], 3, 2, ālastObjectā];
var x = 0;
while (x < randomStuff.length) // this makes it a dynamic length, no matter how many items the array has or if we change it, it will always go through all of them. IT means, as long as its less than randomStuff.length, we want to print the items in randomStuff.
console.log(x); // We will print what X is
x++; // We have in incrementer because we want X to go up
}
If we run this code, weāll get:
0
1
2
3
4
5
6
7
8
9
Because x is the beginning of the index and we have 10 items in the array, and the x++ ads one to that x, so we have the index printed out, but we actually want to loop through the array and print the items of the index, so we have to call the array items:
var randomStuff = [āappleā, 3.2414, 999, true, false, undefined, [āappleā, āballā, ācatā], 3, 2, ālastObjectā];
var x = 0;
while (x < randomStuff.length); {
console.log(randomStuff [x]; // we want to access the indexes to access each item in the array
x++;
}
If we run the code, the result would be:
apple
3.2414
9999
true
false
undefined
[āappleā, āballā, ācatā]
3
2
lastObject
We can also do a backwards loop using the same logic:
var otherStuff= [āappleā, 3.2414, 999, true, false, undefined, [āappleā, āballā, ācatā], 3, 2, ālastObjectā];
var num = otherStuff.length; // We are calling the index ānumā. We have ten items on this array, so otherStuff.length counts ten, and it makes the console log below use the num value of ten, but we donāt have an item indexed as 10, we have the last one as 9, because the list begins at 9, remember?
while (num >= 0); {
console.log(otherStuff [num];
num--; // Because we are going down
}
So that code above would give an undefined as the first item. What we have to do is use the length of the otherStuff array minus one:
var otherStuff= [āappleā, 3.2414, 999, true, false, undefined, [āappleā, āballā, ācatā], 3, 2, ālastObjectā];
var num = otherStuff.length -1;
while (num >= 0); {
console.log(otherStuff [num];
num--;
}
The last object is always one less than the length of the array. The ālastObjectā lives on the index of 9, not 10. In the example, the index 10 doesnāt exist, thatās why it is undefined.
Letās make one more example:
var cars = [ālamboā, ābmwā, āteslaā];
var num = 0
while (num < cars.length) { // As long as num is less than cars.length, run the console.log and then it logs lambo at first then it checks the ++ and adds one, so num hits one, so it would log bmw, then num hits 2 and it logs tesla, then num hits three and since 3 is more than the array length, the loop stops.If you donāt have an incrementer the condition will always be true.
console.log(cars[num]);
num++; // If we donāt add this line of code (itās easy to forget in while loops) we would always get lambo infinitely.
}
When to use the for loop and when to use the while loop
As a general rule of thumb, whenever you know how many times you want to loop for, you want to use for, whenever you donāt know how many times you want to loop or when to stop, you use a while loop.
Javascript #6: Functions
Letās talk about variables first. We use variables because we can use them several times, example:
var people = [ājoeā, ājohnā...āpeterā];
If we need to refer to this array we donāt have to keep writing this array, we just useā¦
console.log(people)
}
If we need to refer to a person in this array, weā¦
for (var person of people) {
console.log(person)
}
Functions store specific tasks, they work as variables but in a more complex way. Think of it as variables being nouns and functions being verbs.
Example of a function:
This the function definition:
function catGreeter() { // All the function logic goes inside this parentheses
console.log(āHey Catā You are cute!ā)
console.log (āMeowā!)
}
Then we invoke, execute, call or run the function.
catGreeter() // This is how we execute the function, calling it
Letās say we want to make a more personalized function
function specialGreeter(name) { // We can input in the function inside the parentheses using whatever (x, dog, y)
console.log(āHey ā + name + ā! You are cool.ā);
}
Then we have to call this function.
specialGreeter(āEricā)
Functions can also take multiple inputs or parameters:
function adder(a, b, c, d) { // We have 4 parameters
console.log(a + b + c + d)
}
We have four parameters (inputs), so we have to pass in four arguments so they match and the function runs.
adder(3, 2, 1, 4)
When you write a function they are called parameters but when we are passing or calling the function, they are called arguments. # of parameters = # of arguments.
Letās work with arrays now
We want the next function to loop through the animals and then print it out
function printerArray(arr) { // We can call it anything we want, in this case arr
for (var i = 0, i < arr.length; i++ ) // arr.length because we want to loop through however many items arr has)
console.log(arr[i]); // Goes through each element of arr and prints it out
}
}
We call the function by
printerArray([ācatā, ādogā, ācowā])
The function will print like this:
cat
dog
cow
About the console.log statement
We can also use return (itās cooler than console.log) to print the results.
function adder (num1, num2) {
return num1 + num2;
}
adder (2, 4)
Both console.log and return do the same thing in this function but when things get busy, the difference is noticeable.
We use return statements in functions because when we use it, the function is actually giving you an output. When we use console.log we call something that doesnāt really require an answer.
Everything is about input and output. A function takes an input and returns an output. If we do console.log itās because we are not outputing anything with a function, but we are actually just printing something.
In functions we use return
For another example of return
Letās do a function where we have a problem that takes in two parameters:
the first is an array, the second one is a number
function doesExist (nums, num) {
}
doesExist([1, 3, 5, 7], 2) // False, because 2 does not exist in the array
But if we use
doesExist([1, 3, 5, 7], 1) // True, because 1 does exist in the array
So now we give the function some logic
function doesExist (nums, num) {
for (var i = 0; i < nums.length; i++) { // nums.length because thatās the array
if (num === nums[i]) === num // if at any point one of the items in the array equals the num, letās return true;
}
}
return false; // Outside of the loop
}
doesExist([2, 2, 5, 7], 8) // We call the function, outside of the function
What youāre saying is, if at any given loop, the number equals the second parameter (num) then return true, and if the loop is done and it didnāt equal (num exist inside the array), then return false.