DEV Community: Sakshi Kumar

ELOQUENT JAVASCRIPT : CHAPTER 3

Sakshi Kumar — Sat, 12 Dec 2020 10:38:14 +0000

In this blog I will cover the things I learnt in Chapter 3 of the book - Eloquent JavaScript.

Chapter 3
- Basic understanding of Functions
- Scopes
  - ARROW FUNCTIONS
  - CALL STACK
  - OPTIONAL ARGUMENTS
  - CLOSURE
  - RECURSION

Chapter-3

BASIC UNDERSTADNING OF FUNCTIONS

Functions play a crucial role in programming. Advantages :

Larger programs can be structured using functions.
Names can be associated with subprograms.
Different subprograms to perform different to execute different parts of code.
Reduced repetition.

To begin with, functions are declared using a function keyword.
They may or may not take a parameter depending on the type of calculations they are going to be used for. The body of a function starts and ends with parentheses. Some functions have a return statement, some don't.

const square = function(x) {  //function declaration
return x * x;
};

console.log(square(12));

//Result → 144

const createVoice = function() {
console.log("Hahahahaha!");
};


createVoice();
//Result → Hahahahaha!

SCOPES

In JavaScript there are two types of scope:

Local scope -> These are the variables declared within a JavaScript function. Local variables have Function scope i.e they can only be accessed from within the function.

function myFunction() {
  var carName = "Volvo";
}

Global scope -> These are the variables declared outside a function. A global variable has global scope i.e all scripts and functions on a web page can access it.

var carName = "Volvo";
function myFunction() {
}

Variables created without a declaration keyword (var, let, or const) are always global, even if they are created inside a function.

JavaScript can have nested scope as well. Blocks and functions
can be created inside other blocks and functions, producing multiple degrees of locality. All functions have access to the global scope. Nested functions have access to the scope "above" them.

const hummus = function(factor) {
const ingredient = function(amount, unit, name) {
let ingredientAmount = amount * factor;
if (ingredientAmount > 1) {
unit += "s";
}
console.log(`${ingredientAmount} ${unit} ${name}`);
};
ingredient(1, "can", "chickpeas");
ingredient(0.25, "cup", "tahini");
ingredient(0.25, "cup", "lemon juice");
ingredient(1, "clove", "garlic");
ingredient(2, "tablespoon", "olive oil");
ingredient(0.5, "teaspoon", "cumin");
};


//The code inside the ingredient function can see the factor binding 
from the outer function. But its local bindings, such as unit 
or ingredientAmount, are not visible in the 
outer function.

In JS, the order of function declaration and function call does not matter. Function declarations are not part of the regular top-to-bottom flow of control. They are conceptually moved to the top of their scope and can be used by all the code in that scope.

console.log("The future says:", future());
function future() {
return "You'll never have flying cars";
}


// result -> The future says you'll Never have flying cars

ARROW FUNCTIONS

Arrow functions are just another way of writing the JS functions. Instead of using the keyword function, we use arrow to represent a function followed by the body of function.

var squareNumber = (x) => {
return x * x ;
}

(squareNumber(5));   //function call

//result -> 25

** In simple words, this input(parameters) give this result (body).**

CALL STACK

When the computer encounters a function call, it goes to that function and implement it. After the implementation, the computer returns back to the line from where function was called and implement the next line of code.

The computer is supposed to store the context from where it had to continue executing again. The place where the computer stores this context is the call stack. Every time a function is called, the current context is stored on top of this stack. When a function returns, it removes the top context from the stack and uses that context to continue execution.

OPTIONAL ARGUMENTS

We can pass more number of arguments to a function having comparatively less parameters. JavaScript will ignore the extra arguments. In the opposite situation, the un-assigned parameters will be assigned a value of undefined.

function square(x) { return x * x; }
console.log(square(4, true, "hedgehog"));


//Result → 16

CLOSURE

A closure is a function having access to the parent scope, even after the parent function has closed.

function makeFunc() {
  var name = 'Mozilla';
  function displayName() {
    alert(name);
  }
  return displayName;
}

var myFunc = makeFunc();
myFunc();

