1.1 Basic Syntax

Comments and logging

JavaScript has the same comments syntax as many other languages. You can use // for single-line comments and /* */ for multi-line comments.

// This is a single-line comment

/*
This is a 
multi-line comment
*/

The most basic way you can view the output of some code execution is by logging the result to the console. You can do this using the console.log() function.

console.log("Hello, world!");

Variables and Primitive Types

Mutable variables are declared with the let keyword, while immutable variables are declared with the const keyword (short for constant).

let age = 20;
age += 1; // Increment by one

const name = "Alice"; // Immutable

Unlike languages like C, or Java, JavaScript is dynamically typed. This means you can change the type of a variable at any time, however, you should avoid doing this as it can lead to bugs.

The main primitive types in JavaScript are:

const num = 5; // Number
const str = "Hello, world!"; // String
const bool = true; // Boolean
const nullValue = null; // Null
const undefinedValue = undefined; // Undefined

Also note that variables and functions in JavaScript are typically written in camelCase.

Functions

Functions can be defined using the function keyword.

// Name is a function parameter
function greet(name) {
    // This is a template string, which allows you to embed variables in a string
	return `Hello ${name}`;
}

// Call the function
const greeting = greet("Alice");
console.log(greeting); // Prints "Hello Alice"

However, in many cases you will see functions declared using arrow syntax. This shortened syntax is used most often for inline functions.

const goodbye = (name) => {
	return `Goodbye ${name}`;
};

The arrow syntax can be further shortened if the function only has one statement. In this case, the return statement is implicit.

const goodbye = (name) => `Goodbye ${name}`;
console.log(goodbye("Alice")); // Prints "Goodbye Alice"

Control Flow

The JavaScript or, and, and not operators are ||, &&, and !, respectively. They work much like their counterparts in other languages.

All values in JavaScript are truthy except for false, 0, "" (empty string), null, undefined, and NaN.

When checking for equality or inequality in JavaScript, it is imperative to use === and !== to ensure that objects must be of the same type to be considered equal. There are almost zero scenarios where you should use == or !=, as they can lead to unexpected behavior.

const fiveNum = 5;
const fiveStr = "5";

if (fiveNum == fiveStr) {
    console.log("This code will run!");
} 
if (fiveNum === fiveStr) {
    console.log("This code will not run!");
}

JavaScript loves to give options for writing code in shorthand. One such shorthand is the ternary operator, which is a one-liner if-else statement. The following two functions are equivalent, but the second is much more concise.

function saloonGreeting(age) {
    if (age >= 21) {
        return "Welcome stranger";
    } else {
        return "No youngins allowed";
    }
}

The ternary operator evaluates the condition, and if it is true, it returns the first value, otherwise it returns the second value.

const saloonGreeting = (age) => age >= 21 ? "Welcome stranger" : "No youngins allowed";