# JavaScript Basics There are those who will say terrible things about JavaScript. Many of these things are not true. When I was required to write something in JavaScript for the first time, I quickly came to despise it. It would accept almost anything I typed but interpret it in a way that was completely different from what I meant. This had a lot to do with the fact that I did not have a clue of what I was doing, of course, but there is a real issue here: JavaScript is ridiculously liberal in what it allows. The idea behind this design was that it would make programming in JavaScript easier for beginners. In actuality, it mostly makes finding problems in your programs easier because the system will point them out to you. This flexibility also has its advantages, though. It leaves space for a lot of techniques that are impossible in more rigid languages, and having the knowledge of it different types of errors , makes it easier to overcome some of JavaScript’s shortcomings. In this article, we'll discuss the basics which make JavaScript flexible to beginners. * Conditionals. * Loops. * Function. 1. **CONDITIONALS**: JavaScript as a language could be executed in various ways. One of the ways is conditionals which include IF statement, ELSE IF statement and SWITCH statement. * **IF statement** **Example:** ```javascript let num= 10; if (num>0 & num!=0){ console.log( 'number is positive' ) } else{ console.log('number is negative') } ``` **Output:** ```bash number is positive ``` * **ELSE IF statement:** **Example**: ```javascript num=10; if( num>=0, num!=0){ console.log('number is a natural number') } else if(num<=0, num!=0){ console.log('number is a decimal number') }else{ console.log('number is null') } ``` **Output:** ```bash number is a natural number ``` * **Switch Statement:** **Example**: ```javascript let day='monday' switch(day){ case'monday': console.log("it's the beginning of a new week") break; case 'friday': console.log("thank god it's friday") break; default: console.log("it's a regular day") } ``` **Output:** ```bash it's the beginning of a new week ``` 2. **LOOPS:** A loop is a control statement which allows us to repeatedly execute block of code. * **Do While Loop:** A do while loop is a control structure that executes at least once, and stops only after providing a termination in the while statement. **Example:** ```javascript let k=1; do{ console.log("count:"+k); k++; } while(k<=5); ``` ```bash count= 1, 2, 3, 4, 5. ``` * For Loop: This executes all it statement in the parentheses after the for statement. The parentheses contains two semicolons the first semicolon initializes the loop while the second semicolon check whether the loop must continue the final part update the state of the loop after every iteration. **Example:** ```javascript for (let i=1; i<=10;i++){ console.log("count:" +i); if (i===5){ console.log("breaking the loop at count 5"); break; } } ``` **Output:** ```bash count: 1, 2, 3, 4, 5. ``` * While Loop: A statement starting with the keyword WHILE create a loop, the word while is followed by an expression in parentheses and then a statement. **Example**: ```bash let j=1; while(j<=10){ console.log("count:"+j); if(j===3){ console.log("breaking the loop at count 3"); break; } j++ } ``` **Output:** ```bash count:1, 2, 3. ``` 3. **FUNCTIONS:** JavaScript can be executed as a function. A function is a set of code required to perform a task * **Regular Function:** **Example:** ```javascript function calculateRectanglrArea(length, width){ return length*width } const rectanglerArea= calculateRectanglrArea(5,8); console.log("rectangle area:", rectanglerArea); ``` **Output:** ```bash rectangle area = 40 ``` * **Function Declaration:** JavaScript could be evaluated by declaration. this is the method of assigning value to a function. **Example:** ```javascript console.log("the future says:", future()); function future (){ return "expect the unexpected"; } ``` **Output:** ```bash the future says: expect the unexpected ``` * **Function Expression:** **Example:** ```javascript const isEven = function(number){ return number % 2 ===0; } const checkNumber = 7; console.log(checkNumber + "is even:", isEven(checkNumber)); ``` **Output**: ```bash 7 is even - false ``` * **Scope:** Each binding has a scope, each scope has a "look out" into the scope around it **Example:** ```javascript const halve = function(n){ return n / 2; }; let n = 10; console.log(halve(100)); console.log(n) ``` **Output**: ```javascript 50 10 ``` * **Hoisting :** Hoisting is a method of which variable and function declaration are moved to the top of their scope before code execution. This implies that no matter where the function is declared, they are moved to the top of their scope before execution **Example:** ```javascript function bakecake(){ function prepareBatter(){ console.log("mix flour, sugar, eggs, and milk."); console.log(" pour the batter inside the cake pan."); } prepareBatter(); console.log("bake in the oven."); } bakecake(); ``` **Output**: ```javascript mix flour, sugar, eggs, and milk. pour the batter inside the cake pan. bake in the oven. ``` * **Nestling :** Nestling is when writing something inside of something, i.e when a function is inside another function **Example:** ```javascript 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", "chickenpeas"); ingredient(0.25, "cup", "tahini"); ingredient(0.25, "cup", "lemon juice"); ingredient(1, "clove", "garlic"); ingredient(2, "tablespoon", "olive oil"); }; ``` * **Arrow Function**: The arrow function is executed in a situation where by the arrow comes after the list of parameters and is followed by the function body **Example**: ```javascript Const greetUser = (name) =>{ return"hello," + name +"!"; } const greeting = greetUser ("abdulmateen"); console.log(greeting); ``` **Output:** ```bash hello, abdulmateen! ``` **Reference:** Marjin Haverbeke: ELOQUENT JAVASCRIPT; 3RD EDITION(2018).