Learning JavaScript Strings

Learning JavaScript Strings, Booleans & Null (Part 2)

Learning JavaScript Strings, Booleans & Null: Strings are another fundamental data type representing a string (or sequence) of characters. Strings are used in programming to represent text values. In the previous class, we learned introduction to Javascript.

Let us continue with Strings; Strings are created by enclosing text in a single (“) or double (“”) quotation mark.

Learning JavaScript Strings: Strings Operation

String operations are restricted. A string, for example, cannot be subtracted, multiplied, or divided by another string. The + operator, on the other hand, may be used to concatenate (combine) strings.

example

                    

var word1 = "Billy";
var word2 = "went";
var word3 = "for";
var word4 = "a"; 
var word5 = "walk";
var space = " ";
var period = ".";

 

Escaping characters

Many string values require escaped characters.

Say you want to include a quote in quotation marks. Do you think the following code will run correctly?

If you run the following code, you’ll see that the system throws an error ❌.

This is because the " is a reserved character that indicates the start and end of a string. In the above code, we have two empty strings and a bunch of stuff in the middle that the program doesn’t recognize.

In order to indicate that we want to use the " as a quotation mark, we have to escape the character using a backslash (\).

Let’s break down this example:

  • The first " indicates the start of the string
  • The escaped characters (\") are used to include quotation marks in the string
  • The last " means the end of the string

There are a few different characters that you must escape in order for the program to interpret a string in the correct way. These include:

  • a single quote – \'
  • a double quote – \"
  • a backslash – \\

Escaped characters can also be used to add tabs or go to the next line in your strings, with the following:

  • a new line – \n
  • a tab – \t

BOOLEANS

A computer, at its most basic, is a series of on and off switches, a collection of 0s and 1s that flip back and forth to, well, compute stuff.

The principle of utilizing binary values to express information (0 and 1, true and false) is so crucial to computation that Javascript, like most other programming languages, has a boolean type dedicated to these values.

Boolean values can be created by assigning a value of true or false to a variable.

                    

var theTruth = true;
var aLie = false;

Booleans from comparison operators

Boolean values can also be created by using comparison operators, such as:

  • Greater Than – >
  • Less Than – <
  • Greater Than or Equal To – >=
  • Less Than or Equal To – <=
                    

console.log(101 > 100);
console.log(101 < 100);
console.log(10 >= 10);
console.log(20 <= 10);

If you run this into JavaScript, your output should be

Equality operators

To check whether or not one value is equal to another value, Javascript provides four different operators:

  • Equal To:
    1. ==
    2. ===
  • Not Equal To: 3. != 4. !==

Comparing two values with an equality operator will return a Boolean value.

You may be wondering: Why there are two different operators for each comparison type? Let’s explore the differences between these operators.

=== and !==

The === and !== operators check that both values being compared are equal to (or not equal to) the same type and the same value.

                    

var skyColor = "blue";
var carColor = "blue";
var hairColor = "black";

console.log(skyColor === carColor);
console.log(skyColor === hairColor);
console.log(skyColor !== hairColor);

If you run the above code you will get

With the === and !== operators, if the two values are two different types, the === operation will always return a value of false and the !== operation will always return a value of true.

                    

var ageOfBill = 10;
var ageOfSally = "10";

console.log(ageOfBill === ageOfSally);
console.log(ageOfBill !== ageOfSally);

Output for the above code will be

== and !=

The == and != operators are less strict about values being of the same type. Let’s take a look at the age comparison again, this time using the == and != instead:

                    

var ageOfBill = 10;
var ageOfSally = "10";

console.log(ageOfBill == ageOfSally);
console.log(ageOfBill != ageOfSally);

The output will be

What changed here? When we compare ageOfBill (a number) to ageOfSally (a string), Javascript tells us that the values are indeed equal to one another.

When you compare two values of different types using the == or != Javascript will attempt to convert the type of one of the values to make a valid comparison.

In this case, the string ageOfSally is converted to a number, and then the comparison is made, which is why the == comparison returns true and the != comparison returns false.

If this seems confusing, don’t worry too much about it. In the Javascript community, type conversion is a hotly debated topic, and many feel it is a flaw in the language’s design.

Which equality operators should be used?

For this course, we will concentrate on the === and!== operators because their purpose is clearer. This approach will protect you from any hidden problems that may occur as a result of Javascript automatically converting data from one type to another.

Undefined values

When you declare a variable, its value is initialized to whatever value you assign by using the = sign.

The following code snippet will initialize the variable as pi a number.

But what if we created a variable that didn’t assign any value, like so?

Is the variable still present? It turns out that it does.

ValueDeclaration is a declared variable having an undefined value in this circumstance. It is also possible that ValueDeclaration is of undefined type.

Any variable that has not been assigned a value, or if a variable does not exist at all, is assigned an undefined type.

                    

// ValueDeclaration is a declared variable, so it will have a 'undefined' value/type
console.log(ValueDeclaration);

                    

var nothing = null;
console.log(nothing);

If you run this code, your output will be null.

What is the distinction between undefined and null?

Variables are only marked as undefined if they have been declared but not assigned a value.

Null values are saved as null on purpose to show that the variable is empty. If and only if a variable is supposed to have no value, you should set it to null.

It’s okay if none of this makes sense right now. This principle will be revisited in upcoming sessions.

4 Comments

  1. May Allah bless and increase your knowledge.. thanks you Sir

  2. Killed it again, Weldone Akin more grace to you 👍🏽

Leave a Reply

Your email address will not be published. Required fields are marked *