JavaScript Building Blocks
Variables and Operators
Alongside HTML and CSS, JavaScript is a foundational element of the internet.
Context
JavaScript was introduced as a scripting language by Netscape Communications in 1997. You may have seen JavaScript referred to as ES6 or ES2015, but be informed, ES6 is not JavaScript. ES6, short for ECMAScript 6, is a set of standards released by Ecma International.
“JavaScript ES6” refers to the version of JavaScript that follows the standards outlined by ES6.
This is not the latest version, but it is an important version because it introduced new features that enabled developers to write sharper code. Some of those features are:
- more variable keywords, let and const
- arrow functions
- classes
- promises
Let’s Dive in, first with Data Types
Data types are different kinds of data a programmer would use. There are seven in JavaScript:
- String: characters, often letters but can include numbers, used with single or double quotation marks
2. Number: includes decimals, not used with quotation marks
3. Boolean: represents a true or false value, not used with quotations marks
4. null: no value assigned
5. undefined: no value assigned but different than null
6. Symbol: unique identifiers
7. Objects!: collections of related information
*console of console.log( ) is an object!
Comments
Make notes about the code for yourself and for others when you’re gone. To me, this is cool because you can explain the code or outline instructions and the computer will totally ignore it.
- Single Line Comments are indicated by double back slash at the beginning of a line of code
- Multi Line Comments are indicated by a set of 2 asterisks encased by back slashes.
Variables
A variable is a container for information that is labeled, stored in memory and can be re-used. You can only do a few things with variables:
- create a variable and label the information you assign to it
- store the information assigned to a variable
- update the information assigned to a variable
- get the information stored in a variable (re-usability)
Anatomy of a variable, let’s start with Initialization. . .
In order to initialize or declare a variable, first you need to use a const or let (or var) keyword.
- const is used if the variable will not change. You can not change the value of this variable. If you try, you will get errors.
- let is used if the variable may be subject to change. You can update the value of this variable but you can not re-assign its value.
- var was/is used similarly to let, its value can be both updated and re-assigned.
*Not covered here, hoisting and scope of variables but this Free Code Camp link explains these concepts more.
Naming variables
Next, name or label the information you are storing in the variable and there are rules:
- names are case-sensitive, and in JavaScript using camelCase is conventional
- a name must start with a letter, you can not begin a variable’s name with a number.
- a variable’s name can not be an established keyword.
Operators
Before moving on to the third piece, you should know about characters called operators which are useful to perform tasks. There are many operators. The ones you may be most familiar with are MATH OPERATORS!!
Third, use the assignment operator, known also as the equals sign = , to assign a value to the variable. You can also use math assignment operators as well as the increment operator and decrement operator to calculate new values among your variables.
Lastly, it is conventional to close your variable initialization with a semi-colon!
Things with Strings
You can combine strings with the addition sign +, aka math operator, adding one string onto the end of another. This is known as concatenation.
Take this a step further and insert variables into the string using template literals.
`${ what }` Things to know about template literals
A template literal is wrapped in back ticks `` the character that commonly lives with and beneath the tilde ~ to the left of the number 1 on your keyboard.
Within the template literal, use the dollar sign $ and the curly brackets { } to insert or interpolate a variable. It looks like this:
One last thing about strings
Any given string has a property called .length and a bunch of methods like .fontcolor() , .trim() and many more.
A property can be understood as an attribute of the string. This is a teaser for objects and object oriented programming.
A method can be understood as a special function. In JavaScript, some methods come built-in depending on what you are working with but you can also define your own.
To access the length property or method, you would add a dot operator aka, a period . to the end of your string then add the property or method you want to use. It looks like this:
// demo the .length property on a string
console.log('Pamela'.length);
//returns the number 6
// demo the .fontcolor() method on a string console.log('Pamela'.fontcolor(“FA8072”));
// returns HTML accordingly: <font color=“FA8072”>Pamela</font>
Closing
From here, a great place to continue learning would be objects. Javascript is an object based language and this is just the tip of the iceberg in regards to foundations.
