JS for beginners

comment

// this is a comment
/* multiple line comment
multiple line comment
multiple line comment
*/

Data Types and Variables

7 different data types and variables

undifined
null
boolean
string
symbol
number
object: store a lot of data and functions

var myName = 'Beau'
myName = 8
let ourName = 'freecodecamp'
const pi = 3.14

the difference among them
var: to use the varible in all the program
let: only be used in the scope of where you declared that
const: some varible that should never change, if you try to change it you are going to get an error

Storing Values with Assignment Operator

declaring variables and assigning variables
declaring varibles var a;
assigning varibles var b = 2;
a=7;
b=a;
console.log(b);

Initializing Variables with Assignment Operator

var a = 9;
This is the way to do it.

Uninitialized Variables

var a;
This is uninitialized

Concatenating Strings with plus Equals Operator

var ourStr = "I come first";
ourStr += "I come seconde";

Length of a String

var lastNameLength = 0;
var lastName = "vitalic Buterin";
lastNameLength = lastName.length;
console.log(lastNameLength);

bracket Notation to find First Character in String

var firstLetterOfFirstName = "";
var firstName = "Ada";
firstLetterOfFirstName = firstName[0];
// console.log(firstLetterOfFirstName) -> A

String immutability

Strings are immutable wihch means you cannot change single character in the string.But you can change all of it.

var myStr = "Jello World";
myStr[0] = "H";

To Get The Last Character

var firstName = "Ada";
var lastLetterOfFirstName = firstName[firstName.length -1 ];

Array

var ourArray = ["John", 23];

var myArray = ["Quncy", 1];

Array

var ourArray = [["the universe", 42], ["everything", 101010]];

var myArray = [["Bulls", 23],["white box", 32]];

Array access

var ourArray = [50,60,70];

var myArray = [["Bulls", 23],["white box", 32]];

Modify Array indexes

var ourArray = [18, 45, 77];
ourArray[1] = 2;

By this way you can change the array.

push function

var ourArray = ["stimpson", "j", "cat"];
ourArray.push(["happy", "joy"]);
// ourArray now equals ["stimpson", "j", "cat", "happy", "joy"]

pop function

This function just pop the last element from the array and change the original array.
and the varible which used the pop function is equal to the element which is poped out.

shift function

This function is just the pop function's another version, which can pop the first element of the array and change the origianal array.
And the varible which used the shift function is equal to the element which is shifted out.

unshift function

This function can add a element at the beginning of the array. It also change the array itself.

Shopping List

var myList = [['cereal', 3], ["banana", 2]]

Global Varibles

function fun1(){
    oopsGlobal = 5; // global
    var oops Global = 5; // local
    //This is a function which contains a varible which is global. if this is with 'var' then it is a local varible.
}

Local Varible

function myLocalScope(){
var myVar = 5;
console.log(myVar);
}
myLocalScope();
console.log(myVar);
// An error come out here.

local Vraibles

var outerWear = "T-shirt";

function myOutfit(){
var outerWear = "sweater";
return outerWear;
}
console.log(myOutfit());
// sweater
console.log(outerWear);
// T-shirt

understanging undefined value from a function

If you do not return a value in a function, then the returned value will be "undefined".

if statement


function trueOrFalse(trueOrFalse){
    if (wasThatTrue){
        return "YES, it was true."
    }
    return "No, that was false."
}
console.log(trueOrFalse(true));

Equality operator

// == check if the value is the same
// === strict equality operator (this operator also compare the type of the value)

// 4 === 4 true
// "4" ==== 4  false
// != is the inequality operator
// !== strct version of the inequality operator
// > < >= <= comparison operator

logical operator

// && is the "and"
// || is the "or"

order of the else if statement

Look at the example below. the order of the if statement is important.

function orderMyLogic(val) {
    if (val < 10) {
        return "less than 10";
    } else if (val < 5) {
        return less than 5
    } else {
        return "greater than or equal to 10";
    }
}
console.log(orderMyLogic(3));

this is a bad example. you should replace the order in order to make the val < 5 statement do things.

switch statement

