JavaScript Fundamentals Part 2

Last year, I continued studying on Fundamentals of Javascript in the Odin Project Web Development 101. I decided to start off the New Year by doing a review of what I had studied a month ago.

I did the first JavaScript “Test Yourself” questions in this blog post.

These are the second JavaScript “test yourself” questions here and my answers below.

  • What are the seven data types of javascript?
  1. Number
  2. String
  3. Boolean
  4. Null
  5. Undefined
  6. Object
  7. Symbol
  • Which data type is NOT primitive?

Object.
This is because objects store collections of data and more complex entities.
Whereas, numbers, strings, booleans, null, undefined, and symbol are represented directly. Also, those data types cannot be changed (although, the variables they may be stored in can change).

  • What is the difference between single, double, and backtick quotes for strings?

Single and double quotes are the same. But they need to be used consistently, not mixed – ‘Hi’ or “Hi”
not “Hi’

Backtick quotes are extended functionality quotes. They allow us to embed variables and expressions into a string using  backticks:
stringtext ${variable} stringtext `

  • Which type of quote lets you embed variables/expressions into a string?

Backticks.

  • How do you embed variables/expressions into a string?

Using the dollar sign and { } brackets together.
The variable or expression would be written within the curly brackets.

  • How do you escape characters in a string?

​​​​​You can escape characters, like a  single, double, or backtick quote with a backslash before them \’ \” \`

  • What is the difference between slice/substring/substr?

These are three ways to extract part of a string.
The parameters are different in each:

  1. slice(start, end)
  2. substring(start, end)
  3. substr(start, length)

Slice extracts part of a string and returns the extracted part in a new sting.
Substring is similar to slice. Substr is different because you choose the length of the string you want to get, rather than the end point of the original string.

  • What are methods?

A method is a bit of functionality that is built into the language. They are properties which contain a function. So, slice(), substring(), and substr() are methods.
Also, indexOf() and search() are methods.

  • What are the three logical operators and what do they stand for?

&& AND

|| OR

! NOT

  • What are the comparison operators?

> greater than
< less than
>= greater than or equals
<= less than or equals
== equality check
!= not equals

  • What is nesting?

When we put something inside something else.
In JavaScript, we can nest if statements within each other. For example,
if (condition) {
xyz } else if (condition) {
zyx } else {
abc }

  • What are truthy and falsy values?

A value that evaluates as true in a Boolean context is truthy.
A value that evaluates as false in a Boolean context is falsy.

  • What are the falsy values in Javascript?
  1. false
  2. undefined
  3. null
  4. 0
  5. NaN
  • What is the syntax for an if/else if/else conditional?

if (condition) {
xyz } else if (condition) {
zyx } else {
abc }

  • What is the syntax for a switch statement?

switch (expression) {
case choice 1:
run this code
break;
case choice 2:
run this code
break;
default:
actually, just run this code
}

  • What is the syntax for a ternary operator?

(condition) ? run this code : run this code instead;

  • What is the relationship between null and undefined?

Null is a value. It means “nothing, empty, no value”.
Whereas, Undefined means there is a variable but “value has not been assigned”.

If you test equality:
null == undefined would be true
null === undefined would be false

This is because with strict equality they need to be the same type to return true. Null is an object, but undefined is a type of value itself.

  • What are conditionals?

Conditionals are statements which execute a block of code is certain conditions are true.
Conditional statements include:

  1. if
  2. else
  3. else if
  4. switch

 

Advertisements

JavaScript Fundamentals Part 1

I started working on the Fundamentals of Javascript in the Odin Project Web Development 101.

These are the first “test yourself” questions here and my answers below.

  • How do you declare a variable?

You write “let”, “const”, or “var” followed by the name of the variable you want to create.

  • What are three different ways to declare a variable?

You can use “let”, “const”, or “var”.

  • Which one should you use when?

“Let” is the currently accepted way to declare a new variable. You should use it for any new variable, except constant (unchanging) variables, these can be declared with “const”.
“Var” is the older way of declaring variables. There are reasons for not using it because of it’s behaviour, but it is still seen in older scripts.

  • What are the rules for naming variables?
  1. Use letters, digits, $ or _
  2. First character cannot be a digit
  3. They are case sensitive – use camelCase
  4. Do not use non-English letters
  5. There are reserved words (e.g. let, class, return, function)
  6. Define the variable before using it
  7. Make names concise but descriptive and logical
  • What are operators, operands, and operations?

Operators – they define the operation to be performed between two operands.

Operands – the things operated on (like numbers)

Operations – when we perform an action between two numbers or variables (like division, addition, incrementation)

  • What is concatenation and what happens when you add numbers and strings together?

Concatenation is when two things get added together as a string. Like, “My” “3rd” “Dessert” when added would become “My3rdDesert”.

If you add numbers and strings together they will concatenate into a string. Like, “2” “Apples” would be “2Apples”.

  • What are the different type of operators in JavaScript?

+ Addition
– Subtraction
* Multiplication
/ Division
% Modulus
++ Increment
— Decrement
= Assignment
/= Division assignment
+= Addition assignment
-= Subtraction assignment
*= Multiplication assignment

** Exponentiation

=== Strict Equality
!== Strict Non-Equality
< Less than
> Greater than
<= Less than or equal to
>= Greater than or equal to

Rarely used bitwise operators:
& AND
| OR
^ XOR
~ NOT
<< LEFT SHIFT
>> RIGHTSHIFT
>>> ZERO-FILL RIGHT SHIFT

  • What is the difference between == and ===?

== is equality.
=== is strict equality.
e.g. let x = “123”;
let y = new Number(123);

x == y is true.
x === y is not true.
Equality is just the same value. But strict equality needs to be the same value and the same type (x is a number, y is a number object).

  • What are operator precedence values?

Similar to high school math – PEDMAS (parenthesis, exponents, multiplication, division, addition, subtraction). These are calculated in JavaScript in order of precedence. The operators are also included in this precedence list.

  • What are the increment/decrement operators?

Increment and decrement take the value and then change it. Increment adds 1 to the value. Decrement minuses 1 from the value.

  • What is the difference between prefixing and post-fixing them?

Prefix – returns new value:
If you put the increment/decrement operator first (prefix) it will perform the action of incrementing/decrementing and then returns the new value to be used right away.

Postfix – returns old value:
If you put the increment/decrement operator second (post-fix) it will return the old value first, then increment/decrement the value.

  • What are assignment operators?

Assignment operators assign a value to a variable.

They are also able to change the value while assigning it.
E.g.,
n *= 3+5 is short for n = n *  (3+5)

The assignment operators have the same precedence as a normal assignment operator, so they run after most other calculations are already done.

  • What is the “Unary +” Operator?

Unary operator acts on a single operand to operate.

For example, x = +x;

If you had let a = 10 then console.log(-a) it would show “-10”.

Whereas, in a binary operation like x + y there are two operands. This means the “+” acts as addition and concatenates them.

 

Google Homepage Clone

I built my first ever project following with the Odin Project syllabus:

I used HTML and CSS to re-create the Google homepage. The project focuses on arranging the page visually and not actually building in any functionality (so the links don’t go anywhere and the search box doesn’t work).

It was much, much more difficult than I expected.

I also used the command line and Git and GitHub the whole time, so you can see all of my commits. I tried to copy the rules for making commits and writing commit messages.

I kept using a lot of trial and error and I still feel like I don’t quite understand all the display and position attributes fully and their behavior sometimes confused me.

It was extremely fun but extremely challenging.

It is live here.

How much would a coding Bootcamp really cost in Japan?

I was wondering how much financial commitment is really involved in joining a coding bootcamp.

A coding bootcamp typically involves not working and studying full-time for 9-12 weeks to devote all your time to learning programming.

There are two big coding bootcamps that opened in Japan over the past two years:

  1. Le Wagon
  2. Code Chrysalis

I am not seeking to assess their contents and benefits here, just the money matters of studying full-time in Tokyo, Japan.

Note: All numbers below are based upon publicly available information at the time of writing and current exchange rates.

Tuition Fees

Le Wagon Code Chrysalis
Tuition ¥790,000 ¥1,030,000
US Dollars $7,031 $9,167
British Pound Sterling £5,372.00 £7,004.00

The Le Wagon course is 9 weeks, whereas the Code Chrysalis course is 12 weeks. So, their weekly tuition is actually pretty similar:

Le Wagon Code Chrysalis
Weekly Tuition ¥87,778 ¥85,833

How much money would I actually need, though?

If we assume you have a rent of 70,000 yen and bills of 10,000 yen and put aside 4000 yen per day for travel and expenses:

Le Wagon Code Chrysalis
Living Expenses ¥252,000 ¥336,000
Rent ¥175,000 ¥210,000
Bills ¥25,000 ¥30,000
Total Expenses ¥452,000 ¥576,000
Grand Total ¥1,242,000 ¥1,606,000
US Dollars $11,054 $14,293
British Pound Sterling £8,445.60 £10,920.80

And, if you do get a job immediately after graduation, it will still be one more month before you receive your first months wages. So, you will need to keep aside at least two months living expenses.

That would make the grand total:

Le Wagon Code Chrysalis
Grand Total ¥1,642,000 ¥2,006,000
In US Dollars $14,614 $17,853
British Pound Sterling £11,165.60 £13,640.80

I think it is not possible to work during the bootcamps as their are so intensive and need your full time and focus in order to succeed during them.

I’d say that’s a pretty big financial commitment. Comparatively, a year of university study tuition fees can be up to £9,250 in the U.K.

Is it possible for me?

I definitely can’t answer that – it depends on how much you have in savings, how much passive-income you make and many other factors.

However, Code Chrysalis note on their website that you can discuss financing options with them, though.

Is it worth it?

Another question I can’t answer. I did these calculations purely out of curiosity.
There are a lot of YouTube videos, Quora questions, and reddit threads online talking about whether bootcamps are worth it or not.

Git and GitHub

I studied a bit about Git and GitHub recently by following the track on Odin and watching Le Wagon’s Git and GitHub movie.

Yesterday, I created a repository on GitHub.

Then I cloned it on my local machine.

I used the command line to start tracking that repository with Git on my machine, then I created new files in the local repository.

I made a README.md file. Then I added it to the staging area. Then committed the file with a short message about what I did.

I repeated this process with a hello-world.txt file.

Then I pushed my changes to GitHub.

You can see the repository here.

It was a very simple thing but actually implementing what I had learned about Git, GitHub and the command line and seeing it come up on GitHub felt like a proud moment for me last night.

JavaScript for Beginners

I watched the JavaScript for beginners Le Wagon workshop on YouTube over the past two days.

ScreenShot of YouTube in one window and Evernote in the other
Image © Rebeccode

I watched it at lunch over two days and now I’m reviewing it to write up my key notes.

I did a little bit of JavaScript on FreeCodeCamp a few years ago, managed to make a rock, paper, scissors game. Then promptly forgot everything I’d ever learned about JavaScript.

This time around after seeing someone else using it and explaining it, I feel more confident. Also, I lost exactly how he was doing things part-way through the video (around the time that he did the second exercise of filtering names starting with a B and counting the letters in the string)

The recommended reading from this lecture is JavaScript – The Good Parts.

They say because it shows you best practices for writing JavaScript and explains it clearly.

Le Wagon

I went abroad for two weeks during August. Upon returning I caught a bad cold and was recovering. So August has flown by without much progress in my programming and coding journey.

However, on my lunch breaks at work in August I have been following a list of pre-requisites for coding bootcamp, Le Wagon.

Le Wagon is a coding school founded in France in 2013. It recently came to Tokyo in 2016 and has opened in Kyoto this year.

They run a full-time 9 week course to take you from being a beginner to a junior full-stack developer.

In June I attended one of their beginner workshops for UI design and watched one of their Demo Days. I was impressed with their way of explaining things clearly and concisely and also a friendly, open atmosphere.

They have some things you should do before applying or starting the course.

Le Wagon recommends:

  1. Study a list of pre-requisite lectures.
  2. Do the pre-requisite readings and videos.
  3. Complete the Ruby track on Codecademy.

I thought this would be a good way to learn some foundational knowledge for my own development, whether or not I would ever have a chance to join their bootcamp.