Codecademy Logo

Learn JavaScript: Conditionals, Functions, and Scope

Scope

Scope is a concept that refers to where values and functions can be accessed.

Various scopes include:

  • Global scope (a value/function in the global scope can be used anywhere in the entire program)
  • File or module scope (the value/function can only be accessed from within the file)
  • Function scope (only visible within the function),
  • Code block scope (only visible within a { ... } codeblock)
function myFunction() {
  
  var pizzaName = "Volvo";
  // Code here can use pizzaName
  
}


// Code here can't use pizzaName

Block Scoped Variables

const and let are block scoped variables, meaning they are only accessible in their block or nested blocks. In the given code block, trying to print the statusMessage using the console.log() method will result in a ReferenceError. It is accessible only inside that if block.

const isLoggedIn = true;


if (isLoggedIn == true) {
  const statusMessage = 'User is logged in.';
}


console.log(statusMessage);


// Uncaught ReferenceError: statusMessage is not defined

Global Variables

JavaScript variables that are declared outside of blocks or functions can exist in the global scope, which means they are accessible throughout a program. Variables declared outside of smaller block or function scopes are accessible inside those smaller scopes.

Note: It is best practice to keep global variables to a minimum.

// Variable declared globally
const color = 'blue';


function printColor() {
  console.log(color);
}


printColor(); // Prints: blue

Control Flow

Control flow is the order in which statements are executed in a program. The default control flow is for statements to be read and executed in order from left-to-right, top-to-bottom in a program file.

Control structures such as conditionals (if statements and the like) alter control flow by only executing blocks of code if certain conditions are met. These structures essentially allow a program to make decisions about which code is executed as the program runs.

Logical Operator ||

The logical OR operator || checks two values and returns a boolean. If one or both values are truthy, it returns true. If both values are falsy, it returns false.

A B A || B
false false false
false true true
true false true
true true true 
true || false;        // true
10 > 5 || 10 > 20;    // true
false || false;       // false
10 > 100 || 10 > 20;  // false

Ternary Operator

The ternary operator allows for a compact syntax in the case of binary (choosing between two choices) decisions. It accepts a condition followed by a ? operator, and then two expressions separated by a :. If the condition evaluates to truthy, the first expression is executed, otherwise, the second expression is executed.

let price = 10.5;
let day = "Monday";


day === "Monday" ? price -= 1.5 : price += 1.5;

else Statement

An else block can be added to an if block or series of if-else if blocks. The else block will be executed only if the if condition fails.

const isTaskCompleted = false;


if (isTaskCompleted) {
  console.log('Task completed');
} else {
  console.log('Task incomplete');
}

Logical Operator &&

The logical AND operator && checks two values and returns a boolean. If both values are truthy, then it returns true. If one, or both, of the values is falsy, then it returns false. 

true && true;      // true
1 > 2 && 2 > 1;    // false
true && false;     // false
4 === 4 && 3 > 1;  // true

switch Statement

The switch statements provide a means of checking an expression against multiple case clauses. If a case matches, the code inside that clause is executed.

The case clause should finish with a break keyword. If no case matches but a default clause is included, the code inside default will be executed.

Note: If break is omitted from the block of a case, the switch statement will continue to check against case values until a break is encountered or the flow is broken.

const food = 'salad';


switch (food) {
  case 'oyster':
    console.log('The taste of the sea 🦪');
    break;
  case 'pizza':
    console.log('A delicious pie 🍕');
    break;
  default:
    console.log('Enjoy your meal');
}


// Prints: Enjoy your meal

if Statement

An if statement accepts an expression with a set of parentheses:

  • If the expression evaluates to a truthy value, then the code within its code body executes.
  • If the expression evaluates to a falsy value, its code body will not execute.
const isMailSent = true;


if (isMailSent) {
  console.log('Mail sent to recipient');
}

Logical Operator !

The logical NOT operator ! can be used to do one of the following:

  • Invert a Boolean value.
  • Invert the truthiness of non-Boolean values.
let lateToWork = true;
let oppositeValue = !lateToWork;


console.log(oppositeValue); 
// Prints: false

Comparison Operators

Comparison operators are used to comparing two values and return true or false depending on the validity of the comparison:

  • === strict equal
  • !== strict not equal
  • > greater than
  • >= greater than or equal
  • < less than
  • <= less than or equal
1 > 3       // false
3 > 1       // true
250 >= 250  // true
1 === 1     // true
1 === 2     // false
1 === '1'   // false