In this example, the binding 'myFunc' is a reference to the instance of the function displayName that is created when makeFunc is called. The instance of displayName maintains a reference to its lexical environment ( lexical scoping uses the location where a variable is declared within the source code to determine where that variable is available. Nested functions have access to variables declared in their outer scope.), within which the variable name exists. For this reason, when myFunc is invoked, the variable name remains available for use, and "Mozilla" is passed to alert.

For more, refer this link

RECURSION

Recursion simply refers to a situation when the function calls itself repeatedly unless some boundary condition is not encountered. In JavaScript implementations, it’s about three times slower than the looping version. Running through
a simple loop is generally cheaper than calling a function multiple times.

function Factorial(n) { 
            if (n === 0) {  
                return 1;  
            } 
            else {  
                return n * Factorial( n - 1 );  
            } 
        }

Thankyou for reading!😃
All feedbacks are welcome 🙆‍♀️

Connect with me on :

ELOQUENT JAVASCRIPT : CHAPTER 2

Sakshi Kumar — Fri, 11 Dec 2020 12:32:36 +0000

In this blog I will cover the things I learnt in Chapter 2 of the book - Eloquent JavaScript.

Chapter 1
- Expressions and statements
- Variables
- Functions
- Control Flow
- Break, Continue
- Switch

Chapter-2

EXPRESSIONS AND STATEMENTS

Expressions are the fragments of code that produces a value. Every value is an expression.
Statements are the complete sentences that make some sense ,both to humans and computers.
A program is a list of statements grouped together to get the desired output.
Therefore,
Expressions->Statements->Programs

VARIABLES

Variables, also known as bindings are a way to store the values we want to apply calculations upon. Like, we humans need a copy and pen to write down a value and then perform some calculations on it, similarly computers have memory to store the numbers and then perform the calculations we want them to. This is done via variables or bindings. So, variables let us store numbers, strings, result, anything.

var myName = "Sakshi";
console.log(myName);

We can declare a binding either using let, var or const keywords.
They all give almost same result apart from the fact that const is used mostly when we do not want the value of out binding to change, i.e. the value remain constant throughout the program.
We can change the values provided to variables using 'var' and 'let' keywords.
var : Variable
const : Constant

var mySaving = 400;
//if I receive 100Rs this month 
mySaving = mySaving+100;
console.log(mySaving);

//result : 500

If we try to modify a const value during the tenure of a program, we will get an error message!

The variable name could be anything according to our convenience. Although it must not start with a number. Also, we will get error message if we try to name our variable similar to the name of some keyword like : let, break, const, etc.

FUNCTIONS

Functions are nothing but the piece of programs wrapped in a value. It is advisable to use functions in out program as, if once declared they can be used multiple times (otherwise we would have to write the entire code again and again).

//add two numbers
function add(a,b)   //function declaration
{  
  var sum = a+b;
  return sum;
}

var ans = add (4,5);  //function call
console.log("The sum is "+ ans);

result : The sum is 9

Function parameters are the names listed in the function's definition(in this example : a,b). Function arguments are the real values passed to the function.
There are some predefined functions like console.log() and some functions that are user defined - add(), in this case.

console.log() : is used to print any kind of variables defined before in it or to just print any message that needs to be displayed to the user. It prints the output in the console of the browser.

return : The return statement stops the execution of a function and returns a value from that function. The add() function returns the value of sum.

CONTROL FLOW

We can have straight-line execution or conditional execution in our programs.
(A)IF ELSE LOOPS:
The conditional execution can be done using IF-ELSE loop.

//straight line
var age = 34;
console.log(age);

//conditional
var age = 34;
if( age<30)
  console.log("My age is " +age);
else
  console.log("I am older than 30. Age : " + age);

Since there can be multiple conditions, we can use IF-ELSEIF-ELSE loops.

if (condition1)
  statement1
else if (condition2)
  statement2
else if (condition3)
  statement3
...
else
  statementN

(B) WHILE and DO LOOPS :

While loop is used when we want to execute certain statements multiple times.

var age = 10;
while(age < 15)  //this condition checks if age is less than 15. 
                   If true the inner loop executes.
{
  console.log(age);
  age = age + 1;
}

//result : 10 11 12 13 14

The DO-WHILE loop executes at least once for sure !

let yourName;
do {
yourName = prompt("Who are you?");
} while (!yourName);
console.log(yourName);

