In this article, you will learn about the basics of Javascript and how to use them. The purpose of this article is to teach the bare essentials - just enough to get started; for a full understanding of Javascript, consider opting for our Full Stack Development Learning Path where we teach Javascript from basics to advanced with frontend as well as backend frameworks, databases, developer tools and deployment tools to make you an industry-ready full stack developer.
JavaScript is one of the most popular programming languages in the world right now. It is now widely being used outside of the browser from server-side to desktop and mobile applications. Javascript is a high-level, dynamically typed interpreted programming language.
"In case you’re wondering, JavaScript has nothing to do with Java, it’s an unfortunate name choice but we have to live with it."
Variables and Data Types
Variables are used to store data in a program. Variable has a name and a value. There are two parts of creating a variable; declaration and initialization. Once it’s created, you can set its value.
In Javascript, a variable is declared using the var keyword. (In ES6, you can use const and let to declare block-scoped variables)
| var name; // declaration | |
| var age = 20; // intialization | |
| name = 'Abhishek'; // assignment |
A variable in JavaScript can contain any data. A variable can at one moment be a string and at another be a number. Programming languages that allow such things are called “dynamically typed”, meaning that there are data types, but variables are not bound to any of them.
Javascript has 7 basic data types:
1. Number
The number type represents both integer and floating-point numbers. You can perform *, /, +, - etc operations on numbers. Besides regular numbers, there are special numeric values like Infinity, -Infinity, and NaN (Not a number).
2. String
A string in Javascript can be surrounded by single quotes, double quotes or backticks. Backticks allow you to embed variables inside a string;
3. Boolean
A boolean has only two values: true or false. It is commonly used to store yes/no value.
4. Null
A special value that represents “nothing”, “empty” or “unknown value”.
5. Undefined
A special value which means ‘value is not assigned’.
6. Objects
All other types are called “primitive” because their values can contain only a single thing (be it a string or a number or whatever). In contrast, objects are used to store collections of data and more complex entities.
7. Arrays
An array is a single object that contains multiple values enclosed in square brackets and separated by commas.
| // numbers | |
| var num = 10; // integer | |
| var pi = 3.14; // floating point number | |
| // strings | |
| var firstname = 'Abhishek'; // single quote string | |
| var lastname = "Vishwakarma"; // double quote string | |
| var greeting = `Hi ${firstname}!`; // string with backticks | |
| // boolean | |
| var yes = true; // true | |
| var no = false; // false | |
| // null | |
| var nothing = null; // null value | |
| // undefined; | |
| var someVar; // undefined | |
| // objects | |
| var details = { | |
| name: 'Abhishek', | |
| age: 22, | |
| married: false | |
| }; | |
| // arrays | |
| var days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']; |
Math and Logic
A really important part of programming is doing math and being able to compare values in order to make decisions in code. The outcome can be either true or false (boolean type).
| // Math | |
| var num1 = 100; | |
| var num2 = 10; | |
| var total = num1 + num2; // addition | |
| var diff = num1 - num2; // subtraction | |
| var product = num1 * num2; // multiplication | |
| var factor = num1 / num2; // division | |
| var totalUpto = (num1 * (num1 + 1)) / 2; // math equation | |
| // Logic | |
| var equal = num1 === num2; // equality check | |
| var notEqual = num1 !== num2; // inequality check | |
| var greater = num1 > num2; // greater than | |
| var lesser = num1 < num2; // less than | |
| var greaterThanOrEqual = num1 >= num2; // greater than or equal to | |
| var lessThanOrEqual = num1 <= num2; // less than or equal to |
Conditionals
Conditionals are used to run a piece of code or another depending on the outcome of the comparisons made. Javascript provides if and if-else statements to run code based on conditions. You can also chain if-else-if to run code based on multiple conditions. Logical operators like && (AND), || (OR) and ! (NOT) can also be used for making decisions.
| var num1 = 100; | |
| var num2 = 99; | |
| var choice; | |
| // if statement - run code only when the condition is true | |
| if (num1 > num2) { | |
| choice = num1; | |
| } | |
| var largest; | |
| // if-else statement | |
| if (num1 > num2) { | |
| largest = num1; // runs this code if the condition is true | |
| } else { | |
| largest = num2; // runs this code if the condition is false | |
| } | |
| // using AND, OR and NOT using nested if-else-if | |
| var n1 = 100; | |
| var n2 = 50; | |
| var guess = 77; | |
| var result; | |
| if (guess < n1 && guess > n2) { | |
| result = `You guessed a number between ${n1} and ${n2}.`; | |
| } else | |
| if (guess === n1 || guess === n2) { | |
| result = 'You guessed one of the boundary number.'; | |
| } else | |
| if (!(guess > n2)) { | |
| result = 'You guessed a very low number.' | |
| } |
Looping
Loops allow you to run a piece of code a certain number of times or until a certain condition is met. They’re incredibly useful. They can be used to carry out actions on every item in an array or printing all the data inside an array or in searching etc.
Two of the most common loops in Javascript are for and while.
- A for loop contains three statements, separated by a semicolon (initialization, condition, updating or final expression). The loop first runs the initialization and then checks if the condition is true. If it is true, it runs the block of code inside and finally runs the updation code. After updating, it again checks the condition and performs these steps again and again until the condition becomes false.
- A while loop repeats a block of code until a condition is met. For any update, you can do it inside the while loop.
| // for loop | |
| for (var i=1; i <= 10; i++) { // for (initialization; condition; updation) | |
| console.log(`5 x ${i} = ${5*i}`); // prints table of 5 like 5 x 1 = 5 to the console | |
| } | |
| // while loop | |
| var num = 1; | |
| var upto = 10; | |
| while (num <= upto) { // while (condition) | |
| console.log(`5 x ${i} = ${5*i}`); // prints table of 5 like 5 x 1 = 5 to the console - same as for but using while | |
| num = num + 1; | |
| } |
Functions
Functions are blocks of code that you can reuse and call anytime you want to execute it. A function can take values, called arguments, and can return a value.
| // function declaration and definition | |
| function sayHello (name) { | |
| console.log('Hello ' + name + '!'); | |
| } | |
| // calling a function | |
| sayHello('Abhishek'); | |
| // another way of declaring a function | |
| var myFunc = function (arg) { | |
| console.log(`Argument Passed = ${arg}`); | |
| } |
Objects
A Javascript object is a collection of properties and methods/functions. It is a key-value pair collection where the value can be data or function. You can access the keys inside an object using the dot syntax. Objects are used to store relative information.
| // object | |
| var details = { | |
| name: 'Abhishek Vishwakarma', | |
| age: 22, | |
| profession: 'Full Stack Developer', | |
| company: 'Board Infinity', | |
| greet: function() { | |
| return `Hi ${this.name}!`; // this is used to select the value from the current object (this) | |
| } | |
| }; | |
| // accessing values in an object using the dot syntax | |
| console.log(`My name is ${details.name}. I'm ${details.age} years old. I'm a ${details.profession} at ${details.company}.`); | |
| // calling a function from an object | |
| details.greet(); |
Arrays
Arrays in javascript are used to store a list of any kind of data. Each item in an array has an index/position (a number that can be used to retrieve an element from it). Arrays in Javascript start at 0; so the last element has an index one less than the length of an array. Arrays, by default also have some properties/functions assigned to them, which gives more information about the array like the length etc.
| // array | |
| var days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']; | |
| // accessing an element in an array | |
| console.log(`The first day of the week is ${days[0]}`); // 0 points to the first element | |
| // default properties in an array | |
| console.log(`Total number of days: ${days.length}`); // .length is a default property which gives the length of the array |
These are some of the basics of Javascript. Again, this is not a full guide to Javascript. It only covers certain things to get you started with Javascript. To get full in-depth knowledge, go through this documentation (Javascript | MDN) on Mozilla Developer Networks.
If you want to learn these concepts and much more from experts, consider enrolling in our Full Stack Development Learning Path. We teach frontend, backend, databases, dev tools and deployment tools from basics to advanced.