else if Clause

After an initial if block, else if blocks can each check an additional condition. An optional else block can be added after the else if block(s) to run by default if none of the conditionals evaluated to truthy. 

const size = 10;


if (size > 100) {
  console.log('Big');
} else if (size > 20) {
  console.log('Medium');
} else if (size > 4) {
  console.log('Small');
} else {
  console.log('Tiny');
}
// Print: Small

Truthy and Falsy

In JavaScript, values evaluate to true or false when evaluated as Booleans.

  • Values that evaluate to true are known as truthy
  • Values that evaluate to false are known as falsy

Falsy values include false, 0, empty strings, null undefined, and NaN. All other values are truthy.

Arrow Functions (ES6)

Arrow function expressions were introduced in ES6. These expressions are clean and concise. The syntax for an arrow function expression does not require the function keyword and uses a fat arrow => to separate the parameter(s) from the body.

There are several variations of arrow functions:

  • Arrow functions with a single parameter do not require () around the parameter list.
  • Arrow functions with a single expression can use the concise function body which returns the result of the expression without the return keyword.
// Arrow function with two parameters 
const sum = (firstParam, secondParam) => { 
  return firstParam + secondParam; 
}; 
console.log(sum(2,5)); // Prints: 7 


// Arrow function with no parameters 
const printHello = () => { 
  console.log('hello'); 
}; 
printHello(); // Prints: hello


// Arrow functions with a single parameter 
const checkWeight = weight => { 
  console.log(`Baggage weight : ${weight} kilograms.`); 
}; 
checkWeight(25); // Prints: Baggage weight : 25 kilograms.




// Concise arrow functions
const multiply = (a, b) => a * b; 
console.log(multiply(2, 30)); // Prints: 60

Functions

Functions are one of the fundamental building blocks in JavaScript. A function is a reusable set of statements to perform a task or calculate a value. Functions can be passed one or more values and can return a value at the end of their execution. In order to use a function, you must define it somewhere in the scope where you wish to call it.

The example code provided contains a function that takes in 2 values and returns the sum of those numbers.

// Defining the function:
function sum(num1, num2) {
  return num1 + num2;
}


// Calling the function:
sum(3, 6); // 9

Anonymous Functions

Anonymous functions in JavaScript do not have a name property. They can be defined using the function keyword, or as an arrow function. See the code example for the difference between a named function and an anonymous function.

// Named function
function rocketToMars() {
  return 'BOOM!';
}


// Anonymous function
const rocketToMars = function() {
  return 'BOOM!';
}

Function Expressions

Function expressions create functions inside an expression instead of as a function declaration. They can be anonymous and/or assigned to a variable.

const dog = function() {
  return 'Woof!';
}

Function Parameters

Inputs to functions are known as parameters when a function is declared or defined. Parameters are used as variables inside the function body. When the function is called, these parameters will have the value of whatever is passed in as arguments. It is possible to define a function without parameters.

// The parameter is name
function sayHello(name) {
  return `Hello, ${name}!`;
}

return Keyword

Functions return (pass back) values using the return keyword. return ends function execution and returns the specified value to the location where it was called. A common mistake is to forget the return keyword, in which case the function will return undefined by default.

// With return
function sum(num1, num2) {
  return num1 + num2;
}


// Without return, so the function doesn't output the sum
function sum(num1, num2) {
  num1 + num2;
}

Function Declaration

Function declarations are used to create named functions. These functions can be called using their declared name. Function declarations are built from:

  • The function keyword.
  • The function name.
  • An optional list of parameters separated by commas enclosed by a set of parentheses ().
  • A function body enclosed in a set of curly braces {}.
function add(num1, num2) {
  return num1 + num2;
}

Calling Functions

Functions can be called, or executed, elsewhere in code using parentheses following the function name. When a function is called, the code inside its function body runs. Arguments are values passed into a function when it is called. 

// Defining the function
function sum(num1, num2) {
  return num1 + num2;
}


// Calling the function
sum(2, 4); // 6
Previous
Next

Learn more on Codecademy

Free course

Velo by Wix: Interactivity

Learn fundamental JavaScript syntax, including conditionals, functions, and scope, to work with Velo to further customize your Wix site.
Beginner Friendly
6 hours
Free course

Create a Professional Website with Velo by Wix

From beginners to experienced web developers, Wix offers a wide range of solutions to quickly create a website that you can proudly share.
Beginner Friendly
17 hours