This program will force you to enter a name. It will ask again and again until it gets something that is not an empty string. This means the loop continues going round until you provide a non-empty name.

(C) FOR LOOPS
Sometimes while loops can be confusing, and therefore for loops come to the rescue. They perform the same function of looping through certain statements repeatedly.

for (statement 1; statement 2; statement 3) {
  // code block to be executed
}

Statement 1 is executed (one time) before the execution of the code block.
Statement 2 defines the condition for executing the code block. If condition is false, we come out of the loop.
Statement 3 is executed (every time) after the code block has been executed.

for( var i = 0 ; i < 5 ; i++ )
{
  console.log(i);
}


//result : 0 1 2 3 4

BREAK and CONTINUE

The break statement "jumps out" of a loop. It breaks the loop and continues executing the code after the loop (if any).

for (var i = 0; i < 10; i++) {
  if (i === 3) 
    {  
        break;   //breaks out of the for loop
    }
  console.log(i);
}


//result : 0 1 2

The continue statement "jumps over" one iteration in the loop. It breaks one iteration (in the loop), if a specified condition occurs, and continues with the next iteration in the loop.

for (var i = 0; i < 6; i++) {
  if (i === 3) 
    {  
        continue;   //goes back to the for loop
    }
  console.log(i);
}

//result : 0 1 2 4 5

SWITCH

The switch statement is used to perform different actions based on different conditions.

switch(expression) {
  case x:
    // code block
    break;
  case y:
    // code block
    break;
  default:
    // code block
}

camelCase:

The standard JavaScript functions, and most JavaScript programmers, follow the camelCase style—they capitalize every word except the first.

var myName = "Sakshi";
var newAdditionNumber = 23;

IMPORTANCE OF IDENTATION :

-Easier to read
-Easier to understand
-Easier to modify
-Easier to maintain
-Easier to enhance

IMPORTANCE OF COMMENTS :

-When people work together, comments make it easier for others to read and understand your code.
-If we want to see/edit code later, comments help us to memorize the logic that was written while writing that code.

Thankyou for reading!😃
All feedbacks are welcome 🙆‍♀️

Connect with me on :

ELOQUENT JAVASCRIPT : CHAPTER 1

Sakshi Kumar — Tue, 08 Dec 2020 07:51:56 +0000

So, this is in continuation with my previous post on 'The introduction' of the book. In this blog I will cover the things I learnt in Chapter 1 of the book - Eloquent JavaScript.
#teamtanayejschallenge

Chapter 1
- Values in JS
- Numbers
- Arithmetic Operations
- Special Numbers in JS
- Strings
- Unary and Binary Operators
- Boolean Values
- Logical Operators
- Empty values
- Automatic Type Conversion
- Short Circuiting

CHAPTER-1
This chapter introduces the atomic elements or the building blocks of JS such as the simple value types and the operations that can be performed on them.

1. Values is JavaScript :

To be able to work with large quantities of bits without getting lost, we must separate them into chunks that represent pieces of information, these are called as values. Though all values are made of bits, they play different roles. Values can be numbers, texts or strings, functions etc.

2. Numbers :

Numbers are nothing but the numerical values. Given 64 binary
digits, you can represent 2^64 different numbers, that's a lot!
We can also store fractional numbers. They are written using a dot. Example :
9.81

For very big or very small numbers, you may also use scientific notation by adding an e (for exponent), followed by the exponent of the number.

2.998e8
That is 2.998 × 10^8 = 299,800,000.

3. Arithmetic Operations :

Arithmetic Operations include Addition, Subtraction, Multiplication, Division , Modulus and so on. They take two numbers or operands, operate upon them and produce the output.

Multiplication and Division have same preference which is greater than Addition and Subtraction, which again have same preference.

Addition:

var a = 14;
var b = 10;
console.log(a+b);

result-24

Subtraction:

var a = 14;
var b = 10;
console.log(a-b);

result-4

Multiplication:

var a = 14;
var b = 10;
console.log(a*b);

result-140

Division:

var a = 14;
var b = 10;
console.log(a/b);

result-1

Modulus:

var a = 14;
var b = 10;
console.log(a%b);

result-4

4. Special Numbers in JS :

There are certain special numbers as well. Infinity and -Infinity, which represent +ve and -ve infinite values respectively are two of them. Since the calculations using infinite values are not trustable, these are not used much.

