???? TABLE OF CONTENTS
⇨ JS Variables
⇨ JS Data Types
⇨ JS Operators
⇨ JS Conditions
⇨ JS Functions
⇨ JS Data Structures: Arrays
⇨ JS Data Structures: Objects
⇨ JS Loops
JS Variables
You can refer to this tutorial to understand the variables in Javascript.
JavaScript Variables W3School
In modern versions of JavaScript, new keywords for creating variables that work somewhat differently to var, those are let and const.
JS Scope:
Before ES2015, JavaScript had only two types of scope: Global Scope and Function Scope.
Global Scope: Variables declared Globally (outside any function) have Global Scope. Global variables can be accessed from anywhere in a JavaScript program.
Function Scope: Variables declared Locally (inside a function) have Function Scope. Local variables can only be accessed from inside the function where they are declared.
Block Scope: Variables declared inside a block {} can not be accessed from outside the block.
Variables declared with the var keyword can not have Block Scope. and so Variables declared inside a block {} can be accessed from outside the block.
Before ES2015 JavaScript did not have Block Scope. Variables declared with the let keyword can have Block Scope. and so Variables declared inside a block {} can not be accessed from outside the block
JS Data Types
You can refer to this tutorial, it’s enough to understand everything about data types in JavaScript.
JavaScript Data Types W3School
JS Operators
refer to this tutorial, JavaScript Operators W3 School
Take notes of the JavaScript Arithmetic Operators, Assignment Operators, Comparison Operators, and Logical Operators. Try to understand the difference between themes. And don’t think too much about the Comparison Operators, for now, we will be taking a deeper look at theme in the next section.
JS Conditions
refer to these tutorials:
⇨ for JavaScript if else and else if
⇨ for JavaScript Switch Statement
???? Example: switch statement
function moveCommand(direction) {
var whatHappens;
switch (direction) {
case "forward":
whatHappens = "you encounter a monster";
break;
case "back":
whatHappens = "you arrived home";
break;
case "right":
return whatHappens = "you found a river";
break;
case "left":
whatHappens = "you run into a troll";
break;
default:
whatHappens = "please enter a valid direction";
}
return whatHappens;
}ternary operator
Condition ? "if true expre1" : "else expre2";???? Example
function isUserValid(bool){
return bool;
}
var answer = isUserValid(true) ? "you may enter" : "access denied";
//todo: exemple2:
//*----------------
var automatedAnswer = "you account # is" + (isUserValid(true) ? "12345" : "not available");
Now let’s take a deeper look at the comparison operators with these tutorials.
⇨ JavaScript Comparison and Logical Operators
⇨ Equality comparisons and sameness
JS Functions
Refer to this tutorial: ⇨ JavaScript Functions W3School
But to summarize:
⟹ function declaration:
function multiplay(a,b){
return a*b;
}⟹ function expression:
var newFunction = function(){
//expression
};// Notice function expression ends in a semicolon⟹ Calling or invoking a function:
var total = multiply(4,5);
newFunction(param1,param2);
alert(total);
// a,b are parameters
//4,5 are argumentsVariables declared within a JavaScript function, become LOCAL to the function. We will be learning another way of declaring a function in the advanced guide, well, it’s called arrow function.
JS Data Structures: Arrays
Refer to this tutorial: ⇨ JavaScript Arrays w3school
The Array object is used to store multiple values in a single variable.
⟹ Declaration:
var list = ["tiger", "cat" , "bear"];⟹ Access an Array:
list[0];⟹ Array Methods:
var array = ["Banana", "Apples", "Oranges", "Blueberries"];
/* Remove the Banana from the array. */
array.shift();
/* Sort the array in order. */
array.sort();
/*Put "Kiwi" at the end of the array.*/
array.push('Kiwi');
/*Remove "Apples" from the array.*/
array.splice(0, 1);
/*Sort the array in reverse order. */
array.reverse();
/*Removes the last element of an array, and
returns that element*/
array.pop();
/*Joins two or more arrays, and returns a copy of
the joined arrays (create new one)*/
array.concat();Try to learn more about array methods, and again W3School is our best friend:
⇨ JavaScript Array Methods
And here the full list:
⇨ JavaScript Array Reference
And here a tool that help you Find the array method you need without digging through the docs:
⇨ JavaScript Array Explorer
JS Data Structures: Objects
Refer to this tutorial: ⇨ JavaScript Objects w3school
⟹ Declaration:
var user ={
username: "andrei",
password: "supersecret",
age= 34,
isMarried: false,
skills:["web dev", "design", "marketing"],
//! function inside a object is a Method
shout: function(){
console.log("lalalalalalal");
}
};⟹ Access an Object:
user.skills; //to show the array
user.skills[1]; //return "supersecret"
user.shout(); //return "lalalalalal"⟹ Object inside an Array:
var newsfeed = [
{
username: "Bobby",
timeline: "So tired from all that learning!"
},
{
username: "Sally",
timeline: "Javascript is sooooo cool!"
},
{
username: "Mitch",
timeline: "Javascript is preeetyy cool!"
}
];⟹ Access an Object inside an Array:
newsfeed[0].username; //return Bobby⟹ Function vs methods:
//Declaration:
function thisIsAFunction(){};
var Obj = {
thisIsAMethod:function(){}
}
//Access:
thisIsAFunction();
Obj.thisIsAMethod(); And here a tool that helps you Find the object method you need without digging through the docs:
⇨ JavaScript Object Explorer
JS Loops
let’s work with this array:
var todos= [
"go to school",
"learn",
"take the metro back",
"eat and rest"];
var todosLength = todos.length;⟹ For loop:
for (var i = 0; i < todosLength; i++) {
todos.pop();//Removes the last element of an array, and returns that element
}⟹ While loop:
var counterOne = 0;
while(counterOne< 10){
console.log(counterOne);
counterOne++
}⟹ Do While loop:
var counterTwo = 10;
do{
console.log(counterTwo);
counterTwo--;
}while(counterTwo> 0 );
for (var i = 0; i < todosLength; i++) {
console.log(todo[i],i);
}Learn more about Loops:
⇨ JavaScript For Loop
⇨ JavaScript While Loop
⇨ JavaScript Break and Continue