Learn Core JavaScript in 20 Minutes

JavaScript is a very famous programming language among developers. It is a high-level, object-oriented, event-based, and multi-paradigm programming language. So nowadays, everybody talking about javascript and how they can learn javascript.

Lots of famous libraries like AngularJS, JQuery, React build on javascript and they makes development so easy. Apart from that, its support system is very strong.

But to learn javascript we need to understand the core concept of javascript. So here we will discuss the core and vanilla javascript.

Essentially JavaScript is a client-side scripting language but it’s also working on the server side. It’s created by Brendan Eich on December 4, 1995. Sometimes javascript is abbreviated as JS.
Now understand how we can start javascript –

  1. Here we are using the chrome dev tool, So go to Settings/More Tools/Developer Tools.
  2. Inside Sources tab/Snippets/ add on New Snippets to write snippets.
  3. Write code inside the code section and click on the run button to execute the javascript code snippet.

If You are confused then you should follow the figure. 1.

Chrome Developer Tool For JavaScript Programming
Chrome Developer Tool For JavaScript Programming

Hello world program in javascript

It’s a basic program as well as it’s a very important problem in javascript. It does not only verify all environment settings are perfectly working and that also that you know how to print in javascript.

It’s done by using the console.log function. But before going further we need to understand javascript comments; in javascript // is used for single line comments /**/ for multiline comments. Let’s see how to use comments and print function –

Hello, word program in javascript


/*
*** Value inside "" or '' is a string value
*/
console.log("Welcome to javascript"); // Welcome to javascript

Note:– You can copy the snippet and execute it inside your snippet section.

Now you can see we are using both comment formats in the above example. In javascript, we have 3 basic values. These basic values are called primitive values.

  • String
  • Number
  • Boolean

String values are always inside double quotes ("") or single quotes (''), Number can be 1, 2 or 1.2, 3.14 and Boolean will be like true or false.



// This is a string value and always inside "" or ''
console.log( "This is string value" ); // This is string value

// This is a number value
console.log( 1, 1.2 ); // 1, 1.2

// This is boolean value
console.log( true, false );  // true, false

Using variables

Variables are very useful tools in all kinds of programming languages. The primary purpose of variables is to store data inside memory and then we can use it later.


var msg = "Welcome to javascript";
console.log(msg); // Welcome to javascript

Here you can see the msg variable holding the string value and we are using that to print on the console.

String Interpolation

String Interpolation is the way by which we can insert a variable into a string.


var name = "xyz", age = 40;
console.log("Welcome " + name + " You are looking " + age + " years old");

// ES6 way
console.log(`Welcome ${name} You are looking ${age} years old`); 
 
// Output => Welcome xyz You are looking 40 years old

Note:- Here you can see; inside the second console we are using backtick character (``). In the latest javascript (ES6) to represent string value, we can also use backtick apart from double quotes and single quotes.

Concatenation in javascript

Concatenation is a way by which we can append two strings together as well as we can append a string with another basic type of value like a number or boolean.


var name = "Learner", msg = "Welcome: " + name;
console.log(msg); // Welcome: Learner

Dynamically and Weakly typed

Javascript is dynamically typed so it infers variable types at run time. It means on interpretation it will decide the type of variable. Weakly typed languages allow types to be inferred as another type.


var num = 2, str_num = "2";
console.log("num is " + typeof num); // num is number
console.log("str_num is " + typeof str_num); // str_num is string
console.log(num + str_num); // "22"

Here you can see num, and str_num both are different types of data but in javascript forcefully it will be done and it will give “22” string type results.

Javascript doesn’t have strict typing

Casting in javascript

Casting is a way by which we can change types of variables.


var str = "", str_num = "2", num = 2;

/*
Boolean, Number and String are constructor functions by which we can convert values forcefully.
*/

// Cast on boolean value
console.log(Boolean(str)); // false
console.log(Boolean(str_num)); // true

// Cast on number value
console.log(Number(str)); // 0
console.log(Number(str_num), " and ", +str_num); // 2

// Cast on string
console.log(String(str_num), " and ", (str_num + "")); // "2"

Here we can see str and str_num is a string types and we can convert them into boolean and number type values num is a number type and we can convert them into a string type.

Data type in javascript

In javascript, we have three types of data types. Primitive, non-primitive and special type. Primitives are string, number and boolean, Non-Primitive are array, object, and function and special types are null and undefined. So we need to understand the type and type detection as well as a need to understand falsy values in javascript.


