JavaScript for absolute Beginners: Data Types & Functions

In JavaScript, there are seven primitive data types. Now, to understand what a primitive data type is would require knowledge of objects. Since we haven’t gotten that far, let’s just keep in mind that a primitive data type is immutable — meaning the data can not be altered, and honestly, that’s lowkey the most important thing you should know about primitive data types.

A.) PRIMITIVE DATA TYPES

The seven primitive data types of JavaScript are:

1. String
2. Number
3. Boolean
4. Null
5. Undefined
6. Symbol
7. BigInt

In this document, we won’t talk about Symbol and BigInt simply because we won’t use them, but if interested I do encourage you to google those terms to gain a better understanding.

1. String

• stores a series of characters
• any text inside single or double quotes
• zero based index (will get into that shortly)

2. Number

• a literal number
• can be represented by both integers and floating points. It’s important to note while integers and floating points are both numbers, integers are described as numbers without a decimal — while on the other hand floating point numbers do have a decimal, in the simplest terms.
• can not represent numbers higher than 2⁵³ and no smaller than -2⁵³. This is just to be concise, but in most cases number should be an acceptable data type to store numeric values. If you need to store larger or smaller numbers than allowed — then use BigInt because that is exactly what it is designed to do.

3. Boolean

• returns only one of two possibilities: true or false

4. Null

• best described as the intentional absence of a value

5. Undefined

• best described as an unintentional absence of a value

So what does it mean to be immutable?

Yes, we’ve already stated that immutable data types can not be altered — but what exactly do we mean by this? Well, immutable data types can be reassigned but can not be directly changed.

For example, and in this example we will use a built in JavaScript string method to better understand immutability. We will go deep into methods and what they are later because this involves understanding of objects, but methods are properties of objects which reference built in functions. Functions are blocks of code that perform a task.

So, we will use .slice()

NOTE: Whenever you see ‘( )’ it is indicative of a function. Only functions follow with ‘( )’, and this is called invocation. We will get into that in much more detail later — but I wanted to point it out because it’s important to understand and identify syntax and its meaning.

As stated earlier, strings are zero indexed. Meaning the first character is at position 0, the second at 1, third at 2 and so forth

Example:

let favoriteFood = ‘Tacos’;

The ‘T’ in tacos is at index 0. The ‘A’ in tacos is at index 1, and the ‘C’ is at index 2 and so forth.

Slice is a built in javascript function (method) that extracts parts of a string through index access and returns that value. To use slice in the way we will, two arguments must be provided, the index of where you want to start and the index of where you want to end.

NOTE: Arguments represent values specific to a function. Sometimes functions do not have any arguments, and sometimes they have 1 or 2 or 3 and so forth.

Slice arguments are optional, meaning if you provide no arguments it will return the whole string. If you provide one argument, it will assume the index provided is where you want to begin the extraction and return the value starting at that index. And if you provide 2 arguments, it will assume it is the indexes of where you want to start and end.

So, for example:

let streetName = ’42 Wallaby Way, Sydney’;

let slicedStreetName = streetName.slice(0, 10);

console.log(slicedStreetName); ← — will return ’42 Wallaby’;

.slice() does not change the original value of streetName, it just uses it as a reference to create a new value in this instance. The variable streetName will always be ’42 Wallaby Way, Sydney’ unless you specifically reassign it:

streetName = ‘Jordan Ave.’;

This is the definition of immutability. Can not be altered at the original reference, and can only be changed through reassignment.

Now, if this doesn’t make much sense it will start to as we progress. JavaScript is all about the bigger picture, so do not feel discouraged. The more things you are introduced to and understand, the easier the language, rules, and syntax as a whole will be to understand.

Numbers are the same:

let myFavNumber = 7;

There is no way to change the value of myFavNumber without reassigning it completely.

B.) OBJECT DATA TYPES

The object data type is mutable, meaning it can be changed and manipulated. There are two data types you must be aware of:

1. Array

