JavaScript basics flash cards

The cards, front and back

1. 1
   Front

   let and const

   Back

   Both declare variables. Use const for a value that will not be reassigned and let for one that will. Older code uses var, which has looser scoping rules.

   const name = 'Mia';

   let count = 0;

2. 2
   Front

   Primitive data types

   Back

   • string: 'hello'
   • number: 42 or 3.5 (one type for both)
   • boolean: true or false
   • undefined: declared but not given a value
   • null: deliberately empty
   • Also bigint and symbol
3. 3
   Front

   console.log()

   Back

   Prints a value to the browser's developer console. It is the quickest way to check what your code is doing.

   console.log(count);

4. 4
   Front

   === vs ==

   Back

   === checks value and type with no conversion, so 5 === '5' is false. == converts types first, so 5 == '5' is true. Prefer ===.

5. 5
   Front

   Template literal

   Back

   A string in backticks that can insert values with ${ }.

   `Hello, ${name}!`

6. 6
   Front

   if and else

   Back

   if (score >= 50) {

     console.log('Pass');

   } else {

     console.log('Try again');

   }

7. 7
   Front

   Logical operators

   Back

   && means and, || means or, ! means not.

   if (age >= 13 && hasPermission) { ... }

8. 8
   Front

   Truthy and falsy

   Back

   In a condition, these values count as false: false, 0, '' (empty string), null, undefined and NaN. Everything else counts as true.

9. 9
   Front

   for loop

   Back

   for (let i = 0; i < 3; i++) {

     console.log(i);

   }

   prints 0, 1 and 2.

10. 10
    Front

    Array

    Back

    An ordered list in square brackets, indexed from 0.

    const colours = ['red', 'blue'];

    colours.push('green'); adds to the end.

    colours.length is 3.

11. 11
    Front

    Array methods map, filter, forEach

    Back

    map makes a new array by changing each item. filter keeps items that pass a test. forEach runs code for each item.

    [1, 2, 3].map(n => n * 2) gives [2, 4, 6].

12. 12
    Front

    Object

    Back

    Stores key and value pairs in curly braces.

    const user = { name: 'Ana', age: 15 };

    user.name gives 'Ana'.

13. 13
    Front

    Function declaration

    Back

    function add(a, b) {

      return a + b;

    }

    add(2, 3) returns 5.

14. 14
    Front

    Arrow function

    Back

    A shorter way to write a function.

    const add = (a, b) => a + b;

15. 15
    Front

    Scope

    Back

    Where a variable can be used. Variables declared with let or const inside curly braces exist only inside that block.

16. 16
    Front

    DOM

    Back

    The Document Object Model: the browser's representation of a web page as objects that JavaScript can read and change.

17. 17
    Front

    Selecting an element

    Back

    document.querySelector('#title') returns the first element matching a CSS selector. querySelectorAll returns all matches.

18. 18
    Front

    Changing page content

    Back

    element.textContent = 'New text'; changes the text inside an element.

    element.classList.add('active'); adds a CSS class.

19. 19
    Front

    Event listener

    Back

    Runs code when something happens, such as a click.

    button.addEventListener('click', () => {

      alert('Clicked!');

    });

20. 20
    Front

    JSON

    Back

    JavaScript Object Notation, a text format for data. JSON.stringify(obj) turns an object into a string; JSON.parse(text) turns it back.

21. 21
    Front

    Promise and async/await

    Back

    A promise represents a result that arrives later, such as data from a server. Inside an async function, await pauses until the promise settles.

    const res = await fetch(url);

22. 22
    Front

    Comments

    Back

    // starts a one-line comment.

    /* ... */ wraps a comment over several lines.