JS1

👍 JS公式サイト:https://developer.mozilla.org/ko/

👨🏻‍🏫 script asyncとdeferの違い

source : dream符号化jsベース2

🧷 async

head+async:asyncはbooleanタイプのプロパティ値であるため、trueとして宣言するだけで実行できます.
html passingにasyncがある場合は、コマンドでjsを並列ダウンロードし、html passingを再度実行し、jsのダウンロードが完了したらpassingを停止してjsを実行します.実行終了後、残りのhtmlを再度解析します.
利点:jsを並列にダウンロードでき、時間を節約できます.
欠点:ただし、html解析が完了する前にjsが実行されるため、この時点で目的の要素が定義されていない可能性があります.また、jsの実行時に停止したため、ユーザはページを表示するのに時間がかかります.また、定義された順序にかかわらず、ダウンロードしたjsが先に実行されるため、問題が発生する可能性があります.

🧷 defer

head+defer:deferに遭遇した場合、jsダウンロードコマンドを発行し、残りのhtmlをすべて解析します.そして、解析がすべて完了した後、ダウンタイムのjsを実行します.したがってjsは定義された順序で実行される.

したがってhead内のdeferオプションが最も有効です.
純バニラjsを使用する場合は、一番上に'use strict';と書きます.flexible === dangerous. 常識的な開発が可能です.

👨🏻‍🏫 data types, let vs var, hoisting

source : dream符号化jsベース3

1. use strict

2. variable, rw(read/write)