var num = 2, str = "string", bol = true, arr = [], obj = {}, sp_null = null, sp_un;

// typeof
console.log("Number:: " + typeof(num));  // Number:: number
console.log("String:: " + typeof(str));  // String:: string
console.log("Boolean:: " + typeof(bol)); // Boolean:: boolean

console.log("Array:: " + typeof(arr)); // Array:: object
console.log("Object:: " + typeof(obj)); // Object:: object

console.log("Null:: " + typeof(sp_null)); // Null:: boolean
console.log("Undefined:: " + typeof(sp_un)); // Undefined:: undefined

// instanceof
console.log("Array:: ", arr instanceof Array); // Array:: true
console.log("Object:: ", obj instanceof Object); // Object:: true

Note:- typeof is a keyword by which we can find a type of primitive type variables. But be careful when using a non-primitive and spatial type. You can see an array, object, null type is an object.

instanceof is another keyword that is very helpful to get non-primitive type variable types.

Mutable and immutable

Mutable means “liable or subject to change or alteration” and immutable means after it has been created, it can never change.

In JavaScript, only objects and arrays are mutable, not primitive values.


// Mutable
var arr = [1, 2];
arr.push(3);
console.log(arr); // 1, 2, 3

// Immutable
var str = "Immutable value", oStr = str.slice(2); 
console.log(str, " - " ,oStr); // Immutable value - mutable value 

Operators in javascript

An operator is a symbol that operates on a value or a variable. For example + or – is an operator to perform addition or subtraction. In javascript, we have arithmetic, increment and decrement, assignment, relational, logical and bitwise.


var num_1 = 5, num_2 = 3, num = 10, temp;

// Arithmetic
console.log("Addition", num_1 + num_2); // 8
console.log("Subtraction", num_1 - num_2); // 2
console.log("Multiplication", num_1 * num_2); // 15
console.log("Division", num_1 / num_2); // 1.6666666666666667
console.log("Modulo", num_1 % num_2); // 2

// Increment and decrement
console.log("Increment", ++num_1, num_1++, num_1); // 6 6 7
console.log("Decrement", --num_2, num_2--, num_2); // 2 2 1

// Assignment
temp = num; // assign num value in temp
console.log("+=", temp += num); // 20, temp = temp + num
console.log("-=", temp -= num); // 10, temp = temp - num
console.log("*=", temp *= num); // 100, temp = temp * num
console.log("/=", temp /= num); // 10, temp = temp / num
console.log("%=", temp %= num); // 00, temp = temp % num

// Relational
console.log("> & <", num_1 > num_2, " :: ", num_1 < num_2); // > && < true :: false
console.log(">= & <=", num_1 >= num_2, " :: ", num_1 <= num_2); // >= && <= true :: false
console.log("== & !=", num_1 == num_2, " :: ", num_1 != num_2); // == && != false :: true

// Logical
console.log(" && ", num_1 == num && num_1 == num_2); // && false
console.log(" || ", num_1 == num || num_1 == num_2); // || false
console.log(" ! ", num_1 != num || num_1 != num_2); // ! true

Decision control statements

In decision control statements we have if, if…else, nested if and all these statements represent the direction of code. Like

if


var str = "Welcome";

if ( typeof str == "string" ) console.log("It's a string type"); // It's a string type

if…else


// firstno and secondno are numeric variables which hold only numeric value
var firstno = 2, secondno = 3;

// Now we using a comparison operator

if ( firstno > secondno ) { console.log( firstno + " is greater" ); } 
else { console.log( secondno + "  is greater" ); }

// Output => 3 is greater

Ternary operator


var num = 5, isA = ( num % 2 == 0 ) ? "Even" : "Odd";

console.log(num + " is a " + isA); // 5 is a Odd

if…else Ladder


var firstno = 2, secondno = 2; // We can write multiple variable using comma 

if ( firstno > secondno ) { console.log(firstno + " is greater"); } 
else if ( firstno < secondno ) { console.log(secondno + " is greater"); } 
else { console.log("Both numbers are equal"); }

// Output =>  Both numbers are equal

Array in javascript

Javascript have an array inbuilt. So it’s a set of values and can hold more than one value.


var arr  = ["first", "second", "third"];

