Loading lesson path
JavaScript
Build the mental model first: syntax, variables, control flow, functions, objects, and the runtime basics.
JavaScript Tutorial
Syntax Rules Syntax are the rules how programs must be constructed: // How to Declare variables: let x = 5; let y = 6; // How to Compute values: let z = x + y; // I am a Comment. I do Nothing JavaScr…
Operators are for Mathematical and Logical Computations The Assignment Operator = assigns values The Addition Operator + adds values The Multiplication Operator * multiplies values The Comparison Ope…
The JavaScript if Statement Use the JavaScript if statement to execute a block of code when a condition is true. Syntax if ( condition ) { // block of code to be executed if the condition is true } N…
Loops can execute a block of code a number of times. JavaScript Loops Loops are handy, if you want to run the same code over and over again, each time with a different value. Often this is the case w…
Functions Study Path Learn Functions in the Right Order: First the idea Then how to make them Then how to use them Step 1 Beginner What are Functions? Functions are reusable code blocks designed for…
Scope = Visibility Scope determines the accessibility (visibility) of variables. JavaScript variables have 3 types of scope: Global scope Function scope Block scope Global Scope Variables declared Gl…
A JavaScript variable can hold 8 types of data. 7 Primitive Data Types and 1 Object Data Type. The Object data type can hold many different object types. Type Description Number A number representing…
Always use the same coding conventions for all your JavaScript projects. JavaScript Coding Conventions Coding conventions are style guidelines for programming. They typically cover: Naming and declar…
What Can JavaScript Do? JavaScript is the programming language of the web. It can calculate, manipulate and validate data. It can update and change both HTML and CSS. JavaScript Can Change HTML Conte…
JavaScript Statements
JavaScript Arithmetic Operators Arithmetic operators perform arithmetic on numbers (literals or variables). Operator Description + Addition Subtraction * Multiplication ** Exponentiation ( ES2016 ) /…
The else Statement Use the else statement to specify a block of code to be executed if a condition is false. if ( condition ) { // block of code to be executed if the condition is true } else { // bl…
For Loops can execute a block of code a number of times. For Loops are fundamental for tasks like performing an action multiple times. The For Loop The for statement creates a loop with 3 optional ex…
Functions are Code Blocks Functions are reusable code blocks designed to perform a particular task. Functions are executed when they are called or invoked. Functions are fundamental in all programmin…
Curly Braces A code block or block statement is a group of statements enclosed within curly braces { }. Code blocks are important for controlling the flow of execution and defining variable scope wit…
A JavaScript variable can hold 8 types of data. 7 Primitive types or an Object type. Examples // Number let length = 16; let weight = 7.5; // BigInt let x = 1234567890123456789012345n; let y = BigInt…
Avoid global variables, avoid new, avoid ==, avoid eval() Avoid Global Variables Minimize the use of global variables. This includes all data types, objects, and functions. Global variables and funct…
The <script> Tag In HTML, JavaScript code is inserted between <script> and </script> tags. Example <script> document.getElementById("demo").innerHTML = "My First JavaScript"; </script> Old JavaScript…
JavaScript comments can be used to explain JavaScript code, and to make it more readable. JavaScript comments can also be used to prevent execution, when testing alternative code. Single Line Comment…
JavaScript Assignment Operators Assignment operators assign values to JavaScript variables. Given that x = 10 and y = 5, the table below explains the assignment operators: Operator Example Same As Re…
Previous Next Example If the value of age is < 18, set the value of text to "Minor", otherwise to "Adult" let text = (age < 18) ? "Minor" : "Adult"; Example let isMember = true; let discount = isMemb…
While Loops While loops execute a block of code as long as a specified condition is true. JavaScript have two types of while loops: The while loop The do while loop The While Loop The while loop loop…
Calling a Function A JavaScript function runs when it is called. To call a function, write the name followed by parentheses like name(). Function Invocation The code inside a function is NOT executed…
Hoisting is JavaScript's default behavior of moving declarations to the top. JavaScript Declarations are Hoisted In JavaScript, a variable can be declared after it has been used. In other words; a va…
A JavaScript variable can be either a Primitive type or an Object type. The Object data type can hold many different object types. Examples // Object const person = {firstName:"John", lastName:"Doe"}…
This chapter points out some common JavaScript mistakes. Accidentally Using the Assignment Operator JavaScript programs may generate unexpected results if a programmer accidentally uses an assignment…
JavaScript Display Possibilities JavaScript can "display" data in different ways: Writing into an HTML element, using innerHTML or innerText. Writing into the HTML output using document.write(). Writ…
Variables = Data Containers JavaScript variables are containers for data. JavaScript variables can be declared in 4 ways: Modern JavaScript Using let Using const Older JavaScript Using var (Not Recom…
JavaScript Comparison
Switch Control Flow Based on a condition, switch selects one or more code blocks to be executed. switch executes the code blocks that matches an expression. switch is often used as a more readable al…
JavaScript Break
Parameters (Function Input) Parameters allow you to pass (send) values to a function. Parameters are listed inside the parentheses in the function definition. Example function multiply(a, b) { return…
The "use strict" Directive The "use strict" directive was new in ECMAScript version 5. It defines that JavaScript code should be executed in "strict mode". It is not a statement. It is a literal expr…
The typeof Operator The typeof operator returns the data type of a JavaScript variable. Primitive Data Types In JavaScript, a primitive value is a single value with no properties or methods. JavaScri…
How to speed up your JavaScript code. Reduce Activity in Loops Loops are often used in programming. Each statement in a loop, including the for statement, is executed for each iteration of the loop.…
The let keyword was introduced in ES6 (2015) Variables declared with let have Block Scope Variables declared with let must be Declared before use Variables declared with let cannot be Redeclared in t…
Conditional Statements Conditional Statements allow us to perform different actions for different conditions. Conditional statements run different code depending on true or false conditions. Conditio…
The Boolean Data Type In JavaScript, a Boolean is a primitive data type that can only have one of two values: true or false The Boolean value of an expression is the basis for all JavaScript comparis…
The Continue Statement The continue statement skips the current iteration in a loop. The remaining code in the iteration is skipped and processing moves to the next iteration.. Example Skip the value…
Returning Values from Functions A function can return a value back to the code that called it. The return statement is used to send a value out of a function. The return Statement When a function rea…
The JavaScript toString() method converts a variable (or a value) to a string. It is a built-in method for many data types, including numbers, arrays, dates, and objects. The method is useful for: Co…
The const keyword was introduced in ES6 (2015) Variables defined with const cannot be Redeclared Variables defined with const cannot be Reassigned Variables defined with const have Block Scope Cannot…
Logical Operators Logical operators are used to combine boolean expressions. Logical operators can be used to modify the results of comparisons. Typically, you will use a comparison operator to check…
Control Flow is the order in which statements are executed in a program. By default, JavaScript runs code from top to bottom and left to right. Control flow statements let you change that order, base…
Parameters vs. Arguments In JavaScript, function parameters and arguments are distinct concepts: Parameters are the names listed in the function definition. Arguments are the real values passed to, a…
Converting Strings to Numbers Converting Numbers to Strings Converting Dates to Numbers Converting Numbers to Dates Converting Booleans to Numbers Converting Numbers to Booleans JavaScript Type Conve…
JavaScript Datatypes
JavaScript Function Expressions
Destructuring Assignment Syntax The destructuring assignment syntax can unpack objects into variables: let {firstName, lastName} = person; Object Destructuring Example // Create an Object const perso…
Arrow Functions allow a shorter syntax for function expressions. You can skip the function keyword, the return keyword, and the curly brackets const multiply = (a, b) => a * b; Arrow Functions were i…
Test Yourself Test your knowledge of JavaScript functions. This quiz uses the same examples you learned in the tutorial chapters. Question 1 What is returned in the text variable? function sayHello()…