Lecture 41, Part 1: Defining Variables, Function, and Scope

Loading...

From the course by Johns Hopkins University

HTML, CSS, and Javascript for Web Developers

4866 ratings

Johns Hopkins University

HTML, CSS, and Javascript for Web Developers

4866 ratings

Course 4 of 6 in the Specialization Ruby on Rails Web Development

Do you realize that the only functionality of a web application that the user directly interacts with is through the web page? Implement it poorly and, to the user, the server-side becomes irrelevant! Today’s user expects a lot out of the web page: it has to load fast, expose the desired service, and be comfortable to view on all devices: from a desktop computers to tablets and mobile phones. In this course, we will learn the basic tools that every web page coder needs to know. We will start from the ground up by learning how to implement modern web pages with HTML and CSS. We will then advance to learning how to code our pages such that its components rearrange and resize themselves automatically based on the size of the user’s screen. You’ll be able to code up a web page that will be just as useful on a mobile phone as on a desktop computer. No “pinch and zoom” required! Last but certainly not least, we will get a thorough introduction to the most ubiquitous, popular, and incredibly powerful language of the web: Javascript. Using Javascript, you will be able to build a fully functional web application that utilizes Ajax to expose server-side functionality and data to the end user.

From the lesson

Introduction to Javascript

What fun would a web site be if there was no functionality to it? In this module, we are going to concentrate on learning the fundamentals of the Javascript language. A lot of even seasoned developers “tinker” with Javascript without really understanding how the language works. That leads to viewing the language as more of a nuisance instead of a powerful tool. That is why we are going to concentrate not only on the “how” but also on the “why”, so you are empowered by the Javascript language features, not confused by them. We’ll cover just about everything - from common language constructs and Javascript types to objects, functions, arrays, closures, and scope isolation.

Welcome to Module 4: Introduction to Javascript1:45

Lecture 40, Part 1: Adjusting Development Environment for Javascript Development5:19

Lecture 40, Part 2: Where to Place Javascript Code5:14

Lecture 41, Part 1: Defining Variables, Function, and Scope8:46

Lecture 41, Part 2: Defining Variables, Function, and Scope4:38

Meet the Instructors

Yaakov Chaikin
Adjunct Professor, Graduate Computer Science
Whiting School of Engineering

[SOUND] Okay, so in this lecture we're going to

talk about defining variables, functions, and

where these artifacts live, otherwise known as scope.

Now it's fairly straight forward you define a variable.

Variable definitions should always start with the keyword var.

Now notice that no types are declared in JavaScript.

And the reason that is,

is because JavaScript is called a dynamically typed language.

Now what that means is that the JavaScript engine

figures out the type of a particular variable at runtime.

And it also means that the same variable can hold different types during the life

of the execution of the program.

So a variable can start out to be a string, then change to a number,

then change to an object, and so on, and all of that is perfectly legal.

So that's as far as variable definitions.

Now the way you define a function is by using the keyword function

followed by function name and followed parentheses then curly braces.

Now in JavaScript, when you define a function name, it's very,

very similar to defining a variable whose value is a function.

So for example, you could define a function in JavaScript by either using

the keyword function followed by the function name.

Or you could create a variable and set it equal to a function.

Now when you do it the second way, no name is defined after the function keyword.

However, either syntax let's you refer to this function as a.

Now notice that the value of the function is assigned to a,

not the returned result of the execution of that function.

So after either of these definitions you can now invoke,

otherwise known as execute, function by referring to it by it's name a.

Now once you define the function, either you define the function the first way,

that we talked about, or

the second way where you store the function inside of a variable.

The way you invoke a function is by taking the name, or the reference,

to that function and putting the parenthesis afterwards.

So that is called a function execution, or function invocation.

The word execute and invoke are synonyms, so you could really use either one.

But in programming literature it's very often that the execution of a function

is referred to as invocation of that function.

Now you can also define arguments to be passed to the JavaScript function.

Now the defined arguments are defined without the keyword var.

In fact, if you place the key word var in the function argument definition,

that will be a syntax error.

If you want your function to return some value, you use the return keyword

followed by whatever value it is that you want to return.

If the return keyword is not followed by a value,

what you're signaling to the JavaScript engine is that it should

terminate the function and exit out of it without returning anything.

Now the way you pass the arguments to the JavaScript function

is also kind of unique.

