Into JavaScript
This is summary of Second chapter, Into JavaScript, of first Volume, Up & Going, of Series you don’y know JS by Kyle Simpson. This chapter is overview of topics covered in details throughout the rest of series.
Values & Types
JS has typed values, not typed variable. Well, what does this mean?
let’s suppose we have expression.
var a;
typeof a; //undefined
a = ‘hello world’;
typeof a; //string
here type of hello world is string, not the typeof variable a. If I’ll assign another value type to a, type of will change.
a = 10;
typeof a; //number
Only values have types in JavaScript; variables are just simple containers for those values.
JS has few inbuilt types.
• string
• number
• boolean
• null and undefined
• object
symbol (new to ES6) Object
The object type refers to compound value where any property can hold any value.
let person = {
name: ‘Prasjant’,
surName: ‘Jha’,
writesCode:true,
}
properties of object can be access using dot notation
console.log(person.name); //Prashant
console.log(person.surName); //Jha
console.log(person.writesCode); //true
or using bracket notation
console.log(person[‘name’]); //Prashant
console.log(person[‘surName’]); //Jha
console.log(person[‘writesCode’]); //true
Array
An array is object that holds values in numerically indexed position.
let person = [‘Prashant’, ‘Jha’, true];
console.log(person[0], person[1], person[2]); //Prashant Jha true
Function
The other object subtype you will use in JS program is function. Function can have properties as function is main type.
function details(){
return ‘Prashant’;
}
details.writesCode = true;
typeof details; //function
typeof details(); // String as it’s returning String
typeof details.writesCode; //boolean
Comparing Values
Coercion
In JS, we have 2 types of coercion Implicit and Explicit. Implicit is automatic conversion from one type to another in JS. For explicit conversion, we have to perform that in our code. For example :-
‘2’==2; //true
because here, in loose comparison, JS is allowing implicit coercion and left hand side value is getting converted in to number and it produces result as true but in strict comparison this same operation will give result as false.
‘2’===2; // false
because here coercion isn’t allowed so none of the value is getting converted to match the other type and hence it produces as false. So to give the same result in strict comparison as loose comparison we’ll convert one value into another. This type of conversion will be explicit coercion.
Number(‘2’)===2; //true
Function Scope
Hoisting
When a var declaration is conceptually moved to the top of enclosing scope this behaviour is called hoisting.
var a = 2;
foo(); //works because foo declaration is hoisted
function foo(){
a = 3;
console.log(a); //3
var a; //declaration is hoisted to the top of foo
}
console.log(a); //2
Nested Scope
When we declare a variable, it is available anywhere within that scope.
function fun1(){
var a = 1;
function fun2(){
var b = 2;
function fun3(){
var c= 3;
console.log(a, b, c); // 1 2 3
}
fun3();
console.log(a, b); //1 2
}
fun2();
console.log(a);
}
fun1()
Inner most function fun3() has access of all 3 variables, fun2() can’t access c because c is within scope of fun3() only, and fun1() can’t access b because b is within scope of fun2() only.
Strict Mode
In ES5, we got a new feature in JS Strict Mode. Adhering to strict mode makes our code more optimisable, safer and cleaner. If we use strict mode it shows warning in console if we violate any standard rule set for strict mode.
function foo() {
“use strict”;
// this code is strict mode
function bar() {
// this code is strict mode
}
}
“use strict”;
function foo() {
// this code is strict mode
function bar() {
// this code is strict mode
}
}
// this code is strict mode
Function as values
In JS, we can treat the function as values. We can assign a function to a variable, pass a function to another function and a return a function from a function also.
Anonymous function :-
var fun = function(){
console.log(‘I am anonymous function’)
}
fun();
Named function :-
var fun = function name(){
console.log(‘I have a name.’)
}
fun();
Callback function and Higher Order Function :-
function HoF(callBack){
callBack();
console.log(‘I am parent’)
}
function child(){
console.log(‘I am child’)
}
HoF(child); //I am child
//I am parent
Immediately Invoked Function :-
(function IIFE(){
console.log(‘Immediately Invoked Function Expression’)
})()
We can return values from immediately invoked function also.
let str = (function IIFE(){
return ‘I am Immediately Invoked Function Expression’
})()
console.log(str)
Closure :-
Function along with it’s lexical scope forms closure.
function makeAdder(x){
function add(y){
return y+x
}
return add;
}
var plusOne = makeAdder(1);
var plusTen = makeAdder(10);
plusOne(3); // 4
plusOne(41); // 42
plusTen(13); //23
with makeAdder(1) we get reference of inner add that remembers x as 1 and with makeAdder(10) we get reference of inner add that remembers same value as 10.
this identifier
In JS, this refers to object it belongs to and doesn’t refers to function itself.
function fun(){
console.log(this.value);
}
var value = ‘global’;
fun(); // here this points to global environment and we are declaring value after this function so value here is undefined
var obj1 = {
value :‘obj1’;
fun:fun
}
obj1.fun(); // now this inside function fun() will refer to obj1 and value in obj1 object is ‘obj1’ so fun() will print obj1
var obj2 = {
value:’obj2’
}
fun.call(obj2); //here this of function fun() refers to obj2 so in console we’ll get ‘obj2’.
Prototype
when we search for a property in object and couldn’t find it, JavaScript automatically use that object’s internal prototype reference to find another object to check that property.
let animal = { eats: true };
let rabbit = { jumps: true };
rabbit.proto = animal;
console.log(rabbit.eats); //true
Old & New
Some of the new features might not be available in newer version of JS. So there are two ways by which we can use newer features of JS in older browsers.
Polyfill :- Polyfilling is taking the definition of a newer feature and producing a piece of code that’s equivalent to the behaviour, but is able to run in older JS environments. Most of the new features can be polyfilled but not all. So we must be really careful while implementing polyfill for any new features and adhere to specification. Transpiling :- We can’t write polyfill for each new features so it’s better to use a tool that can convert newer code to older code equivalent at compilation time that can be supported by older browser using older JS engine. transpiling essentially means transforming+compiling. There are quite a few transpilers like babel and traceur.
this is summary of second chapter “Into JavaScript” of You don’t know JS : Up & Going. Which is first book in 6 volume series of You Don’t know JS written by Kyle Simpson. I’ll be writing blog on each chapter of this series 0f 6 books. If you liked it please clap, add your comment/feedback and share it among your friends & peers.