• an object that stores an ordered list of values
• zero indexed, where the first value of the array is at position 0, the second at 1, and so forth
• when declared, an array is defined by its brackets

Example:

let groceryList = [‘bread’, ‘milk’, ‘rice’];

Accessing Values in an Array

Each value in an array has an index. The index starts at the first value in the array, and ends at the last. The index starts at count 0 and continues assigning indexes until there are no more values. So, for our example, bread would be index 0, milk would be index 1, and rice would be index 2. Although there are three strings in the array, in javascript, the index always starts at 0. Targeting specific values in an array is simple when you know what each value is in an array. By using brackets immediately after the variable name, you can pick specific values of an array based on index. For example, let’s say we wanted to only get the value of ‘bread’ from the array:

groceryList[0]

Since ‘bread’ is at index 0, groceryList[0] points to ‘bread’. Essentially, groceryList[0] is a representation of ‘bread’.

Arrays have many built in methods (remember slice?), but it also has properties. While method and property are both children of an object, the difference is property holds object data while methods perform a task. There is one property that I feel must be understood straight from the jump, and that’s .length

NOTE: Notice that ‘( )’ does not follow .length like it did with .slice(). That’s because .length is a property whereas .slice() is a function (method).

.length is a property of arrays (and it is also a property of strings). This property returns an integer value that describes how many values are present. In strings, .length will return the count of characters. In arrays, .length will return the count of values inside of an array. This is the most important part to remember, .length will count the values starting at 1 while JavaScript counts values starting at 0, meaning .length will always return 1 more value than actually present. So in our case..

groceryList.length will return 3 but JavaScript’s count will be 2. This isn’t because JavaScript isn’t aware that there are actually 3 values present, but since JavaScript’s count start at 0, it will also be one less count.

2. Object Literal

An object literal is an unordered list of name/value pairs separated by a comma and encapsulated with curly braces. An object has properties and methods. Properties describe something while methods do something. Like an array, an object is enclosed with special characters (curly braces). An object is defined by its curly braces, which encapsulates data. An example of an empty object:

let user = {};

Above is the declaration of an empty object, but it would be more valuable if the object contained data. Let’s add two properties to the user object: userName and userEmail.

let user = {

userName: ‘bookgeek’,

userEmail: ‘bookgeek@info.com’,

};

KEY: userName

VALUE: ‘bookgeek’

KEY: userEmail

VALUE: ‘bookgeek@info.com’

Properties in objects are names which are also called keys that are used as identifiers. All keys are unique and have a value, which can be any data type. Properties are separated by commas, and the semicolon ends the declaration statement. You can think of properties as object specific variables because the way they act is similar — as far as representation.

There are two ways to access properties in an object. If you know the property name, you can use dot notation. Dot notation is the object name followed by a period and the name of the property. Bracket notation is the object name followed by the property name enclosed in brackets.

Proper Syntax for dot notation:

user.userName

Proper Syntax for bracket notation:

user[‘userName’]

NOTE: Object literals do not have a length property, so using .length on the user object will return a value of undefined — meaning the property does not exist on the object.

C.) FUNCTIONS

Functions are essentially an object because they can store information and are versatile with how that information is manipulated — but to be clear the actual data type of a function is function because it’s a special type of object — not necessarily the same as an array or an object literal per se.

A function is a set of statements that accomplish a task. Just like with everything else in JavaScript, syntax is important. There are function declarations and functional expressions. The main difference between function declarations and functional expression is hoisting.

Hoisting describes how code is loaded at the start of a program. Function declarations are loaded at the beginning of a program while functional expressions are only identified by the interpreter when it reaches that line of code. Now, lets view how to declare both a function declaration and a function expression:

Function Declaration:

function carName(){

//do something

};

Anonymous Function Expression:

let carColor = function(){

//do something

};

Named Function Expression:

let carMake = function nameOfCar(){

//do something

};

The visual difference between anonymous and named functional expressions is one has a name and the other doesn’t. Of course, there’s more science to the madness. Essentially, the advantages of naming functional expressions is for debugging purposes. Functional expressions have a name property, which if the expression has a named function, it can be identified simply by using dot notation on the variable. In this case:

