Syntax, Variables, and
Data Types
David Tucker
CTO Consultant
@_davidtucker_ | davidtucker.net
Syntax
Syntax is a set of rules that defines how the collection of
characters and symbols should be structured within a
programming language.
index.js
console.log("Hello");
console.log("1"); console.log("2"); console.log("3");
JavaScript console.log("2");
Statement console.log("3");
let firstName = "David";
let sum = 2 + 3;
console.log(sum);
JavaScript Keywords
abstract default for new throw
arguments delete function null throws
await do goto package transient
boolean double if private true
break else implements protected try
byte enum import public typeof
case eval in return var
catch export instanceof short void
char extends int static volatile
class false interface super while
const final let switch with
continue finally long synchronized yield
debugger float native this
index.js
// Creating the name variables
JavaScript let firstName = "David";
Comments let lastName = "Tucker";
// Logging name to the console
console.log(`Hello ${firstName} ${lastName}`);
Comments
Comments
In programming, a comment is text within the source code that is ignored by
the engine running the actual application. As such, changing or removing
the comment would have no effect on the actual application.
Why We Use Comments in JavaScript
To help other humans To add metadata for
understand the code tools analyzing the code
index.js
// This is a single-line comment
let firstName = "David";
JavaScript
Comments /*
This is a multi-line comment. You can
place more information in this syntax.
*/
let lastName = "Tucker";
index.js
/**
* Joins the first and last names together.
*
* @param {string} firstName The first name
Documentation * @param {string} lastName The last name
and Configuration * @return {string} The full name
*/
function getFullName(firstName, lastName) {
return `${firstName} ${lastName}`;
};
let lastName = "Tucker"; // eslint-disable-line
Robert C. Martin, Clean Code
“Nothing can be quite so helpful as a well-
placed comment. Nothing can clutter up a
module more than frivolous dogmatic
comments. Nothing can be quite so
damaging as an old crufty comment that
propagates lies and misinformation.”
Variables
Phil Karlton
“There are only two hard
things in Computer Science:
cache invalidation and
naming things.”
• Names can contain
letters, digits, and the
$ and _ characters
Variable Naming
• Cannot start a name
Rules with a digit
• Names are case
sensitive
• Variable names usually
start with a lowercase
Variable Naming letter
Best Practices • Names leverage camel
case
index.js
// Assigning variable values
let firstName = "David";
let lastName = "Tucker";
let numYearsEmployment = 6;
let dateBirth = new Date("January 1, 1982");
JavaScript
// Changing a variable created with let
Variables numYearsEmployment = 7;
// Using const to create a constant
const title = "VP of Engineering";
title = "CTO"; // This would cause an error
// Using var to define a variable
var department = "Engineering"; // Not recommended
Garbage Collection
Garbage collection (GC) is a form of automatic memory
management. The garbage collector attempts to reclaim memory
which was allocated by the program, but is no longer referenced;
such memory is called garbage.
Wikipedia
Data Types
Dynamic Typing
JavaScript is a dynamic language with dynamic types. Variables in
JavaScript are not directly associated with any particular value
type, and any variable can be assigned (and re-assigned) values
of all types.
MDN Web Docs
Memory in JavaScript
Stack Heap
JavaScript Data Types
Primitive Types Objects
Primitives
In JavaScript, primitives are immutable, meaning they cannot be
changed. These values have no methods or properties and their
data is stored directly on the stack, since the engine knows
exactly how much memory to allocate for that piece of data.
Primitives are passed by value.
Objects
In JavaScript, objects are mutable, meaning that their contents
can be changed without creating a new object. Objects can
contain a collection of properties. They are passed by reference
and stored on the heap.
Understanding the Data Types
Primitives VS. Objects
Boolean Plain objects
Number Functions
BigInt Collection types (Array, Map, Set)
String Dates
Symbol Class instances
Null Errors
Undefined Promises
MDN Web Docs
“All primitive types, except null and
undefined, have their corresponding
object wrapper types, which provide
useful methods for working with the
primitive values.”
index.js
Primitive
// String
Wrapper Methods let name = "David";
let upperCaseName = name.toUpperCase(); // DAVID
Creating and Using Strings
Using Boolean Values
Storing Numeric Values
Number
The JavaScript Number type is a double-precision 64-bit binary
format IEEE 754 value, like double in Java or C#. This means it can
represent fractional values, but there are some limits to the stored
number's magnitude and precision.
MDN Web Docs
BigInt
BigInt values represent numeric values which are too large to be
represented by the number primitive It is created by appending n
to the end of an integer literal, or by calling the BigInt() function
(without the new operator) and giving it an integer value or string
value.
MDN Web Docs
...
Understanding Null and Undefined
Undefined and Null
In JavaScript undefined and null both represent something without
a value but for different use cases. If you define a variable but don't
assign a value, the value is undefined. If you want something to not
have a value, you can assign it to null.
JavaScript Objects
Working with Dates
Classes
Classes
Classes are a template for creating objects. They encapsulate data
with code to work on that data. Classes in JS are built on prototypes
but also have some syntax and semantics that are unique to classes.
MDN Web Docs
Constructors
Static initialization blocks
Supported Class Public methods and fields
Features Static methods and fields
Private methods and fields
Inheritance
index.js
class CalendarDay {
// private fields
#month;
#day;
#year;
//constructor
Creating a constructor(month, day, year) {
JavaScript Class this.month = month;
this.day = day;
this.year = year;
}
// public method
toString() {
return `${this.year}-${this.month+1}-${this.day}`;
}
}
index.js
Using a // Using our new class
let day1 = new CalendarDay(2023, 0, 1);
JavaScript Class console.log(day1.toString());
// Console returns "2023-1-1"
