Route Academy

JavaScript Basics: Week 2

A Guide for Beginners

Prepared for Students at Route Academy

May 2025
JavaScript Basics - Route Academy Week 2

Contents

1 Welcome to Week 2 of JavaScript! 3

2 Functions: Your Code’s Superpowers 3

2.1 Creating a Function (Declaration) . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
2.2 Function Expression . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
2.3 What’s the Difference? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
2.4 Returning Values from Functions . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
2.5 Example: A Candy Calculator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

3 Scope: Where Variables Live 4

3.1 Global Scope . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
3.2 Local Scope . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
3.3 Example: A Secret Treasure Chest . . . . . . . . . . . . . . . . . . . . . . . . . . 5

4 Hoisting: JavaScript’s Magic Trick 5

4.1 Hoisting with Variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
4.2 Hoisting with Function Declarations . . . . . . . . . . . . . . . . . . . . . . . . . . 6
4.3 Hoisting with Function Expressions . . . . . . . . . . . . . . . . . . . . . . . . . . 6
4.4 Mixed Hoisting Example . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
4.5 Example: A Surprise Party . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

5 Objects: Your Super Organizer 7

5.1 Creating an Object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
5.2 Adding Actions to Objects (Methods) . . . . . . . . . . . . . . . . . . . . . . . . . 8
5.3 Accessing Object Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
5.4 Nested Objects: Backpacks Inside Backpacks . . . . . . . . . . . . . . . . . . . 9
5.5 Built-in Objects: JavaScript’s Helpers . . . . . . . . . . . . . . . . . . . . . . . . . 9
5.6 Example: Your Dream Robot . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

6 Arrays: Your Magic List 10

6.1 Why Use Arrays? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
6.2 Creating an Array . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
6.3 Accessing Array Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
6.4 The length Property . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
6.5 Looping Through an Array . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

7 Array Methods: Magic Tricks for Lists 11

7.1 Adding and Removing Items . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
7.2 Slicing and Joining Arrays . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
7.3 Sorting and Reversing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
7.4 Example: Your Superhero Team . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

8 Common Interview Questions for Week 2 13

8.1 Question 1: What’s the Difference Between Declaration and Expression? . . 13
8.2 Question 2: What Does This Code Output? . . . . . . . . . . . . . . . . . . . . . 13
8.3 Question 3: What Happens Here with Hoisting? . . . . . . . . . . . . . . . . . . 13

1
JavaScript Basics - Route Academy Week 2

8.4 Question 4: What’s the Output of This Array Code? . . . . . . . . . . . . . . . . 14

8.5 Question 5: How Do You Access This Nested Object Property? . . . . . . . . 14

2
 JavaScript Basics - Route Academy Week 2

1 Welcome to Week 2 of JavaScript!

Hello, Route Academy stars! Last week, we learned how to store things in variables,
make decisions with conditionals, and repeat tasks with loops. This week, we’re going to
make our code even more exciting! We’ll start with functions to create reusable recipes,
learn where variables live with scope, understand JavaScript’s magic trick called hoisting,
organize information with objects and arrays, and explore array methods to manage lists.
Let’s dive in with some fun examples!

2 Functions: Your Code’s Superpowers

A function is like a little robot you create to do a specific job for you. You tell it what to
do, and then you can call it whenever you need that job done. It’s like having a magic
button you can press to make things happen!

2.1 Creating a Function (Declaration)

The classic way to write a function is called a declaration, using the function keyword
followed by a name.
1 function sayHello () {
2 console .log (" Hello , Route Academy !");
3 }
4 sayHello (); // Output : Hello , Route Academy !

This function is like a recipe book that’s always ready to use. You can call it as many
times as you want:
1 sayHello (); // Output : Hello , Route Academy !
2 sayHello (); // Output : Hello , Route Academy !

2.2 Function Expression

Another way to write a function is called an expression, where you store the function in a
variable, like putting the recipe in a box.
1 var sayHello = function () {
2 console .log (" Hello , Route Academy !");
3 };
4 sayHello (); // Output : Hello , Route Academy !

The function doesn’t have a name on its own—it’s stored in the variable sayHello.

2.3 What’s the Difference?

The big difference between declaration and expression is hoisting (we’ll talk about that
soon!). A declaration can be called before it’s written in the code, but an expression
cannot.

