Week 1: Variables, Conditionals & Functions

In my first week, I cover the absolute basics with Codecademy

Posted 14th June 2019 • Development • #javascript #learning

One of the things that put me off taking up JavaScript was all this stuff about normal JavaScript vs ES6. I wasn't sure where to start, and it seemed like even being able to use ES6 in production involved a lot of polyfills and build process configuration to get things working. I haven't reached that stage yet, so jury is still out - but I have started looking at both in tandem.

Interactive Learning with Codecademy

To start off I've been using Codecademy's Introduction To JavaScript course. It's had a really good balance of explaining how things work in normal JavaScript, then explaining what ES6 is, how it came to be and why people like it. I can definitely see the upsides. The other advantage of Codecademy is that it's interactive, so you can practice in the same window while you learn instead of just reading. That also means that you can just code rather than worrying about setting up a local build process to get ES6 working, which is why I haven't had a chance to try it yet.

So most of this week has been running through the basics to all coding languages; variables, conditionals & functions. It's been useful to learn about why you can use functions before you declare them (declared functions go into memory when the browser reads the code), and when you can't (function expressions, which get processed immediately).

Declaring functions

I've already stumbled into a side effect of JavaScript being so old and that's being able to declare a function in 6 different ways. You used to just use function myFunctionName(){}; but there are now a plethora more of them. Below are all the ways I'm aware of (so far) to declare functions:

// Declare a function in Vanilla JavaScript:
function functionName(){};

// ES6 arrow syntax
const functionName = () => {};

// Using ES6 to assign a function to a variable
const functionName = function(arguments){};

// There's also 'concise body' which removes most of the rest of the notation

// ZERO PARAMETERS: empty brackets
const functionName = () => {};

// ONE PARAMETER: doesn't need brackets
const functionName = paramOne => {};

// TWO PARAMETERS: arguments go in brackets
const functionName = (paramOne, paramTwo) => {};

// SINGLE LINE BLOCK: implicit return
const sumNumbers = number => number + number;

// MULTI-LINE BLOCK: requires return statement
const sumNumbers = number => {
  const sum = number + number;
  return sum;
};

// Using concise body, remove the parentheses, curly braces, and the return keyword:
   const   greaterThanFive = num      => num > 5 ? true : false;
// keyword functionName    = argument => implicit return with ternary expression;

The other additions in ES6 here are let and const, both similar to var. let declares a variable which can be changed later, and const is something that cannot be changed.

Resources

Oh and I also got PrismJS working to display code on the blog like the above!

Feeling Inspired?

If these articles are inspiring you to get better at JavaScript (or any other skill), I always love hearing from other developers.

Share your story