JavaScript 101

aromalsanthosh.com

alwinjohn.me

Day - 1

aromalsanthosh.com

alwinjohn.me

Who we are ?

Aromal S

aromalsanthosh

@aromalhere

in/aromalsanthosh/

Alwin John

Dexters-Hub

_alwin_john

in/alwinjohn/

Software Engineer Intern, 

Katha Infocom Pvt. Ltd

GitHub Campus Expert

JavaScript is not Java.

What is JavaScript ?

JS is NOT related to Java other than by name and some syntactic similarities

aromalsanthosh.com

alwinjohn.me

aromalsanthosh.com

alwinjohn.me

What JavaScript Really Is ?

aromalsanthosh.com

alwinjohn.me

JavaScript is a dynamic programming language that's used for web development, in web applications, for game development, and lots more. It allows you to implement dynamic features on web pages that cannot be done with only HTML and CSS.

What JavaScript Can Do ?

aromalsanthosh.com

alwinjohn.me

Web Development

App Development

Game Development

ML

Top websites built with JavaScript

aromalsanthosh.com

alwinjohn.me

aromalsanthosh.com

alwinjohn.me

aromalsanthosh.com

alwinjohn.me

Let's dive in...

Hello World in JavaScript





console.log("Hello World"); 
//output: "Hello World"

aromalsanthosh.com

alwinjohn.me

JS Variables



let name = "John Doe";
var Name = "Thomas";

var a = 10;
var b = 20;
var c = a + b;
console.log(c); //output: 30

var num = 10;
var num= 20;
console.log(num);//output: 20

let number = 10;
let number = 20;
console.log(b); 
//output: SyntaxError: Identifier 'number' has already been declared

aromalsanthosh.com

alwinjohn.me

Variable is a name given to a memory location which stores data

JS Constants

const pi = 3.14;
pi = 3.15;
console.log(pi);
//output: TypeError: 
//Assignment to constant 
//variable.

aromalsanthosh.com

alwinjohn.me

Constants are fixed values that doesn't change during execution time.

let & const are introduced in ES6 version of JavaScript

JS Datatypes

aromalsanthosh.com

alwinjohn.me

Reference

aromalsanthosh.com

alwinjohn.me

JavaScript Operators

Reference

aromalsanthosh.com

alwinjohn.me

Type Conversion

Reference

Equality

console.log(21 == 21); //output: true
console.log(21 == '21'); //output: true
console.log('food is love'=='food is love'); //output: true
console.log(true == 1); //output: true
console.log(false == 0); //output: true
console.log(null == undefined); //output: true

console.log('hello world' === 'hello world'); //output: true
console.log(true === true); //output: true
console.log(5 === 5); //output: true
console.log(true === 1); //output: false
console.log(true === 'true'); //output: false
console.log(5 === '5'); //output: false

aromalsanthosh.com

alwinjohn.me

Difference between the ‘==’ and ‘===’ operators that the javascript provides, though they look similar, they are very different.

Conditional Statements

aromalsanthosh.com

alwinjohn.me

Why it is seen in every programming language, and what are they in JavaScript

if, else if, switch

Looping Statements

aromalsanthosh.com

alwinjohn.me

for, while, do while,

Functions

aromalsanthosh.com

alwinjohn.me

To avoid repeating the same code all over places, you can use a function to wrap that code and reuse it.

function functionName(parameters) {
    // function body
    // ...
}

function sayHello(name) {
  console.log('Hello ' + name);
}

sayHello('JavaScript');

Functions

aromalsanthosh.com

alwinjohn.me

function square(number) {
  return number * number;
}

console.log(square(5)); //output: 25

function area(length, width) {
  return length * width;
}

console.log(area(5, 6)); //output: 30

Functions - Hoisting

aromalsanthosh.com

alwinjohn.me

In JavaScript, you can use a function before declaring it. This feature is called Hoisting.

Function hoisting is a mechanism that the JavaScript engine physically moves function declarations to the top of the code before executing them.

showMe(); // a hoisting example

function showMe(){
    console.log('an hoisting example');
}

aromalsanthosh.com

alwinjohn.me

Scope Of Variabes

Reference

JavaScript Arrays

const mixedTypedArray = [100, true, 'freeCodeCamp', {}];


const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
const salad = new Array('🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑');

salad[0]; // '🍅'
salad[2]; // '🥦'

for(let i=0; i<salad.length; i++) {
  console.log(`Element at index ${i} is ${salad[i]}`);
}