Learn JavaScript: Introduction

Key Concepts

Review core concepts you need to learn to master this subject

JavaScript variables

const keyword in JavaScript

JavaScript let variable values

JavaScript: undefined

Mathematical assignment operators in JavaScript

String concatenation in JavaScript

JavaScript String Interpolation

Template literals

JavaScript variables

const ageOfCitizen = 55; 
if (ageOfCitizen > 50) {
  console.log('Senior Citizen');
}

Whenever there’s a need to use a piece of data, variables are a good solution. A variable contains data that can be used in the program. For instance, if a certain code block is written to check the age, the value to be compared can be assigned in a variable. The best practice for JavaScript variables is to give them names that identify their use.

const keyword in JavaScript

const ageOfCitizen = 55; 
if (ageOfCitizen > 50) {
  console.log('Senior Citizen');
}

A constant variable can be declared using the keyword const. In the code block, a const named numberOfColumns has been assigned the value 4. It is a one-time assignment . Any attempt of re-assigning a const variable will result in JavaScript runtime error: TypeError: Assignment to constant variable. Variables defined with the keyword const must be assigned values during declaration.

JavaScript let variable values

const ageOfCitizen = 55; 
if (ageOfCitizen > 50) {
  console.log('Senior Citizen');
}

let creates a local variable in JavaScript & can be re-assigned. Initialization during the declaration of a let variable is optional. A let variable will contain undefined if nothing is assigned to it.

JavaScript: undefined

const ageOfCitizen = 55; 
if (ageOfCitizen > 50) {
  console.log('Senior Citizen');
}

undefined is a primitive JavaScript value that represents lack of defined value. Variables that are declared but not initialized to a value will have the value undefined.

Mathematical assignment operators in JavaScript

const ageOfCitizen = 55; 
if (ageOfCitizen > 50) {
  console.log('Senior Citizen');
}

In JavaScript, the addition assignment operator (+=) can be used to add the value on the right hand side to the existing value & assign it to the variable. The addition assignment operator is a shorthand for variableName = variableName + value. Subtraction assignment (-=), multiplication assignment (*=) & division assignment (/=) perform similar operations.

String concatenation in JavaScript

const ageOfCitizen = 55; 
if (ageOfCitizen > 50) {
  console.log('Senior Citizen');
}

In JavaScript, multiple strings can be concatenated together using the + operator. In the example, multiple strings and variables containing string values have been concatenated. After execution of the code block, the displayText variable will contain the concatenated string.

JavaScript String Interpolation

const ageOfCitizen = 55; 
if (ageOfCitizen > 50) {
  console.log('Senior Citizen');
}

String interpolation is the process of evaluating string literals containing one or more placeholders (expressions, variables, etc). The two main ways to interpolate strings are with string concatenation (syntax: "string" + expression + "string") or template literals (syntax: `text ${expression} text`).

Template literals

const ageOfCitizen = 55; 
if (ageOfCitizen > 50) {
  console.log('Senior Citizen');
}

