Reflections Front End Web Development – Lesson 11 Javascript Data Types and Variables

I have taken a few moments to write down my thoughts about  Lesson 11 on Data Types and Variables to answer the following questions:

  • What new skills have I learned?
  • What has been easy?
  • What has been difficult?
  • How have I used the problem solving strategies from the first project to overcome challenges so far?

Overall, I found this lesson to be moderately easy (especially given the many provided online resources), and did not encounter any significant difficulties.   Here we learned about the many different data types available in javascript and how to  to store the value of a data type in a variable to “pack it away for later use.”

Also, special thanks to Josh Basset for creating  a pen that allows you to use javascript console functions right in CodePen:

Collected Lesson 11 JavaScript Quizzes in Codepen.io

Refer to my lesson notes below:

Data Types

Numbers

Defining a number in JavaScript is  simple. The Number data type includes any positive or negative integer, as well as decimals. Entering a number into the console will return it right back to you.

Arithmetic operations

You can also perform calculations with numbers pretty easily. Basically type out an expression the way you would type it in a calculator. Also, just like in mathematics, you can compare two numbers to see if one’s greater than, less than, or equal to the other. Comparisons between numbers will either evaluate to true or false.

Comments

We also took a slight detour to learn how to use comments to help explain your code and make things clearer. In JavaScript, comments are marked with a double forward-slash //. Anything written on the same line after the // will not be executed or displayed. To have the comment span multiple lines, mark the start of your comment with a forward-slash and star, and then enclose your comment inside a star and forward-slash /* … */.

// this is a single-line comment

/*
this is
a multi-line
comment
*/

String Concatenation

Strings are a collection of characters enclosed inside double or single quotes. You can use strings to represent data like sentences, names, addresses, and more. Did you know you can even add strings together? In JavaScript, this is called concatenating. Concatenating two strings together is actually also simple:

“Hello,” + ” New York City”

Returns: “Hello, New York City”

Variables

With variables, you no longer need to work with one-time-use data.  Storing the value of a string in a variable is like packing it away for later use.

var greeting = “Hello”;

Now, if you want to use “Hello” in a variety of sentences, you don’t need to duplicate “Hello” strings. You can just reuse the greeting variable.

Naming Conventions for Variables

When you create a variable, you write the name of the variable using camelCase (the first word is lowercase, and all following words are uppercase). Also try to use a variable name that accurately and succinctly describes what the data is about.

  • var totalAfterTax = 53.03; // uses camelCase if the variable name is multiple words
  • var tip = 8; // uses lowercase if the variable name is one word

Not using camelCase for your variables names will not break your Javascript code, but there are recommended style guides used in all programming languages that help keep code consistent, clean, and easy-to-read. This is especially important when working on larger projects that will be accessed by multiple developers.  Also refer to the Google Javascript Guide.

Indexing

To access an individual character, you can use the character’s location in the string, called its index. Just put the index of the character inside square brackets (starting with [0] as the first character) immediately after the string.

Escaping strings

In JavaScript, you use the backslash to escape other characters.  Escaping a character tells JavaScript to ignore the character’s special meaning and just use the literal value of the character.

Here’s a list of common special characters in JavaScript.

  • \\ – \ (backslash)
  • \” – ” (double quote)
  • \’ – ‘ (single quote)
  • \n – newline
  • \t – tab

The last two characters listed above, newline \n and tab \t, are unique because they add additional whitespace to your Strings. A newline character will add a line break and a tab character will advance your line to the next tab stop.

Comparing strings

Another way to work with strings is by comparing them.  The comparison operators == and !=  can also be uses with strings.  Also, when you compare strings, case matters.

NaN

NaN stands for “Not-A-Number” and it’s often returned indicating an error with number operations. For instance, if you wrote some code that performed a math calculation, and the calculation failed to produce a valid number, NaN might be returned.

Booleans

JavaScript has a Boolean data type. It can only take the values true or false.

Implicit type coercion

JavaScript is known as a loosely typed language. This means that when you’re writing JavaScript code, you do not need to specify data types. Instead, when your code is interpreted by the JavaScript engine it will automatically be converted into the “appropriate” data type. This is called implicit type coercion and you’ve already seen examples like this before when you tried to concatenate strings with numbers.

It’s behavior like this which makes JavaScript unique from other programming languages, but it can lead to some quirky behavior when doing operations and comparisons on mixed data types. A strongly typed language is a programming language that is more likely to generate errors if data does not closely match an expected type. Because JavaScript is loosely typed, you don’t need to specify data types; however, this can lead to errors that are hard to diagnose due to implicit type coercion.

Examples of strongly typed programming language code:

  • int count = 1;
  • string name = “Julia”;
  • double num = 1.2932;
  • float price = 2.99;

Equivalent code in JavaScript:

  • var count = 1;
  • var name = “Julia”;
  • var num = 1.2932;
  • var price = 2.99;

In JavaScript it’s better to use strict equality to see if numbers, strings, or booleans, etc. are identical in type and value without doing the type conversion first. To perform a strict comparison, simply add an additional equals sign = to the end of the == and != operators.

Semicolons

Semicolons make it clear where one statement ends and another begins. This is especially handy when multiple lines of code are written on the same line (which is valid JavaScript, but definitely not recommended!). Not adding semicolons to the end of each line can cause bugs and errors in your programs. JavaScript does have ways to occasionally predict where semicolons should be, but it’s good practice to not depend on it.

Happy Coding and Blogging!

Images

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s