ES6 Tutorial

Learning OO Javascript and ES6 from youtube: academind

by Kriti

HTML

<h1> Learn Object Oriented Javascript and ES6 </h1>
<div id="console"></div>

CSS

body {
  background-color: lightblue;
}

h1 {
  color: blueviolet;
  text-align: center;
}

JavaScript

//Primitive Data types

/* Boolean, String, Number, Undefined, Null, Symbol*/

var length = "hello".length;
var length2 = new String("hello").length;
let message = "";
var printMessage = document.getElementById("console");

console.log(typeof "hello"); //string
message += typeof "hello";
console.log(message += typeof new String("hello")); //object
console.log(message += typeof String("hello")); //String
console.log(message += typeof new String("hello").valueOf()); //string

console.log(typeof 10); //number
console.log(typeof new Number(10)); //object
console.log(typeof Number(10)); //number
console.log(typeof new Number(10).valueOf()); //number

// whenever you use a primitive value as an object, js creates a temporary wrapper object to run that value use whatever property you have used and then will destroy that object. All this is done very fast and is transparent to us.


var hello = "hello";
hello.foo = "foo";
console.log(hello.foo); //undefined

console.log(length);
console.log(length2);

//x-x-x-x-x-x-//

// when you have an object then you can dynamically add properties to that object. e.g.

var num = new Number(10); // num is an object
var sum = 10 + num; //20
console.log("sum value = " + sum);

num.foo = "foo";
console.log("num.foo = " + num.foo); //foo

//x-x-x-x-x-x//

//do not use wrapper objects in place of boolean as it can be very dangerous. e.g.

var value = new Boolean(false);
if (value) { // this gets executred
  console.log("value = " + value);
}


var value2 = false;
if (value2) { // this does not get executed
  console.log("value2 = " + value2);
}


//x-x-x-x-x-x-x-x//
printMessage.innerHTML = (message);