In JavaScript, template literals are strings that allow embedded expressions (${expression}). While regular strings use single (') or double (") quotes, template literals use backticks (`) instead. Take a look at the code block above to see examples.

JavaScript Template literals

const ageOfCitizen = 55; 
if (ageOfCitizen > 50) {
  console.log('Senior Citizen');
}

In JavaScript, template literals are strings that allow embedded expressions (${expression}). While regular strings use single (') or double (") quotes, template literals use backticks instead. Take a look at the code block above to see examples.

Usage of variables in JavaScript

const ageOfCitizen = 55; 
if (ageOfCitizen > 50) {
  console.log('Senior Citizen');
}

Variables are used whenever there’s a need to store a piece of data. A variable contains data that can be used in the program elsewhere. Using variables also ensures code re-usability since it can be used to replace same value in multiple places.

Declaring variables using var, let & const in JavaScript

const ageOfCitizen = 55; 
if (ageOfCitizen > 50) {
  console.log('Senior Citizen');
}

To declare a variable in JavaScript, any of these three keywords - var, let or const can be used along with a variable name.

JavaScript

const ageOfCitizen = 55; 
if (ageOfCitizen > 50) {
  console.log('Senior Citizen');
}

JavaScript is a popular web-based programming language that powers the dynamic behavior on most websites. Alongside HTML and CSS, it is a core technology that makes the web run.

JavaScript language

const ageOfCitizen = 55; 
if (ageOfCitizen > 50) {
  console.log('Senior Citizen');
}

JavaScript is a popular web-based programming language that powers the dynamic behavior on most websites. Alongside HTML and CSS, it is a core technology that makes the web run.

Console.log()

const ageOfCitizen = 55; 
if (ageOfCitizen > 50) {
  console.log('Senior Citizen');
}

The console.log() method is used to log or print text to the console. It can also be used to print objects, arrays, and other info. This makes it a useful tool for debugging JavaScript.

JavaScript Strings

const ageOfCitizen = 55; 
if (ageOfCitizen > 50) {
  console.log('Senior Citizen');
}

Strings are a primitive data type. They are any grouping of characters (letters, spaces, numbers, or symbols) surrounded by single quotes or double quotes.

Numbers

const ageOfCitizen = 55; 
if (ageOfCitizen > 50) {
  console.log('Senior Citizen');
}

Numbers are a primitive data type, one of the most basic data types available within the JavaScript language. They include the set of all integers and floating point numbers.

JavaScript Numbers

const ageOfCitizen = 55; 
if (ageOfCitizen > 50) {
  console.log('Senior Citizen');
}

Numbers are a primitive data type, one of the most basic data types available within the JavaScript language. They include the set of all integers and floating point numbers.

Boolean

const ageOfCitizen = 55; 
if (ageOfCitizen > 50) {
  console.log('Senior Citizen');
}

Booleans are a primitive data type, one of the most basic types in JavaScript. They can be either true or false. Use Boolean() to evaluate the truth value.

JavaScript Boolean

const ageOfCitizen = 55; 
if (ageOfCitizen > 50) {
  console.log('Senior Citizen');
}

Booleans are a primitive data type, one of the most basic types in JavaScript. They can be either true or false. Use Boolean() to evaluate the boolean value of any JavaScript value.

Null

const ageOfCitizen = 55; 
if (ageOfCitizen > 50) {
  console.log('Senior Citizen');
}

Null is a primitive data type, one of the most basic data types available within the JavaScript language. It represents the intentional absence of value. In code, it is represented as null.

JavaScript Null

const ageOfCitizen = 55; 
if (ageOfCitizen > 50) {
  console.log('Senior Citizen');
}

Null is a primitive data type, one of the most basic data types available within the JavaScript language. It represents the intentional absence of value. In code, it is represented as null.

JavaScript Arithmetic Operators

const ageOfCitizen = 55; 
if (ageOfCitizen > 50) {
  console.log('Senior Citizen');
}

JavaScript supports the basic arithmetic operators for addition (+), subtraction (-), multiplication (*), and division (/).

String.length

const ageOfCitizen = 55; 
if (ageOfCitizen > 50) {
  console.log('Senior Citizen');
}

The length property of a string returns the number of characters that make up the string.

JavaScript Methods

const ageOfCitizen = 55; 
if (ageOfCitizen > 50) {
  console.log('Senior Citizen');
}

Methods return information about an instance of data, and are called by appending an instance with a period (.), the method name, and parentheses.

Data Instances in JavaScript

const ageOfCitizen = 55; 
if (ageOfCitizen > 50) {
  console.log('Senior Citizen');
}

When you introduce a new piece of data into a JavaScript program, the program keeps track of it in an instance of that data type. An instance is an individual case of a data type.

JavaScript Libraries

const ageOfCitizen = 55; 
if (ageOfCitizen > 50) {
  console.log('Senior Citizen');
}

JavaScript libraries contain methods that you can call by appending the library name with a period (.), the method name, and a set of parentheses.

Math.random()

const ageOfCitizen = 55; 
if (ageOfCitizen > 50) {
  console.log('Senior Citizen');
}

Math.random() returns a floating-point, random number in the range from 0 inclusive up to but not including 1.

JavaScript Math.floor()

const ageOfCitizen = 55; 
if (ageOfCitizen > 50) {
  console.log('Senior Citizen');
}

The Math.floor() function in JavaScript returns the largest integer less than or equal to the given number. In the above example , console.log(Math.floor(number)) will log 15 in console when the number variable is set to the value 15.95 .

Single Line Comments

const ageOfCitizen = 55; 
if (ageOfCitizen > 50) {
  console.log('Senior Citizen');
}

In JavaScript, single-line comments are made with two consecutive forward slashes (//).

Multi-line comments in JavaScript

const ageOfCitizen = 55; 
if (ageOfCitizen > 50) {
  console.log('Senior Citizen');
}

Multi-line comments are made by surrounding the lines with /* at the beginning and */ at the end . Comments are good ways for variety of reasons like explaining a code block or indicating some hints etc.

Introduction to JavaScript

Lesson 1 of 2

1
Last year, millions of learners from our community started with JavaScript. Why? JavaScript is primarily known as the language of most modern web browsers, and its early quirks gave it a bit of a b…
2
The console is a panel that displays important messages, like errors, for developers. Much of the work the computer does with our code is invisible to us by default. If we want to see things appear…
3
Programming is often highly collaborative. In addition, our own code can quickly become difficult to understand when we return to it— sometimes only an hour later! For these reasons, it’s oft…
4
Data types are the classifications we give to the different kinds of data that we use in programming. In JavaScript, there are seven fundamental data types: 1. Number: Any number, including nu…
5
Basic arithmetic often comes in handy when programming. An operator is a character that performs a task in our code. JavaScript has several built-in in arithmetic operators, that allow us to …
6
Operators aren’t just for numbers! When a […] operator is used on two strings, it appends the right string to the left string: […] This process of appending one string to another is calle…
7
When you introduce a new piece of data into a JavaScript program, the browser saves it as an instance of the data type. Every string instance has a property called […] that stores the number o…
8
Remember that methods are actions we can perform. JavaScript provides a number of string methods. We call, or use, these methods by appending an instance with a period (the dot operator), the na…
9
In addition to […] , there are other objects built into JavaScript . Down the line, you’ll build your own objects, but for now these “built-in” objects are full of useful functionality. For e…
10
Let’s take one more glance at the concepts we just learned: - Data is printed, or logged, to the console, a panel that displays messages, with […] . - You can write single-line comments with […

1
In programming, a variable is a container for a value. You can think of variables as little containers for information that live in a computer’s memory. Information stored in variables, such as a…
2
There were a lot of changes introduced in the ES6 version of JavaScript in 2015. One of the biggest changes was two new keywords, […] and […] , to create, or declare, variables. Prior to t…
3
As mentioned in the previous exercise, the […] keyword was introduced in ES6. The […] keyword signals that the variable can be reassigned a different value. Take a look at the example: [….
4
The […] keyword was also introduced in ES6, and is short for the word constant. Just like with […] and […] you can store any value in a […] variable. The way you declare a […] v…
5
Let’s consider how we can use variables and math operators to calculate new values and assign them to a variable. Check out the example below: […] In the example above, we created the variable…
6
Other mathematical assignment operators include the increment operator ( […] ) and decrement operator ( […] ). The increment operator will increase the value of the variable by 1. The dec…
7
In previous exercises, we assigned strings to variables. Now, let’s go over how to connect, or concatenate, strings in variables. The […] operator can be used to combine two string values even…
8
In the ES6 version of JavaScript, we can insert, or interpolate, variables into strings using template literals. Check out the following example where a template literal is used to log strings …
9
While writing code, it can be useful to keep track of the data types of the variables in your program. If you need to check the data type of a variable’s value, you can use the […] operator. …
10
Nice work! This lesson introduced you to variables, a powerful concept you will use in all your future programming endeavors. Let’s review what we learned: * Variables hold reusable data in a pro…

What you'll create

Portfolio projects that showcase your new skills

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory

Introduction to JavaScript
What is the outcome of the following code snippet?

Learn JavaScript: Introduction

Key Concepts

JavaScript variables

const keyword in JavaScript

JavaScript let variable values

JavaScript: undefined

Mathematical assignment operators in JavaScript

String concatenation in JavaScript

JavaScript String Interpolation

Template literals

JavaScript Template literals

Usage of variables in JavaScript

Declaring variables using var, let & const in JavaScript

JavaScript

JavaScript language

Console.log()

JavaScript Strings

Numbers

JavaScript Numbers

Boolean

JavaScript Boolean

Null

JavaScript Null

JavaScript Arithmetic Operators

String.length

JavaScript Methods

Data Instances in JavaScript

JavaScript Libraries

Math.random()

JavaScript Math.floor()

Single Line Comments

Multi-line comments in JavaScript

What you'll create

Kelvin Weather

Dog Years

How you'll master it

Introduction to JavaScript

Learn JavaScript: Introduction