This will guide you through the basics of JavaScript, and makes some comparisons with Python.
In a terminal in VSCode, make a folder for this guide with mkdir -p ~/code/basics then go into that folder with cd ~/code/basics.
Run code example.js to open a new file in the text editor, then add console.log('Hello world') to the file and save it. Run it with bun example.js and you should see 'Hello world' output on the command line.
You'll use console.log() a lot - it's the equivalent of Python's print().
Do try out examples as you go through this guide, by editing your JavaScript file and running it at various times with bun example.js.
In Python you can just use variables, but in JavaScript you should declare them first. Say we want to make a variable with the identifier x that holds a number:
x = 5
console.log(x) // error: "x is not defined"
... oops, try this instead:
let x = 5
console.log(x) // 5
In some environments your JavaScript will work without the let before the identifier, but it's good practice to always use it. You could also use const instead of let if you know your variable constant isn't going to change, but just using let for now is fine for everything. You'll see var used instead in older JavaScript guides, but these days just use let.
Notice also that JavaScript uses // for comments, rather than Python's #. You can also make multi-line comments with /* some long comment over multiple lines... */.
Numbers don't have quote marks around them, but strings do. You can use single quotes ', double quotes " or backticks ` around strings. Backticks are particularly handy as you can easily use variables in them or split them across multiple lines:
let x = 'world'
console.log(`Hello ${x}`) // Hello world
console.log("Hello ${x}") // Hello ${x}
... notice how the first console.log() line replaces ${x} with 'world', while the 2nd one doesn't.
Strings can be combined, or concatenated, together:
let x = 'hello'
x += ' world'
console.log(x)
In Python you need to declare variables before you can use them, but it's quite common in JavaScript to use a function before its definition, like this:
doThing('coding')
doThing('teaching')
function doThing (thing) {
console.log("doing", thing)
}
Put the above code in 'example.js', save it and run it with bun example.js. Note that console.log() can take multiple arguments, and it adds spaces between them when printing them.
Python uses tabs and colons : to show you're inside a code block such as a function or a loop, but in JavaScript we use { braces } (which I sometimes call 'squigglies'). Many people also add a semi-colon ; to the end of each line, like this:
doThing('coding');
doThing('teaching');
function doThing (thing) {
console.log("doing", thing);
}
... but you don't have to, as the JavaScript interpreter will automatically add semi-colons for you.
Like Python, you can use if and else, but elif is called else if in JavaScript.
if (5 > 8) console.log('how?')
else if (3 <= 2) console.log('really?')
else console.log('phew!')
Because each clause above had just one statement, we didn't need to put them inside { braces }, but if we have more than one statement we have to use them:
if (5 > 8) {
console.log('how?')
console.log('maths is broken')
}
else if (3 === 2) { // === ?!
console.log('really?')
console.log('maths is really broken')
}
else console.log('phew!')
You can use == in JavaScript but it's best to use === because of reasons.
There's also a nifty ternary operator you can use:
console.log(5 > 8 ? 'how?' : 'phew!')
console.log(isFive(6))
console.log(isFive(5))
function isFive (x) {
return x === 5 ? 'yes!' : 'no'
}
Or you could use switch statements:
let x = 'green'
switch (x) {
case 'blue':
console.log('Blue is the colour')
break
case 'green':
console.log('I like green')
break
case 'red':
console.log('Red is best')
break
default:
console.log('A different colour')
}
You can have a count-controlled loop like this:
for (let i = 0; i < 5; i++) console.log(`The index is ${i}`)
Within the (brackets) are 3 statements separated by semi-colons. The first (let i = 0) gets run once, before the first loop. The 2nd (i < 5) is evaluated before each loop; the 3rd (i++) is run at the end of each loop.
Like other code blocks, a single statement doesn't need { braces } but multiple statements do:
for (let i = 1; i <= 5; i++) {
let j = i * 6
console.log(`${i} times 6 is ${j}`)
}
i++ is short for i += 1 which is itself short for i = i + 1. You could also decrement with i--, such as in this countdown function:
countdown() // counts down from 10
countdown(20) // counts down from 20
function countdown (start = 10) { // setting 10 as a default
for (let i = start; i >= 0; i--) {
console.log(i > 0 ? i : 'Blast off!')
}
}
We use while for a condition-controlled loop:
let x = 0
while (x < 10) {
console.log(`Number is ${x}`)
x++
}
... just be careful not to have an infinite loop. If you do, remember you can CTRL+C to exit the program.
Less common is a do...while loop, which always executes at least once, even if the condition isn't true when starting:
while (false) {
console.log(`while loop`) // never runs
}
do {
console.log(`do...while loop`) // runs once
} while (false)
There are other ways to loop, such as over array items, which we won't look at yet.