function caseInSwitch(val){
    var answer = "";
    switch(val){
        case 1:
            answer = "alpha";
            break;
        case 2:
            answer = "beta";
            break;
        case 3:
            answer = "theta";
            break;
        case 4:
            answer = "gamma";
            break;
        default:  // is like the else if statement in logical statement
            answer = "not defined yet man";
            break;
    }
    return answer;
}
console.log(caseInSwitch(1));


// another example 
function sequentialSizes(val) {
    var answer = "";
    switch(val) = "";
    switch (val){
        case 1:
        case 2:
        case 3:
            answer = "Low";
            break;
        case 4:
        case 5:
        case 6:
            answer = "medium";
            breank;
        case 7:
        case 8:
        case 9:
            answer = "high";
            break;
    }
    return answer;
}

return to interrupet the function

function dainari(a, b){
    if (a < 0 || b< 0) {
        return undifined;
    }
    return a > b;
}
// with this return beforehand you can exit the function at any time.

object creation

var myDog = {
    "name": "Quincy";
    "legs": 3,
    "tails": 2,
    friends":[],
};

two ways to access the object

objectName.attributeName
this is the way to access the object.

var testObj = {
    "an entree": "hamburger",
    "my side": "veggies",
    "the dark": "water",
};
var entreeValue = testObj["an entree"];
var drinkValue = testObj["the drink"];
// by this we can access the value in the object

Set New Properties in the object

ourDog.bark = "bow-cow";
myDog["name"] = "Happy car";

delete property in the object

delete myDog.tails
by this we delete the property tails

access the nested element in array and object

myPlants[1].list[1];
this is the way to access a array with some objects inside.

loop

var myArray = [];
var ourArray = [];
for (var i = 0; i < 5; i++){
    ourArray.push(i);
}

// while loop
var myArray = [];

var i = 0;

while (i<5) {
    myArray.push(i);
    i++;
}
console.log(myArray);

//do while loop
var myArray = [];
var i = 10;
do {
    myArray.pysh(i);
    i++;
}while(i < 5);

console.log(i, myArray);

random fraction

function randomFraction() {
    return Math.random();
}
console.log(randomFraction());
// create a random number

// use Math.floor(Math.random()) to get a whole number.

Use the Conditional (Ternary) Operator

// condition ? statement-if-true : statement-if-false;
function checkEqual(a,b) {
    return a ===b? true: false;
}

