JavaScript Statements and Syntax: JavaScript Newbies

This blogpost has notes about JavaScript Statements, JavaScript Syntax, and JavaScript Good Practices for beginners.

While I have years of experience with HTML/5 and CSS/3, it seems like in order to learn React JS, I need to learn some JavaScript first. In an effort to evaluate how much JavaScript one needs to know in order to begin learning React, I’m teaching myself JavaScript from scratch.

JavaScript Programs vs JavaScript Statements

• Computer Program: List of “instructions” to be “executed” by a computer
• Statements: Programming instructions

In the same vein…

• JavaScript Program: List of JavaScript statements to be executed by a computer
• JavaScript Statements: JavaScript programming instructions

JavaScript Programs and JavaScript Statements are often called JavaScript Code.

JavaScript Data Types

JavaScript programs manipulate “values,” and all of those “values” belong to a “Data Type.”

• Variables can hold numbers and strings (text values)
• If you put a number in quotation marks ( ” or ‘ ), it will be treated as a text string
• Functions are special type of objects

Data Types:

• Number
• String
• Boolean
• Function
• Object
• Symbol
• null
• undefined

JavaScript Statements

JavaScript Statements are made up of Values, Operators, Expressions, Keywords, and Comments.

// This is a Comment

var price1 = 7; // Assigning Variable (Value) to "price1" using Assignment Operator ( = )

var price2 = 6; // "var" is a Keyword

var total = price1 + price2; // Use Arithmetic Operator ( + ) to add "price1" and "price 2"; This is an Expression

• Statements are executed in the same order as they are written
• Add semicolon ( ; ) at end of each executable statement
  • When separated by semicolons, multiple statements on one line are allowed
• Code Blocks: JavaScript Statements grouped together inside curly brackets ( { … } )
• JavaScript Statements often start with a Keyword to identify the JavaScript action to be performed
  • Keywords are reserved words, and cannot be used as names for variables
  • This is the full list of JavaScript Keywords: JavaScript Reserved Words

JavaScript Syntax

JavaScript Syntax is a set of rules governing how JavaScript Programs are constructed.

JavaScript Values

There are two types of JavaScript Values: Literals and Variables.

var userName = ' Joe ' ; // String
var userNumber = 5 ; // Number

• Literals: Fixed Values
  • Numbers are written with or without decimals
  • Strings are text, written within double ( ” ) or single ( ‘ ) quotes

var schoolName ; // Use var Keyword to declare variables; Variable is undefined

var schoolName = "Centennial" ; // Assign value to Variable with equal sign

var schoolName = "Centennial" , schoolMascot = "Tigers" ; // Can declare multiple Variables in one statement by separating with commas

• Variables: Variable Values
  • Containers for storing data values
  • Use “var” keyword to declare Variables
  • After declaration, the Variable has no value (undefined)
  • Assign a value to the Variable with equal sign ( = )
  • Can assign a value when you declare it
  • Can declare many variables in one statement by separating them with a comma ( , )
  • Variables will not lose its value even if you re-declare it
  • Declared using one of three keywords: let, const, var
    • let: Declare block-level variables
    • const: Declare variables whose values are never intended to change
    • var: Does not have restrictions that other keywords have because it was traditionally the only way to declare variables in JavaScript

JavaScript Operators

There are many types of JavaScript Operators to help you assign values or do calculations.

• Arithmetic Operators ( + – * / % ): Perform arithmetic on numbers (literals or variables)
• Assignment Operator ( = ): Assign values to variables
  • Addition Assignment Operator ( += ): Adds a value to a variable
  • Not mathematical; Mathematical “equal to” is written as two equal signs ( == )
• String Operators ( + += ): Add (concatenate) strings
  • Concatenation Operator: When + Operator is used on strings
  • += Assignment Operator can be used to add strings
  • If you add a string and a number, the result will be a string
• Comparison Operators ( == === != ? ): Test for true or false
• Logical Operators ( && || ! ): Test for true or false
• Type Operators ( typeof instanceof ): Find data type of a variable
• Bitwise Operators ( & | ^ ~ << ): Numeric operand is converted to a 32 bit number, and the result converted back to a JavaScript number
  • I’ll admit – I have absolutely no idea what this means 😂

JavaScript Expressions

JavaScript Expressions are combination of values, variables, and operators, which computes to a value.

• Computation is called Evaluation

JavaScript Keywords

JavaScript Keywords identify actions to be performed.

• Refer to JavaScript Statements section for list of Keywords

JavaScript Comments

JavaScript Comments are ignored when executing code. They are used to prevent execution when testing alternative code, or to explain code to make it more readable.

• Single-Line Comments: Code after double slashes ( // )
  • Most common comments
• Block Comments: Between /* and */ for multi-line comments
  • Often used for formal documentation

JavaScript Identifiers

JavaScript Identifiers are unique names to help identify variables, keywords, functions, and labels.

Here are some General Rules for constructing unique identifiers:

• First character must be a letter ( a ), underscore ( _ ), or dollar sign ( $ )
  • Underscores and dollar signs are considered letters
• Subsequent characters can be letters ( a ), digits ( 43 ), underscores ( _ ), and dollar signs ( $ )
• Identifiers are case sensitive
  • firstName and FirstName are 2 different variables
  • VAR and Var are not interpreted as the keyword “var”
• Tend to use Lower camelCase
• Reserved words (like JavaScript keywords) cannot be used
• They can be short names ( x , y ) or descriptive names ( age , total , studentName )

JavaScript Good Practices

There are some “Good Practices” to keep in mind when writing JavaScript, both for readability, and easier debugging.

• Add white space around Operators ( = + – * / ) to improve readability
  • JavaScript ignores multiple spaces
• Semicolons are not required after each executable statement, but recommended
• Avoid code lines longer than 80 characters
  • If a statement doesn’t fit in one line, break after an Operator
• Declare all Variables at the beginning of the script
• Escape Character: Insert \ before “ or ‘ to have them show up in the Expression

JavaScript Display Possibilities

There are a few ways JavaScript can “display” data. I’m going to list a few major ones!

• innerHTML: Write into an HTML element
• document.write(): Write into the HTML output
  • Should only be used for testing because it will delete all existing HTML if you run it after HTML document is loaded
• windows.alert(): Write into an alert box
  • The “window” keyword is optional because by default the variables, properties, and methods belong to the “window” object
• console.log(): Write into the browser console for debugging
• window.print(): Prints the current page to a printer

Trying Out JavaScript

I played around with a few new functions I learned with JavaScript today! I figured out how to hide/show HTML, and shrink/grow text sizes with document.getElementById( ).

You can run this code to see what it does here: w3schools Tryit Editor

<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p>JavaScript can show hidden HTML elements.</p>

<p id="demo" style="display:none">Hello JavaScript!</p>

<button type="button" onclick="document.getElementById('demo').style.display='block'">Show Me!</button>

<button type="button" onclick="document.getElementById('demo').style.display='none'">Hide Me!!</button>

<button type="button" onclick="document.getElementById('demo').style.fontSize='50px'">Balloon Me!!!</button>

<button type="button" onclick="document.getElementById('demo').style.fontSize='12px'">Shrink Me!!!!</button>

</body>
</html> 

Sources and Resources

I’m starting out my JavaScript learnings through w3schools’ JavaScript Tutorial section. Some of the information is from the article “A re-introduction to JavaScript” from MDN web docs.

I’ve also had the opportunity to write a few articles for egghead.io for their React Handbook!

• JavaScript Prerequisites before React
• WTF is React?
• WTF is JSX?