[TIL] 2021.02.25

この専攻科目は4日目に行われています.今日は、昨日から学んだ最新javascriptの文法をさらに理解し、koans問題を解くことで学びました.今日学んだことをもとにブログを書くと振り返ってみましょう!

🔥Today Lesson🔥

Spread/Rest構文と構造分解割当て

オブジェクトレビュー

クラスおよびインスタンス

this

Spread/Rest構文と構造分解の指定

まずSpread/Restの文法を理解してみましょう.
Spread演算子は配列を展開する役割を果たします.

let arr = ["a", "b", "c"];
console.log(...arr) // -> "a", "b", "c"
// 두 배열을 하나로 합칠때도 사용한다.
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
console.log([...arr1, ...arr2]) // -> [1, 2, 3, 4, 5, 6]
// 배열을 복사할 수 도 있다.
let arr = ["a", "b", "c"];
let copyArr = [...arr];
console.log(copyArr) // -> ["a", "b", "c"]

// Spread연산자는 객체에서도 사용 할 수 있다.
let obj1 = {a: 1, b: 2};
let obj2 = {a: 3, c: 4};
let copyObj = {...obj1};
console.log(copyObj) // -> {a: 1, b: 2} 
console.log({...obj1, ...obj2}) // -> {a: 3, b: 2, c: 4} 동일한 키 가 있다면 뒤에있는 값 이 된다.

restパラメータは、配列の形でパラメータを受信および使用することができる.

function foo(...rest) {
  console.log(Array.isArray(rest)) // -> true
  console.log(rest) // -> [1, 2, 3]
}
foo(1, 2, 3);

// 함수에서 나머지 파라미터 받아오기
function foo(a, b, ...rest) {
  console.log(a) // -> 1
  console.log(b) // -> 2 
  console.log(rest) // -> [3, 4, 5]
}
foo(1, 2, 3, 4, 5);

構造分解割り当て構文はJavaScript式で、配列またはオブジェクトの属性を分解し、その値を各変数に含めることができます.
アレイ内の構造分解の割り当て

let [a, b, ...rest] = [1, 2, 3, 4, 5];
console.log(a) // 1
console.log(b) // 2
console.log(rest) // [3, 4, 5]
// 배열은 무조건 순서대로 할당됩니다.

オブジェクトに構造分解を割り当てる

let [a, b, ...rest] = {a: 1, b: 2, c: 3, d: 4, e: 5}
console.log(a) // 1
console.log(b) // 2
console.log(rest) // {c: 3, d: 4, e: 5}

有用な関数のオブジェクト構造の分解

let user = {
  name: "홍길동",
  identity: {
    job: "student",
    age: 26,
    gender: "male" 
  },
  id: 10  
}

let changeUser = {
  ...user,
  name: "짱구",
  id: 20
}
console.log(changeUser)
// -> {
//   name: "짱구",
//   identity: {
//     job: "student",
//     age: 26,
//     gender: "male" 
//   },
//   id: 20
//  } 
// 만약 ...user가 맨 뒤에 나왔다면 값 이 바뀌지 않는다.

let changeAge = {
  ...user,
  identity: {
    ...user.age,
    age: 27
  } 
}
console.log(changeAge)
// -> {
//   name: "홍길동",
//   identity: {
//     job: "student",
//     age: 25,
//     gender: "male" 
//   },
//   id: 10  
//  } 
// identity안에 age값만 바꿔주었다.

オブジェクトレビュー

オブジェクトメソッドを呼び出す方法は、객체.메소드()を使用します.
同じ機能を持つ複数の関数を作成する方法の1つは、モジュール化モードを使用することです.次の例を見てみましょう.

function makeCounter() {
  return {
    value: 0,
    increase: function() {
      this.value++ 
    },
    decrease: function() {
      this.value--
    },
    getValue: function() {
      return this.value;
    }
  }
}

let counter1 = makeCounter()
counter1.increase()
counter1.increase()
counter1.getValue() // -> 2

let counter2 = makeCounter()
counter2.decrease()
counter2.decrease()
counter2.getValue() // -> -2

クラスとインスタンス

まず簡単に言えば、クラスはオブジェクトを作成するための設計図であり、インスタンスは設計図に基づいてソフトウェア世界で実装される特定のエンティティである.
クラスは、元のes 5では関数として定義されていますが、最新のes 6のclassキーワードを使用して定義できます.
クラスのインタフェースはnewキーワードで表すことができる.
次の例を見てみましょう

class Animal {
  constructor(type, name, sound) {
    this.type = type;
    this.name = name;
    this.sound = sound;
  }  
  say() {
   console.log(this.sound);
  } 
}

let dog = new Animal("dog", "멍멍이", "멍멍");
dog.say() // -> 멍멍 
console.log(dog.type) // -> dog
console.log(dog.name) // -> 멍멍이

this✅

この値は、関数を呼び出す方法によって決まります.
3つの重要な方法のコールモードを覚えてください.
1.関数呼び出し:この値が親になります.
2.newキーを使用してジェネレータを呼び出す:この値は新しく生成されたインスタンスオブジェクトです.
3. .コールまたは.apply呼び出し:この値は、最初のパラメータとして渡されるオブジェクトです.
※矢印関数は、いずれの場合もこれを決定しません.矢印関数をどのように実行しても、この値は影響を受けません.
理解する必要がある関数の方法
1. .call & .aplly
関数を呼び出す方法は、関数の後ろに()を付けるほか、呼び出しと適用の方法もあります.以下の例で説明します.

let example = function (a, b, c) {
  return a + b + c;  
};

console.log(example.call(null, 1, 2, 3)) // -> 6
console.log(example.apply(null, [1, 2, 3])) // -> 6
// call과 apply의 공통점은 첫번째 인자에 this가 들어간다.
// apply는 배열이 들어갈때 풀어주게 된다.

.bind
bindは、関数が指すthisのみを変更し、呼び出さない.

let obj = {
  string: 'zero',
  yell: function() {
    alert(this.string);
  }
};
let obj2 = {
  string: 'what?'
};
let yell2 = obj.yell.bind(obj2);
yell2(); // 'what?'
// yell2를 console.log해보면 함수를 담고 있다.

obj.yell.bind(obj2)を試してみるとyell関数のthisがobj 2になりました.すなわち、callやapplyに似ていますが、呼び出さずに関数のみが返されます.

一日を終える👋

今日は本当にたくさん勉强しました.ちょっと头が复雑です.koans問題は公平と解決の時、両方解決していましたが、完全に理解して解決したわけではなく、大まかに答えが入っていて、気分が悪くなりました...
しかもsprint review時間の間に眠くてちょっと残念な一日でしたが….😂😂😂
でもブログでまた勉強して、整理した気がしますが、この部分はなかなか難しいので、週末を利用してまた勉強します!!