Learn JavaScript Basics: Basic Features

Follow us on LinkedIn for our latest data and tips!

, ,

Learn JavaScript Basics: Basic Features


Variables are a means for holding on to or pointing to specific values. In JavaScript, variables are declared by using the var keyword and a valid variable name (the var keyword only needs to be used when first declaring a variable). A variable holding a numerical value might look like this:

var num = 3;

A variable holding a string (text) value might look like this:

var str = “Here is some text.”;

Variables in JavaScript have scope. Variables can either have global scope (meaning all parts of the program will have access to the variable once it’s been declared) or local scope (basically meaning that the variable has been declared within what’s called a function, and can only be accessed within the context of that function (we’ll cover functions in detail later on)).

More technical details on variables: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Variables


Explore JavaScript Courses

Operators are special types of functions. They have the ability to perform operations on values. When dealing with numeric values in JavaScript, arithmetic operators are important. Arithmetic operators in JavaScript include:

+ (addition) – adds values together
– (subtraction) – subtracts values from one another
* (multiplication) – multiplies values by one another
/ (division) – divides a value by another value
% (modulus) – gives the remainder value for one value divided by another
++ (incrementor) – takes a value and adds one to it
— (decrementer) – takes a value and subtracts one from it

Besides arithmetic operators, there are also conditional operators. Conditional operators will be covered later on…

More technical details on operators: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators

Data Types and Structures

Numbers – Data with a type of “number” is numerical data. JavaScript numbers can be positive or negative, integer or floating point (decimal). Numbers can be added, subtracted, multiplied, and divided. JavaScript contains a native Math object that allows for rounding, random number generation, and working with exponents.


var numOne = 1;
var numTwo = 2;
var numThree = numOne + numTwo;

console.log(numThree) //3

Strings – Data with a type of “string” is textual data. JavaScript strings are enclosed in either single quotes (‘ ’) or double quotes (“ ”). Strings can be added to other strings, which is called concating, or concatenation. Strings can split, sliced, spliced and more. It should be noted that JavaScript strings are immutable; meaning that once they are created, the original string cannot be changed… any changes must be reassigned to a new variable.


var str1 = “Im a string!”;
var str2 = “ And so am I!”;
var str3 = str1 + str2;

console.log(str3); //I’m a string! And so am I!

Booleans – Data with a type of boolean is true or false data. Boolean values assist with creating flow-control based upon conditional logic. Variables holding boolean values can be reassigned or inverted.


var theTruth = true;
var notWorking = false;
theTruth = false; //reassigned
notWorking = !notWorking //the ! is a logical operator… it does the inversion

console.log(theTruth); //false
console.log(notWorking); //true

Undefined – undefined will be the value of any variables that have been declared, but not yet assigned a value.


var und;

console.log(und); //undefined

Null – null indicates an empty value, or the absence of any value whatsoever. For example, if a JavaScript program tries to find the sibling element of an HTML element that doesn’t have any sibling elements, then a value of null will be returned.

More technical details on data types: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Data_types

Arrays – Arrays are data structures used to hold multiple values. An array can hold an indefinite amount of values. The values can be of any of the types previously discussed. To create an array, simply declare a variable and set it equal to []; then write the elements/values within the brackets. The elements must be separated by commas. The elements will be indexed starting at 0, reading numerically from left to right or top to bottom. Array elements can be accessed by using bracket notation.


var arr = [1, true, “three”, null];

console.log(arr[0]); //1
console.log(arr[1]); //true

Objects – Objects are immensely important within JavaScript. Pretty much all other data types are actually objects. Objects can be thought of simply as arrays containing key:value pairs; keys are also referred to as properties. To create an object, just declare a variable and set it equal to {}; then write the key:value pairs. Keys can be written with or without quotes, and can take on numerical values. Just like arrays, the key:value pairs must be separated by commas. Object properties can be accessed via bracket notation (just like arrays) or through dot notation.


var obj = {

console.log(obj[“key2”]); //2;
console.log(obj.key3); //three

More on arrays: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

More on objects: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects


Built-In Objects

JavaScript comes preloaded with some pretty handy built-in objects. The browser window itself is represented by the window object. An HTML document rendered by by the browser is represented by the document object (this will be very important later on!). Following is a list of commonly used fundamental objects in JavaScript:

Object – the object constructor from which all objects in JavaScript are descended
RegExp – the Regular Expression object; regular expressions are used for pattern matching
Date – an object used in dealing with dates and time
Math – an object containing functions/methods useful for performing mathematical operations

Functions in JavaScript (which we’ll cover next) can be used to accomplish things… things like taking a number, adding to it, and returning the new value; or taking a string, slicing a part out of it, and returning that sliced out bit. Functions that are associated with objects are called methods.

More on built in objects: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects#Fundamental_objects


Functions in JavaScript are how things get done. They are basically blocks of code designed to accomplish specific tasks. Functions typically consist of the function keyword, a pair of parentheses, and then a pair of curly braces in which code is written (this is called the code block). There are several ways to create or declare functions in JavaScript. Functions can be created by declaring a variable and setting the value of the that variable equal a function. It looks like this:

var myFunc = function() {//code...}

An alternative way to declare functions in JavaScript is by using the function keyword. It looks like this:

function myFunc() {//code...}

Calling or invoking a function is done the same way, regardless of the way in which the function was created. To call a function, simply write the name of the function followed by the parentheses. Like this:


It is possible to define a set of variables to be used within a function. These variables are referred to as parameters. To define a function’s parameter(s), all you have to do is write the names of them within the parentheses. Like this:

function myFunc(param1, param2) {//code...}

Then, when you call the function, it is possible to pass values to the parameters. These values are referred to as arguments. All together it looks like this:

function myFunc(param1, param2) {//code...}

myFunc(1, “two”);

You will then be able to use the variables param1 and param2 inside of the function body or code block; inside of the curly braces. The value of param1 will be 1 and the value of param2 will be “two.” You can then manipulate the parameter values/variables within the function. To get them back out of the function, you will use the keyword return. You simply write return in front of the value that you want your function to return. All together it looks like this:

function add(p1, p2) {
  return p1 + p2;

add(1, 2); //1 and 2 are passed as arguments, they are added and returned


console.log(add(1, 2)); //3

More on functions: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions

LAB 2: Variables and Operators, Data Types, and Functions