🍊 感傷的

📙 ホット品脱コード時間9時間
👍🏼 -
👎🏼 -

🚀 n/a.ターゲット

UdemyでJavascriptレッスン(332/682)

に参加

提出30日連続達成(9/30、4.15完了)

ドリームエンコーディングJavaScript基礎科目のアウトライン(完了)

📣 JavaScript基礎レッスン:14-23

注：DREAMコードElly

注意:Udemy

async & await

Homework

//그럼 이 부분 어떻게 await 활용해서 쓸 수 있을까?
const userStorage = new UserStorage();
const id = prompt('enter your id');
const password = prompt('enter your passrod');
userStorage
  .loginUser(id,password)
  .then(userStorage.getRoles)
  .then(user => alert(`Hello ${user.name}, you have a ${user.role} role`);
  .catch(console.log);

javascript function

関数の宣言と呼び出し

値を渡すパラメータ定義部+関数で実行するコード記述部

function doSomething() {
  console.log('hello');; //선언만 한 것
}
doSomething(); //호출

関数の2種類

戻り値の関数
計算後に特定の値を渡し、

//함수 선언
function add(a,b) {
  const sum = a+ b;
  return sum;
}
//a와 b라는 특정한 인자값을 받아와서 const sum이라는 변수에 a,b 저장
//a,b 값 더한뒤 sum이라는 변수에 할당 
//a,b에 값 전달해서 a,b라는 이름으로 각각의 값에 접근할 수 있다
//코드블록 수행 뒤 return이라는 키워드 이용해서 계산한 값 전달

//함수 호출
const result = add(1,2); //정의함과 동시에 값 할당, 함수를 호출한 것
console.log(result);

パラメータとして関数を渡す

function doSomething(add) {
  console.log(add);; //선언만 한 것
}

doSomething(add); //함수 호출하면서 인자로 함수 자체를 전달 //f add(a,b) {...}
doSomething(add()); //이렇게 하면 함수가 바로 실행돼버린다 //sum
//add 호출된 뒤에 나온 마지막으로 전달된 값이 전달됨, 따라서 함수를 전달하는 것이 아님

//함수 선언
function add(a,b) {
  const sum = a+ b;
  return sum;
}
function doSomething(add) {
  console.log(add);; 
  const result = add(2,3);
  console.log(result);
}
//함수 호출
doSomething(add);

変数への関数の割当て

const addFun = add;
console.log(add);
addFun(1,2);

JavaScript変数

元のタイプとオブジェクト
へんすう
処理するデータを読み込むのに役立ちます.データを含める
変数によるデータへのアクセスと更新が可能
収容可能な最小単位データを元のデータ型と呼ぶ
変数を論理に関連付けられた有意義な名前に名前を付ける
number, string, boolean, null, undefined, symbol

let number = 2; //숫자가 변수에 할당 
let number2 = number;
//number라는 데이터에 들어있는 2를 그대로 복사해서 할당한다 

number2 = 3; //3을 업데이트, number에는 영향을 주지 않는다

メモリ領域のnumber変数に2の値、デジタルデータをロード
変数を宣言すると、メモリには変数のためのスペースがあります->メモリにはバイトサイズのスペースがあります
object
元のタイプを除いて、すべてのオブジェクトはobjectです.
≪オブジェクト｜Objects｜oem_src≫:1つ以上のデータを1つの場所に集約
(e.g.配列、関数など)

let obj = {
  name: 'eillie',
  age: 5
};

let obj2 = obj 
console.log(obj2.name);

obj.name = 'james';
//obj2의 값도 바뀐다

オブジェクトのキーもメモリに割り当てられます
変数を割り当てると、中の値がコピーされます.
元のタイプは、データ自体が変数に含まれているため、データ自体がコピーされます.
オブジェクトはアドレス入力のみをコピー
元のタイプはメモリに直接割り当てることができます

letは値を変更でき、constは値を変更できません
しかし、なぜオブジェクトがconstなのか、なぜ変更されたのか.
割り当てられたオブジェクトの参照値はロックされており、変更できません.
ただしobjが指す名前は変更できます.
referenceが指す内容を変更できます

JavaScript関数

繰り返し実行するロジックを書き込む場合
コードブロックに関数のadd名が指定されています.kewordでJavaScriptエンジンに通知します.これは関数です.
関数名を簡潔明瞭に書き込む
JavaScriptにはタイプがありません

function add(a,b) {
  return a+b;
}

function surprise(operator) {
  const result = operator(2,3); //add(2,3)
  console.log(result);
}

surprise(add);

受信したパラメータの名前により,ブロック内から近づくことができる.
どのようなデータがあるかはわかりませんが、データ名でアクセスできます.
関数の作成時にデータは含まれません
呼び出し関数実際にデータを渡す
関数には、オブジェクト内の関数の参照データも含まれます.
関数を変数に割り当てると、変数に関数の参照が割り当てられます.
関数の名前が関数定義の場所を指し、関数の名前を他の変数に割り当てると、関数が指すアドレスが変数に割り当てられ、最終的に同じ関数を指し、同じ関数を実行します.
パラメータを受け入れない関数は入力を受け入れません
パラメータも意味のある名前で、私たちが定義した子供です.
パラメータを関数に渡すと、関数が指すパラメータに等しい

演算子

trueの場合は実行し、falseの場合は実行しません.
false:0、-0、「」、null、undefined(空)
true: -1, 'false', []
配列はオブジェクトなのでtrue

let num;
num && console.log(num); //false이므로 실행되지 않음 
let num2 =9;
num2 && console.log(num2); //실행
let obj;
console.log(obj.name); //에러, 없는 것에 접근하면 프로그램 자체가 죽어버린다
obj && console.log(obj.name); //obj가 있다면 접근하라는 말, 따라서 실행 안 됨 

カテゴリ

class Counter {
  constructor() {
    this.counter = 0;
  }
  
  increase() {
    this.counter++;
}

counterというクラスにはcounterという変数があります.この変数は、クラスを使用してオブジェクトを作成した瞬間に0に初期化されます.
クラスで関数を宣言する場合functionは含まれません
クラスは、さまざまなオブジェクトを作成するための青写真です.
再利用性を向上させ、レゴのように使用させる

JavaScriptコアの最新構文

(ES 6、ES 11)バーベルはインターネットExplorerでは実行できないため
JavaScriptライブラリ:返信、アンカー、ビュー

ES6

shorthand property names
鍵とValueの名前が同じ場合は、略語で記述できます.

  const ellie1 = {
    name: 'Ellie',
    age: '18',
  };
  const name = 'Ellie';
  const age = '18';

  // 💩
  const ellie2 = {
    name: name,
    age: age,
  };
   // ✨
  const ellie3 = {
    name,
    age,
  };

Destruncturing assignment
オブジェクトキーとValueにアクセスするときは、カッコでキーの名前を定義し、キーとValueをそれぞれ名前とレベルに割り当てます.

  const student = {
    name: 'Anna',
    level: 1,
  };

  // 💩
    const name = student.name;
    const level = student.level;
    console.log(name, level);
  // ✨
    const { name, level } = student;
    console.log(name, level);

    const { name: studentName, level: studentLevel } = student;
    console.log(studentName, studentLevel);
    
    
  // array
  const animals = ['🐶', '😽'];
  // 💩
    const first = animals[0];
    const second = animals[1];
    console.log(first, second);
  // ✨
    const [first, second] = animals;
    console.log(first, second);

Spread syntax
これはレプリケーション・アドレスの参照値です.値を変更すると元のアドレスに適用されます.

  const obj1 = { key: 'key1' };
  const obj2 = { key: 'key2' };
  const array = [obj1, obj2];

  // array copy
  const arrayCopy = [...array];
  console.log(array, arrayCopy);

  const arrayCopy2 = [...array, { key: 'key3' }];
  obj1.key = 'newKey';
  console.log(array, arrayCopy, arrayCopy2);

  // object copy
  const obj3 = { ...obj1 };
  console.log(obj3);

  // array concatenation
  const fruits1 = ['🍑', '🍓'];
  const fruits2 = ['🍌', '🥝'];
  const fruits = [...fruits1, ...fruits2];
  console.log(fruits);

  // object merge //동일한 key 면 값 덮어씌우므로 주의
  const dog1 = { dog: '🐕' };
  const dog2 = { dog: '🐶' };
  const dog = { ...dog1, ...dog2 };
  console.log(dog);
  console.clear();

default parameters

  // 💩
    function printMessage(message) {
      if (message == null) {
        message = 'default message';
      }
      console.log(message);
    }
    printMessage('hello');
    printMessage();
  // ✨
    function printMessage(message = 'default message') {
      console.log(message);
    }
    printMessage('hello');
    printMessage();

ternary operator

  // 💩
    let component;
    if (isCat) {
      component = '😸';
    } else {
      component = '🐶';
    }
    console.log(component);
  // ✨
    const component = isCat ? '😸' : '🐶';
    console.log(component);
    console.log(isCat ? '😸' : '🐶');

template literals

  const weather = '🌤';
  const temparature = '16°C';

  // 💩
  console.log(
    'Today weather is ' + weather + ' and temparature is ' + temparature + '.'
  );
  // ✨
  console.log(`Today weather is ${weather} and temparature is ${temparature}.`);

ES11

optional chaining

  const person1 = {
    name: 'Ellie',
    job: {
      title: 'S/W Engineer',
      manager: {
        name: 'Bob',
      },
    },
  };
  const person2 = {
    name: 'Bob',
  };

  // 💩💩💩💩💩💩
    function printManager(person) {
      console.log(person.job.manager.name);
    }
    printManager(person1);
    // printManager(person2);

  // 💩💩💩
    function printManager(person) {
      console.log(
        person.job
          ? person.job.manager
            ? person.job.manager.name
            : undefined
          : undefined
      );
    }
    printManager(person1);
    printManager(person2);

  // 💩
    function printManager(person) {
      console.log(person.job && person.job.manager && person.job.manager.name);
    }
    printManager(person1);
    printManager(person2);

  // ✨
    function printManager(person) {
      console.log(person.job?.manager?.name);
    }
    printManager(person1);
    printManager(person2);

nullish coalescing operator

    const name = 'Ellie';
    const userName = name || 'Guest';
    console.log(userName);

    const name = null;
    const userName = name || 'Guest';
    console.log(userName);

  // 💩
    const name = '';
    const userName = name || 'Guest';
    console.log(userName);

    const num = 0;
    const message = num || 'undefined';
    console.log(message);

  // ✨
    const name = '';
    const userName = name ?? 'Guest';
    console.log(userName);

    const num = 0;
    const message = num ?? 'undefined';
    console.log(message);

💡 チップ

T字学習法

注記リンク:DREAMエンコーディング

開発者の学習方法と経歴管理法
学習が広く、専門知識管理+土壌上
フロントエンド
--奥行き
1.デフォルト:html、css、javascript
2.フレーム:タイプスクリプト、ビュー、リアクション
3.ユーザーの平滑寸法を減らすことを考える
4.レイヤーのロード、平坦化と転送、パフォーマンス分析、アニメーションの低減、光の移行
5.設計技能、バックエンド通信方法、バックエンドデータ受信と最適化サービス層
--幅

バックエンド言語、ノード.js,反応本機跨プラットフォーム

--土壌
コンピュータ工学の基本知識(オペレーティングシステム、ネットワーク、コンポーネント、組み込み、数学(マトリクス、統計)
データ構造(配列、リスト、マッピングがデータを効率的に管理するためにいつ使用されるかの違い)
アルゴリズム(状況と与えられたデータ構造に基づいてどのアルゴリズムを使用すれば時間と空間を効果的に使用できるか)
クリーンコード、テストドライバコード、再構築、コードレビュー
学習方法

土壌(基本)とできるだけ広範に

を学ぶ

今から始めると、深く勉強(コミュニティ協力)->専門スキルの育成

学習範囲を再拡大

技術者VS管理

非専門人員は1つの言語を掌握して、資料の構造とアルゴリズムを勉強します
->まずはJavaScriptをマスター

📣 The Web Developer Bootcamp 2021: 27.0-

27. Async

27.1 Call stack

call stack = mechanism the JS interpreter uses to keep track of its place in a script that calls multiple functions
how js knows what function is currently being run and what function are called from within that function, etc like finger in a book
stack: basic data structure in computer science

LIFO : last in first out ◀︎

FIFO : first in first out

how it works
When a script calls a function, the interpreter adds it to the call stack and then starts carrying out the function.
Any functions that are called by that function are added to the call stack further up, and run where their calls are reached.
When the current function is finished, the interpreter takes it off the stack and resumes execution where it left off in the last code listing.






コールスタックのサイトを表示
あるいはクロム開発ツールの出所を見てみればわかります.

🕹 Project

音楽DBサイトプロジェクトの起動

計画書の作成、実施する機能と画面計画.