Thursday, January 12, 2017

Eloquent Javascript Chapter 2 and 3 Exercises

I've been finding that Eloquent Javascript is a lot easier to understand and has more exercises to practice! I think my goal is to finish this book in its entirety, read through YDKJS for more guidelines, and then get started on the Harvard CS50X class online. 

1.
  • Looping a triangle
Write a loop that makes seven calls to console.log to output the following triangle:
#
##
###
####
#####
######
#######
It may be useful to know that you can find the length of a string by writing .length after it.
var abc = "abc";
console.log(abc.length);
// → 3
Most exercises contain a piece of code that you can modify to solve the exercise. Remember that you can click code blocks to edit them.

  • My Answer:
 for (var line = "#"; line.length < = 7; line += "#")
  console.log(line);
 
  • Explanation:  
- The For loop will run and add a "#" to the original line "#" until the line's length reaches 7 (less than 8)
- Then, we print the line to the console using console.log

 2.
  • FizzBuzz
Write a program that uses console.log to print all the numbers from 1 to 100, with two exceptions. For numbers divisible by 3, print "Fizz" instead of the number, and for numbers divisible by 5 (and not 3), print "Buzz" instead.
When you have that working, modify your program to print "FizzBuzz", for numbers that are divisible by both 3 and 5 (and still print "Fizz" or "Buzz" for numbers divisible by only one of those).
(This is actually an interview question that has been claimed to weed out a significant percentage of programmer candidates. So if you solved it, you’re now allowed to feel good about yourself.)

  • Correct Answer: 
 for (var n = 1; n <= 100; n++) {
  var output = "";
  if (n % 3 == 0)
    output += "Fizz";
  if (n % 5 == 0)
    output += "Buzz";
  console.log(output || n);
}
  •  Explanation:
- We need to loop a "for" that lists numbers starting from 1 to 100, adding 1 each time (n++)
- The output will be " " - a string like Fizz or Buzz
- If it is divisible by 3 with no remainder (if n% 3== 0), then it spits out "Fizz"
- If it is divisible by 5 with no remainder (if n%5== 0), then it spits out "Buzz"
- The console.log will put the output on the screen or the number ("n") if it is not a string ("Fizz", "Buzz", "Fizzbuzz")
- "Fizzbuzz" doesn't have to be added separatedly, because this for loop will check to see if n % 5 ==0 as well and add "Buzz" to the output if that is the case!

I found these links to be very helpful:
 http://ditam.github.io/posts/fizzbuzz/
and
 http://learnjswith.me/javascript-fizzbuzz/

  •   Another possible answer: 
I prefer switch statements to "if/else" and "for" loops, so I wrote one in switch mode


function switchFizzBuzz () {
for (var n=1 n<=100;n++) {
switch(true) {
    case n%3==0 && n%5==0: //both cases have to be true, and this runs first to check both cases
    console.log("Fizzbuzz");  //prints "Fizzbuzz"
    break;

    case n%3==0: 
    console.log("Fizz");
    break;

    case n%5==0:
   console.log("Buzz"); 
   break;

   default: 
   console.log(n); //this prints the number if none of the above cases are true
   break; 
}
}
}

3.
  • Chess Board
Write a program that creates a string that represents an 8×8 grid, using newline characters to separate lines. At each position of the grid there is either a space or a “#” character. The characters should form a chess board.
Passing this string to console.log should show something like this:
 # # # #
# # # #
 # # # #
# # # #
 # # # #
# # # #
 # # # #
# # # #
When you have a program that generates this pattern, define a variable size = 8 and change the program so that it works for any size, outputting a grid of the given width and height.

  • My Answer:
var size= 8
var board= " "

for (var y = 0; y < size; y++) {
  for (var x= 0; x < size; x++) {
    if ((x+y) % 2 == 0)
      board += " ";
    else
      board += "#";
  }
  board += "\n";
}
console.log(board);

Explanations:
- There are two variables here:
1. How many lines there are (the size): 8 down and 8 across
2. Whether the board says " " (a blank) or "#" (a hash). We start out with a blank " " string and add more onto it
- We need two "for" loops to run, one inside of another:
1. The first for loop will run until it gets to a total of 8 lines
2. the second for loop, located inside of the first one, will determine if there will be a "blank" or a "#"
- Inside of the second for loop, we can use an if/else to print more to the board as blank or # by seeing if it's an even space (row 1, space 1 is even and prints " " vs. row 1, space 2 is odd and prints "#")
- This keeps printing until x of "size" is reached
- Outside of the second for loop and inside of the first loop, we need to print a new line after 8 total characters (there are 4 "#" and 4 " " per line), we do this by "board +="\n"
- Finally, we print the board by console.log(board)
- We can also reset the variable size to equal any value other than 8 (perhaps, 10 lines of 10 characters (5 # and 5 blank)

Chapter 3 Notes:

Variable- Local v. Global- Some readings:
http://javascriptissexy.com/javascript-variable-scope-and-hoisting-explained/
https://github.com/getify/You-Dont-Know-JS/blob/master/scope%20%26%20closures/ch1.md
https://www.sitepoint.com/demystifying-javascript-variable-scope-hoisting/

Define LOCAL variables with var variablenamehere =
otherwise, it will OVERWRITE the global variable that was pre-defined

if you use var  x = blank rather than x = blank, x will remain local to that function

Example:

var x = "outside";

var f1 = function() {
  var x = "inside f1";
};
f1();
console.log(x);
// → outside

var f2 = function() {
  x = "inside f2";
};
f2();
console.log(x);
// → inside f2


  • Chapter 3, Problem 3: Bean Counting

Bean counting

You can get the Nth character, or letter, from a string by writing"string".charAt(N), similar to how you get its length with "s".length. The returned value will be a string containing only one character (for example, "b"). The first character has position zero, which causes the last one to be found at position string.length - 1. In other words, a two-character string has length 2, and its characters have positions 0 and 1.
Write a function countBs that takes a string as its only argument and returns a number that indicates how many uppercase “B” characters are in the string.
Next, write a function called countChar that behaves like countBs, except it takes a second argument that indicates the character that is to be counted (rather than counting only uppercase “B” characters). Rewrite countBs to make use of this new function.

This is the first answer:

function countBs(str){
  var num = 0;

  for(var i = 0; i < str.length; i += 1){
    if(str[i] === "B"){
      num += 1;
    }
  }
  return num;
}

Explanation:
We create the function countBs.
Inside, we set the first variable to 0 (first letter)
Then, we run a for loop (we start a 0 and keep looping until the end of the string)
While the for loop runs, if the string matches "B", we count 1
Then, we return the number of "B"s that the function found

This is the final answer:
function countBs(str){
  function countChar(str, "B");
}

function countChar(str, letter){
  var num = 0;

  for (var i = 0; i < str.length; i +=1){
    if (str[i] === letter) {
      num += 1;
    }
  }
  return num;
}

Explanation:
Next, we have to create a function that's similar to countBs, but we can pass in any letter for the function to count.
It looks the same, except we set the parameters to (str, letter) and inside, if === letter (that we pass in)
to run function countBs, we then run function countChar with "B" passed into the letter so that it knows to count "B"s.







No comments:

Post a Comment