// multiple conditions
function check
``` javascript
function checkSign(num) {
    return num > 0 ? "positive" : num < 0 ? "negative" : "zero" 
}

differences between the var and let keywords

// let does not let you declare a varible twice
let catName = "mark";
let catName = "Cark";
// above code will give you an error. cuz you have declared twice. 
let catName = "mark";
catName = "Cark";
//this time it will not give you an error. 
// this is one of the reasons why people only use "let" and "const" to declare varible.

// "let" can declare a varible and make it usable in the block. "var"can declare a varible and make it usable globally.

"use strict"

this enable strict mode. this can catch unexpected code and actions.
It can be put at the beginning of the code or put in the function.

const

"const" is a read-only way to define a varible. when you use const you always want to use CAPITAL LETTERS to name it.

const SENTENCE = "str";

"const" doesnt make the array unchangable.

freeze

object.freeze(objectName);
use this to make the object immutable.

annonymous function

var magic = function () => { 
    return new Date();
    }

var magic = () => {
    return new Date();
}

var magic = () -> new Date();

// with parameters
const myConcat = (arr1, arr2) => arr1.concat(arr2);
// after the arrow we have the return value
console.log(myConcat([1,2], [3,4,5]));

// higher order Arrow function 

<script type="text/javascript">

var a = [1,2,3];
document.write(a.concat(4,5));
// 1,2,3,4,5
</script>

Foreach and Other

[1,2,3].foreach(function(item, index){
    console.log(item, index);
    });
//1 0
//2 1
//3 2

//map -> this put a new thing into the mao element position
const three = [1,2,3];
const doubled = three.map(function(item){
return item * 2;
});
console.log(doubled);
//[2, 4, 6]
// if you use an arrow function
const three = [1,2,3];
const doubled = three.map(item => item*2 )

//filter: check each item in the array if it is true then return the item to the array.
const ints = [1,2,3];
const evens = ints.filter(function (item){
    return item % 2 ===0;
});
console.log(evens);

//reduce: add up the elements in the array list.
const sum = [1,2,3].reduce(function(result, item){
    return result + item;
}, 0);
console.log(sum);
// 6

// some: check item in the array meets this condition or not? 
const hasNegativeNumbers = [1,2,3,-1,4].some(function(item) {
    return item < 0;
});
console.log(hasNegativeNumbers);
// true

// every: it is like "some". but it is a way to check if all the items meet the condition. if it is true then return true.
const allPositiveNumbers = [1,2,3](function(item){
    return item > 0;
})
console.log(allPositiveNumbers);
// true

// find: it goes around the array and check the condittion if it is true then it returns the item.
const objects = [{id: "a"}, {id: "b"}, {id: "c"}];
const found = objects.find(function(item){ 
    return item.id === "b";
})
console.log(found);
// {id: "b"}

// find index: it is like find, instead of returning the item, it is going to return the index of the item].
const object2 = [{id: "a"}, {id: "b"}, {id: "c"}];
const foundIndex = object2.findIndex(function (item){ 
    return item.id ==="b";
})
console.log(foundIndex);
// 1
// if there is no such thing, it will return "-1"

hihger order arrow funcitons

const realNumberArray = [4, 5.6, -9.8, 3.14, 42, 6, 8, 8.34, -2];

const squareList = (arr) => {
    const squaredIntegers = arr.filter(num => Number.isInteger(num) && num > 0).map(x => x*x);
    return squaredIntegers;
}

Write Highter Order Arrow Functions

const increment = (function(){
    return function increment(number, value=1){
        return number + value;
    }
})();// this "()" is very important to understand this.
console.log(increment(5,2));
console.log(increment(5));
// 7
// 6

Use the Rest Operator with Function Parameters

This operator can get all the parameters after the defined parameters.

const sum = (function() {
    return function sum(x,y,z){
        const args = [x, y, z];
        return args. reduce((a,b) => a + b, 0);
    };
})();
console.log(sum(1, 2, 3));

// another example 
function func(a, ...rest) {
  console.log(a)
  console.log(rest)
}
func(1)
// 1 []
func(1, 2, 3, 4)
// 1 [2,3,4]
// here the rest operator returns the "[]" and "[2,3,4]".

spread operator

It is like a hard copy. but is a shallow copy. only one layer copy.

const arr1 = ["JAN", "FEB", "MAR", "APR","MAY"];
let arr2;
(function(){
    arr2 = [...arr1];
    arr1[0]="potato";
    })();
    console.log(arr2);

Use Destructuring Assignment to Assign Variables from Objects

var voxel = {x: 3.6, y: 7.4, z:6.54};
// old way of doint this
var x = voxel.x;
var y = voxel.y;
var z = voxel.z;
// new way of doing the same thing
const {x:a, y:b, z:c} = voxel;// a = 3.6, b = 7.4, c = 6.54

"use strict"

使用 "use strict" 指令
"use strict" 指令在 JavaScript 1.8.5 (ECMAScript5) 中新增。

它不是一条语句，但是是一个字面量表达式，在 JavaScript 旧版本中会被忽略。

"use strict" 的目的是指定代码在严格条件下执行。

严格模式下你不能使用未声明的变量。

destructuring assignment

const [z,x, ,y] = [1,2,3,4,5,6];
console.log(z, x, y);
// 1, 2, 4

// change the value of a, b using a, b
let a = 8, b = 6;
(() => {
    "use strict";
    [a, b] = [b, a]
});
console.log(a);
console.log(b);

Using Destructuring assignment and the rest operator

const source = [1,2,3,4,5,6];
function removeFirstTwo(list) {
    const [a, ,  ...arr] = list;
    return a, arr;
}

const arr = removeFirstTwo(source);
console.log(arr);
console.log(source);

Using destructuring Assignment to Pass an Object as a Function's Parameters

const stats = {
    max: 56.78,
    standard_deviation: 4.34,
    median: 34/54,
    mode: 23.84;
    min: -0.75;
    average: 35.85;

}
const half = (function(){
    return function half({max, min}) {
        return (stats.max + stats.min) / 2.0;
    };
})();
console.log(stats);
console.log(half(stats));
// 28.015
// When using API you usually encounter this kinda situation. you only need what you need so you use this way to capture the value you want.

Using Template Literal to create Strings

const person - {
    name: "Zodiac Hasbro",
    age: 56
};

// Template literal with multi-line and string interpolation(means the varibles can be put between strings.)
`Hello, my name is ${person.name}!
I am ${person.age} years old.`

Coding Challenge

const result = {
    success: ["max-length", "no-amd"
, "prefer-arrow-functions"],
    failure: ["no-var", "var-on-top", "linebreak"],
    skipped: ["id-blacklist", "no-dup-keys"],
};
function makeList(arr) {
    const resultDisplayArray = [];
    for (let i = 0; i < arr.length; i++) {
    	resultDisplayArray.push(`<li class="text-warning">${arr[i]}</li>`)

    };
    
    return resultDisplayArray;
}

const resultDisplayArray = makeList(result.failure);
console.log(resultDisplayArray);

/*
["&lt;li class=\&quot;text-warning\&quot;&gt;no-var&lt;/li&gt;", 
"&lt;li class=\&quot;text-warning\&quot;&gt;var-on-top&lt;/li&gt;", 
"&lt;li class=\&quot;text-warning\&quot;&gt;linebreak&lt;/li&gt;"]
*/

simple way to create a object

simple way to craete a object with the attribute name as the same as the value name.

const createPerson = (name, age, gender) => ( { name, age, gender});
console.log(createPerson("Zodiac Hasbro", 56, "male"));

Wirete concise Declarative Functions

// an object can contain a function.
const bicycle = {
    gear: 2, 
    setGear: function(newGear) {
        "use strict";
        this.gear = newGear;
    // setGear(newGear){
    // "use strict";
    // this.gear = newGear;
    //}
    }
};
bicycle.setGear(3);
console.log(bicycle.gear);

create a object

// old way to create a class
// constructor function 
var SpaceShuttle = function(targetPlanet) {
    this.targetPlanet = targetPlanet;
} 
//instantiate an object with a "new" keyword
var zeus = new SpaceShuttle("Jupiter");

console.log(zeus.targetPlanet);
// Jupiter


// new way to create with class syntax
class SpaceShuttle {
    constructor (targetPlanet) {
        this.targetPlanet = targetPlanet;
    }
}
var zeus = new SpaceShuttle("Jupiter);

console.log(zeus.targetPlanet);

// example
function makeClass(){
    class Vegetalbe {
        constructor (name){
            this.name = name;
        }
    }
    return Vegetable;
}
const Vegetable = makeClass();
const carrot = new Vegetable("carrot");
console.log(carrot.name);
// carrot

using getters and setters

class Book {
    constructor(author) {
        // this is a private attribute
        this._author = author;
    }

// getter 
    get writer() {
        // this is the way to simpley get the private attribute without directly using the attribute
        return this._author;
        }
    //setter
    set writer(updatedAuthor) {
        this._author = updatedAuthor;
        } 
}

// example 
function makeClass () {
    class Thermostat {
        constructor(temp) {
            this._temp = 5/9 * (temp - 32);
        }
        get temperature(){
            return this._temp;
        }
        set temperature(updatedTemp){
            this._temp = updatedTemp;
        }
        }
        return Thermostat;
    }
    const Thermostat = makeClass();
    const thermos = new Thermostat(76);
    let temp = thermos.temperature;
    // you need to do this line to enable the changing
    thermos.temperature = 26;
    temp = thermos.temperature;
    console.log(temp)
    // 26

Understanding the differences between "import" and "accquire"

import { capitalizeString} from "./string_function"

const cap = capitalizeString("hello");

console.log(cap);

export

connst capitalizeString = (string) => {
    return string.charAt(0).toUpperCase() + string.clice(1);
}

export {capitalizeString};

export const foo = "bar";
export const bar = "foo";
// in this file we export the varibles and the function in order to make other file use these information

import everything

import * as capitalizeStrings from "capitalize_ strings";

Create an Export Fallback with export default

export default function substract(x, y) {return x - y;}

// if it is default you don't need to us {substract}
import substract from "math_functions";