DEV Community

loading...
Cover image for JavaScript Made Easy: Part 5

JavaScript Made Easy: Part 5

dtetreau profile image David Tetreau Updated on ・3 min read

Last post we left off with arithmetic operators. This time we will be diving a little deeper into operators. As always, open up your repl and follow along with this post. Make sure you log each of these concepts to the console so you can get some hands-on experience.

Increment and Decrement

We reviewed these types of operators in Part 4, but I would like to go a little more in-depth. The increment operator (++) adds on to a number. The decrement operator (--) subtracts one from a number. However, the order in which the operator appears makes a difference. Here is an example from a reader:

// Contrast this
a = 1
b = a++
console.log(a, b) // 2 1

// with this
a = 1
b = ++a
console.log(a, b) // 2 2
Enter fullscreen mode Exit fullscreen mode

In the first example, the increment operator was behind the variable, therefore (b) was set to the value of (a) before (a) was incremented. When they were logged to the console, (a) had been incremented, but (b) had not. The opposite is true for the second example because the incrementor was in the front of the variable. Take some time to experiment with this in your repl.

String Operators

The + operator that we learned about in the arithmetic section can also be used to concatenate strings. That is a fancy word that means adding strings together. Example:

const firstName = "David";
const lastName = "Tetreau";
const fullName = firstName + " " + lastName;
console.log(fullName); //expected result "David Tetreau"
Enter fullscreen mode Exit fullscreen mode

Notice that it is necessary to add an empty string between the variables to ensure that the two strings are spaced apart when they are concatenated.

Assignment Operators

The += assignment operator can also be used to concatenate strings: Example:

//expected result "I am one string"
const string1 = "I am ";
string1 += "one string";
Enter fullscreen mode Exit fullscreen mode

Template Strings

A newer way to do this is to use template literals or template strings. Template strings are new as of 2015. They are a way
of writing strings where you do not have to concatenate,
and you can insert variables within the template strings.
You have to use backticks instead of quotations. Also, you have to use a dollar sign and curly braces when inserting a variable. Here is an example :

const secondHalf = "a template string sentence";
const templateStringSentence = `This is ${secondHalf}.`
console.log(templateStringSentence);
Enter fullscreen mode Exit fullscreen mode

Adding Strings and Numbers

If you add strings and numbers, the result is a string.

Example:

/*
expected result is the string "55". It will be white text on the console in replit. Numbers and other data types appear as red text; 
*/
const stringsAndNumbers = "5" + 5;
Enter fullscreen mode Exit fullscreen mode

Comparison Operators

These operators become very important when we get to the topic of conditional statements. For now, just become familiar with these operators and pay particular attention to the difference between equal and strict equal.

== equal
=== strict equal

Examples:

/* 
returns true
this does not 
check data type
*/
console.log(3 == "3");

/*
returns false
this does check
data type
*/
console.log(3 === "3");
Enter fullscreen mode Exit fullscreen mode

!= not equal
!== not equal

Examples:

/*
returns false
does not check 
data type
*/
console.log(1 != "1");

/*
returns true 
checks data 
type
*/
console.log(1 !== "1");
Enter fullscreen mode Exit fullscreen mode

greater than
< less than
= greater than or equal to
<= less than or equal to

Examples:

//returns true 
console.log(3 > 1); 

//returns true
console.log(1 < 3);

//returns true
console.log(1 >= 1);

//returns true
console.log(3 <= 3);
Enter fullscreen mode Exit fullscreen mode

? ternary operator

Using a ternary operator is a simple as saying, “if this condition is true, do this expression, otherwise do that expression”

The syntax is as follows:

condition ? exprIfTrue : exprIfFalse

Example:

let age = 19;
const canDrive = age > 16 ? 'yes' : 'no';

//expected result is “yes”
console.log(canDrive);
Enter fullscreen mode Exit fullscreen mode

Logical Operators

&& logical and
|| logical or
! logical not

Example:

const condition1 = true;
const condition2 = false;

/*
the expected output is false 
because both have to be true 
when using the && operator
*/
console.log(condition1 && condition2);

/* 
the expected output is true
because only one condition
has to be true when using
the or operator
*/
console.log(condition1 || condition2);

/*
the expected output is false
because we are using the not
operator. It returns the opposite.
*/
console.log(!condition1);
Enter fullscreen mode Exit fullscreen mode

Type Operators

typeof
Returns the type of a variable

//expected output is "string"
const stringExample = "I am a string";
console.log(typeof(stringExample));
Enter fullscreen mode Exit fullscreen mode

There are also instanceof operators, but we cover those when we talk about objects.

I hope you have enjoyed this post! Please check out the entire "JavaScript Made Easy" series by David Tetreau. There will be a new post daily.

Discussion (2)

Collapse
justinakpobi profile image
Aghogho Akpobi

const string1 = "I am ";
string += "one string";

Won't "string" in the second line actually be "string1"?

Collapse
dtetreau profile image
David Tetreau Author

Good catch! I’ll fix it.

Forem Open with the Forem app