A quick guide to all the JavaScript syntax and features you need for Welcome to JS. On the left side of each section you have JavaScript, on the right you have PseudoCode:
| ## JavaScript | ## PseudoCode |
| The exact syntax and spelling you must use for the computer to understand your code. | Simpler, more flexible notation you can use to sketch your ideas before writing JavaScript code. |
Something you write at the top of your programs so the computer will catch more of your mistakes than if you didn’t use String Mode.
The biggest difference for now is how JavaScript will treat variables. As long
as you always 'use strict' and always declare your variables you’ll be fine.
| ```js 'use strict'; ``` | ```txt // no strict mode in PseudoCode ``` |
Notes written in your code for developers to read. The computer will ignore these when executing your code.
| ```js // inline comment /* block comment */ ``` | ```txt // inline comment /* block comment */ ``` |
A simple way to print data to the developer console while the program is running. This is helpful for knowing what data is stored in your program at different points in execution.
| ```js console.log('hello'); ``` | ```txt // no need for logs in PseudoCode ``` |
The smallest pieces of data in a JS program. There are many primitive types but you only need to know these for now:
| ```js // "boolean" true; false; // "string" ''; // empty string 'hello'; '"hello"'; // quotes in a string (1) "'hello'"; // quotes in a string (2) // "number" -1 0; 1; 1.5; 2; // "undefined" undefined; // "object" null; ``` | ```txt // "string" '' // empty string 'hello' '"hello"' // "boolean" true false // "number" 0 1 1.5 2 // "undefined" undefined // "object" null ``` |
Ways to transform data. An operator takes in 1 or more values and evaluates to a new value.
Operators in JavaScript are a huge topic with many details and exceptions, for now this should be enough:
| ```js // typeof typeof 'a string'; // "string" typeof true; // "boolean" typeof 1; // "number" typeof null; // "object" typeof undefined; // "undefined" // strict equality 4 === '4'; // false // strict inequality 4 !== '4'; // true // string concatenation 'hello' + ' ' + 'world'; // "hello world" // and true && false; // false // or true || false; // true // not !true; // false // addition 4 + 2; // 6 // subtraction 4 - 2; // 2 // multiplication 4 * 2; // 8 // division 4 / 2; // 2 // greater than 4 > 3; // true 4 > 4; // false // less than 4 < 4; // false 4 < 5; // true // greater than or equal to 4 >= 3; // true 4 >= 4; // true 4 >= 5; // false // less than or equal to 4 <= 3; // false 4 <= 4; // true 4 <= 5; // true ``` | ```txt // typeof typeof 'a string' typeof true typeof 1 typeof null typeof undefined // strict equality 4 === '4' // strict inequality 4 !== '4' // string concatenation 'hello' + ' ' + 'world' // and true && false // or true || false // not !true // addition 4 + 2 // subtraction 4 - 2 // multiplication 4 * 2 // division 4 / 2 // greater than 4 > 3 4 > 4 // less than 4 < 4 4 < 5 // greater than or equal to 4 >= 3 4 >= 4 4 >= 5 // less than or equal to 4 <= 3 4 <= 4 4 <= 5 ``` |
The data type used for storing and manipulating text data. Strings will be the main type of data used in Welcome to JS.
| ```js // string length ''.length; // 0 'a'.length; // 1 'ab'.length; // 2 // string indexes 'abc'[0]; // 'a' 'abc'[1]; // 'b' 'abc'[2]; // 'c' // --- string methods --- 'HeLlO'.toLowerCase(); // 'hello' 'HeLlO'.toUpperCase(); // 'HELLO' 'abc'.includes('b'); // true '+a+b+c+'.replaceAll('+', ''); // 'abc' ' abc '.trim(); // 'abc' 'abc'.indexOf('a'); // 0 'abc'.indexOf(''); // 0 'abc'.indexOf('b'); // 1 'abc'.indexOf('bc'); // 1 'abc'.indexOf('x'); // -1 'abc'.slice(0); // 'abc' 'abc'.slice(1); // 'bc' 'abc'.slice(2); // 'c' 'abc'.slice(0, 0); // '' 'abc'.slice(0, 1); // 'a' 'abc'.slice(0, 2); // 'ab' 'abc'.slice(1, 1); // '' 'abc'.slice(1, 2); // 'b' 'abc'.slice(2, 2); // '' ``` | ```txt // string length ''.length 'a'.length 'ab'.length // string indexes 'abc'[0] 'abc'[1] 'abc'[2] // string methods 'HeLlO'.toLowerCase() 'HeLlO'.toUpperCase() 'abc'.includes('b') '+a+b+c+'.replaceAll('+', '') ' abc '.trim() 'abc'.indexOf('a') 'abc'.indexOf('') 'abc'.indexOf('b') 'abc'.indexOf('bc') 'abc'.indexOf('x') 'abc'.slice(0) 'abc'.slice(1) 'abc'.slice(2) 'abc'.slice(0, 0) 'abc'.slice(0, 1) 'abc'.slice(0, 2) 'abc'.slice(1, 1) 'abc'.slice(1, 2) 'abc'.slice(2, 2) ``` |
Variables allow you to save values to use again later in your program.They’re kind of like a box that can only hold one thing at a time.
Variables are also an important tool for writing code that is clear for other developers to read and understand. Using helpful names can make your code read (sort of) like a story.
| ```js // declare let name; // declare and initialize let name = 'Java'; // read console.log(name); // assign name = 'Script'; ``` | ```txt // declare // no need to declare variables // declare and initialize (same as assign) name <- 'Java' // read log(name) // assign a new value name <- 'Script' ``` |
Ways for users to pass data into your programs (input), and ways to display data from inside your program to a user (output);
| ```js // --- input --- // allows users to say "yes" or "no" // inputs a boolean value into your program let didConfirm = confirm('yes or no'); // allows the user to enter text or click "cancel" // inputs a string or null into your program let userInput = prompt('enter some text'); // --- output --- // displays a message but does not take user input alert('a message'); ``` | ```txt // --- input --- didConfirm <- confirm('yes or no') userInput <- prompt('enter some text') // --- output --- alert('a message') ``` |
Variables declared inside curly braces can only be used inside those curly braces. Trying to use a variable in an outer scope will cause an error.
Variables declared outside of curly braces can be used outside or inside the curly braces.
| ```js let outer = 'declared outside the block'; { outer = 'reassigned in the block'; let inner = 'only defined in the block'; } console.log(outer); // 'reassigned in ...' console.log(inner); // ReferenceError ``` | ```txt // don't worry about scope in pseudo code // you can fix scoping when you translate to JS ``` |
Execute different blocks of code depending on whether an expression evaluates to
true or to false:
| ```js if (anExpression) { // path 1: if anExpression is true } if (anExpression) { // path 1: if anExpression is true } else { // path 2: if anExpression is false } if (firstExpression) { // path 1: if firstExpression is true } else if (secondExpression) { // path 2: if secondExpression is true } else { // path 3: if both expressions are false } ``` | ```txt IF: anExpression // path 1 :END IF IF: anExpression // path 1 ELSE: // path 2 :END IF IF: firstExpression // path 1 ELSE: IF: secondExpression // path 2 ELSE: // path 3 :END IF ``` |
Repeat a block of code as long as an expression evaluates to true.
true or false
true, execute the block| ```js while (anExpression) { // loop body } // next line after the loop ``` | ```txt WHILE: anExpression // loop body :END WHILE ``` |
Iterate over a string, executing the loop body once for each character.
A new variable is declared for each character and that variable is scoped to the block. Each time the block is executed the variable stores the next character in the string.
| ```js for (let character of 'hello') { // loop body } // next line after the loop ``` | ```txt FOR: character OF 'hello' // loop body :END FOR-OF ``` |
Exit a loop immediately and skip to the next line after the loop.
| ```js while (anExpression) { break; // exit the loop immediately // this line is not executed } // next line after the loop ``` | ```txt WHILE: anExpression BREAK :END WHILE ``` |
| ```js for (let character of 'hello') { break; // exit the loop immediately // this line is not executed } // next line after the loop ``` | ```txt FOR: character OF 'hello' BREAK :END FOR-OF ``` |
Skip the rest of the loop body and go to the next iteration.
| ```js while (anExpression) { continue; // skip to the the loop check // this line is not executed } // next line after the loop ``` | ```txt WHILE: anExpression CONTINUE :END WHILE ``` |
| ```js for (let character of 'hello') { continue; // skip to the next character // this line is not executed } // next line after the loop ``` | ```txt FOR: character OF 'hello' CONTINUE :END FOR-OF ``` |