JavaScript Programming/Variables and Expressions

This lesson introduces JavaScript variables, data types, expressions, and operators.

Objectives and Skills

Objectives and skills for this lesson include:

• Apply JavaScript best practices
  • Comments; indentations; naming conventions; noscript; constants; reserved keywords; debugger keyword; setting breakpoints; console.log
• Declare and use variables of primitive data types
  • Number; Boolean; String; Null; Undefined; typeof operator; type checking functions; use strict; converting between data types; formatting numbers; string operations; single quote vs double quote (nesting); initialization
• Complete or debug code that uses assignment and arithmetic operators
  • Assignment; increment; decrement; addition; subtraction; division; multiplication; modulus; compound assignment operators.

Readings

1. Wikibooks: JavaScript/Variables and types
2. Wikibooks: JavaScript/Numbers
3. Wikibooks: JavaScript/Strings
4. Wikibooks: JavaScript/Operators

Multimedia

• Variables

1. YouTube: JavaScript Tutorial for Beginners - 03 - Variables
2. YouTube: JavaScript Tutorial for Beginners - 04 - Variables Part 2
3. YouTube: JavaScript Programming Tutorial 6 - Variables and Expressions
4. YouTube: JavaScript Let, Const & Var
5. YouTube: 7: How to Create Variables in JavaScript | JavaScript Tutorial | Learn JavaScript
6. YouTube: What is a Variable? | JavaScript in less-than 3 minutes
7. YouTube: Variables & Data Types | Javascript | Tutorial 6

• Data Types and Operators

1. YouTube: Javascript Variables & Data Types
2. YouTube: JavaScript Tutorial for Beginners - 08 - Operators
3. YouTube: A Basic Calculator
4. YouTube: 20 String Methods in 7 Minutes

• Input

1. YouTube: Getting User Input | Javascript | Tutorial 9
2. YouTube: How to accept JavaScript USER INPUT in 5 minute

• Debugging

1. YouTube: Debugging JavaScript (Google Chrome and Visual Studio Code)
2. YouTube: Firefox JavaScript Debugger
3. YouTube: Debugging JavaScript - Chrome DevTools 101

• Type Coercion

1. YouTube: JavaScript Type Coercion - Javascript Tutorial #4
2. JavaScript & Type Coercion

• Expressions vs. Statements

1. Expressions vs. Statements in JS / Intro to JavaScript ES6 programming, lesson 14

Examples

• W3Schools: JavaScript Syntax
• W3Schools: JavaScript Variables
• W3Schools: JavaScript Operators
• W3Schools: JavaScript Statements
• W3Schools: JavaScript Arithmetic
• W3Schools: JavaScript Assignment
• W3Schools: JavaScript Popup Boxes
• Freecodecamp: JavaScript Popup Boxes with Examples
• W3Schools: JavaScript Debugging
• W3Schools: JavaScript Data Types
• W3Schools: JavaScript Numbers
• W3Schools: JavaScript Number Methods
• W3Schools: JavaScript Strings
• W3Schools: JavaScript String Methods
• W3Schools: JavaScript Strict Mode
• W3Schools: JavaScript Type Conversion
• W3Schools: Null vs Undefined
• JavaScript — Null vs. Undefined
• Example Code
• MDN Web Docs: Expressions and Operators
• GeeksforGeeks: Javascript Expressions
• Data types: Data Types in JavaScript

Activities

Complete two of the following activities using external JavaScript code. Apply JavaScript best practices, including comments, naming conventions, and constants. In at least one program, prompt the user for input and use console.log() for output. In another program, prompt the user for input and use document.getElementById().innerText or document.getElementById().innerHTML for output. Use the strict directive. Create test data to validate the accuracy of each program. Add comments at the top of the program and include references to any resources used.

Arithmetic

1. Create a program that uses variables for hours and rate per hour and then calculate and displays weekly, monthly, and annual gross pay (hours * rate). Base monthly and annual calculations on 12 months per year and 52 weeks per year.
2. Create a program that uses variables for years, and then calculate and displays an approximate age in months, days, hours, and seconds. For example, a person 1-year-old is 12 months old, 365 days old, etc.
3. Review MathsIsFun: US Standard Lengths and MathsIsFun: Metric-US/Imperial Conversions. Create a program that uses variables for a distance in miles, and then calculate and displays the distance in yards, feet, and inches, or calculate and display the distance in kilometers, meters, and centimeters.
4. Review MathsIsFun: Area of Plane Shapes. Create a program that uses variables for the dimensions of different shapes and then calculate and displays the area of the shapes. Do not include shape choices. That will come later. For now, just include multiple shape calculations in sequence.
5. Create a program that calculates the area of a room to determine the amount of floor covering required. The room is rectangular with the dimensions measured in feet with decimal fractions. The output needs to be in square yards. There are 3 linear feet to a yard.
6. Review MathsIsFun: Order of Operations. Create a program that demonstrates the order of operations. Include parentheses, exponents, multiplication, division, addition, and subtraction in your program. Use variables for the calculations and label the output. For example, part of the program might display:
       1 + 2 * 3 = 7
    (1 + 2) * 3 = 9
    ...

