### JavaScript for beginner
*Benson*
---
### a lot of meme like this
----
## why?
----
### Thanks for JS - meme
----
but today, we'll start from the very basic JS syntax
so don't worry about it :DD.
---
#### the most IMPORTANT skill
#### u need to before learning anything in JS
----
## console.log
----
---
### Declaring JavaScript Variables
----
* var
* let
* const
NOTE:before 2015 only var, but global will cause some problem,after 2015, "const,let" born! "let" limited in scope, "var" in global
----
### JS identifiers (names) rules
----
#### must begin with:
* A letter (A-Z or a-z)
* A dollar sign ($)
* Or an underscore (_)
---
### JS Operators
----
### JS Arithmetic Operators
----
### JS Comparison Operators
NOTE: Emphasize "===","?"
----
### === vs ==
NOTE:equal value equal type
----
### ternary operator
syntax:
```
condition ? exprIfTrue : exprIfFalse
```
example:
```
var age = 26;
var beverage = (age >= 21) ? "Beer" : "Juice";
console.log(beverage); // "Beer"
```
---
### JS data type
----
### JS Types are Dynamic
```
var x;
// Now x is undefined
x = 5;
// Now x is a Number
x = "John";
// Now x is a String
```
----
### common type
* Strings
* Numbers
* Booleans
* Arrays
* Objects
----
### specific type
* Undefined
* Null
NOTE:In JavaScript null is "nothing"
You can consider it a bug in JavaScript that typeof null is an object. It should be null.
----
### The typeof Operator
```
typeof "John"
// Returns "string"
typeof 3.14
// Returns "number"
typeof true
// Returns "boolean"
typeof false
// Returns "boolean"
typeof x
// Returns "undefined" (if x has no value)
```
----
#### Difference Between Undefined and Null
```
typeof undefined // undefined
typeof null // object
null === undefined // false
null == undefined // true
```
---
### JS for Loops
----
### syntax:
```
var i;
for (i = 0; i < 5; i++) {
console.log(i);
}
```
### function expressions:
```
const square = function(number) { return number * number }
```
----
😱😨😰
```
const factorial = function fac(n) { return n < 2 ? 1 : n * fac(n - 1) }
```
---
### JS if else and else if
----
### syntax
```
if (condition1) {
// block of code to be executed if condition1 is true
} else if (condition2) {
// block of code to be executed if the condition1 is false and condition2 is true
} else {
// block of code to be executed if the condition1 is false and condition2 is false
}
```
---
### JS function
----
### syntax
```
function square(number) {
return number * number;
}
```
---
### JS setTimeout()
----
### syntax
```
setTimeout(function, milliseconds, param1, param2, ...)
```
----
#### setTimeout example
```
setTimeout(function(){ console.log("2 seconds") }, 2000);
setTimeout(function(){ console.log("4 seconds") }, 4000);
setTimeout(function(){ console.log("6 seconds") }, 6000);
```
---
## Challenge Time
----
## level 1
use "for" and "if" statement to print out following result.
----
```
function abc(){
for(let i = 1; i <= 10; i++){
if(i%2==0){
console.log(i+" is even");
}else{
console.log(i);
}
}
}
abc();
```
----
```
function abc(){
for(let i = 1; i <= 10; i++){
i%2==0?console.log(i+" is even"):console.log(i);
}
}
abc();
```
----
## level 2
use "for" and "setTimeout" statement
print every 2 second after passing
==be smart! don't just paste the code 5 times!==
----
```
function abc(){
for(let i = 2; i <= 10; i+=2){
setTimeout(function(){ console.log(i+" seconds") }, i*1000);
}
}
abc();
```
----
## level 3
----
```
function abc(num){
if(num == 10){
console.log("\nthere's nothing waiting to pass!");
console.log("\nEND!");
return 0;
}
console.log("\nwaiting for pass:");
for(let i = num+2; i <= 10; i+=2){
console.log(i + "second");
}
console.log("\nNEXT!");
}
for(let i = 2; i <= 10; i+=2){
setTimeout(function(){console.log("\n=====arriving at "+i+" second=====");abc(i)},i*1000);s
}
```
---
### JS Array
----
### Syntax
```
var cars = ["Saab", "Volvo", "BMW"];
```
----
### Popping
```
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();
// Removes the last element ("Mango") from fruits
```
----
### Pushing
```
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");
// Adds a new element ("Kiwi") to fruits
```
----
### Shifting Elements
```
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();
// Removes the first element "Banana" from fruits
```
```
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.shift();
// the value of x is "Banana"
```
```
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");
// Adds a new element "Lemon" to fruits
```
----
### Deleting Elements
```
var fruits = ["Banana", "Orange", "Apple", "Mango"];
delete fruits[0];
// Changes the first element in fruits to undefined
```
----
### Map
```
const array1 = [1, 4, 9, 16];
// pass a function to map
const map1 = array1.map(x => x * 2);
console.log(map1);
// expected output: Array [2, 8, 18, 32]
```
----
### Slice
```
const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
console.log(animals.slice(2));
// expected output: Array ["camel", "duck", "elephant"]
console.log(animals.slice(2, 4));
// expected output: Array ["camel", "duck"]
console.log(animals.slice(1, 5));
// expected output: Array ["bison", "camel", "duck", "elephant"]
```
---
### JS Spread syntax
----
### syntax
* For function calls:
```
myFunction(...iterableObj);
```
* For array literals or strings:
```
[...iterableObj, '4', 'five', 6];
```
* For object literals
```
let objClone = { ...obj };
```
----
### example
----
* Spread in function calls
```
function myFunction(x, y, z) { }
let args = [0, 1, 2];
myFunction(...args);
```
----
* Spread in array literals
```
let parts = ['shoulders', 'knees'];
let lyrics = ['head', ...parts, 'and', 'toes'];
// ["head", "shoulders", "knees", "and", "toes"]
```
----
* Spread in object literals
```
let obj1 = { foo: 'bar', x: 42 };
let obj2 = { foo: 'baz', y: 13 };
let clonedObj = { ...obj1 };
// Object { foo: "bar", x: 42 }
let mergedObj = { ...obj1, ...obj2 };
// Object { foo: "baz", x: 42, y: 13 }
```
---
### Challenge Time
----
#### try to use previous Array methods &
#### following array
```
var fruits = ['apple', 'banana', 'orange', 'pear', 'guava'];
```
### to console like this.
----
```
var fruits = ['apple', 'banana', 'orange', 'pear', 'guava'];
console.log(...fruits);
fruits.pop();
console.log(...fruits);
fruits.push('watermelon');
console.log(...fruits);
fruits.push(fruits.shift());
console.log(...fruits);
console.log(fruits.shift());
console.log(fruits.pop());
fruits.unshift('pineapple');
console.log(...fruits);
fruits = fruits.map(x=>x+'s');
console.log(...fruits);
fruits.unshift(fruits.pop());
console.log(...fruits);
console.log(fruits.slice(1,3));
```
---
END
{"metaMigratedAt":"2023-06-15T15:46:41.696Z","metaMigratedFrom":"YAML","title":"JavaScript","breaks":true,"slideOptions":"{\"theme\":\"solarized\",\"transition\":\"slide\"}","contributors":"[{\"id\":\"156b7bd7-bc36-4924-b2f2-88f18442b450\",\"add\":12152,\"del\":4331}]"}