JavaScript 101: the basics

image 2

Just starting down the path of teaching yourself the basics of JavaScript? First of all,

tenor (7).gif
welcome to the dark side!

And secondly, you’ve come to the right place! This is the first in a series of supplementary explanations to the current iteration of Codecademy’s JavaScript courses. During my own pre-bootcamp self-teaching experience, I remember being extremely confused by the specificity of Codecademy and their sometimes frequently unclear explanations/instructions on each concept/exercise… and that was just when they were teaching ES5 syntax.

What is ES5, you ask?

“ES5” is web-dev shorthand for EcmaScript 2009– the version of JavaScript that was released in 2009 and is still universally understood by all standard browsers across the web. ES6 syntax (released in 2015) is slowly becoming the standard syntax to develop in, so Codecademy is leading their lessons in that syntax. ES6 is more syntactically succinct and easier to write, but, unfortunately for newbies, ES6 contains fewer words which makes it harder to learn without any of the pattern recognition you gain over time spent writing code.

For example, assuming you know nothing about JavaScript, could you make any sense of this line of code?

let cat = (x) => x ? console.log('purr') : console.log('hiss');

Probably not. Why? Because ES6 is hard to pick up without knowing any ES5. EcmaScript 2009 is much easier for humans to contextually interpret because it uses English words to make it readable. Once you can recognize the punctuation patterns of the syntax and they’re associated with intuitive, descriptive English words in your head, you’ll be able to understand code written in ES6.

In short, you have to go through this

tenor (9)

to be able to do this.

tenor (8)

So let’s get started, shall we?

Comments, Basic Data Types, & Logging to the Console

Comments

When you write a program, you may want to leave notes to yourself explaining what something does or that you still need to write a missing piece of your code. You would do this with something called a comment. Comments exist within the code but are functionally ignored by the computer reading the code.

There are two ways to put comments into your JS code:

// everything after the double slashes is a comment
/* this entire paragraph is a comment because it is bookended
by the slash-asterisk at the beginning and by the asterisk-slash 
at the end. You can make this paragraph pretty much as long as 
you want! Cool, huh? */

Basic Data Types

The basic data types are pretty intuitive once explained.

Strings are literal text surrounded by single OR double quotes.  Some examples:

'this is one way to do a string'
"this is another way to do a string"
"one thing that's nice about double quotes is you can use
apostrophes without getting an error" // note the apostrophe!
'but if you\'re really set on using apostrophes AND single quotes
to denote your strings, you can do that with a backslash.'
"this string will throw an error because the quotes do not match'

Numbers are the most intuitive data type and hardly need explanation. Examples:

5241 // this is a number
52.41 // this is also a number
5,241 /* this will give you an error (but '5,241' would not because
it will read as a string!) */
2 1/2 // don't even try fractions, ok? you'll give yourself a headache

Booleans are very straightforward, even if you’ve never heard of the word before. There are two types of boolean values: true and false. You type them out normally but do NOT surround them in quotation marks because they are not strings.

true // this is one type of boolean
false // this is the only other type of boolean
'false' // this is a string, not a boolean

tenor (11)

Logging to the Console

Console logging– whether it’s a value, a string, a number, a boolean, or the current result of a function you’ve written– is something you’ll get very used to. If you’re using Codecademy, the console is the right-most black screen that things are getting “printed” to when you hit the “Run” button. It allows you to visualize something in your code to make sure you’re writing it correctly.

The syntax for console logging is very simple:

console.log('this is how you console log a string');
console.log(5214); // this is how you console log a number
console.log(true); // this is how you print a boolean to the console

Note the use of semicolons at the end of each line of code. Also note that it is not necessary to end your comments in a semicolon. Semicolons are to writing in JavaScript what periods are to writing in English– get used to putting them at the end of entire JS statements, whether that’s declaring a variable, assigning a value, writing functions– all of which will be covered in my next post.

tenor (12)
Thanks for reading! 🤗

Questions, comments, and constructive/corrective feedback always appreciated.


One thought on “JavaScript 101: the basics

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s