1.データ型（typeof）

typeof:データ型の演算子を確認します.

  console.log(typeof 'Hello world');  // string
  console.log(typeof 123);  // Number
  console.log(typeof true); // boolean
  console.log(typeof undefined);  // 의도하지 않은 비어있는 값, undefined
  console.log(typeof null);  // 의도해서 비워놓은 값, object
  console.log(typeof {}); // object
  console.log(typeof []); // object

2.Operator（演算子）

1.算術演算子

記号名+加算-減算*乗算/除算の残りのパーセント、残りの部分は整数**繰返し二乗を返します.

2.割付演算子

代入演算子と「=」を使用する演算子.

let a = 2;
  console.log(a);
  a += 1;
  // a -= 1;
  // a *= 1;
  // a /= 1;
  console.log(a);

3.比較演算子

比較演算子.

  //  === : 일치 연산자
  a = 3;
  let b = 4;
  console.log(a === b);

  function isEqual(x, y){
    return x === y
  }

  console.log(isEqual(1,1));
  console.log(isEqual(2, '2'));

  //  !== : 불일치 연산자
  console.log(a !== b);

  // <, >, <=, >= : 크기 비교 연산자 
  console.log(a > b);
  console.log(a < b);
  console.log(a >= b);
  console.log(a <= b);

4.論理演算子

OR(||), AND(&&), NOT(!) 3つの演算子.
OR(|):いずれかの値がtrueの場合、trueとなります.
AND(&):両方の値はtrueでなければtrueではありません.一つはfalseがfalseです
NOT(!) : 否定的な意味を持つ!trueならfalseになる!falseの場合はtrueです.

  a = 1 === 1
  b = 'AB' === 'ABC'
  let c = false
  let d = (1 + 2) === 3

  console.log(a);
  console.log(b);
  console.log(c);
  console.log(d);
  
  // ||
  console.log('|| : ', b || c);
  console.log('|| : ', a || b || c);
  
  // &&
  console.log('&& : ', a && b && c);  
  console.log('&& : ', a && d);

  // !
  console.log('! : ', !b);
  console.log('! : ', a !== b);

5.三項演算子（ternary演算子）

3つの被演算子を取ることができる唯一の演算子で、一番前は条件文です.
あとは疑問符(?)条件が本当の場合、実行される式は疑問符の後ろに入り、直後にコロン(:)になり、条件が偽falseyの場合、実行される式は最後になります.通常if文の略語として使用されます.

  a = 1 < 2

  if (a) {
    console.log('참')
  } else {
    console.log('거짓')
  }

  console.log(a ? '참' : '거짓')

3.条件文（if-else、switch、for）

条件文にはif-else、switch、for文があります.

1. if-else

if():作成方法はif()で、()に条件を記入します.
条件がturthyの場合はクエリーコードが実行され、条件がfalseの場合は実行されません.

else:ifとともに使用し、if-elseがifの条件に合致しない場合はelseのコードを実行します.
条件が複数の場合はelse if()で条件を追加できます.

/* getRandom.js */
  export default function random() {
    return Math.floor(Math.random() * 10)
  }
/* main.js */
	import random from './getRandom'
	const a = random();
  	if (a === 0 ) {
  	  console.log('a is 0')
  	} else if (a === 2) {
  	  console.log('a is 2')
 	} else if (a === 4) {
 	  console.log('a is 4')
    } else {
      console.log('rest...')
 	};

2. switch

if-else文が複数ある場合はswitch文を使用します.
上記の例をswitchの形式に変換します.

/* getRandom.js */
  export default function random() {
    return Math.floor(Math.random() * 10)
  }
/* main.js */
  const a = random();

  switch (a) {
    case 0:
      console.log('a is 0')
      break;
      case 2: 
      console.log('a is 2')
      break;
      case 4:
        console.log('a is 4')
        break;
      default:
          console.log('rest...')
    };

