YDKJS — Up & Going

Sibylle Sehl
Aug 17, 2018 · 6 min read
Photo by Fabian Grohs on Unsplash

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.

Photo by Priscilla Du Preez on Unsplash

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

If you enjoyed reading this summary blog posts, leave some claps and check out some of my previous posts:

JavaScript Deep Dive

A collection of articles and posts on JavaScript diving…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store