YDKJS — Up & Going
This blog post series will aim to summarise the most important bits and pieces from the great You Don’t Know JS series by Kyle Simpson. The remarks and examples are all his and I’m mainly summarising them here for learning purposes — if it helps you to learn too and understand JavaScript a bit better, awesome!
We’re diving in by looking at the learnings from the first book — Up & Going.
A primer on what JavaScript is and isn’t
JavaScript is a compiled language. It is often assumed that JavaScript is interpreted, meaning that its translation of commands is happening line by line (similar to Python), but this is wrong. While JavaScript is processed each time it’s run, there is actually the JS engine that compiles the program and then immediately runs the compiled code. This fact will become more important later on, but for know take it for granted and don’t forget it.
Overview of basic JavaScript Concepts & Terminology
This section will run through some important terminology that you encounter in a language like JavaScript. While the concepts themselves are certainly found in other languages, the examples and explanations refer to JavaScript.
Statements
A statement might look like the following:
let a = b * 2;- a and b are variables
- 2 is a literal value
- = and the * are called operators
Statements can collectively make up a program. Statements are made up of expressions.
Expressions
An expression is a reference to a variable or value, or a set of variables or values.
let a = b * 2 // has 4 expressions- 2 is a literal value expression
- b a variable expression
- b*2 an arithmetic expression and also an expression statement
- a = b*2 is an assignment expression
Operators
These are the most common operators in JavaScript
- Assignment → = as in a = 2
- Math → +, -, *, /
- Compound Assignment → +=, -=, *=, /=
- Increment/ Decrement → ++ or —
- Object Property Access → obj.a or person.age
- Equality → ==, !=, ===, !==
- Comparison → <, >, ≤, ≥
- Logical → &&, ||
Values and Types
JavaScript has the following built-in types for primitive values
- number
- string → indicated by either “ “ or ‘ ‘
- boolean (true or false)
Other types include
- arrays
- objects
- functions
Converting between Types — Coercion
If you convert between types, you use a concept called Coercion. You may need to switch between types regularly to perform some operations. We generally differentiate between two different ways of coercion:
- Using a method like Number() or toString() is explicit coercion
- If you compare values using the == operator, JavaScript will convert them in order to perform the operation, i.e. “99.99” == 99.99 — this is called implicit coercion
Variables
JavaScript uses dynamic typing or weak typing, without the need for type enforcement (You can use JavaScript with types if you use something like Flow or even opt for TypeScript, but in its simplest form JavaScript uses dynamic typing).
The primary purpose of variables is to manage program state. The state tracks the changes to values while the programming is running and therefore allows you to make changes to your program.
Another often used way for variables is to declare constants (usually at the top of your program) that do not change and simply hold a value. You tend to use “CAPITALS” for these. ES6 furthermore introduced const which means you can not reassign your variables to furthermore support the concept of constants. The other new variable declaration is let, which can in turn be reassigned.
Blocks
Blocks are a series of statements that go together logically. You usually wrap blocks in curly braces {}. Blocks are commonly used with conditional statements or loops, but aren’t limited to these.
Conditionals
We use conditionals to test decisions and decide when to do something.
- If/Else statements → If clause need a condition that either returns true or false and will thus run a block of logic. The else clause will run if “if” is not true
if(age > 18) {console.log(“You old enough to drive”);} else {console.log(“You need to have a few more birthdays until you’re old enough to drive”);}
- Switch statements → can be used as a shorthand for a lot of if/else statements
- Ternary Operator → (is this condition true) ? then do this : else do this instead
Loops
A loop contains the test condition as well as a block, each time the block executes, we perform an iteration of the loop.
There are a number of different loops:
- While loop → repeats a block of statements until a condition no longer holds true
while (age < 18) {console.log(“I am still not an adult”);}
- Do … While loop → tests the conditional after the first iteration
- For loop → Good if you only want to run the loop for a specific amount of time. Less prone to infinite loops.
for (let i = 0; i ≤ 9; i++) {console.log(i);}// will output 0 1 2 3 4 5 6 7 8 9
Functions
Functions divide your code into reusable pieces that you can use anywhere in your program without repeating yourself.
For example:
function sayName() {console.log(“My name is Sibylle”);}
You can call the function by using it like this sayName() in your program. It will output “My name is Sibylle”
Functions can also use parameters you can pass in:
function sayName(name) {console.log(“My name is ” + name);}
You can call this function by passing in your name like this sayName(“Marcus”). It will output “My name is Marcus”.
Functions make your code much cleaner and organise it into logical pieces. Even if you only end up using the function once, it will be worth dividing its logic up for clarity and make it easier for other developers to read your code.
Scope
In JavaScript every function gets its own scope (lexical scope to be precise). Scope is just a collection of variables as well as rules for how these variables are accessed by name. Only code inside that function can access that function’s scoped variables.
Scope can also be nested in another scope. Code in the innermost scope can access all variables, whereas the outer scope can access the variables in the more inner scopes.
But there’s so much more to scope that we won’t go into more detail here and instead focus on Scope in its own blog post, based on the amazing Scope & Closures — the second book in Kyle Simpson’s amazing You don’t Know JS series.
Some closing remarks
While reading the book, I also encountered some great comments Kyle has made, that I find worth re-iterating:
- Code is every bit as much, if not more, for the developer as for the compiler
- The choices you make about how to write a program matter not only to you but to your other team members and even to your future self.
Resources
- You Don’t Know JS — Up & Going by Kyle Simpson, available for free to read on Github
If you enjoyed reading this summary blog posts, leave some claps and check out some of my previous posts:
