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.