Unit 3: Values, Variables, and Statements
We've looked at the beginnings of JavaScript, available tools, and how to add code to a webpage. Now, it's time to start learning some of the fundamentals of the language. In JavaScript, we use containers to store data values. "Data types" can hold strings, numbers, and more, while "operators" allow you to perform simple math like a calculator. This unit introduces variables and values, including labels, data types, keywords, and operators. Next, you will write your first JavaScript statements, and we will share some best practices in writing code.
Completing this unit should take you approximately 3 hours.
Upon successful completion of this unit, you will be able to:
- explain the types of variables, operators, and keywords;
- use values and data types in JavaScript code;
- identify and use types of JavaScript operators;
- explain how statements are used in JavaScript; and
- write simple JavaScript statements to demonstrate proper syntax.
- explain the types of variables, operators, and keywords;
3.1: Data Types and Values
We'll start with an article that describes how a computer stores values and some primitive types such as numbers and strings. You can think of the "type of a value" as defining how it is stored, named, and manipulated. For example, a calculator program uses the type "number", which holds "numeric values" and supports "arithmetic operations". JavaScript has two types: "primitive" and "object". Examples of primitive types include numbers, strings, and Booleans. Object types include arrays, objects, and functions.
Here are some things to remember when using JavaScript data types:
- Primitive types are "immutable"; their "values" cannot be changed once created;
- Object types are "mutable"; their values can change once created; and
- Although JavaScript supports types, it is a "dynamically typed" language, which means that you do not have to define the type of variable in a JavaScript program (but this is not a best practice).
We'll work with some of the primitive and object data types in this course.
There are seven primitive types:
- string
- number
- bigint
- Boolean
- undefined
- symbol
- null
Watch this video to see how to define them in JavaScript programs. You'll use the "typeof" operator to check each type. After watching the video, consider these questions:- What is an "undefined" type, and how does it differ from a "null" type?
- What primitive types are returned by the "typeof" operator?
Understanding the concept of mutable and immutable in JavaScript is vital to prevent programming errors. For example, we know that numbers are immutable. This article presents examples that you can try to understand this concept. This exercise does not count towards your grade. It is just for practice!
3.2: Variables and Strings
A JavaScript program needs to use values, and that is where variables come into play. A program stores data in variables and assigns a name to refer to them in your program. In this section, we'll look at how to "declare", "initialize", and "update" variables in JavaScript.
After reading this section, consider these questions:
- How would programs be written without variables?
- What is the difference between "declaring" and "initializing" a variable?
This article describes best practices when using identifiers. Identifiers are "names" that identify variables, constants, properties, and other elements in a JavaScript program. For example, when creating a variable in a program to store your age, you might give it the identifier "age".
Here are some things to remember when using identifiers:
- JavaScript is case-sensitive, and you must use consistent spelling;
- identifiers cannot start with a digit;
- identifiers cannot have spaces in the name; and
- use meaningful names.
This video provides a quick introduction to using string literals. String literals in JavaScript are enclosed in single or double quotes. You can try this example using an editor of your choice.
3.3: JavaScript Operators
Expressions in JavaScript evaluate to produce values. Operators used with them perform operations that return values. For example, using the addition operator (+), the expression x + y returns the sum of the numbers. Note that some expressions do not use operators; we'll cover this later in the course. This section presents a list of operators used in the JavaScript language. We will not use all of them in this introductory course. However, this is a great interactive reference, and you can run the examples. Pay special attention to the relational operators because you will use them in Unit 4.
Read this article to learn more about using operators in JavaScript. We will not use all of them in this introductory course. However, this is a condensed reference that contains tables of all operator categories. JavaScript categorizes operators by the task (such as arithmetic, comparison, or assignment). Operators execute in a particular order. This is called operator precedence and tells JavaScript which part to evaluate first, second, third, and so on. This is an important concept.
For example, consider how a program calculates a price using arithmetic operators:
Multiplication first the result is: $18 = 4 + 2 * 7 ( 2 * 7 = 14 + 4)
Calculate left to right the result is: $42 = 4 + 2 * 7 (4+ 2 = 6 * 7)One of the common errors in programming is misusing the assignment (
=) and equality (==) operators. Read this article to see how to avoid this runtime error.
3.4: Introduction to JavaScript Statements
So far, we've seen some components that make up the vocabulary for a programming language, such as variables, operators, and keywords. JavaScript uses this vocabulary to form "statements" or instructions that run in a web browser. This article describes several of the types and groups of keywords used in JavaScript statements. We'll drive into JavaScript keywords in the next section.
If you have programmed in another language, you will notice that statements in JavaScript use a similar syntax to Java, C++, or Python. Most statements contain one or several lines of code that perform a task. For example, a "declaration-statement" creates a variable, a "conditional-statement" handles a decision, and a "looping-statement" executes code many times. JavaScript statements written on one line do not require a semicolon (";"), but it is best practice to end each line with one.JavaScript statements begin with a "reserved keyword" and perform a specific task. For example, the "var" keyword instructs the browser to create a variable. This article provides a list of the keywords used in JavaScript. It is important to remember that a "variable" or "function" cannot use keywords. This is another interactive reference to use as you learn to write JavaScript statements.
JavaScript has "statement blocks" that combine multiple lines into a compound statement. Block statements are enclosed in curly brackets { } and do not require an ending semicolon. We'll use block statements when writing conditional statements in Unit 4.
This article discusses JavaScript syntax. The syntax for a programming language defines "rules" or "guidelines" for creating error-free programs. For example, we've seen that reserved keywords define rules with variables and functions.
After reading this article, consider these questions:
- What is expanded syntax?
- What rules govern the use of multiple words for identifiers?
- What syntax defines the use of camel case in JavaScript?
- How are comments written in JavaScript?
Try this exercise to practice writing statements using numbers, strings, and Boolean values. The code defines three variables (using the 'var' keyword) and uses assignment statements. Copy and paste the code into each program and run it to validate the output. You can use the Replit online editor at https://replit.com/languages/nodejs or any editor you choose. This exercise does not count towards your grade. It is just for practice!
Try this exercise to see how well you understood this unit.
Read this article while opening a Developer Console in your browser. The sequence is ctrl+shift+J on Windows and cmd+option+J on the Mac. Type in each statement and examine the output using the Console tab.
After reading this article, consider these questions:
- What is the difference between the "var", "let", and "const" keywords?
- What is "var" hoisting?
- Should "dynamic typing" be used in your JavaScript programs?
This exercise does not count towards your grade. It is just for practice!
Study Session Review Video
Unit 3 Assessments
- Receive a grade
Take this assessment to see how well you understood this unit.
- This assessment does not count towards your grade. It is just for practice!
- You will see the correct answers when you submit your answers. Use this to help you study for the final exam!
- You can take this assessment as many times as you want, whenever you want.