NaN : Not a Number. It is a value of the number type. We get this result when we try to calculate 0/0, infinity-infinity or any other numeric operations that yield an undefined value or a meaningless result.

5. Strings :

These are used to represent text. They are always written inside quotes be it double or single. Example:

"I am a string"
'I am also a string'
"1.3454"

Whenever a '\' is found inside a string -- the character after it is special, this is called escaping a character. A quote after a backslash would not end the string, instead it will be a part of the string. Example:

var s = "Hey! My name is \"abcde\". How you doin'?"
console.log(s);

result : Hey! My name is "abcde". How you doin'?

6.Unary and binary Operators :

The operators which work on a single operand are called unary operators. They require only one value to produce some result. Example : typeof()

typeof(3.14) //number
typeof("sakshi") //string

All the arithmetic operators we have read earlier are few examples of binary operators as they take two values to output a result.

7.Boolean values :

It has only two values - true and false.

console.log(3 > 2)
// → true
console.log(3 < 2)
// → false
console.log("Itchy" != "Scratchy")
// → true
console.log("Apple" == "Orange")
// → false

All the operations in JavaScript are done from left to right, keeping in mind the precedence of operators.

There is only one value in JS which is not equal to itself : NaN. It is supposed to denote non-sensical computations and as such it is not equal to the result of any other non-sensical computation.

console.log(NaN==NaN) //false

8. Logical Operators :

JS supports 3 logical operators : AND(&&), OR(||) and NOT(!).
The logical operators have lowest precedence.

console.log(true && false)
// → false
console.log(true && true)
// → true
console.log(false || true)
// → true
console.log(false || false)
// → false

There is a ternary operator as well. As the name suggests, it takes three values as input. If the condition is true, it outputs the first value otherwise second value is displayed as output.

console.log(true ? 1 : 2);
// → 1
console.log(false ? 1 : 2);
// → 2

9.Empty values :

Apart from all the values we have read till now, there are two empty values as well : Null and undefined. They are themselves values but carry no information.
They can be used interchangeably.

10.Automatic type conversion :

In the introduction blog, it was said that JS sometimes go out of it's way to accept almost any program you give.

console.log(8 * null)
// → 0
console.log("5" - 1)
// → 4
console.log("5" + 1)
// → 51
console.log("five" * 2)
// → NaN
console.log(false == 0)
// → true

Whenever a wrong type is provided, JS converts it according to the type it needs using a set of rules which might sometime output some undesirable results. This is known as type coercion.

When something that doesn't map to a number in an obvious way, it is converted to a number -> NaN. Any operation with Nan, results in NaN itself. So, if we ever get any such outcome, we need to check for the type conversion errors in our program.

The '==' sign checks for equality. It yields true when both are equal except for NaN.
When type of two values differ, JS has different rules which mostly try to convert one value's type to another for further calculations.
For 'null' and 'undefined' values, the '==' sign yields true only if both sides are one of null or undefined.

When you don't want any type conversions, use triple equal to (===) and (!==) tests for precise equality.

11. Short Circuiting of Logical Operators :

The logical operators && and || handle values of different types in a peculiar way. They will convert the value on their left side to Boolean type in order to decide what to do, but depending on the operator and the result of that conversion, they will return either the original left-hand value or the right-hand value.

|| -> will return the value to its left when that can
be converted to true and will return the value on its right otherwise.

console.log(null || "user")
// → user
console.log("Agnes" || "user")
// → Agnes

&& -> When the value to its left is something that converts to false, it returns that value, and otherwise it returns the value on its right.

console.log(null || "user")
// → null
console.log("Agnes" || "user")
// → user

Thankyou for reading!😃
All feedbacks are welcome 🙆‍♀️

Connect with me on :

Eloquent JavaScript-Introduction

Sakshi Kumar — Sat, 05 Dec 2020 11:50:27 +0000

I have started off with this book and will be posting about the things I got to learn in each chapter. So, this will be a series of blogs providing you the gist of every chapter. Happy reading!:)
#teamtanayejschallenge

Day0 : INTRODUCTION

What is programming? Why is it important?
Programming Languages
What is JavaScript?

What is programming? Why is it important?

