What are operators and methods?

Operators are essentially tools for taking one or more values, and then producing a new value from them. For example, addition is an operator. Notice that \( 5 + 3 = 8 \). The addition "operator" takes 5 and 3 and then returns 8. In programming, there are many useful operators. We will be covering many different operators on this page.

Methods are kind of like operators, but are actions that various data types can perform on themselves. For example, suppose you have a string "hello world" and you want it to have all capital letters. Strings have a method that allow you to do this very easily.

Number Operators

JavaScript has a handful of operators for numbers, and these operators are similar to those that you are used to using in math. For example, JavaScript has addition (+), subtraction (−), multiplication (*) and division (/) operators for taking two numbers and turning them into one. These four operators are shown below.

var x = 3, y = 5, z = 7;

print(x + y);
print(x - z);
print(y * z);
print(z/x);

Along with the usual arithmetic operators, JavaScript also provides a few extra operators on numbers that are often very useful. The modulus (or remainder) operator, denoted by % returns the remainder of one number when it is divided by another. For example, 5 % 2 returns a value of 1, because when you divide 5 by 2 you get 2 with a remainder of 1. So % gives a remainder. The editor below shows this idea.

print(5 % 2);
print(5 % 3);
print(7 % 4);
print(10.2 % 2);

Notice that in line (4) above we get a weird looking value. The value should be 0.2, but the way JavaScript handles math sometimes returns values that are very slightly different than what it should be.

JavaScript provides increment and decrement operators, which increase or decrease a number or variable by 1. For example, if we have a variable x then x++ will increase the value of x by 1. On the other hand, x-- will decrease the value of x by 1. The editor below shows this.

var x = 5;
print(x);

x++;
print(x);

x--;
x--;
print(x);

String Operators and Methods

Like numbers, JavaScript can transform multiple strings into a single new string. The most common use for this is "concatenating" two strings, which is essentially just glueing together the two strings. If we have the string "Hello, " and "world!" we can "glue" them together using string concatenation, which is denoted by +. So "Hello, " + "world!" will produce "Hello, world!". The editor below shows this idea. Try it out!

var string1 = "Hello, ";
var string2 = "world!";

print(string1 + string2);

Strings also have some "attributes" that we can access. For example, if we want to know the length of a string, we can access the "length" attribute of the string. To do that, we add .length to the end of the string. For example, "Mayonaise!".length will tell us how many characters are in "Mayonaise!". The editor below shows this.

print("Mayonaise!".length);

var yourName = "Grant Sander";
print("Your name has " + yourName.length + " characters.");

Along with accessing some attributes of strings, we can also use "string method". These are just operations that a string can perform on itself. These methods are best described by looking at a couple examples.

var yourName = "Grant Sander";

print( yourName.toLowerCase() );
print( yourName.toUpperCase() );
print( yourName.charAt(0) );

In line (3) above, we use the .toLowerCase() method of yourName to turn all of the characters in yourName to lower-case. Similarly for .toUpperCase(). The .charAt() method returns the character at a specified "index" of the string. So yourName.charAt(0) returns the character at index 0, which is the first character in the string. (Recall that in JavaScript, indices start at 0!)

Array Methods

Recall that arrays are like ordered sequences of data. Arrays have many useful attributes and methods, but we will only look at a few of them here. One important attribute of arrays is the .length attribute, which tells us how many elements are in the array. For example, [1,3,5].length will return 3 since there are three elements in that array.

Recall that we can change and add elements to an array using square brackets (such as ingredients[1] = "Turkey"). JavaScript also provides a handful of methods for adding and removing elements to and from an array. The .push() methods adds an element to the end of an array, and .unshift() adds an element to the beginning of an array. These two method are shown below.

var a = [1,2,3,4];
print(a);

a.push(5);
print(a);

a.unshift(0);
print(a);

print(a.length);

Comparison Operators

JavaScript offers a handful of comparison operators, which compare two values and then returns either true or false. As an example, 5 > 3 uses the > operator and returns true, because 5 is indeed greater than 3. The following table shows JavaScript's comparison operators.

The comparison operators are very important in coding, especially when we discuss "logic and flow". The editor below shows how we can use the operators above.

print("John" == "John");
print("John" != 5);
print(5 > 3);
print(5 < 3);
print(4 >= 4);
print(3 <= 5);

Logical Operators

In programming, logical operators are operators that act like arithmetic for booleans (true/false values). As an example, suppose that a child must be at least 8 years old and at least 57 inches tall to ride in a car without a booster seat. In this scenario, the "and" acts as a logical operator. To represent "and" in JavaScript, we use the notation &&. The editor below shows this scenario - make sure you understand each line!

var age = 9, height = 55.5;

print(age >= 8);
print(height > 57);

print( (age >= 8) && (height >= 57) );

In line (6) above, (age >= 8) and (height >= 57) both have a boolean value. (age >= 8) is true, while (height >= 57) is false - and therefore (age >= 8) && (height >= 57) is false.

On the other hand, if we were to say that a child must be at least 8 years old or at least 57 inches tall to ride in a car without a booster seat then we could use the "or" logical operator, denoted as ||. The editor below shows this.

var age = 9, height = 55.5;

print(age >= 8);
print(height > 57);

print( (age >= 8) || (height >= 57) );

In the editor above, (age >= 8) || (height >= 57) is true because at least one of the values is true [the age is greater than 8]. The "and" and "or" operators are useful whenever we want to make multiple comparisons.

There is a third logical operator, called the "negation" or "not" operator. This operator, denoted by !, just returns the opposite of a boolean value. As an example, if b = true then !b is false, and if b = false then !b is true. The editor below shows how one might use the negation operator.

var x = 5, y = 6;

print( x == y );
print( !(x == y) );

print( x < y );
print( !(x < y) );

Activities

Activity: Number Operators

The editor below has 4 variables defined. Without changing these variable values, use five different number operators that will produce a value of 4. The first one is done for you.

var a = 2, b = 4, c = 8, d = 12;

print(a + a);

Activity: Using String Operators

The editor below has 3 strings variables defined. Without changing these variables, use string operators and methods to print the following lines:

1. "Hello World!"
2. "HELLO World!"
3. "hello world!"
4. "W"

The first one is done for you. Pay attention to the capitalization!

var s1 = "Hello",
s2 = " ",
s3 = "World!";

print(s1 + s2 + s3);

Activity: Creating an Array with Methods

The editor below defines a variable a that holds an empty array. Use the .push() and .unshift() methods to make a have a value of [1,3,5,7].

var a = [];

Activity: Making Comparisons

The editor below defines 3 variables. Without changing these variables, create a "true" comparison using these variables, and each of the following operators: ==, !=, <, >, <=, >=. That is, for each operator, use a, b, c to create a true statement. The first one is done for you.

var a = 7, b = 4, c = 7;

print( a == c );