My Journey through Javascript: Basic Syntax

In my previous post we have learned about flowcharting and it's structure. Don't forget, before you actually start programming you should ALWAYS start with a flow chart in case you get lost in your code. Think of it as your treasure map to Javascript gold.

In this post we are going to look at the syntax for JS and what pieces make up the code for JS.

Lets start by looking at Statements...

A statement is a group of words, numbers and/or operators that perform a specific task. Below is a statement:

x = y + 4

Some of you may be thinking, "hey, that looks a lot like algebra", and you would be correct. Their isn't much of a difference between this statement and an algebraic statement. As we progress we will see statements get much more involved. Now lets break down this statement and look at what makes up a statement.

Statements are made up of expressions. In the statement x = y + 4 there are 4 expressions:

• 4 is a literal value expression
• y is a variable expression
• y + 4 is an arithmetic expression
• x = y + 4 is an assignment expression

The other type of common expression is a call expression, alert('Hey!'). This is an expression that calls a function.

The assignment expression x = y + 4 also contains operators. There are 2 operators in this expression. The "=" and the "+". An operator is anything that performs actions on variables and values. There are several types of operators:

• Assignment Operator: =
• Math Operator: + (addition), - (subtraction), * (multiplication) and / (division)
• Compound Assignment: +=, -=, *= and /=. These combine a math operator with and assignment operator. (ie. x += 4 is the same as x = x + 4)
• Increment/Decrement Operator: ++ and --. These operators either add one or subtract one from the variable.
• Equality Operators: == (loose equals. This should rarely be used), === (strict equals), != (loose not equals. This should rarely be used) and !== (strict not equals)
• Comparison Operators: < (less than), > (greater than), <= (less than or equal to) and >= (greater than or equal to)
• Logical Operators: && (and) and || (or)

We also have types of variables in JS:

• Number
• String (this is one or more characters, words and sentences)
• Boolean (true or false)

To establish variables we use the notation const or let. There is also var, but I have not learned when to use this yet.

Once we compile all of these parts into one we have what is called a block of code. The block of code consist of operators that make up loops and conditionals that instruct our program how to manipulate our variables.

Loops are a block of code that use operators to iterate through a list and perform an action until the condition specified inside the loop fails.

for (let i = 0; i < arr.length; i++) {
}

The word for identifies the type of loop (we have only learned about for loops thus far). The statements inside of the parentheses are the conditions in which the loop will run. Let i = 0 sets the variable i to 0, thus resetting the "counter" of the loop. i < arr.length tells the loop how many times to run. So, if the length of our array or list is 7, it will run our loop 7 times. i++ tells the condition how many increments to increase i for each iteration of the loop. This is the driving force behind a loop, it's what tells our loop to iterate through the loop.

Conditionals are statements that cycle through based on the equality/comparison of statements. They generally run through if/else statements where it cycles through all conditions until a condition is met and then it stops.

if (num1 === 7) {
    console.log('hey')
} else {
    console.log('bye')
}

In the conditional statement above if specifies that this is a conditional statement. The information in the parentheses sets the condition that must be met for the if statement to run. If the condition for the if statement is not met the else statement will run. Once the if or else statement have run the conditional stops and the JS moves to the next block.

The last thing I want to point about about JS syntax is commenting out code. If you want to leave a note about your JS code (which you should to help with readability and understanding of your code you can comment that code out by typing 2 back slashes (//) before the code you want to comment out.

//This is a block of code
for (let i = 0; i < arr.length; i++) {
    render(employeeList[i].name);
    render(employeeList[i].officeNum);
    render(employeeList[i].phoneNum);
    render('-----');
}  

This covers the basics of JS syntax that I have learned thus far. Hope you find it helpful!

Until next time :)