let(added in ES6)
jsで変数を宣言できるキーワードは可変タイプlet、不変タイプconstです.
varは書かないでください(don't thisさえ使います!)
var hoisting(move declaration from bottom to top)
宣言する前に値を指定したり、値を指定する前に出力したりすることができます.
昇格:どこで宣言しても、宣言を一番上に昇格させることを意味します.
blockの外に書けば、グローバル変数です.ブロックを使うと、ブロックの外にはもうブロックが見えなくなります.しかしvarにはblockscopeはありません.徹底的に無視する.(has no block scope)

let globalName = 'global name'
{
    let myname = 'kwang'; 
    console.log(myname);
    myname = 'yong';
    console.log(myname);
}

3. constant, r(read only)

可変型変数
use const whenever possible.
favor immutable data type always for a few reason:
-security
-thread safety
-reduce human mistake

const daysInweek = 7;

⭐Note!

Immutable data types: primitive types, frozen Objects(i.e. object.frozen())
データ自体を変更できません.元のタイプでは、ellieという文字列をメモリに格納し、他の文字列に変更できますが、ellieデータ自体は変更できません.

Mutable datatypes: all objects by default are mutable in JS
ellieのobjectとして宣言し、ellieのname、ageの変更を続行できます.

4. Variable types

原語、単項(これ以上小さい単位で区切ることができない1項)
: number, string, boolean, null, undefined, symbol

object(1つのアイテムを1つのボックスにパッケージして管理)

function:jsでは関数もデータ型の1つです
first-class function:関数は他のデータ型のように変数に割り当てることもできるので、関数のパラメータパラメータとして渡すこともできるし、関数の戻りタイプとして関数を返すこともできる.

メモリに値を格納する方法は2つあります->primitive,object
📌 primitive:value値自体がメモリに格納されます.
📌 object:objectへの参照がメモリに格納されます.
大きすぎて、一度に全部メモリにアップロードできません.const宣言を使用してオブジェクトを割り当てる場合、Ellieは参照を指します.このrefは実際にobjectを指す場所です.したがって,このrefは実際にobjectを含むメモリを指す.ellieはポインタをロックするだけで、他のオブジェクトに変更することはできませんが、nameとageは変更を続行できます.

number

他の言語とは異なり、どのくらいのサイズを割り当てるかは全く考慮する必要はありません.jsではタイプが動的に決定されるのでletやconstを使用できます.

const count = 17; // integer
const size = 18.1; // decimal number
console.log(`value: ${count}, type: ${typeof count}`);
console.log(`value: ${size}, type: ${typeof size}`);

number - special numeric values: infinity, -infinity, NaN

const infinity = 1 / 0;
const negativeInfinity = -1/0;
const nAn = 'not a number' / 2;
console.log(infinity);
console.log(negativeInfinity);
console.log(nAn);

string

jsではcharでもstringでもstringとして指定されます.
逆チェック、括弧を使用すると、変数と文字列を簡単に貼り付けることができます.

const char = 'c';
const brendan = 'brendan';
const greeting = brendan + 'hello';
console.log(`value: ${greeting}, type: ${typeof greeting}`);
const helloBob = `hi ${brendan}!`; //template literals (string)
//백틱 안에 ${}를 이용하면 변수값이 붙여져서 나온다. 
console.log(`value: ${helloBob}, value: ${typeof helloBob}`);

boolean

false: 0, null, undefined, Nan, ''
true: any other value

let nothing = null;
console.log(`value: ${nothing}, type: ${typeof nothing}`);
let x; //undefined
console.log(`value: ${x}, type: ${typeof x}`);

symbol

地図や他のデータ構造で一意の識別子が必要か、複数の識別子を同時に使用する必要があります.
発生する可能性のあるコードに優先順位を付けたい場合は、固有の識別子を書きたい場合に書きます.
symbolは同じ文字列で作成されますが、別のsymbolで作成されるため、指定された文字列が何であれ、一意の識別子を作成するために使用されます.
stringが同じ場合、同じシンボルが作成されるとSymbolになります.forを利用する.
Symbol直接出力でエラーdescriptionを使用してstring出力に変換する必要があります.

const symbol1 = Symbol('id');
const symbol2 = Symbol('id');
console.log(symbol1 === symbol2); // false
const gSymbol1 = Symbol.for('id');
const gSymbol2 = Symbol.for('id');
console.log(gSymbol1 === gSymbol2); // true
console.log(`value : ${symbol1.description}, type: ${typeof symbol1}`);

Object, real-life object, data structure

const ellie = {name: 'ellie', age: 20};
ellie.age= 21;

現在Ellieはconstとして指定されているため、他のobjectに変更することはできません.
ellieが指すポインタはロックされており、他のオブジェクトに割り当てることはできません.
objectのnameとageが指すメモリは、異なる値に割り当てることができる.

5. Dynamic typing : dynamically typed language

jsは、ランタイムプログラムの実行時にどのタイプであるかを宣言しません.
タイプは指定した値によって変更される場合があります.

let text = 'hello';
console.log(text.charAt(0));
console.log(`value ${text}, type: ${typeof text}`);
text = 1;
console.log(`value ${text}, type: ${typeof text}`);
text = '7' + 5 ;
console.log(`value ${text}, type: ${typeof text}`);
text = '8' / '2';
console.log(`value ${text}, type: ${typeof text}`);

したがってjsは実行時に固定型であるため,実行時エラーが頻繁に発生する.
だからjsにはタイプのスクリプトがあります
jsはブラウザで理解できるので、リアルタイムで連動して見ることができます.
ターミナルサービスは、ブラウザが理解できるように変換コンパイラ(BABEL)を使用する必要があります.

👨🏻‍🏫 operator, if, for loop

source : dream符号化jsベース4

//1. string concatenation
console.log('my' + 'cat');
console.log(`string literals: 1+2 

''''
= ${1 + 2}`);
//백틱 안의 $을 이용해서 변수 값을 계산해서 스트링으로 포함해서 문자를 생성.
//string literals 장점: 줄바꿈을 하거나, 특수기호가 그대로 출력.

// 2. numaric operators
console.log(2 ** 3);// 2^3

//3. Increment and decrement operators
let counter = 2 ;
const preIncrement = ++counter;
const postIncrement = counter++;

//4. Assignment operators
let x = 3;

//5. comparison operators

//6. logical operation: || , &&, !
//연산을 많이 하거나 express하는 조건을 가장 마지막에 둔다.
const value1 = false;
const value2 = 5< 2 ; 
console.log(`or: ${value1 || value2 || check()}`);

function check(){
    for(let i = 0 ; i < 10; i++){
        //wasting time
        console.log('😨');
    }
    return true;
}

//often used to compress long if-statement
//nullableObject && nullableObject.somthing

// 7. equility
const stringFive = '5';
const numberFive = 5;
//== loose equality, with type conversion 
//타입 상관없이 내용만 같은지 비교
console.log(stringFive == numberFive); //true
console.log(stringFive != numberFive); //false
//=== strict equality, no type conversion
//타입과 내용 모두 비교
console.log(stringFive === numberFive); //false
console.log(stringFive !== numberFive); //true
//object equality by reference
const ellie1 = {name: 'ellie'};
const ellie2 = {name: 'ellie'};
const ellie3 = ellie1;
console.log(ellie1 == ellie2);//false
//1과 2에는 각각 다른 레퍼런스가 저장되어 있기 때문에 다르다.
console.log(ellie1 === ellie2);//false
console.log(ellie1 === ellie3);//true
//3는 1과 같은 레퍼런스를 할당했기 때문에 true

console.log(0 == false); //true
console.log(0 === false); //false
console.log('' == false); //true
console.log('' === false); //false
console.log(null == undefined); //true
console.log(null === undefined); //false

//8. conditional operator: if, else if, else

//9. Ternary operator: ?
//condition ? value1 : value2;
const mname = 'coder';
console.log(mname === 'ellie' ? 'yes' : 'no');

//10. switch statement
//use for multiple if checks
//use for enum-like value check
//use for multiple type checks in TS
const browser = 'IE';
switch(browser) {
    case 'IE' :
        console.log('go away!');
        break;
    case 'Chrome':
    case 'Firefox':
        console.log('I love you!');
        break;
    default:
        console.log('default');
        break;
}

//11. Loops
//while loop, while the condition is truthy,
// body code is executed.

// do while loop, body code is executed first,
// then check the condition.

// for loop, for (begin; condition; step)

👨🏻‍🏫 関数の宣言と表示

source : dream符号化jsベース5
function
-fundamental building block in the program
-subprogram can be used multiple times
-performs a task or calculates a value

1. Fuction declaration

function name(param1, param2) {body... return;}
one function === one thing
naming: doSomething, command, verb
function is object in JS!
objectとみなされるため、変数に割り当て、パラメータに渡し、関数としての戻り値として使用できます.

function printHello(){
    console.log('Hello');
}
printHello();

function log(message){
    console.log(message);
}
log('hello@');

jsにはタイプがないので,関数インタフェースのみを見たときにどのタイプを渡すべきか分からない.タイプスクリプトには、パラメータまたは返されるタイプを指定する必要があります.

2. Parmeters

-primitive parameters: passed by value
-object parameters: passed by reference

function changeName(obj){
    obj.mname = 'coder';
}
const ellie = {mname: 'ellie'};
changeName(ellie);
console.log(ellie);

objectはrefとして渡されるので、関数でobjectの値を変更すると、これらの変更はメモリに直接適用されます.

3. Default parameters (added in ES6)

パラメータの横にdefault値を指定すると、ユーザーがパラメータを渡さない場合にdefault値が使用されます.

function showMessage(message, from = 'unknown'){
    console.log(`${message} by ${from}`);
}
showMessage('Hi');

4. Rest parameters(add in ES6)

パラメータは配列で渡されます.

function printAll(...args){ //3개의 원소가 있는 배열 형태로 전달받음
    for(let i = 0; i<args.length; i++){
        console.log(args[i]);
    }
    for(const arg of args){
        console.log(arg);
    }
    args.forEach((arg) => console.log(arg));
}
printAll('dream', 'coding', 'ellie');

5. Local scope

外には中が見えないので、中から外を見るしかありません.

let globalMessage = 'global';
function printMessage() {
    let message = 'hello';
    console.log(message); // local variable
    console.log(globalMessage);
    function printAnother(){
        console.log(message);
        let childMessage = 'hello';
    }
    //console.log(childMessage); -> 에러발생.
}
printMessage();

6. Return a value

function sum (a , b ){
    return a + b ;
}
const result = sum(1, 2);

7. Early return, early exit

条件が満たされていない場合はすばやく戻り、条件が満たされている場合にのみ論理を実行します.
bad

function upgradeUser(user){
    if(user.point > 10){
        //long upgrade logic...
    }
}

good

function upgradeUser(user){
    if(user.point <= 10){
        return;
    }
    //long upgrade logic...
}

First-class function
functions are treated like any other variable
can be assigned as a value to variable
con be passed as an argument to other functions.
can be returned by other function

1. Function expression

a function declare can be called earlier than it is define.(hoisted)
a function expression is created when the execution reaches it.
関数宣言と関数式の最大の違いは、式が割り当てられた後に呼び出され、宣言が関数宣言の前に呼び出される(選択)ことです.
関数を宣言しながら変数に割り当てます.

const print = function(){ //anonymous function
    console.log('print');
};
print(); //함수를 할당한 변수를 함수를 호출하듯이 소괄호를 이용해서 호출한다.
const printAgain = print;
printAgain();
const sumAgain = sum;
console.log(sumAgain(1,3));

2. Callback function using function expression

関数をパラメータとして渡し、関数を呼び出します.

function randomQuiz(answer, printYes, printNo){
    if(answer === 'love you'){
        printYes();
    }else {
        printNo();
    }
}
const printYes = function(){
    console.log('yes!');
};

named function:デバッグまたは再帰用
better debugging in debugger's stack traces
recursions

const printNo = function print(){
    console.log('no!');
}
randomQuiz('wrong', printYes, printNo);
randomQuiz('love you', printYes, printNo);

3. Arrow function

always anonymous
functionキーワード、block、セミコロンが消えます.
Arrow functionにはブロックがなく、できれば戻ってこない.
blockを書くときはreturnを書きます

const simplePrint = function(){
    console.log('simplePrint');
};
const simplePrint = () => console.log('simplePrint');
const add = (a, b) => a + b; 
const add = function (a, b) {
    return a + b;
}
const simplePrint = (a, b) => {
    //do something more
    return a*b;
}

4.IIFE: Immediately Invoked Function Expression

宣言と同時に呼び出す

(function hello(){
    console.log('IIFE');
})();