3
 JavaScript Basics - Route Academy Week 2

1 sayHello (); // Works because of hoisting

2 function sayHello () {
3 console .log (" Hello !");
4 }
5

6 sayHi (); // Error: sayHi is not a function

7 var sayHi = function () {
8 console .log ("Hi !");
9 };

2.4 Returning Values from Functions

Functions can give you something back using the return keyword. Once a function hits
return, it stops and gives back the value.
1 function addNumbers (x, y) {
2 var result = x + y;
3 return result ; // Gives back the result and stops
4 return 10; // This ’wont run
5 console .log (" This ’wont run !");
6 }
7 console .log( addNumbers (10 , 20)); // Output : 30

Here, return result gives back 30, and the function stops, so the lines after it don’t run.

2.5 Example: A Candy Calculator

Let’s create a function to calculate how many candies you can buy!
1 function buyCandies (money , pricePerCandy ) {
2 var candies = money / pricePerCandy ;
3 return candies ;
4 }
5 var candiesICanBuy = buyCandies (10 , 2); // 10 dollars , 2 dollars
per candy
6 console .log ("I can buy " + candiesICanBuy + " candies !"); //
Output : I can buy 5 candies !

3 Scope: Where Variables Live

Scope is like the ”home” of a variable—it tells you where a variable can be used. There are
two main homes: global scope (outside any function) and local scope (inside a function).

3.1 Global Scope

Variables created outside of any function live in the global scope, which means they can
be used anywhere in your code.

4
 JavaScript Basics - Route Academy Week 2

1 var globalToy = " Teddy Bear "; // This variable lives globally
2 function playWithToy () {
3 console .log (" Playing with my " + globalToy );
4 }
5 playWithToy (); // Output : Playing with my Teddy Bear
6 console .log( globalToy ); // Output : Teddy Bear

Since globalToy is global, we can use it inside the function and outside it.

3.2 Local Scope

Variables created inside a function live in the local scope, which means they can only be
used inside that function.
1 function eatSnack () {
2 var snack = " Cookies "; // This variable lives only inside the
function
3 console .log (" Eating some " + snack );
4 }
5 eatSnack (); // Output : Eating some Cookies
6 console .log(snack); // Error : snack is not defined (it only exists
inside the function )

Here, snack is local to the function, so we can’t use it outside.

3.3 Example: A Secret Treasure Chest

Let’s imagine you have a treasure chest that only opens inside a special room (a function).
1 var roomKey = " Golden Key "; // Global variable ( everyone can see it)
2 function openTreasureChest () {
3 var treasure = "Gold Coins "; // Local variable (only exists
inside the function )
4 console .log (" Using the " + roomKey + " to find " + treasure );
5 }
6 openTreasureChest (); // Output : Using the Golden Key to find Gold
Coins
7 console .log( treasure ); // Error : treasure is not defined (’its
locked inside the function )

4 Hoisting: JavaScript’s Magic Trick

Hoisting is like JavaScript preparing your code before running it. It moves all function
declarations and variable declarations (but not their values) to the top of the code.

4.1 Hoisting with Variables

When you declare a variable with var, JavaScript moves the declaration to the top, but
the value stays where it is.

5
 JavaScript Basics - Route Academy Week 2

1 console .log (" Hello ");

2 console .log( userName ); // Output : undefined
3 var userName = "Ahmed ";
4 var userAge = 30;
5 console .log (" Hello ");

JavaScript sees this as:

1 var userName ; // Declaration is hoisted
2 var userAge ; // Declaration is hoisted
3 console .log (" Hello ");
4 console .log( userName ); // undefined (no value yet)
5 userName = "Ahmed ";
6 userAge = 30;
7 console .log (" Hello ");

4.2 Hoisting with Function Declarations

Function declarations are fully hoisted, meaning you can call them before they’re written.
1 foo (); // Output : 8
2 function foo () {
3 function bar () { return 3; }
4 return bar ();
5 function bar () { return 8; }
6 }

JavaScript hoists both foo and bar functions:

1 function foo () {
2 function bar () { return 3; }
3 function bar () { return 8; } // The second bar overwrites the
first
4 return bar (); // So bar () returns 8
5 }
6 foo (); // Output : 8