carMake.name would return nameOfCar

but

carColor.name would return carColor

So, the name property allow you to identify if a functional expression is named or not. And if it isn’t, then the variable will be returned as the variable name.

For now, we will use function declarations — but later with some examples we will discuss hoisting more in depth.

Let’s create a function that uses variables to display ‘Good Morning, (name)’

First we’d need to declare a function and give it a good descriptive name. When naming functions, camelCase format still applies. Let’s name the function greeting:

function greeting(){

};

The function keyword initiates and declares the function. The name of the function must be unique and for better practice, in camelCase format. The parenthesis following the name of the function holds parameters. Parameters are a part of the function, and represent arguments. Arguments are values passed to the function when it is invoked. If the parenthesis is empty, the function doesn’t have any parameters. The body of the function, where the instructions go is enclosed with curly braces. The end of the function statement is closed with a semicolon.

Parameters vs Arguments

Parameters of a function are a part of the functions definition. It represents outside values that will be used inside of the function. Parameters are variables specific to a function. The value of the variables are determined by the arguments. Arguments are what is being passed into the function. Let’s take a look:

function greeting(custName){

return custName;

};

custName is a parameter of the function greeting. The function greeting is returning the value of the variable custName. Take note of the return keyword. Functions must return a value, and if they don’t, the function’s value is undefined. The return keyword ceases execution of a function and returns a value.

Let’s look at how to invoke a function:

To invoke a function, you must call the function by name and insert a value if the function requires arguments.

greeting(‘Luis’);

If you type the function in your code editor and run it, you will see the function greeting returns a string that reads ‘Luis’. In this context, the string ‘Luis’ is an argument. When greeting is called, ‘Luis’ is passed into the function as ‘custName’. The value of a function’s parameters are always the value of the argument passed through when invoked. Arguments of a function can be any data type, and can also be a variable. Declared and invoked functions can have any amount of parameters and arguments. Arguments and parameters can be added by separating each value with a comma.

NOTE: For best practice, parameters and arguments must be equal in length in most cases. Example, if you have a function that has two parameters defined, then when you invoke that function there must be two arguments provided.

If no argument is passed to a function that has a parameter(s), then the function will return undefined if it is dependent on the value of the parameter. If an argument is passed to a function and the function doesn’t have any parameters, the argument will be ignored and the function will return either undefined if it doesn’t return anything or a value if it does.

So, the proper way to write a function that returns ‘Good morning, (name)’ would be:

function greetings(custName){

return ‘Good Morning, ‘ + custName;

};

greetings(‘Luis’); //will return ‘Good Morning, Luis’

Now that we have a basic understanding of functions, it’s time to discuss hoisting. Hoisting basically describes how the interpreter reads the program. All function declarations are hoisted to the top, while functional expressions aren’t. For example:

greetCustomer(‘Moe’);

function greetCustomer(name){

return name;

};

Will return Moe, even though the function declaration occurs after the function invocation. This is because the interpreter hoists the function declaration to the top of the document automatically. But what if you did..

greetCustomer(‘Jaz’);

let greetCustomer = function(name){

return name;

};

Then you will get an error that says greetCustomer is undefined, which means it doesn’t exist because you attempted to invoke a function that the interpreter does not yet know exist. This is due to hoisting, functional expressions are not hoisted to the top of programs and any reference to them must be after the declaration.

Alright i’m going to wrap it up. This is a lot of information but i’m confident you can learn and master it. If you followed along but found yourself getting stuck here and there understanding the concepts, I encourage you to read it over again and google key words to help you gain a better understanding. As i’ve stated in the first lesson, research is a big part of being a good programmer so that is why I recommend it so often. If after you’ve done research you are still struggling to understand please leave a comment and I will provide you with direction

Next Lesson: We will write more complex functions using built in functions and start beginning to really learn logic. At the end of the next lesson, projects will be given to help you start practicing logic.

Happy Coding