caseの横の数字はifまたはelse if()の条件と同じです.
条件が満たされている場合は、breakを使用して対応するswitch文を閉じることができます.
defaultは、条件に合致しない場合、対応するコードを出力することを意味します.

3. for

(開始条件;終了条件;変化条件){}に使用します.
簡単なjavascript構文の例を次に示します.
条件に基づいてliを生成し、偶数li要素をクリックするとconsoleになります.logは、対応する偶数の例を出力する.

	<ul></ul>

  const ulEl = document.querySelector('ul');

  for (let i = 0; i  <  10; i += 1) {
    const li = document.createElement('li');
    li.textContent = `list-${i + 1}`;
    if ( (i + 1) % 2 === 0 ){
      li.addEventListener('click', function () {
        console.log(li.textContent);
      })
    }
    ulEl.appendChild(li);
  }

4.変数とScope

変数はvar、let、constを使用し、現在は主にletとconstを使用しています.
letとconstの違いは、letは値を再分配することができ、constは値を再分配できない固定変数(定数)と見なすことができる.

変数有効範囲:Variable Scopeとも呼ばれ、scopeは識別子(変数名、関数名、クラス名...)の有効範囲を表します.
宣言の有効範囲は、宣言の場所によって異なり、グローバルに宣言された変数にはグローバル範囲があり、地域に宣言された変数にはゾーン範囲があります.

グローバル変数:どこでも参照できる値.

地域変数:関数体内部を指す.したがって,領域変数は自分の領域とそのサブ領域のscopeで有効である.

ブロックレベルスキャン:JavaScriptのすべてのコードブロック(if、for、while、try/catch...)これはこの地域を製造するスキャナーのこれらの特性を指す.

関数レベルスキャン:varキーワード宣言の変数は、関数のコードブロックのみを領域スキャンとして認識することを意味します.

次の例ではconsole.各変数の認知部分のみをlog()の位置に記録する.

  function scope() {
    if (true) {
      let a = 123;
      const b = 123;
      var c = 123;
      console.log('in : ', a);
      console.log('in : ', b);
      console.log('in : ', c);	
    }
    console.log('out : ', c);	
  }
  scope()

5.型変換（Type Conversion）&Trusey Falsey

1.成形遷移（タイプ変換）

等しい演算子("===")を使用すると、シェイプ変換が発生し、値が比較されます.

  const a = 1;
  const b = '1';

  console.log(a === b);	// false

2.Truthy（真値）

true, {}, [], 1, 2, 'false', -12, '3.14' ...

3.Falsy（仮）

flase, '', null, undefined, 0, -0, NaN

6.関数（Function）

1.記名関数

宣言名の関数

  function sum(x, y) {
    return x + y;
  };

2.匿名関数

名前が宣言されていない関数

  const sum = function (x,y){
    return x + y;
  }

3. return

returnを使用すると、この関数は終了し、return後のコードは実行されません.

4.関数呼び出し方法

単一使用時、直接関数を呼び出す

	console.log(sum(1,2));

関数を繰り返し使用する場合は、変数に入れて使用します.

  const a = sum(1,3);
  const b = sum(4,12);


  console.log(a);
  console.log(b);
  console.log(a+b);

5.矢印関数

これはデフォルトで使用されるメソッドfunction(){}を()=>{}として使用します.
矢印関数は、一般的な矢印、サムネイル、オブジェクトデータサムネイルの3つの方法で表すことができます.
矢印関数の3つの方式と,既存の関数(){}を用いた方式を比較した.

  const double = function (x) {
    return x * 2
  };

  console.log('double: ', double(7));

  // 1. 기본 화살표 함수 사용 방법
  // const doubleArrow = (x) => {
  //   return x * 2
  // }

  // 2. 축약형
  const doubleArrow = x => x * 2
  
  // 3. 객체데이터 축약형, ★소괄호를 사용해줘야함!
  // const doubleArrow = x => ({name:'Hun'})


  console.log('doubleArrow', doubleArrow(7));

6.即時実行関数（IIFE、Immedialy-Invoked Function Expersion）

