We will be focusing on JavaScript syntax, or the way JavaScript is written, in this section. If some of these concepts are not super clear, try starting with the first article in this series.
Syntax
The art of programming is more like a conversation with a computer than writing. Like any conversation, if you want it to go well, you need to communicate well and in a way that is understood between both parties. Syntax is the set of rules that govern how a language will be interpreted by a computer. We need to follow the syntax of JavaScript in order to be able to use JavaScript to get the computer to do what we want.
In our conversation with the computer there are three basic parts: statements, declarations and expressions. The lines do get a bit blurry so don’t worry about the distinctions too much.
Expressions
Expressions produce values and can be written wherever a value is expected. Here are some basic expressions:
1 + 2;
( 1 + 2 ) * 3;
"String";
[ 1, 2, 3 ];
[ 1, 2, 3 ][0];
{ name: 'Taco' };
function () { console.log(10); };Each expression can be evaluated for its value.
1 + 2;
// Evaluates to 3
( 1 + 2 ) * 3;
// The ( 1 + 2 ) evaluates to 3, and then we get 9.
"String";
// Evaluates to "String"
[ 1, 2, 3 ];
// Evaluates to the array with [ 1, 2, 3 ]
[ 1, 2, 3 ][0];
// Evaluates to 1
{ name: 'Taco' };
// Evaluates to { name: 'Taco' }
function () { console.log(10); };
// Evaluates to fn () { console.log(10); }Each of these expressions evaluates to a value in JavaScript. If you need to brush up on values checkout JavaScript Fundamentals Part 1. Arrays and objects are expressions in JavaScript that evaluate to themselves. The trickiest part here is probably the last one the function expression. Here we are creating a function that console.logs 10. In JavaScript functions are also values, known as first class functions. So in this use of a function it is an expression because it is just another value. We will look at this in more depth in the future, but it is important to take a mental note that functions are values in JavaScript.
Most of what you will work with in JavaScript are expressions. Statements in JavaScript serve the purpose of being more fundamental building blocks that do things.
Statements
Expressions only get us so far in JavaScript, statements are things that cause things to happen, but do not return or evaluate to any values. Let’s look at the if statement. if has special meaning in JavaScript, and an if statement is written like this:
if ( true ) {
"This code is executed.";
}
if ( false ) {
"This code is never executed.";
}
"this code is executed";
if ( false ) {
"This code is never executed.";
} else {
"This code is executed.";
}As we see above the if statements direct which code is executed and which is not. Inside of the () parentheses we have an expression that must evaluate to either true or false. If that expression is true we run the code inside of the {} curly braces.
Another very common statement in JavaScript is the for loop statement, which allows us to run a section of code multiple times.
for ( var index = 0; index < 100; index++ ) {
console.log( index + 1 );
}We have a couple parts to the for statement. Inside the () parentheses we have three expressions, one declares starting variables, the next is the condition for the loop, if true, then we execute the code, after the code runs we run the third expression. When we run this code it will log to our console 1, 2, 3, 4 … 100. So instead of writing out each of those we use the for loop to run the same code over and over. If the for loop doesn’t make much sense don’t worry about it, we will look at it more in depth in the future.
The main takeaway with statements is that they do not evaluate to value, and instead are code we right to affect how our code executes. There are other types of statements in JavaScript, but these are two very important ones.
Declarations
In the for loop above we see var index = 0;, this is a variable declaration. Declarations are parts of our code that create references. References allow us to name a value and reference it later in time. These references and their associated value are stored in the computer’s memory. Let’s look at some basic declarations in JavaScript:
// Variable Declarations.
var ten = 10;
let six = 6;
const seven = 7;
// Function Declaration.
function myFunction() { console.log( ten ); }The variable declarations above use the assignment operator, =, to assign a variable a value. Above we have the variable ten, and its value is 10. six is 6, seven is 7. We also have a function declaration so now there is a reference myFunction which contains the value fn() { console.log( ten ) }.
References are super useful let’s look at how they are useful in our programs.
var number = 11;
number;
// Outputs 11
number * 2;
// Outputs 22
number;
// Outputs 11
number = 12;
number;
// Outputs 12
number = number * 2;
number;
// Outputs 24
var number = 3;
number;
// Outputs 3We can see above that we can use the reference number to do all sorts of stuff, and at the end we use the var declaration to redeclare the variable again. By naming these variables we can write code that is more understandable. The above could also be written like this.
var number = ( 11, 12, 12 * 2, 3 );Not as easy to read, or know what the values are, or even know what is going on. Even though it is more concise we lose a lot of what happened above.
Each declaration however only applies to the scope we are currently executing in.
Scope
Scope can be very confusing in JavaScript, and when you are first starting out it can lead to unexpected results. JavaScript scopes based off of functions, and in some cases block scope. The more important scope to understand is function scope. If we are not inside a function, then our scope is at the global level. Let’s look at how scope impacts our references and declarations.
var number = 10;
function getAScopedNumber () {
var number = 1;
return number;
}
function getNumber () {
return number;
}
function changeGlobalNumber () {
number = 3;
return number;
}
getNumber();
// Evaluates to 10
getAScopedNumber();
// Evaluates to 1
changeGlobalNumber();
// Evaluates to 3
getNumber();
// Evaluates to 3
getAScopedNumber();
// Evaluates to 1There are a couple of things going on here. We declare a variable number in the global scope and give it the value 10. We create a function getAScopedNumber that declares a variable number and gives it the value 1. When we call getAScopedNumber(), we will always get 1 returned for number because we are declaring a variable number in that scope. We have getNumber, which returns the reference to number. Since there is no reference declared in this function’s scope, JavaScript looks for an upper scope and finds the number we declared in the global scope, in this case it is ten if we call that function.
We have a third function changeGlobalNumber, which assigns number the value 3, because we are not using a declaration like var, const, or let this is telling JavaScript we are looking for the reference number, and because we have not declared one in this function scope, it grabs the one from the upper scope, so now our global value for number is 3. You can see this by calling getNumber() again. Functional scoping is confusing, but also very powerful. It might take a while to get the hang of how variables and scope work in JavaScript, and there are some things to look out for that we will cover in the future. For now, you actually have a great understanding of the fundamentals of writing JavaScript.
Putting it all together
var luckyNumber = 7;
for ( var index = 0; index < 10; i++ ) {
if ( index === 7 ) {
changeNumber();
}
console.log( luckyNumber );
}
function changeNumber () {
luckyNumber = 13;
}
luckyNumber;
// Evaluates to 13.This will output the following to the console:
7
7
7
7
7
7
7
13
13
13Mastering these fundamentals will greatly strengthen your skills when you need to use JavaScript to do something more practical.
Up next
Up next we will be looking at cool things we can do with functions in JavaScript, as they are a fundamental aspect of JavaScript.
