FrontEnd Masters: Introduction to Programming

FrontEnd Masters: Introduction to Programming (with Kyle Simpson)

This post originally appeared on Medium on February 6th.

So I’ve made true to my word and finished completing my second course on FrontEnd Masters in as many weeks. My first post is here and will get you up to speed.

So I lied in my previous post, and I do apologize. You see, I was going to make the next course that I reviewed Introduction to Web Development.

Upon viewing a decent amount of that course, I concluded that whatever I wrote would be too similar to my review of Introduction to jQuery and JavaScript. Many of the concepts have already been covered in depth by Karl Swedberg.

Since I’ve been struggling lately with higher level concepts like directed graph and binary tree, I figured that it would be beneficial to go through Introduction to Programming (with Kyle Simpson) instead of Introduction to Web Development. Kyle is the well-known author of the You Don’t Know JS book series.

Here’s what I learned from this course. I wish that I had watched this instead of some of the free stuff out there. Here’s the primer that I wish I had a couple of years ago!

Source code is a set of special instructions that tells the computer what tasks to perform. Code is typically saved into a text file, but JavaScript lets you type code directly into a developer console.

Computer language aka syntax is the rules for valid format and combinations of instructions.

A statement is a group of words, numbers, and operators that perform a particular task.

Computers need assistance to interpret instructions. Whether interpreted or compiled, the source code is for developers and not the computer.

Interpreters or compilers translates what you write into something the computer can understand.

Kyle stated that it’s paramount to comprehend what you are writing. This simple but profound piece of advice is something I wish I had earlier in my coding career.

Variables are identifiers and symbolic representations of value.

Statements are made up of one or more expressions (a reference to a variable or value(s) combined with operators. A general expression that stands alone is also called an expression statement.

( ) illustrates the expression. Executing a program is also known as running the program.

To interpret is to translate commands from top to bottom, line by line, every time the program is run. In other languages (like Objective-C, Java, Haskell, Scala, and more), translation is done ahead of time.

The JavaScript engine compiles on the fly and can immediately run code.
Compiled languages try to understand the entire program.

JavaScript behaves more like a compiled language because it stops running the program when a line is invalid. Mistakes can be caught early in a program this way, which is speedy and efficient.

Google’s Chrome browser has an invaluable tool called developer tools. I implore to you use it if you’re reading this and aren’t a programmer.

You can access Google’s developer tools by right clicking in an existing browser window and scrolling down to select Inspect. Then the developer tool will be revealed, and you can test JavaScript directly into the console.

Shift-enter allows you to multiline comment. Command-R restarts your environment so that you can start fresh. Node can be run on the command line, and that’s another way to test your code.

Kyle thinks that you should use Chrome’s developer tools so you can get more practice first, before using the command line in this way.

Using console.log( ) will allow you to log messages to the console. This is an easy way to print messages. Object property access is indicated by . (dot or period)

Objects are values that hold other values at specifically named locations called properties.

Operators are assignments as in a = 2. Arithmetic operators allow you to add, subtract, multiply, and divide. Compound assignments are compound operators that combine a math operation with an assignment.

Examples: a += 2 is the same as a = a +2. You can increment and decrement like this: ++ (increment) and — — (decrement).

Readability regarding code and programs is entirely subjective. There’s no uniform definition.

Other operators that are very important include: equality operators. Examples: == (loose equals), === (strict equals), != (loose does not equal), !== (strict does not equal)

Comparison operators include: < (less than), > (greater than), < = (less than or loose equals), and > = (greater than or loose equals).

Logical operators include: && (and), and || (or).

Values and types mean that numbers will be treated differently from strings. Strings can be accessed character by character and numbers are used for math.

Strings are contained within quote marks, and Kyle states that it doesn’t matter which ones you use, although his personal preference is double quotes (“ “).

As long as you keep the consistency of quotes within your programs, you should be okay.

“42” and 42 will return the same value in the console, but if it appears in black, that will indicate that it was treated as a string. Red indicates that it was dealt with as a number. Subtle yet important distinction.

In JavaScript, variables don’t have types. The value is what indicates the type. Static programming languages like C will let you declare a value as a variable, as in int. JavaScript is considered a dynamic language.

Commented code is like leaving notes for yourself and others, and won’t affect the program itself. // double slashes or /* with the closing */ are the two ways you can comment out code.

This grays out your comments, and it’s wise to make them relevant and only as long as necessary.

Kyle goes back to variables after his video about commented code. He states that it’s not a good idea to assign a value to a variable that hasn’t been declared yet.

Every variable should be declared before you use it. You formally declare a variable using var in ES5 or const, let, or var in ES6.

You can also declare an identifier with a function. Example: function a ( ) {}.

If and while loops are where you can use blocks of code. Conditionals aka decisions can be expressed in quite a few ways in our programs. The if statement can be answered with a yes or no (true or false) in JavaScript.

Falsey values in JavaScript include: 0, -0, NaN (not a number), “ “ (empty string), false, null, and undefined. Kyle says that once you memorize this list that it’s very easy to determine true or false.

Void is an operator that’s rarely used. No matter what you pass to void, it will always return as undefined.

Other forms of conditionals include switch (which can be used as shorthand for a series of if…else statements. Loops use a conditional to determine if the loop should keep going or stop.

A for loop has three parts. The first is an initialization expression, the second the conditional (or test) expression, and finally, the update clause. In a for loop, you can use all, some, or none of them.

A function is used to define reusable pieces of code for repetitive tasks. Functions can also take arguments (aka parameters) and return a value back, but these are optional.

Scope is paramount in how you access your code in JavaScript and Kyle provides many detailed examples throughout the videos.

His teaching style is relaxed and easy to follow. He has you go through many exercises in the console to reinforce crucial points in this tutorial.

Regarding ECMA6 (the latest version of JavaScript), Kyle talks about compilers that are used to transpile code that has ES6 features to ES5 (that’s still widely used).

Babel is the most common ES6 transpiler. The standard in JavaScript now is in writing ES6 whenever possible.

All in all, I found this video immensely helpful in reinforcing basic concepts. Kyle is purposeful with minimal jargon and is friendly and patient throughout the course.

He also mentions that there’s an ES6 tutorial on FrontEnd Masters, and I am potentially considering that course for next week’s review!


Queen of Swords, ENTP

Leave a Comment

Your email address will not be published. Required fields are marked *