// Get constructor of arr
console.log(arr.constructor); // Array() { [native code] }

// Get length of arr
console.log(arr.length); // 3 

// get 0 th element
console.log(arr[0]); // first

Object in javascript

Javascript have an object in form of key-value pair. Object keys can hold different types of values.


var ob  = { lang: "Javascript", "creator": "Brendan Eich" };

// Get constructor of ob
console.log(ob.constructor); // Object() { [native code] }

// Get Object length
console.log(Object.keys(ob)); // 2

// Get Object value
console.log(ob["lang"]); // Javascript

for ( var key in ob ) {
    console.log("key is ", Key, " and value is ", ob[key]);
}

// Key is lang and the value is Javascript
// Key is creator and value is Brendan Eich

Loop in javascript

Loop is used to iterate over all elements of an array, dom, set, list, dictionary and string. In javascript, we have 3 types native to the loop. for, while and do while loop. Apart from that for…in, forEach, and for…of the loop is also available in javascript.



// Basic for loop program

for ( var i = 0, len = 5; i < len; i++ ) {
    console.log(i); // 0, 1, 2, 3, 4
}

// Loop with an array

var arr  = ["first", "second", "third"];

// for loop
for ( var i = 0, len = arr.length; i < len; i++ ) {
    console.log(arr[i]); // first, second, third
}

// while loop
var i = 0, len = arr.length;

while ( i < len ) {
    console.log(arr[i++]); // first, second, third
}

// do while loop
var i = 0, len = arr.length;

do {
    console.log(arr[i++]); // first, second, third
} while ( i < len );

Break in javascript

We can prevent iterating all elements using a break keyword or stopping on the desired condition.



// break with for loop
for ( var i = 0, len = 5; i < len; i++ ) {
    console.log(i); // 0, 1, 2

    if ( i == 2 ) {
        break;
    }
}

var arr  = ["first", "second", "third"];

for ( var i = 0, len = arr.length; i < len; i++ ) {
    console.log(arr[i]);
   
    if (arr[i] == "second") break; // first, second
}

Continue in javascript

Can continue to skip over items.



// continue with for loop
for ( var i = 0, len = 5; i < len; i++ ) {

    if ( i == 2 ) { 
        continue;
    } else {
        console.log(i); // 0, 1, 3, 4
    }
}

var arr  = [1, 2, 3, 4, 5];

for ( var i = 0, len = arr.length; i < len; i++ ) {
    
    if ( arr[i] % 2 == 0 ) continue;
    else {
         console.log(arr[i] + " is odd"); // 1 is odd, 3 is odd, 5 is odd
    }
}

Switch in javascript


var num  = 1;

switch ( num ) {
    case 1:
    console.log("First : ", num);
    break;
    
    case 2:
    console.log("Second : ", num);
    break;

    default:
    console.log("Default");
}

// Outpur => First : 1

Function in javascript

Javascript is sometimes called first-class functions. We can use a function in this manner.


// Define function by declaration
function add( a, b ) {
    return a + b;
}

// Define function by expression
var sub = function( a, b ) {
    return a - b;
};

console.log("Add:", add(30, 25), ", Sub:", sub(30, 25)); // Add: 55, Sub: 5

To read more about javascript function, arguments, arrow function, closure, callback.

IIFE

An IIFE (Immediately Invoked Function Expression) is a JavaScript function that executes immediately after it is defined.


var globle = "I am globle";

( function( $ ) {
    var msg = "It's IIFE";
    console.log(msg); // It's IIFE
    console.log($); // I am globle
}( globle ) );

// We can't access msg here

We can’t access IIFE variables outside like in the previous example we can’t access the msg variable outside the IIFE structure.

Class in javascript

Recently ES6 introduced class keyword in javascript. We can use a class in this manner.


class Student {

    static greet = "Hi"; // static variable

    constructor( name ) {
        this.name = name;
    }

    getName() {
        return this.name;
    }
}

class BE extends Student {
    constructor(name, clg) {
        super(name); // super 
        this.clg = clg;
    }

    getClg() {
        return this.clg;
    }
}

var stu = new BE("abc", 12);
console.log(`${Student.greet} ${stu.getName()}, I think your age is ${stu.getClg()}`); // Hi abc, I think your age is 12

You can read more about class, inheritance, static.

Mozilla is a most useful resource to learn javascript.

About the Author: Pankaj Bisht