4.3 Hoisting with Function Expressions

Function expressions are not fully hoisted—only the variable declaration is hoisted, not
the function itself.
1 foo (); // Error : foo is not a function
2 var foo = function () {
3 var bar = function () { return 3; }
4 return bar ();
5 var bar = function () { return 8; }
6 };

JavaScript sees this as:

6
 JavaScript Basics - Route Academy Week 2

1 var foo; // Declaration is hoisted

2 foo (); // Error : foo is undefined , not a function
3 foo = function () {
4 var bar = function () { return 3; }
5 return bar ();
6 var bar = function () { return 8; }
7 };

4.4 Mixed Hoisting Example

Let’s mix declarations and expressions:
1 foo (); // Output : 3
2 function foo () {
3 return bar ();
4 function bar () { return 3; }
5 var bar = function () { return 8; }
6 }

JavaScript hoists the declaration first:

1 function foo () {
2 function bar () { return 3; } // Hoisted declaration
3 return bar (); // Uses the declared bar , returns 3
4 var bar; // Declaration hoisted
5 bar = function () { return 8; }; // Assignment stays here
6 }

4.5 Example: A Surprise Party

Let’s see hoisting in action with a party scenario:
1 planParty (); // Output : ’Lets have a party !
2 function planParty () {
3 console .log ("’Lets have a party !");
4 }
5

6 surprise (); // Error : surprise is not a function

7 var surprise = function () {
8 console .log (" Surprise !");
9 };

The declaration planParty is hoisted, so it works, but surprise is an expression, so it

doesn’t.

5 Objects: Your Super Organizer

An object is like a magical backpack that can hold many things at once—names, numbers,
and even actions! Instead of having separate variables for everything, you can keep related
things together in one place.

7
 JavaScript Basics - Route Academy Week 2

5.1 Creating an Object

To make an object, use curly braces {} and put your items inside as key-value pairs,
separated by commas. The key is like a label, and the value is what’s inside that label.
1 var car = {
2 name: " Nissan ",
3 model : 200,
4 color : " black "
5 };
6 console .log(car); // Output : {name: " Nissan ", model : 200 , color :
"black "}

This car object is like a backpack with three pockets: one labeled name with ”Nissan”
inside, one labeled model with 200, and one labeled color with ”black”.

5.2 Adding Actions to Objects (Methods)

Objects can also hold actions, called methods, which are functions inside the object. Let’s
add some actions to our car!
1 var car = {
2 name: " Nissan ",
3 model : 200,
4 color : " black ",
5 start : function () {
6 console .log (" Start the car !");
7 },
8 stop: function () {
9 console .log (" Stop the car !");
10 }
11 };
12 car. start (); // Output : Start the car!
13 [Link] (); // Output : Stop the car!

Here, start and stop are methods. When we call [Link](), it’s like pressing a button
on the car to start it.

5.3 Accessing Object Properties

To look inside an object’s pockets, you can use three ways:

• Dot notation: [Link] (like opening a pocket with a label)

• Bracket notation: objectName["key"] (like looking up the label in a list)

• Calling a method: [Link]() (to run an action)

1 var car = {
2 name: " Nissan ",
3 model : 200,
4 color : " black ",
5 start : function () {

8
 JavaScript Basics - Route Academy Week 2

6 console .log (" Start the car !");

7 }
8 };
9 console .log([Link]); // Output : Nissan (dot notation )
10 console .log(car [" color "]); // Output : black ( bracket notation )
11 car. start (); // Output : Start the car! ( calling a method )

5.4 Nested Objects: Backpacks Inside Backpacks

Objects can hold other objects, like a small backpack inside a bigger one! Let’s create a
family object with nested information.
1 var user = {
2 fullName : "Ali",
3 age: 50,
4 eyeColor : "blue",
5 gender : "male",
6 eat: function () {
7 console .log ("Yum , ’Im eating !");
8 },
9 wife: {
10 name: "Aya",
11 age: 30,
12 son: {
13 name: " Ahmed Ali",
14 age: 15,
15 gender : "male"
16 }
17 }
18 };

