Basic Concepts You Need to Know - JavaScript in Lucernex
This article will explain some of the core concepts necessary for understanding JavaScript.
Statements
Statements are the "sentences" of a programming language, which are built from several components: values, operators, expressions, keywords, and comments.
Examples
-
This statement is composed of five components. var is a keyword, color is a variable, = is the assignment operator, "red" is a string literal, and the semicolon terminates the statement.
The result of this statement is that the value red is stored in the variable color.
Copyvar color = "red"; -
This statement is composed of seven components. var is a keyword, x is a variable, = is the assignment operator, 2 is a integer literal, + is an arithmetic operator, 5 is an integer literal, and the semicolon terminates the statement. In this case, the integer literals are operands to the arithmetic operator.
The result of this statement is that the result of the operation—which is 7—is stored in the variable x.
Copyvar x = 2 + 5; -
This statement is composed of five components. var is a keyword, x is a variable, += is a combination assignment operator, 6 is a integer literal, , and the semicolon terminates the statement. In this case, both the variable x and the integer literal 6 are operands to the combination assignment operator.
The result of this statement is that the result of the operation—which is x + 6—is stored in the variable x.
Copyvar x += 6;
Values
Values are the data referenced in statements. There are two types of values: literals, and variables.
-
Literals — Literals are fixed values. Examples of literal values appear below:
Copy1 2 3 4
"red"
7
1345780.50
'01/07/2016' -
Variables — Variables are values that can vary based upon the context. Examples of variable values appear below:
Copy1 2 3 4
var color = "red";
var numDays = 7;
var sales = 1345780.50;
var currentDate = new Date ();
Operators
Operators are the tools you use to work with the data.
Assignment Operator
-
Operator: =
-
Definition: The value to the right of the operator is assigned to the variable to its left.
-
Example:
Copyvar satisfactionPercent = 100;
Arithmetic Operator
-
Operators: + , - , * , / , % , ++ , --
-
Definition: These are your basic mathematical operators.
-
Example:
Copy1 2 3 4 5 6
var x = 10; var y = 2;
var add = x + y; // add is 12
var sub = x – y; // sub is 8
var mul = x * y; // mul is 20
var div = x / y; // div is 5
var mod = x % y; // mod is 0
Combo Assignment
String Operator
-
Operator: + , +=
-
Definition:
-
+ (concatenate)
To concatenate is to append one piece of text to another.
-
+= (concatenate and assign)
To concatenate and assign is to concatenate one piece of text to another and assign the result to the original text.
-
-
Example:
Copy1 2
var first = "John"; var last = "Smith";
var full = first + " " + last; // full is "John Smith"
Comparison
-
Operator: == , === , != , !== , > , < , >= , <= , ?
-
Definition: an operator that allows you to compare two or more values.
-
== does not require that the data are the same type of value, as long as they can be interpreted in the same way, for example a text value of "5" can equal a numerical value of 5. In this scenario, the code is interpreting the text value of the number five to a numeric value.
-
=== requires that the data are the same type of value.
-
!= this is the opposite of == above. For this comparison to be true—indicating that the two data points are not equal—the values must differ.
In the example below, x != 13 reads as x does not equal 13, which is true because the variable x = 2016. x != "2016" is false because "2016" is a text equivalent of x = 2016.
-
!== this is the opposite of === above. For this comparison to be true—indicating that the two data points are not equal—either the values or the objects must differ.
-
>, <, >=, <= can be used for mathematical comparisons as usual.
-
? is usually used in conjunction with an assignment operator. ? is known as a conditional or ternary operator. If the expression is true, one value will be assigned. If the expression is false, a different value will be assigned. You can see two examples of how this operator is used in the example section below.
-
-
Example:
Copy1 2 3 4 5 6 7 8
var x = 2016;
x == 13; // false x != 13; // true
x == 2016; // true x != 2016; // false
x == "2016"; // true x != "2016"; // false
x === 2016; // true x !== 2016; // false
x === "2016"; // false x !== "2016"; // true
var y = (x == 2016) ? "apple" : "orange" // because x is 2016, the outcome is that y equals apple.
var y = (x == 13) ? "apple" : "orange" // because x does not equal 13, the outcome is that y equals orange.
Logical
-
Operator: && , ||, !
-
Definition: These operators are used to evaluate Boolean—also known as true / false—expressions. They are used with comparison operators.
-
&& is the logical "and".
-
|| is the logical "or".
-
! is the logical "not".
-
-
Example:
Copy1 2 3 4 5 6 7 8 9
var x = 5; var y = "art";
x == 5 && y == "art"; // true && true == true
x == 9 && y == "art"; // false && true == false
x == 5 && y == "sci"; // true && false == false
x == 5 || y == "sci"; // true || false == true
x == 0 || y == "art"; // false || true == true
x == 8 || y == "sci"; // false || false == false
!(x == 5 && y == "art"); // not (true && true) == false
!(x == 5 || y == "sci"); // not (true || false) == false
Expressions
Expressions are a combination of values and operators.
1
2
3
4
5
var brandName = "Accruent";
var brand = brandName + 2020; // brand is “Accruent2020”
/* This mixes variables and literals, not to mention
strings and numbers. JavaScript is smart; it will
convert the numeric values to string values. */
Reserved Words
Reserved words are words which trigger special actions. You cannot use a reserved word as a variable name or function name. Below are the most commonly used reserved words, but there are many more.
-
var
-
true
-
false
-
if
-
else
-
else if
-
switch
-
new
Want to learn more? w3schools is an excellent resource to learn more about reserved words—see their article, JavaScript Reserved Words.