Fundamental Vanilla JavaScript

If you’re like me, you used quarantine to learn how to code. I took a liking to the frontend of development, particularly JavaScript and React. Here, I am going to outline some JavaScript vocab and concepts that you need to understand in order to be an effective JavaScript developer.

Variables

Variables are used to store data temporarily in a computer’s memory. We store this data and give its location a name, called a variable name. With this name, we can read the data at the given location in the future.

Example:

let name = ‘DJ’;

In this case, ‘name’ is the variable name and ‘DJ’ is the value.

Note: There are a few rules to naming variables:

1. It cannot be named a reserved keyword (else, let, if, var, etc.)
2. It cannot start with a number
3. It cannot contain a space or hyphen (use camel casing)
4. It is case sensitive
5. (Not a rule rule but important) It should be named something meaningful so that you know exactly what it is (substitute aRedDog, bigCat, coolPerson for A, B, C)

Constants

When we do not want the value of a variable to change, we use a constant. As their names suggest, the value of a variable can change but the value of a constant cannot.

Example:

let myHeight = 72;

myHeight = 75;

console.log(myHeight);

In this instance, the console will print ‘75’. Although we declared the value of the variable myHeight to be 72, we made it a constant and set its value to 75.

Objects

Think of an object in real life, or in this case a person. A person has a name, an age, an address, etc. These are properties of a person. When we’re dealing with multiple related variables, we can put these variables inside of an object.

Example:

**Here’s 2 variables**

let name = ‘DJ’;

let age = 25;

**These variables are related because they’re part of a person, so instead of declaring two variables, we can declare a person object. This will allow us to reference the person object rather than these two different variables**

let person = {

name: ‘DJ’.

age: 25

};

Arrays

When you’re dealing with a list of objects you can use an array to store that list.

Example:

let roomColors = [white, black, beige]

Arrays are dynamic and can change.

let roomColors = [white, black, beige];

roomColors[3] = ‘green’;

console.log(roomColors);

The console in this case would print ‘white, black, beige, green’.

Functions

A function is a set of statements that performs a task or calculates a value.

Example:

function greet() {

console.log(‘Hello World’);

}

greet();

The console will print ‘Hello World’. Everything within the curly brackets is the body of the function where we add all these statements to define some kind of logic.

Functions can have inputs that change how it behaves. We could add a variable in the parenthesis. This is called a parameter. This type of variable is only meaningful inside of this particular function.

function greet(name) {

console.log(‘Hello ’+ name);

greet(‘DJ’);

The instance of DJ in this example is called an argument to the greet function and ‘name’ is the parameter. The console will print ‘Hello DJ’ in this instance.

A function can have multiple parameters.

function greet(name, lastName){

console.log(‘Hello ’ + name + ‘ ’ + lastName);

greet(‘DJ’, ‘Draper’)

This will print ‘Hello DJ Draper’.