This user object has a wife object inside it, and the wife object has a son object inside
it! Let’s access the information:
1 console .log(user); // Output : (the entire user object )
2 console .log(user. fullName ); // Output : Ali
3 console .log([Link] ()); // Output : Yum , ’Im eating !
4 console .log([Link]); // Output : (the entire wife object )
5 console .log([Link]); // Output : Aya
6 console .log([Link]); // Output : (the entire son object )
7 console .log([Link]); // Output : Ahmed Ali

We use dot notation to dig deeper into the nested objects, like opening smaller backpacks
inside the big one.

5.5 Built-in Objects: JavaScript’s Helpers

JavaScript comes with some special objects that help you do amazing things! Here are a
few:
• window: The big boss of your webpage—it controls everything, like opening alerts
([Link]).

9
 JavaScript Basics - Route Academy Week 2

• document: Helps you talk to your webpage, like changing text ([Link]).

• console: Your best friend for printing messages ([Link]).

• screen: Tells you about the user’s screen, like its size ([Link]).

• Array: A special tool to create lists (we’ll learn more about arrays next!).

We’ve already used [Link] and [Link]—they’re part of these built-in objects!

5.6 Example: Your Dream Robot

Let’s create an object for a dream robot that helps you with tasks!
1 var robot = {
2 name: " HelperBot ",
3 color : " Silver ",
4 tasks : {
5 clean: function () {
6 console .log (" Cleaning the room !");
7 },
8 cook: function () {
9 console .log (" Cooking a delicious meal !");
10 }
11 }
12 };
13 console .log([Link] + " is " + robot .color ); // Output :
HelperBot is Silver
14 [Link] (); // Output : Cleaning the room!
15 [Link] (); // Output : Cooking a delicious meal!

6 Arrays: Your Magic List

An array is like a magic list where you can store many things in one place, like a row of
boxes labeled with numbers starting from 0.

6.1 Why Use Arrays?

Imagine you have a list of cars, and you store them like this:
1 var car1 = "Saab ";
2 var car2 = "Volvo ";
3 var car3 = "BMW ";

What if you have 300 cars? It would be hard to manage! Arrays solve this by letting you
store everything in one list, and you can loop through them easily.

6.2 Creating an Array

To make an array, use square brackets [] and put your items inside, separated by commas.

10
 JavaScript Basics - Route Academy Week 2

1 var friends = [" Ahmed ", "Ali", " Mohamed ", "Abdo "];
2 console .log( friends ); // Output : [" Ahmed ", "Ali", " Mohamed ", "Abdo "]

This array is a list of friends. The first friend, ”Ahmed”, is in box 0, ”Ali” is in box 1, and so
on.

6.3 Accessing Array Elements

To look inside a box, use the array name and the box number (called the index) in square
brackets. Remember: the first box is 0!
1 var friends = [" Ahmed ", "Ali", " Mohamed ", "Abdo "];
2 console .log( friends [0]); // Output : Ahmed ( first box)
3 console .log( friends [1]); // Output : Ali ( second box)
4 console .log( friends [2]); // Output : Mohamed ( third box)
5 console .log( friends [3]); // Output : Abdo ( fourth box)

6.4 The length Property

The length property tells you how many boxes are in your array.
1 var fruits = [" Banana ", " Orange ", " Apple ", " Mango "];
2 var numberOfFruits = fruits . length ;
3 console .log( numberOfFruits ); // Output : 4

There are 4 fruits, so the length is 4. The last fruit’s index is length - 1, which is 3.

6.5 Looping Through an Array

You can use a for loop to visit each box in the array, like walking down a row of boxes
and opening each one.
1 var fruits = [" Banana ", " Orange ", " Apple ", " Mango "];
2 for (var i = 0; i < fruits . length ; i++) {
3 console .log( fruits [i]);
4 }
5 // Output :
6 // Banana
7 // Orange
8 // Apple
9 // Mango

The loop starts at i = 0, keeps going until i reaches the length (4), and adds 1 to i each
time.

7 Array Methods: Magic Tricks for Lists

Arrays have special methods that let you add, remove, or change items easily.

11
 JavaScript Basics - Route Academy Week 2

7.1 Adding and Removing Items

• push: Adds an item to the end of the list.

• pop: Removes the last item from the list.

• shift: Removes the first item from the list.

• unshift: Adds an item to the beginning of the list.

1 var colors = [" Blue", " Yellow ", "Gray "];