So in the first line of this example here, we have the function compare that we saw

in the previous slide, and it's defined here with arguments x and y.

In the second line, we're executing or invoking function compare and

passing to it two arguments, 4 and 5.

Now the result of the execution of that function is then stored in the variable a.

On the third line, you notice that we're still executing the compare function but

we're not storing the result anywhere, and that is perfectly legal.

And it's also legal since JavaScript is a dynamically typed language

to pass a as a second argument, as a string, as opposed to a number.

Now that may not make sense as far as the logic to the function is concerned, but

it's certainly perfectly legal syntax.

Now the last line demonstrates yet another rule about JavaScript functions.

All arguments defined in a JavaScript function are optional.

You can call that same compare function without any arguments at all, and

it all will be perfectly legal.

Again, it may not make sense as far as the business logic

of the execution of the compare function.

But the syntax and the invocation of this function is perfectly legal.

Now each function or variable lives within a particular scope.

In JavaScript there's really two scopes, global scope and

function, or otherwise known as lexical scope.

Now lexical here means that it depends on where something is physically defined.

For example, a variable that's defined within a function

is physically defined within that function.

There's no block scope in JavaScript.

In other languages, curly braces themselves signify a new scope.

In JavaScript, functions signify a new scope.

That's all you really need to know about functions for now,

and we're going to talk about functions in much more detail in a later lecture.

Now variables and functions defined in a global scope are available everywhere.

Meaning any other functions that are defined in a global scope and so

on can get access to these globally defined functions and variables.

As far as function and lexical scope, variables and

functions defined here are available only within this function.

And you heard it right, you can define functions within other functions.

And those newly defined functions,

have a way to get at its outer function variables and functions.

Which leads us to the next topic, the scope chain.

Now in order to understand how scope chain works in JavaScript,

you have to understand how a JavaScript engine executes things.

Everything in JavaScript is executed in an execution context.

Now a function invocation creates a new execution context

within which that function is executed.

Now each execution context has the following.

Number one, it has its own variable environment.

This is where it stores its newly defined functions and variables.

It also gets the special this object,

which we're going to talk about at a later lecture.

And what's most important for

our discussion right now, it gets a reference to its outer environment.

Meaning the execution environment within which this particular function is defined.

Now, global scope does not have an outer environment

simply because it's the most outer there is.

So here's how scope chain works.

Referenced, notice referenced,

not defined, variable will be searched for in its current scope first.

If not found, the outer reference will be searched.

If not found there, the outer reference's outer reference will be searched and

etc., and so on.

If not found, the outer reference's outer reference will be searched, and etc.,

and so on.

Now this will keep going until the global scope.

If not found in global scope, the variable is going to be undefined.

Now we'll discuss the special value undefined when we speak about JavaScript

built in types.

But for now, just know that the variable undefined means it's just not found.

Now in order to understand this scope chain a little bit better,

let's take a look at the following visualization.

Suppose you executed a couple of lines of code inside the global scope.

The first line defines variable x and assigns a value of 2 to the variable x and

the second line executes function A.

Now function A itself is defined in global scope and

it has its own variable x that is set to 5.

Now then, within function A you call function B.

Function B is also defined in the global scope.

And all it does is just print out the to the console the value of x.

Now what will be printed out to the console?

Will it be x = 5 because B is invoked inside function A?

Or it will be x = 2 from the global scope?

And the answer is that the result that will be x = 2 from the global scope.

Now why is that?

Well, if you remember where we just said, the reason's pretty simple.

Even though B is called within A and A has its own x, what actually matters

as far as resolving where x is coming from is its outer reference.

And B is defined within the global scope.

Therefore, the outer reference of function B is the global scope, not function A.

What this means is that it does not matter where a particular function is executed.

What matters as far as resolving scope of a variable is concerned

is where that function is physically defined.

Function B is physically defined inside the global scope.

Therefore a reference of x inside function B Is going to look inside function B

first.

If it doesn't find it it's going to use its outer reference to look for

it there and its outer reference is the global scope.

Let's jump to the code editor and see an example of this.

Explore our Catalog

Join for free and get personalized recommendations, updates and offers.

Coursera provides universal access to the world’s best education, partnering with top universities and organizations to offer courses online.

© 2019 Coursera Inc. All rights reserved.

Download on the App Store

Get it on Google Play