DEV Community

Cover image for Eloquent JavaScript (Part I : Chapter 2/Program Structure)
Pranish Shrestha
Pranish Shrestha

Posted on • Updated on • Originally published at dev.to

Eloquent JavaScript (Part I : Chapter 2/Program Structure)

As JavaScript can work in most of the fields like web development, mobile apps, desktop apps etc. It is a vital programming language to day to learn.
This blog is inspired by a book Eloquent JavaScript

What you will learn in this post

  • Expressions and statements
  • Bindings
  • Binding Names
  • the environment
  • Functions
  • console.log function
  • return value
  • control flow
  • conditional execution (if, else, if else)
  • loops(while, do-while, for)
  • Indenting Code
  • Breaking out of a loop
  • Updating Bindings Succinctly
  • Dispatching on available with switch
  • Capitalization
  • Comments

Expressions and Statements

  • A fragment of code that produces a value is called an expression.Expression is a piece of code that resolves to a value. Example: const number = 5; 5 is an expression and the whole const number = 5 is an statement. Programs build statements which themselves sometimes is made out of statements and sometimes expressions contains by some other small expressions.

Bindings

  • We know that new values can be made by old values and if new values aren't used immediately then it can disappear again. To catch and hold values , JavaScript Provides a thing called Binding or a variable.

Example:

let today = 'day';
 console.log (today);
//day

today ='night';
console.log(today);
//night
Enter fullscreen mode Exit fullscreen mode

Binding doesn't contain the values , they grasp them with var, let, const.

Binding Names
Rules for writing names :

  • can include numbers but cannot start with number eg: hello123 is good but 123hello is not accepted.
  • may include $ and underScore(_) but except no other are taken. No Spaces are used. -binding names or variable names cannot be used of the keywords eg : break case catch class const continue debugger default delete do else enum export extends false finally for function if implements import interface in instanceof let new package private protected public return static super switch this throw true try typeof var void while with yield

Don’t worry about memorizing this list. When creating a binding produces an unexpected syntax error, see whether you’re trying to define a reserved word.

The Environment

The collection of bindings and their values that exist at a given time is called the environment.When a program starts up, this environment is not empty. It always contains bindings that are part of the language standard, and most of the time, it also has bindings that provide ways to interact with the surrounding system. For example, in a browser, there are functions to interact with the currently loaded website and to read mouse and keyboard input.

functions
functions are a piece of a program wrapped in a value. Values are given to a function called arguments.
example:

function sum() {
...
}
Enter fullscreen mode Exit fullscreen mode

console.log function
In the javascript we use console.log function to see what the output has come. It cannot be seen in the viewing area of the browser but can be see in the inspect of the browsers. f12 on windows and command-option-I on mac.

Return Value
When a function produces a value, it is said to return a value.
example:

 console.log(Math.max(2,4))
//4
Enter fullscreen mode Exit fullscreen mode

Control Flow
In more than one statement, the statements are executed as if there are a story from top to bottom.
example:

let num = number(prompt("Pick a number"))
console.log("your number is " + num)
Enter fullscreen mode Exit fullscreen mode

Conditional execution
if there comes a choice then this execution can be used:
if condition
example:

if(1+1=2) console.log("Its true")
//Its true
Enter fullscreen mode Exit fullscreen mode

if 1+2 isnt 2 then the console wouldnt have worked.
for multiple choices example:

let num = Number(prompt("Pick a number"));

if (num < 10) {
  console.log("Small");
} else if (num < 100) {
  console.log("Medium");
} else {
  console.log("Large");
}
Enter fullscreen mode Exit fullscreen mode

Loops
to do a repeated work
While loop
we need is a way to run a piece of code multiple times. This form of control flow is called a loop.
example:

let number = 0;
while (number <= 12) {
  console.log(number);
  number = number + 2;
}
// → 0
// → 2
//   … etcetera
Enter fullscreen mode Exit fullscreen mode

do while
In this loop atleast the loop will run atleast once.
example:

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

for loop
example:

for( var i=0;i<5;i++){
...
}
Enter fullscreen mode Exit fullscreen mode

Indenting Code
Many coders uses tabs to indent their code to look nice and easier to read.

Breaking out of a loop
To prevent from the loop that will run continuously so the break statement is used.
example:

for(let number=15; number=number+1){
  if (number%7==0){
console.log(number);
break;
}
}
//21
Enter fullscreen mode Exit fullscreen mode

Imagine if the break statement wasn't here then the loop would've run infinite times so to prevent it, the break statement is used and if there want to continue for the other loops then the continue statement is used. continue;

Updating bindings Succinctly
(succinctly means brief or to the point)
Instead of number =number +1, we can also write number+=1 or number++ or number--.

Dispatching on a value with switch
Instead of if condition to go into a decision. switch is more preferred.
example:

switch (prompt("What is the weather like?")) {
  case "rainy":
    console.log("Remember to bring an umbrella.");
    break;
  case "sunny":
    console.log("Dress lightly.");
  case "cloudy":
    console.log("Go outside.");
    break;
  default:
    console.log("Unknown weather type!");
    break;
}

Enter fullscreen mode Exit fullscreen mode

Capitalization
There are 5 types to write a variable name in JS:

hellopeopleoftheworld
hello_people_of_the_world
HelloPeopleOfTheWorld
helloPeopleOfTheWorld
HELLO_PEOPLE_OF_THE_WORLD
Enter fullscreen mode Exit fullscreen mode

1st one is hard to read. 2nd one is difficult to write the underscore. The effective way to write in a JavaScript is the 4th one: capitalizing every initials of the word except the first word;it is also called camelCase. the fifth one is basically used to define constants.

Comments
// is used for single line comment and /**/ is used for multiple line comment.
Example:

// this is a good code
/*this code contains
alot of defining terms
to understand
*
Enter fullscreen mode Exit fullscreen mode

/

Conclusion ⌛
I hope you found these tips helpful. If you need any help please let me know in the comment section.

👋 Thanks for reading, See you next time

Top comments (4)

Collapse
 
jzombie profile image
jzombie

In the "capitalization" section, there are some additional ways to capitalize:

  • All caps: i.e. const MY_CONSTANT = 'a constant value';
  • First-letter uppercase camelCase: i.e. class MyClass {}
Collapse
 
pranish07 profile image
Pranish Shrestha

yesss you're right. The book I'm referring to has these 4 types and yes all caps is also widely used for constants so edited it. Thanks.
first-letter uppercase was already mentioned. Thank you

Collapse
 
oniichan profile image
yoquiale

You should format your code.

Collapse
 
pranish07 profile image
Pranish Shrestha

Done. Thanks.