What is JavaScript (JS)?

• Traditionally, a scripting programming language (does NOT require a compilation step).

• Loosely typed language (Does not require defining data types for declared variables).
• Started initially as a client-side language only:
▪ JS used to run only in the web browser to allow for interactivity in different web pages
via DOM (Document Object Model) Manipulation. Example: dynamically add, edit,
or remove HTML elements and their values.
▪ Fetch data from the server via HTTP Requests after the page has been sent from the
server to the browser.
▪ Allow for more advanced programmatic form validation techniques (Form validation
beyond the basic built-in HTML validation features).
▪ Store cookies, create animations programmatically, and much more.

Notes:
▪ Compiled Languages vs Scripting Languages:
▪ A compiled language such as C++ needs to be compiled “be generated to executable
machine code” by a compiler BEFORE it is run.
▪ A scripting language such as JS is “interpreted” and run by the browser engine line by
line. No compilation is done beforehand.
▪ Nowadays, JS is compiled when used in an environment that supports both an
“Interpreter” and a “Just-In-Time JIT compiler” such as the V8 Engine. Find more
advanced details at [1].

Using JS in a Web Page

First method: write the JS code inside a script tag.

Second method (Recommended and Most Commonly Used): let the script tag point to a JS file via a
relative or an absolute path.
Variables in JavaScript
Variables can be declared using the keywords var, let, and const.

var let const

Value Reassignment
allowed allowed not allowed
Example:
const x = 1;
Example: Example:
x = 2; //error
var x = 1; let x = 1;
x = 2; x = 2;

Variable Redeclaration
allowed not allowed not allowed
Example: Example:
Example: let x = 1; const x = 1;
var x = 1; // some lines of code // some lines of code
// some lines of code let x = 2; //error const x = 2; //error
var x = 2;

Hoisting
hoisted “acts” as not being hoisted “acts” as not being hoisted

What is “Hoisting” in JavaScript?

It is the process whereby the JS interpreter appears to move the declaration of functions, variables or
classes to the top of their scope, prior to execution of the code. Therefore, they can be defined and
used before being declared.
Example:
Variable ‘x’ being hoisted due to the usage of var:

Variable ‘x’ acting as if it is not being hoisted due to the usage of let:

Notes:

• We say, “acts as not being hoisted” because let and const variables are actually hoisted,
however, they cannot be defined before declaration due to “Temporal Dead Zone” TDZ. Find
more advanced details about Hoisting and TDZ in [2, 3].
• In modern JavaScript, we typically do not use var that often. Instead, we mainly use “let” and
“const” where appropriate to avoid unexpected errors due to hoisting.
Functions in JavaScript
In JavaScript, functions could be written in different ways as follows:
Function Declarations:

Function Expressions:

Arrow Functions:

When you return immediately, it can be as short as the following with no curly braces or even a
return statement!

What’s the difference?

• Function declarations are hoisted. However, function expressions and arrow functions are
not! (Try it).
• Function expressions and arrow functions are in fact “Anonymous Functions”, which means
that they do not have a name or an identifier. We only store them in a variable if we want to
explicitly call them later. In fact, there are some cases in which we do not need to call them
explicitly at all; instead, they are automatically called by another function. This will become
much clearer when we go over some of the most commonly used array methods, and the
concept of callbacks.
• In functions, parameters are always passed by value!
▪ This means that for a parameter of a primitive data type such as number, string, or
Boolean, if its value is changed inside a function, it is only changed within the function!
However, for complex types such as arrays and objects, since the value is the reference
itself, modifying an element inside the array or the value of a key inside the object will
have effect both inside and outside the scope of the function!
Arrays

There are multiple ways to create and initialize arrays as follows:

Looping Over Arrays

To loop over an array, you can create a basic for loop where the iterator is the index as follows:

Alternatively, if you do not need the index, you can loop over the loop in a more elegant way using
the “for … of” loop syntax as follows:

Array Methods
Arrays in JavaScript have multiple methods such as:

.push(element) Adds a new element at the end of the array

.pop() Removes the element at the end of the array
.shift() Removes the first element in the array
.unshift(element) Adds a new element at the beginning of the array

For a list of all array properties and methods, refer to the official MDN Docs [4].
Examples of Array Methods with Arrow Functions
filter method:

The filter method is used to create a new array of all the elements in the original array that match a
certain condition. The original array stays as it is without modification.

The method internally loops over each element in the array, invoking a callback function we provide
that tests whether this element should be added in the new resulting array or not.

The filter method expects the callback function as an argument. Therefore, we defined an arrow
function that takes the current element of the array named “student” in this case and returns true if
the student major is ‘SE’, or false if the major is anything other than ‘SE’. If the comparison results in
true, the student gets added to the new array, else, it is simply discarded from the new array.

Note:

You can find more information and examples of the most important and commonly used array
methods in [5].
References

[1] A. Wan, "How JavaScript works: Optimizing the V8 compiler for efficiency", LogRocket, 2019.
[Online]. Available: https://blog.logrocket.com/how-javascript-works-optimizing-the-v8-compiler-
for-efficiency/.

[2] "Hoisting - MDN Web Docs Glossary", MDN Web Docs, 2022. [Online]. Available:
https://developer.mozilla.org/en-US/docs/Glossary/Hoisting.

[3] "Temporal dead zone (TDZ)", MDN Web Docs, 2022. [Online]. Available:
https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Statements/let#temporal_dead_zone_tdz.

[4] "Array - JavaScript", MDN Web Docs, 2022. [Online]. Available: https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Global_Objects/Array.

[5] Y. Chavan, "The Most Useful JS Array Methods Explained with Examples", FreeCodeCamp, 2021.
[Online]. Available: https://www.freecodecamp.org/news/complete-introduction-to-the-most-
useful-javascript-array-methods/.