2 colors .push (" Black "); // Add Black to the end
3 console .log( colors ); // Output : [" Blue", " Yellow ", "Gray", " Black "]
4 colors .pop (); // Remove the last item ( Black )
5 console .log( colors ); // Output : [" Blue", " Yellow ", "Gray "]
6 colors . shift (); // Remove the first item (Blue)
7 console .log( colors ); // Output : [" Yellow ", "Gray "]
8 colors . unshift (" Red "); // Add Red to the beginning
9 console .log( colors ); // Output : [" Red", " Yellow ", "Gray "]

7.2 Slicing and Joining Arrays

• slice(start, end): Copies a part of the array into a new array.

• concat: Joins two arrays together.

1 var colors = [" Red", " Yellow ", "Gray", "Black ", " Tomato "];
2 var someColors = colors . slice (1, 3); // Copy from index 1 to (3 -1)
3 console .log( someColors ); // Output : [" Yellow ", "Gray "]
4 var moreColors = colors . concat ([" Purple ", "Pink "]); // Join arrays
5 console .log( moreColors ); // Output : [" Red", " Yellow ", "Gray",
"Black", " Tomato ", " Purple ", "Pink "]

7.3 Sorting and Reversing

• sort: Sorts the array in alphabetical order.

• reverse: Reverses the order of the array.

1 var colors = [" Yellow ", "Red", "Gray "];

2 colors .sort (); // Sort alphabetically
3 console .log( colors ); // Output : [" Gray", "Red", " Yellow "]
4 colors . reverse (); // Reverse the order
5 console .log( colors ); // Output : [" Yellow ", "Red", "Gray "]

12
 JavaScript Basics - Route Academy Week 2

7.4 Example: Your Superhero Team

Let’s use array methods to manage your superhero team!
1 var heroes = [" Spider -Man", "Iron Man", "Hulk "];
2 console .log (" My team: " + heroes ); // Output : My team:
Spider -Man ,Iron Man ,Hulk
3 heroes .push (" Captain America "); // Add a new hero
4 console .log (" New team: " + heroes ); // Output : New team:
Spider -Man ,Iron Man ,Hulk , Captain America
5 heroes .sort (); // Sort the team
6 console .log (" Sorted team: " + heroes ); // Output : Sorted team:
Captain America ,Hulk ,Iron Man ,Spider -Man

8 Common Interview Questions for Week 2

Let’s get ready for some interview questions to test your new skills!

8.1 Question 1: What’s the Difference Between Declaration and Expres-

sion?
Answer: A function declaration uses function name() {} and is fully hoisted, so you can
call it before it’s written. A function expression is stored in a variable (like var name =
function() {}) and isn’t hoisted, so you can’t call it before it’s defined.

8.2 Question 2: What Does This Code Output?

1 function foo () {
2 var x = 10;
3 var y = 20;
4 var result = x + y;
5 return result ;
6 return 10;
7 console .log (" Hello ");
8 }
9 console .log(foo ()); // Output : 30

Answer: The function returns result (30), and stops there. The lines after return result
(like return 10 and [Link]) don’t run.

8.3 Question 3: What Happens Here with Hoisting?

1 console .log(foo ());
2 var foo = function () {
3 return bar ();
4 function bar () { return 3; }
5 var bar = function () { return 8; }
6 };

13
 JavaScript Basics - Route Academy Week 2

Answer: This throws an error: foo is not a function. JavaScript hoists the declaration
var foo, but not the function expression, so at the time of [Link](foo()), foo is
undefined.

8.4 Question 4: What’s the Output of This Array Code?

1 var fruits = [" Banana ", " Orange ", " Apple "];
2 fruits .push (" Mango ");
3 fruits . shift ();
4 console .log( fruits ); // Output : [" Orange ", " Apple ", " Mango "]

Answer: push("Mango") adds ”Mango” to the end, making ["Banana", "Orange", "Apple",
"Mango"]. Then shift() removes the first item (”Banana”), leaving ["Orange", "Apple",
"Mango"].

8.5 Question 5: How Do You Access This Nested Object Property?

1 var user = {
2 wife: {
3 son: {
4 name: " Ahmed Ali"
5 }
6 }
7 };

Answer: Use dot notation to dig into the nested objects:

1 console .log([Link]); // Output : Ahmed Ali

14