Javascript: What You Need to Know (Part one)

Table of contents

• Basic Syntax
  • Numbers
  • Strings
  • Booleans
  • Undefined and Null
• Operators
  • Arithmetic Operators
  • Assignment Operators
  • Comparison Operators
  • Logical Operators
  • Conditional Operator
  • Console.log function

The Nitty Gritty of The Javascript Language
As a newbie programmer or a beginner to the Javascript language, you often find yourself stranded on what to learn.
First of all, what exactly is this Javascript that I am talking about? Well, Javascript is the most popular language used in the websites' client-side development. More about Javascript can be found in MDN's website, the developer's best friend. Here I am a bit biased on the web development side, but hey, do not go away just yet; you will encounter these Javascript basics irregardless of your motivation to taking any Javascript roadmap.

Learn these Basics of Javascript Language and then move on:

1. Basic syntax
2. DOM Manipulation (Web Development).
3. Fetch API / Ajax.
4. Async Await.
5. Event Listeners. (Web)
6. ES6+ Javascript.
7. Promises.
8. Classes.
9. Array Methods.
10. Scoping.
11. Hoisting.
12. Closures.

Basic Syntax

The ice peak of any language is learning the basic syntax of the language and advance to the challenging parts with time. Javascript has data types that are the building blocks of any code written in Javascript. These data types include: numbers, strings, Booleans, Undefined and Null.

Numbers

_Numbers _are the integer values, both negative and positive and are used to quantify something and can also be used in arithmetic calculations.

let y = 10;
let x = 9;
let z = y + x;
//->19

Strings

Strings are used to represent text. This data type makes use of quotation marks; Single quotes('), double quotes("), and backticks(`). Backticks have a special purpose when used in strings and are called Template literals-More about this to be discussed a bit later.
It is mandatory to use the quotation marks since not using them would introduce bugs to your code.

`

let day = 'Wednesday';
let lesson = "Javascript Fundamentals";
let newStr = "123";

`

Booleans

Booleans are true and false values. These values are assigned to variables, object properties, arrays and comparisons. These data types are used just as they are:

`

let married = false;
let hasDriversLicense = true;

console.log( 3 > 2);
//-> true

`
The last code evaluates to true. This is because, the program asks the question, "Is 3 greater than 2?" and prints the answer to the console. Those are the booleans.

Undefined and Null

Null is the deliberate absence of a value in the code. It is encountered whereby you assign it to a variable to mean that the variable might not have a value now, but it will have one later.

Undefined on the otherhand means that the value that is being referred to does not exist in the compiler. An example is when you define an empty variable.

`

let newNum;
console.log(newNum);
// -> undefined

let boxLabel = null;

`

Operators

Now that we have looked at data types, let's look at Operators. There are different types of operators in Javascript. The most common and the most used operators include:

1. Assignment Operators.
2. Arithmetic operators.
3. Comparison operators.
4. Logical operators.
5. Conditional operators.

Arithmetic Operators

The Arithmetic operators takes two numerical values as their operands, one on the left and one on the right side and returns one numerical value. The most common ones are addition(+), subtraction(-), division(/) and multiplication(*).

In addition to these standard operators, there are other arithmetic operators that are offered by Javascript that include:

1. Remainder operator -denoted by (%).This one returns the value that remains after dividing two values.

2. Increment operator - denoted by (++). It adds 1 to its operand. It is a unary operator meaning that it performs operations on only one operand.

3. Decrement operator - denoted by (--). It subtracts 1 from its operand. It is a unary operator too.

`

let x =  5 + 2 - 3 * 2 / 2;
// Ans = 4

let y = 5;
y++;
//y will be equal to 6

let z = 10;
z--;
//z will be equal to 9

let remainder = 10 % 3;
// Ans = 1 

`

Operators have precedence whereby one operation is performed first before it moves on to the other incase they appear in the same code. *, / and modulo (%) have the same precedence and are handled first in an operation. - and + have the same precedence and are handled last after *, % and /.

Assignment Operators

Assignment operators as the name suggests, are used to assign values on their right to operands on their left side. The most common assignment operator is the = and we have seen it before in the code blocks.
`

let x = 10;
//Assigns the value 10 to x. Thus whenever we invoke x, we get 10.

`

There are other types of assignment operators called the Compound Assignment Operators which are shorthand for some operations.

`

x += 1; means x = x + 1;
//Addition Assignment 

x -= 2; means x = x - 2;
//Subtraction Assignment 

x *= 5; means x = x * 5;
//Multiplication Assignment

x /= 4; means x = x / 4;
//Division Assignment 

x %= 2; means x = x % 2;
//Remainder Assignment 

`

Comparison Operators

The comparison operators are used to compare two operands (Binary operators). They compare whether one operand is greater than denoted by (>), less than denoted by (<), less or equal to denoted by (<=), greater or equal to denoted by (>=), equal to the other (==) or strictly (exactly) equal to denoted by (===).

`

console.log(3 > 2);
//->true (This is true because 3 is greater than 2)

console.log(5 < 7);
//->true (This is true because 5 is less than 7)

console.log(2 >= 3);
//->false (This is false because 3 is greater than 2)

console.log(2 <= 3);
//->true (This is true because 2 is less than 3)

`

The most crucial part of using the loosely equal (==) operator and the strict equal operator (===) is to know the difference between the two. The loosely equal(==) applies type conversion before comparison while the strict equal (===) compares the two operands without conversion. In Javascript, there is type conversion that is triggered by some operators before comparison. For example, a string can be converted to a number before the comparison is done. This is done internally by Javascript.

`

console.log("2" == 2);
//-> true (This comparison translates to true since the string "2" is first converted to number then compared to 2.)

console.log("2" === 2);
//-> false (This translates to false since there is no type conversion done here. The operands are compared as they are.)

`

The Not equal (!=) operator - Returns true if the operands are not equal.
The Strict not equal (!==) - Returns true if the operands are of the same type but not equal, or are of different type.

Logical Operators

Logical operators are used with Boolean (logical) values. They return a Boolean value after the conditions set by the operands are met. There are three logical operators:

1. The logical and denoted by &&. This operator returns true if both the operands are true.

`

const example = true && true; //true
//-> return true since both the operands are true.

const example2 = false && true; //false
//->returns false since one of the operands is false meaning they are different.

const example3 = false && false; //false
//->returns false since all the operands are false.

const example4 = "Cats" && "Dogs" //Dogs;
//->returns Dogs.

`

1. The logical or denoted by ||.It returns expression1 if it can be converted to true; otherwise, returns expression2. Thus, when used with Boolean values, || returns true if either operand is true; if both are false, returns false.

`

console.log(true || false) // true.
// -> returns true since one of the operands is true.

console.log(false || false) //false
// -> returns false since all the operands are false and none can be converted to true.

`

1. The logical not denoted by !. This operator gives the opposite of the operand given. For example, !true == false and !false == true.

Conditional Operator

The conditional operator (Also called the Ternary operator) is the only Javascript operator that takes three operands. It's general syntax is: condition ? expression to execute if the condition is met(truthy) : expression to execute if the condition is not met (falsy).
This operator is used instead of if...else condition.

`

console.log(true ? 1 : 2) // 1
//-> returns 1 because the condition is true.

const age = 13;
age >= 18 ? console.log("Adult") : console.log("Minor") // Minor
// -> returns Minor because the condition has not been met / it is false since age is 13.

`

Console.log function

You might be wondering what console.log in my code means. Well,
console.log is a function that is used to print values to the console in Javascript.

PART 2 IS ON THE WAY...HAPPY CODING.