これは匿名関数で()を作成して実行する方法です.

中に括弧を入れても使えますので、おすすめです.

  const a = 7;
  function double() {
    console.log(a * 2)
  }

  double();

  // 1. 즉시 실행 함수, 익명의 함수로 만들어 ()를 만들어 실행
  (function() {
    console.log(a * 2);
  })();

  // 2. 소괄호를 안에 넣어서도 가능, 권장 방법

  (function() {
    console.log(a * 2);
  }());

7.護衛

これは、関数宣言子が有効範囲の最上位に昇格する現象です.

  const a = 7;

  double();

  function double() {
    console.log(a * 3);
  }

上の例に示すように、関数宣言子は上部にあり、下で関数を定義する方法は、後で関数を宣言するときにハイライトすることをお勧めします.

8.タイマー関数

タイマー関数は4種類あります.

settimeout(関数、時間):関数を一定時間後に実行

setInterval(関数、時間):関数を一定時間毎に実行

clearTimeout():設定したTimeout関数を終了する

clear Interval():設定したInterval関数を終了する

次の例を実行してタイマー関数をチェックします.

<!--index.html-->
<h1>Hello World</h1>

  //setTimeout
  const timeoutTimer = setTimeout(() => {
    console.log('Hun!');
  }, 3000); // ms단위, 3초후 Hun!을 출력


  // h1 태그를 클릭 시 clearTimeout이 실행
  // 3초 전에 h1 태그를 클릭 시 'Hun!'이 출력되지 않는다.
  const h1El = document.querySelector('h1');
  h1El.addEventListener('click', () => {
    clearTimeout(timeoutTimer);
  });


  // setInterval
  const intervalTimer = setInterval(() => {
    console.log('Hun!');
  }, 3000); // ms단위, 3초마다 실행

  // h1 태그를 클릭 시 clearInterval 실행
  // 3초 전 혹은 3초 이후 h1 태그 클릭 시 'Hun!'이 더 이상 출력되지 않는다.
  const h1El2 = document.querySelector('h1');
  h1El2.addEventListener('click', () => {
    clearInterval(intervalTimer);
  });

9.コールバック（callback）

関数のファクタとして使用される関数.運転位置を保証するために使用されることが多い.

  function timeout(callback) {
    setTimeout(() => {
      console.log('Hun!');
      callback();
    }, 3000);
  };

  // callback함수, 실행을 보장해준다
  timeout(() => {
    console.log('Done!');
  });

上記のサンプルコードでは、「Done!」出力するには、矢印関数を引数として使用します.
timeout関数の内部にパラメータコールバックを作成してパラメータを受信します.
後で実行する場所にパラメータを作成し、関数を呼び出すようにカッコを書きます.
匿名関数はcallbackに入り、パラメータは呼び出されていない関数と言える.
つまり、関数を確実に実行したい場所で実行します.

7.コンストラクション関数(prototype)

メンバー:属性+メソッド

文字方式:特定記号を用いてデータを作成する方式ex)」、「、」、[]

例:newキーワードをコンストラクション関数として実行した結果を返す変数

prototype:メモリを効率的に管理するために、メモリに一度だけ作成する.

ジェネレータ関数:新たに生成した関数で、パスカルシェルで記述!

class:prototypeを使用してnewキーワードとともにコンストラクション関数を使用してインスタンスを作成する概念

this:thisが属する関数を実行する対象データを指します.

各コンセプトが何であるかを例によって理解します!

  const Hun = {
    firstName: 'SeungHun',
    lastName: 'Byeon',
    getFullName: function () {
      return `${this.firstName} ${this.lastName}`
    }
  };

  console.log(Hun.getFullName());

  // 리터럴 방식 
  // class 
  function User(first, last) {
    this.firstName = first;
    this.lastName = last;
  }

  // prototype 
  User.prototype.getFullName = function () {
    return `${this.firstName} ${this.lastName}`
  }


  // 생성자 함수 : User
  // 인스턴스 : Huun, amy, neo
  const Huun = new User('Seunghun', 'Byeon');
  const amy = new User('Amy', 'Clarke');
  const neo = new User('Neo', 'Smith');


  // 아래의 메소드들은 전부 한 번만 만들어진 함수를 참조한다
  console.log(Huun.getFullName());
  console.log(amy.getFullName());
  console.log(neo.getFullName());

  console.log(Huun);
  console.log(amy);
  console.log(neo);