Look anywhere around you and you will find technology. What drives technology? Programs! Codes! The art of writing understandable and clean programs is programming. It is basically the act of constructing a program which is a set of precise instructions telling a computer what to do. Computer itself is a dumb machine, it works on the instructions provided by us that drives it towards the completion of a task.

Programming Languages

A programming language is a formal language comprising a set of instructions that produce various kinds of output. It is the language of the computers. These digital devices recognize only two digits 0 and 1, also known as machine code (developed in binary system). Firstly, let's look at the classification of languages.

HIGH-LEVEL LANGUAGE : C, C++, JavaScript, etc. are the languages that humans have devised, they are high-level languages understood by programmers. It enables the users to write the programs in a language which consists of English words and mathematical expressions. You might have written a few programs by now, the code that we write, i.e. the source code is the programming instructor of a procedural language.

Example :

   var a = 10;
   var b = 5;
   var c = a+b;
   console.log(c);

This is the program for adding two numbers in a high-level language (JS)

We use compilers to convert these high level languages into the machine-readable codes.

ASSEMBLY LANGUAGE : It is an intermediary level programming language. It allows the user to write a program using alphanumeric mnemonic codes instead of 0s and 1s. For example, for addition, subtraction, multiplication it uses ADD,SUM,MUL.

Assembly language is converted to machine language using an assembler.

You can read about the difference between Compiler and Assembler in detail over here.

MACHINE LANGUAGE : Machine Language is the low level programming language. It can only be represented by 0's and 1's. This is the computer understandable language and thereafter our programs get executed.

What is JavaScript?

JavaScript is the Programming Language for the Web. It can update and change both HTML and CSS. JavaScript was initially created to “make web pages alive”.

^This image briefly describes the purpose of JavaScript

There are at least three great things about JavaScript:
Full integration with HTML/CSS.
Simple things are done simply.
Support by all major browsers and enabled by default.

Additional information
When JavaScript was created, it initially had another name: “LiveScript”. But Java was very popular at that time, so it was decided that positioning a new language as a “younger brother” of Java would help.

But as it evolved, JavaScript became a fully independent language with its own specification called ECMAScript, and now it has no relation to Java at all.

👉 (JAVASCRIPT AND JAVA ARE TWO COMPLETELY DIFFERENT LANGUAGES!) 👈

JavaScript is a bit liberal in what it allows. This was introduced in the favor of beginner programmers, so that they can code easily. A drawback of this functionality was that it mostly makes finding problems in your programs harder because the system will not point them out to you. On the other hand, it has some advantages as well - it can be used to overcome some of JavaScript’s shortcomings.
The language is still evolving. Apart from web browsers, it is also used as Scripting and query language for databases like MongoDB and CouchDB. Node.js provide an environment for programming JavaScript outside of the browser.

In the subsequent chapters we will learn about :

Basic structure of JS.
Functions.
Data Structures.
Techniques to write abstract code keeping complexity under control.
Error Handling and Bug Fixing.
Regular Expressions.
Modularity, etc.

Thankyou for reading!😃
All feedbacks are welcome 🙆‍♀️

Connect with me on :

DEV Community: Sakshi Kumar

ELOQUENT JAVASCRIPT : CHAPTER 3

Table Of Contents

BASIC UNDERSTADNING OF FUNCTIONS

SCOPES

ARROW FUNCTIONS

CALL STACK

OPTIONAL ARGUMENTS

CLOSURE

RECURSION

ELOQUENT JAVASCRIPT : CHAPTER 2

Table Of Contents

EXPRESSIONS AND STATEMENTS

VARIABLES

FUNCTIONS

CONTROL FLOW

BREAK and CONTINUE

SWITCH

ELOQUENT JAVASCRIPT : CHAPTER 1

Table Of Contents

1. Values is JavaScript :

2. Numbers :

3. Arithmetic Operations :

4. Special Numbers in JS :

5. Strings :

6.Unary and binary Operators :

7.Boolean values :

8. Logical Operators :

9.Empty values :

10.Automatic type conversion :

11. Short Circuiting of Logical Operators :

Eloquent JavaScript-Introduction

Table Of Contents

What is programming? Why is it important?

Programming Languages

You can read about the difference between Compiler and Assembler in detail over here.

What is JavaScript?

^This image briefly describes the purpose of JavaScript