Data Types

1. Create a program that initializes different variables with integer, floating point, string, null, and undefined values. Demonstrate various operations and converting between data types. For example, user input is always a string, but adding string values of "1" + "1" is typically "11", whereas, adding numeric values of 1 + 1 is 2. Use typeof to label each variable and the resulting output.
2. Create a program that demonstrates string operations and string formatting. Define string constants or string literals that include apostrophes ('). Define string constants or string literals that include "quotes". Convert between string and numeric data types using Number() and .toFixed() with two decimal places. Concatenate string literals and variables to display output.

Debugging

1. Use the debugger statement to create a breakpoint in one of the programs above. Experiment with single-stepping through the code and viewing script and global values. Add one or more variables to the watch window.
2. Add a breakpoint to the program somewhere after the debugger statement. After the program stops with the debugger, resume script execution and observe the script stopping at the breakpoint.

Lesson Summary

• By convention, JavaScript variable names are written in camelCase.
• In JavaScript, I explored variable declarations with let and const, string properties and methods such as length and toUpperCase(), primitive data types like number, string, boolean, null, and undefined, and various operators for string concatenation, arithmetic, assignment, increments, comparisons, and logical evaluations.
• JavaScript Class, interface, record, and typedef names are often written in Title Case.
• JavaScript constant names are written in UPPER_CASE.
• JavaScript variable and constant names must be unique. These unique names are called identifiers.
• Reserved words (for example, continue, debugger, break, etc.) can't serve as variable names.
• Names can begin only with a letter, an underscore or a dollar sign. Names are allowed to contain numbers, but a number can't be the first character.
• In Java Script names are case sensitive.
• Comments, which are annotations or explanations of written code, are done in JavaScript using // for a single line, and /* ... */ for multiple lines.
• JavaScript has 7 data types: Number, String, Boolean, Null, Undefined, Function, and Object. Null and Undefined data types can't contain values.
• There are 6 types of objects in JavaScriptː Object, Date, Array, String, Number and Boolean.
• JavaScript has only 1 type of number.
• With some other languages, like Java and C, there is a special “character” type. JavaScript consists of only one type, string.
• The typeof operator is used to find the data type of the variable.
• JavaScript has built-in functions to work with strings and numbers
• Strings are written using single or double quotation marks. Quotation marks can be used inside the string if they don't match the ones outside of it. Quotation marks used inside can match the outside ones only if they are preceded by the backslash escape character.
• You can convert between data types in JavaScript.
• "use strict" is a literal expression that requires / enforces variable declaration. It allows for cleaner code to be written.

Key Terms

array

An array is a type of variable that stores a collection of values. The position of each value inside the array is that value's index. Indexes in JavaScript always start at 0.

assignment

Assigning a value to a variable or constant with the "=" operator.

Boolean

Data type which has only two values, True and False.

camel case

Method of joining multiple words into one variable name where the first word is not capitalized and every subsequent first letter of following words are capitalized

Title case or pascal case

Method of joining multiple words into one variable name where the first letter of every word is capitalized.

concatenation

Method of joining two strings, data, or other text together in programming. In JavaScript, strings are concatenated using the '+' operator.

console.log

A function in JavaScript which is used to print any kind of variables defined before in it or to just print any message that needs to be displayed to the user.

constant

A keyword introduced from ES2015, It is a container for storing a permanent data value that cannot be changed later in the program.

Equality

An operator referencing when two values are equal, "==", this is distinct from the assignment ("=") operator referenced above.

let

A keyword introduced from ES2015, It is used to declare a variable in JavaScript. it is used as block scoped variable while "var" is used as a function scope variable

null

A special value which represents "nothing." It is not a reference to a null pointer.

number

Data type in JavaScript which represents both integers and floating-point value.

object

A variable that can contain many values.

order of operations

A set of rules for for evaluating mathematical expressions. While different programming languages have different rules for precedence, the order of operations start from greatest precedence with parentheses, exponents, multiplication/division, and addition/subtraction.

scope

The current context of the code, refers to the accessibility of functions and variables.

string

Can consist of one character or many. A string must be surrounded by quotation marks.

type coercion

The automatic or implicit conversion of values from one data type to another (such as strings to numbers).

undefined

A variable which has not been assigned a value. If a variable is simply declared, but not assigned anything, it becomes undefined.

variable

A container for storing a data values. Variables are used to hold values in expressions.

See Also

• Wikipedia: Variable (computer science)
• Wikipedia: Constant (computer programming)
• Wikipedia: Data type
• Wikipedia: Expression (computer science)
• Wikipedia: Statement (computer science)
• Wikipedia: Assignment (computer science)
• Wikipedia: Order of operations
• Wikipedia: Self-documenting code
• Robin Wieruch: Javascript Naming Convention
• Var, Let, and Const – What's the Difference?
• The typeof Operator
• Get Started with Debugging JavaScript in Chrome DevTools

References

← Introduction

JavaScript Programming

Functions →