8. this

this:thisが属する関数で実行されるオブジェクトデータを指します.

通常関数は呼び出し位置に基づいてこれを定義します!

矢印関数は、宣言された関数の範囲内で定義されます.

  const hun = {
    name: 'SeungHun',
    normal() {
    // normal: function () {
      console.log(this.name);
    },
    arrow: () => {
      console.log(this.name);
    }
  }
  hun.normal();	// SeungHun
  hun.arrow();	// 


  const amy = {
    name: 'Amy',
    normal: hun.normal,
    arrow: hun.arrow
  }
  amy.normal();	// 	Amy
  amy.arrow();	// 

  // prototype이용한 this
  function User(name) {
    this.name = name;
  }
  User.prototype.normal = function () {
    console.log(this.name);
  }
  User.prototype.arrow = () => {
    console.log(this.name);
  }

  const Huun = new User('SeungHun');
  Huun.normal();	// SeungHun
  Huun.arrow();		// 


  const timer = {
    name:'Hun!!',
    timeout: function () {  // 함수 범위
      setTimeout(() => {
        console.log(this.name);
      }, 2000)
    }
  }
  timer.timeout();	// 	2초 후 Hun!! 출력

9. ES6 Classes

原型を類文法に変換しましょう.

  // prototype
  
  // function User(first, last) {
  //   this.firstName = first;
  //   this.lastName = last;
  // }

  // User.prototype.getFullName = function () {
  //   return `${this.firstName} ${this.lastName}`
  // }
  
  // class
  class User {
  // constructor: function(first, last) {
  constructor(first, last) {
    this.firstName = first;
    this.lastName = last;
  }
  getFullName() { // prototype을 사용하지 않아도 만들 수 있는 장점이 있다.
    return `${this.firstName} ${this.lastName}`
  }
}


  const Huun = new User('Seunghun', 'Byeon');
  const amy = new User('Amy', 'Clarke');
  const neo = new User('Neo', 'Smith');


  console.log(Huun);
  console.log(amy.getFullName());
  console.log(neo.getFullName());

10 . 継承(拡張)

新しいクラスに拡張(継承)し、superを使用して実行セクションに新しいクラスを拡張するために必要なパラメータを含めることができます.
パラメータを追加して使用できます.

  class Vehicle {
    constructor(name, wheel){
      this.name = name;
      this.wheel = wheel;
    }
  }

  const myVehicle = new Vehicle('운송수단', '2');
  console.log(myVehicle);

  // 새로운 클래스로 확장 or 상속
  class Bicycle extends Vehicle {
    constructor(name, wheel) {
      // super는 Vehicle을 의미
      super(name, wheel);
    }
  }

  const myBicycle = new Bicycle('삼천리', 2);
  const daughtersBicycle = new Bicycle('세발', 3);
  console.log(myBicycle);
  console.log(daughtersBicycle);


  // 진정한 의미의 확장의 예
  // 정의되어져 있는 기능을 따로 작성하지 않고 Car에서 사용
  // super라는 함수를 실행하여 super가 Vehicle클래스로 실행될 수 있게
  // Vehicle클래스가 요구하는 인수들을 Car 클래스가 실행되는 부분에서 name, wheel을 담아 Vehicle을 실행
  // 추가적으로 license를 매개변수로 받아 사용
  class Car extends Vehicle{
    constructor(name, wheel, license){
    super(name, wheel);
    this.license = license;
    }
  }
  const myCar = new Car('벤츠', 4, true);
  const daughtersCar = new Car('포르쉐', 4, false);
  console.log(myCar);
  console.log(daughtersCar);