The purpose of this lesson is to use the investigation techniques started last lesson for seeing what the code actually means. We will also explore some definitions and what they mean practically.
In the first web lesson, we got the brief definition of "JavaScript is the gearing of the web, allowing users to have fully interactive experiences." Through the last several lessons, we have seen that it does stuff both through user interaction and page loading. More formally JavaScript is a scripting language originally designed for creating a dynamic user experience in the browser. It is now used for both client side (the web browser) for that purpose, as well as server side (via node js) to allow running things that an end user will never see. JavaScript is an untyped language, meaning that what kind of things are being worked with are not set in stone.
We just mentioned that JavaScript is untyped, but that does not mean that there are not types. If you still have the server running from the last lesson, you may open the DevTools (
f12
//
1typeof clickedTimes // 'number' 2typeof onButtonClick // 'function' 3typeof console // 'object' 4typeof buttons // 'undefined' 5typeof 'test' // 'string' 6typeof 123 // 'number' 7typeof [] // 'object' 8typeof undefined // 'undefined' 9typeof null // 'object' 10typeof Symbol('test-symbol') // 'symbol' 11typeof 'abc' // 'string' 12typeof `a${1}c` // 'string' 13typeof 2n // 'bigint' 14typeof false // 'boolean' 15typeof NaN // 'number' 16
So, we can see that there is a way to tell types in JavaScript but we still need to know what they all are. The types we have seen are all of those available for the
typeof
String Returned By typeof | Description |
---|---|
bigint | Used for integer (non-decimal) numbers outside of the safe value for number type |
boolean | Used to store a true or false value |
function | Used for a chunk of code that may be called from another |
number | Used to store and do mathematical calculations on real numbers |
object | Used to represent a collection of other types all attached to one, or the primitive null |
string | Used for text or character values, created through using quotes or backticks |
symbol | Used to create a unique value for identification |
undefined | Used for variables that do not have a value yet, or the primitive undefined |
The word primitive was used a few times in that table. In a language, primitive types represent the most basic types that the language has at its core, which compose all of the other types.
Below is a list of primitive types. You will notice there is one type that was not returned by typeof, though it has been given a definition here.
As mentioned earlier, an Object is a collection of other types. A standard JavaScript object is composed of properties, which are simply key named values accessible through using object.propertyKey. Functions and arrays ([]) are special objects that we will go into greater detail in a bit.
You may have noticed in the typeof calls earlier that a few gave the String 'object' that were not null. If, in the console, you want to look at these objects closer you may simply type them in. For our example code, we have had the
console.log
console
window
If you click the little arrow, you may expand these objects and see that they are made up of more objects, functions (blue f), and primitives.
A JavaScript function is a special object that may be called (executed) by other code, including code within itself. Functions have the ability to receive arguments, which affect what the result of the function is. For details on the types of functions that exist, you may again see the MDN Documents. In our sample JavaScript code, we are calling a function assigned to the the
console
log
'abc'
console.log('abc', 123, undefined)
When we create a function it is usually to help keep from copying and pasting code, so that we can reduce the overall amount of coding. For instance, let us just make a sample function in the console.
1function addTwo (first, second) {
2 return first + second
3}
4
This function will add the two arguments together, you can try it and see the results in the console. Since JavaScript is untyped, you may try calling it with things other than numbers if you would like, and see what happens. You will notice the keyword return as part of this function, which is what causes something to actually come back from the function. If you were to refresh the page and paste again without the word you will notice that the console gives forth 'undefined'.
Earlier, we saw that the
typeof []
[1,2,3,'a','b','c']
[[Prototype]]
Since this is a special type of object we can check if an object is one through the Array.isArray function. Additionally, Arrays have the advantage of being iterable so that we can easily perform the same action using all of the pieces within.
Earlier in this lesson
typeof
Operator Symbol | What it does | Sample |
---|---|---|
+ | Adds two variables or constants together, according to JavaScript Type rule | 1 + 2 |
- | Subtracts the right number from the left | 2 - 1 |
= | Assigns the value on the right hand side to the variable on left hand side | let x = 1 + 2; x |
/ | Divides the left number by the right | 63 / 3 |
% | Gives integer remaining after division of left number by the right | 62 % 3 |
** | Multiplies number on left by itself number of times on the right (left to the power of right) | 2 ** 6 |
* | Multiplies the numbers together | 3 * 5 |
&& | Checks if both sides are true and returns true of so, else false | (true && 1 == 1) |
|| | Checks if either side is true and returns true if so, else false | (false && true) |
! | Returns true if value is not JavaScript truthy, else false | !false |
== | Checks if the two sides are JavaScript equal even across types and returns true if so, else false | '' == false |
=== | Checks if the two sides are the same type and equal and returns true if so, else false | '' === false |
!= | Checks if the sides are not JavaScript equal across types and returns true of so, else false | '' != false |
!== | Checks if two sides are not the same type or not equal and returns true if so, else false | '' !== false |
> | Checks if left side is greater than right side and returns true if so, else false | 5 > 3 |
>= | Checks if left side is greater than or equal to right side and returns true if so, else false | 5 >= 5 |
< | Checks if the left side is less than right side and returns true if so, else false | 5 < 3 |
<= | Checks if the left side is less than or equal to the right side and returns true if so, else false | 5 <= 5 |
JavaScript objects are only ever considered equal if they are the same exact object, not the same value object. We will get into this more later, but objects can have values on them change without changing the actual object. In addition, JavaScript has the concept of truthy and falsy when doing evaluations, which is why
'' == false
===
==
JavaScript is a case sensitive language. You may see this illustrated below.
1console.log('abc') // the console prints abc 2Console.log('abc') // there is an error printed to the console 'Console is not defined' 3
In JavaScript we store values in something called a variable. This is a named identifier that must start with a letter, underscore (_) or dollar sign ($) and may be followed by these same characters in addition to digits (0, 1, 2, 3, 4, 5, 6, 7, 8, 9). Variables names must not be the same as existing keywords, and may be declared in a variety of fashions.
1// old style variable declaration, the keyword 'var'
2var myFirstVariable = 1
3// variables declared with var can have their values updated
4myFirstVariable = 'abc'
5
6// new style
7// using the keyword 'let' to be able to change the variable value later
8let mySecondVariable = 2
9mySecondVariable = 'def'
10
11// using the keyword 'const' keeps the variable value from being able to change later
12const myConstant = 3
13myConstant = 'abc' // throws an error
14
15// declaring an object with const creates an object whose value is a reference
16const myConstantObject = { a: 1, b: 2 }
17// which means that the properties are able to be changed, as the reference has not changed
18myConstantObject.b = 3
19
20// this function shows giving variable names for the arguments as well as the function name
21function testFunction (argumentVariable1, argumentVariable2) {
22 // function itself does nothing
23}
24
Now, you may be wondering why I mentioned var as an old way to do variable declaration when it is still valid. This is because many standard linting rules no longer use it because of something called scope and the ease of making avoidable mistakes. Scope defines where the variable exists and is accessible at any given time. In our sample code, we have the variables clickedTimes, onButtonClick, and buttons that we used in the typeof illustrations earlier you will notice that
typeof buttons
This was because of the scoping, if you were to change the word from 'let' to 'var' to declare clickedTimes, it would attach itself to the window object as well. This is because there used to only be the concept of global scope and functional scope. When using only the 'var' keyword in my past programming, we had to do several tricks to make sure to not have unexpected clashes when having multiple files. For the 'var' keyword, it will either be attached globally, or only used inside of the function that it is declared in and there will be no indication that something may be behaving other than expected.
For 'const' and 'let' keywords, they use what is known as block scope. Block scope means that the variable is accessible at the levels that they are declared and deeper, or inside of their block. Blocks in JavaScript are the parts between curly brackets
{
}
While using the debugger in future lessons, the scope will become more visible as we learn how to watch variables. If you would like to learn more now check out the W3 Schools Page.
In this lesson we have learned a lot of terminology to help with the rest of the series. While we have not covered everything available, there should be enough to go over the code we have with the ability to explain it and also add some more knowledge as needed.
Next - Web Page Interactive Button Code Investigation Continued
Prior - Web Button Code Investigation Start
Tags: Practical Programming, JavaScript, Basics