JavaScript Basics: Learn These Concepts First

Topics

What are variables in JavaScript?

• Store data under a name of our choosing
• Declared using var, let, or const
  - var is sort of a "general declaration" it was used to declare variables until ~2015 when let and const were released (var is generally not used anymore unless the program is older and needs to support an old browser)
  - let is more or less the modern var equivalent
  - const is for declaring a constant, a value that you do not want changed
• Variables can be:
  - Global Scope: Can be accessed anywhere in the program
  - Local Scope: Can be accessed within the function in which it was declared
  - Block Scope (ES6): Can be access only within the set of curly braces in which it was declared
• JavaScript has many data types, here are a few:
  - String: text, whether it's a word or a phrase
  - Number: a number that can be used as such (ie in a mathematical formula)
  - Boolean: based on binary states of on or off (1 or 0, true or false)
• Examples:
  - You may use a variable to store whether the user has dark mode on or off. You could store a string in a variable called lighttheme that represents the theme state (ie "light" or "dark"). Since there are only two states, you could also use a boolean value instead of a string

What are JavaScript functions?

• From MDN: "A function in JavaScript is similar to a procedure—a set of statements that performs a task or calculates a value, but for a procedure to qualify as a function, it should take some input and return an output where there is some obvious relationship between the input and the output."
• You can think of a function as a code snippet that can be called by name as many times as you need
  - For example you might have a function that you call addNumbers, whose sole purpose is to add two that you send it together and to store the sum in a global variable called addedNumbers
  - You can call this function whenever you'd like, which mitigates the need for multiple places in your code where you're adding two numbers together (the same JavaScript statements over and over)
  - As you can probably guess, this is very helpful in more complex programs where you'll be doing more advanced functions, like grabbing and interpreting an RSS feed, for example, maybe with a function called "getRSS"
• Functions are a very fundamental bit of JavaScript code that is used in virtually every program that goes above a few lines of code
• Functions can be called within functions as well and can return the values they calculate.
• For example you might have a function called displaySum which styles and adds a div to your webpage that contains the sum of two numbers. You can call the addNumbers function from earlier within displaySum and have addNumbers return the sum in a variable (meaning it'll "tell" displaySum what the sum is) and then sum can use that value in its display/styling code

How to make decisions in your JavaScript code?

• Making decisions can be done with conditional statements
  - if statements
  - switch statement (sometimes called "switch case")
• Sometimes you want to make a decision in your code based on some parameters, like if the user enters that they were born in then you want to display the name of a song released that year
• This is where if statements come in
  - If you notice we said If the user is born in, then display song name
  - This is exactly how if statements work, if a condition is met, then you do a code snippet, if the condition is not met then that code snippet is ignored (not run)
• You can make them more complex with else if as well
  - Where you can add more decisions and more code snippets
  - if the person is born in 1971 then display 1971 song name
  - else if the person is born in 1972 then display 1972 song name
• Sometimes you want a catchall, where if none of the statements are met you want to run a code snippet no matter what
  - For example you may want a statement that says "We don't have any songs that were written that year in our records" so the user knows the code didn't error out and display nothing
• You can also make decisions in your code with something called a switch statements, sometimes called "Switch case"
• These are a little less human-readable than an if statement, but are very handy in particular cases. My favourite is when you want different code snippets to run based on what the user has selected in a dropdown menu
  - This is because the conditions are pre-set and can only be one of the values in that pre-set collection
• Switch statements check if an expression (ie a variable’s value) matches any of the “cases” in the list, each case can have some code within it to execute
  - Like if statements, there is also a catchall with switch statements called default

How do I store multiple values in one place with JavaScript?

• This segment is all about arrays and loops
• When you want to store multiple pieces of related data and easily access the different data you can use something called an array
• Arrays can be declared and stored as regular JavaScript variables using square brackets []
• Imagine you want to list all the years that a person can be born so that someone can select it out of a dropdown
• You can store all those years as separate data elements in a array
• If you want to then access and perhaps display them you can use a loop to go over each piece of data (year) in the array and do some fancy function work to display the years
• What are loops? Loops are programming concepts that allow you do repeat an action a set amount of times. That set amount can be a number or even a condition
  - So it can be a set number like I want to do this 6 times
  - Or you can check a condition like does is the year greater than the current year (stop displaying if it is)

Sources

• What is function and block scope in JavaScript? (Educative)
• JavaScript if, else, and else if (W3Schools)
• JavaScript Variables (W3Schools)
• JavaScript Data Types (W3Schools)
• Functions (MDN)